Menus_UXPA2024_Battle-Sengers_20240625.pdf

@design4context Menu Mania UXPA2024 1
Menu Mania:
What’s wrong with menus
and how to fix them
UXPA 2024 • June 25, 2024
 #UXPA2024 @design4context
https://d4c.link/UXPA24-menus
slides will be posted at: www.designforcontext.com/insights
Lisa Battle
President & Principal Consultant
lisa@designforcontext.com
Rachel Sengers
Senior UX Designer
rachel@designforcontext.com

Website menu Application menu Mobile app menu

Website menus
See the types of content on
the site
Navigate to pages of interest

Application menus
See what actions are
available
Take action to complete a
task

Mobile app menus
See the types of content in the
app
Navigate to pages of interest
See what actions are available
Take action to complete a task

What’s wrong with menus?
Content Interaction
Layout

Fixing content problems with menus
Shorten long labels
Important words first
(strong information scent)
Consolidate similar menu items
Use familiar vocabulary
Organize options in an intuitive order
Methods:
User research
Card sorting
First click testing

Case Studies
CASE STUDY 1
CASE STUDY 2
CASE STUDY 3
CASE STUDY 4

Medical Reference
CASE
STUDY
CASE STUDY 2
CASE STUDY 3
CASE STUDY 4

CASE STUDY 1: BEFORE

● No highlight to indicate user’s current position
● Very long lists are cut off
● Multi-level flyout menus are very hard to manipulate
What’s wrong with the menu?
13
What should you do when each
menu category is really long?
Q:

CASE STUDY 1: IDEAS
“Limit the number of
items to 7.”
www.webstacks.com/blog/design-menu-
navigation-ux-strategy

CASE STUDY 1: IDEAS
“Use no more than two
levels of submenus.”
www.toptal.com/designers/ux/
multilevel-menu-design

CASE STUDY 1: IDEAS
“Expert users typically don’t
have usability issues with
multiple nested accordions.
However, infrequent users
often struggle… because they
don’t understand how the
information is organized.”
smashingmagazine.com/2022/11/
navigation-design-mobile-ux
Tip: Differentiate each level,
using indents, typography,
background colors.
“Provide local nav menus for
closely related content”
(e.g. within a section)
www.nngroup.com/articles/menu-design

CASE STUDY 1: IDEAS
“Mega menus can
save users time by
letting them skip a
level or two.”
“Don’t cover the
entire screen with
a mega menu.”
www.nngroup.com/articles/menu-design

CASE STUDY 1: IDEAS

CASE STUDY 1: AFTER

CASE STUDY 1: IDEAS
CASE STUDY 1: AFTER

@design4context Menu Mania UXPA2024
UX DESIGN CONSIDERATIONS
● Avoid multi-level flyouts
● Activate menu items on click
● Use visual indicators when there is another level of sub menu
● Signpost where you are in the hierarchy
● Provide a way to go back up to a higher level
21

Shipping logistics
CASE
STUDY
CASE STUDY 1
CASE STUDY 3
CASE STUDY 4

ACTIONS
FOR EACH ORDER
LIST OF ORDERS

Primary action
Secondary actions
are icons.
More icons appear
when there are
more actions.
ACTIONS
FOR EACH ORDER
Includes an icon to
view/edit the order.

● Not scalable to add many more actions
● Icons not intuitive to new users
● Unconventional visual design cues: brown link color & capital letters
25
How to provide better support
to users with large monitors?
Q:

CASE STUDY 2: IDEAS
“Use the 80/20 rule”
Billboard pattern gives
more prominence to the
most frequently used
actions, allowing quicker
access
navigation-design-mobile-ux

CASE STUDY 2: IDEAS
“Contextual menus are
displayed on demand and
contain a small set of
relevant actions, related to
a control, a piece of
content, a view in an app,
or an area of the UI.”
Examples of ways to provide context menu for an object in a list
via a visible button next each object...
...or in the application’s menus – the menu operates on the selected object.
www.nngroup.com/articles/contextual-
menus
“Context menus are menus
that appear upon user
interaction, usually from a
right-click or clicking a
button.”
height.app/blog/guide-to-build-context-
menus

CASE STUDY 2: IDEAS
“Like keyboard shortcuts,
contextual menus give
users another way to
execute actions and select
options. Users may not
know it is available, or how
to access it. There should
always be an additional
way to find and use the
actions found in contextual
menus in main navigation
menus.”
Examples of ways to provide context menu for an object in a list
A right-click context menu can be triggered wherever the user’s pointer is.
nngroup.com/articles/contextual-menus

CASE STUDY 2: AFTER
ACTIONS
FOR EACH ORDER

CASE STUDY 2: AFTER
1. Primary action
2. Frequent secondary
actions are icons.
3. More actions
are available from a
dropdown context
menu.
ACTIONS
FOR EACH ORDER
Includes an icon to
view/edit the order.
Icons have tooltips.

CASE STUDY 2: AFTER
31
CONTEXT MENU
FOR EACH ORDER

CASE STUDY 2: AFTER
CONTEXT MENU
ADDITIONAL ACCESS METHOD

CASE STUDY 2: IDEAS
KEYBOARD OPERABILITY
This also supports users
with large monitors —
less need for mouse
movements across the
screen
Accessing the actions via keyboard
• Navigate from row to row via ↑ ↓ arrow keys
• Tab key to move to each action in the row
• Tab to the menu link on right side, Enter key to open
• Navigate menu items via ↑ ↓ and/or Tab key
• Enter key to select a menu item
• Esc key to close the menu
• Or use Shift+F10 (Windows) to open
the context menu when your focus is on a row
Best practices:
• Provide visible focus state
• Let users know how to navigate via keyboard
www.w3.org/WAI/tutorials/menus
www.w3.org/WAI/ARIA/apg/patterns/
menubar
www.w3.org/WAI/ARIA/apg/patterns/
menu-button
www.levelaccess.com/blog/
challenges-mega-menus-standard-menus-
make-accessible
Look up any key combo, to check for
potential conflicts with browser/OS:
defkey.com

ORDER 294643
ORDER 294644
ORDER 294645
SCALABILITY
What happens if the
menu has long lists?
If the SAAS’ customers
can customize the
menu contents, the
length is unknown &
out of our control
CASE STUDY 2: IDEAS

CASE STUDY 2: AFTER
CONTEXT MENU EXAMPLE ON MOBILE

● Hierarchy of actions — make the most important or frequent ones
easy to access
● Right-click access to context menus speeds things up for power users
● Keyboard operability help users be efficient; less reliant on mouse
movements
● Add type-ahead feature to the menu, if menu contains many items
36

Banking Application
Case
study
CASE STUDY 1
CASE STUDY 4
CASE STUDY 2

● Multi-level flyout menus are very hard to manipulate
● Menu disappears if user strays just 1 pixel away
● Menu placement feels unpredictable
40
How to position the menus in a
predictable and efficient location?
Q:

CASE STUDY 2: IDEAS
IF YOU MUST USE HOVER:
“Safe triangle” = an area
connecting the current
position of the mouse
pointer with the edges of
the menu area
bjk5.com/post/44698559168/
breaking-down-amazons-mega-dropdown
frustrating-design-patterns-mega-
dropdown-hover-menus/
41

CASE STUDY 2: IDEAS
IF YOU MUST USE HOVER:
Delay the deactivation of a
hover
designing-drop-down-menus-examples-
and-best-practices/#delay-the-deactivation-
of-a-hover
42
Safe zone around the
menus

CASE STUDY 2: IDEAS
POSITION OF THE MENU
43
“anchored to the location
where the user triggers the
menu. Context menus
should appear without
covering up any important
content. Make sure that
the triggered item is still
visible when the context
menu is open so that the
user remembers what
object they are acting
upon.”
blog.logrocket.com/ux-design/
creating-context-menus/

CASE STUDY 2: IDEAS
44
“anchored to the location
where the user triggers the
menu. Context menus
should appear without
covering up any important
content. Make sure that
the triggered item is still
visible when the context
menu is open so that the
user remembers what
object they are acting
upon.”
blog.logrocket.com/ux-design/
creating-context-menus

CASE STUDY 2: IDEAS
45
“monitor the window
dimensions and re-layout
the menus on the fly, so
they can work in any
situation .”
height.app/blog/
guide-to-build-context-menus

CASE STUDY 2: IDEAS
46
Or: just let it scroll

CASE STUDY 3: AFTER

CASE STUDY 3: AFTER
MORE LINK - EXPANDED
DEFAULT MENU

CASE STUDY 3: AFTER
ADDITIONAL CATEGORIES
RECENTLY USED ACTIONS
If needed, additional
expandable categories can be
added to the menu.
If user uses a link under "More",
it gets promoted above the
"More" link, to provide quick
access to repeatedly used
actions.

● Hover is a common method used by context menus to provide access
to submenus
● Best to limit it to just one level of submenus
● Use safe triangle, delays, and safe zones to increase usability
● Click-activated multi-level menus easier to operate than hover menus
● But when submenus are activated on click, they may be less
discoverable
● Reposition menus based on their relative location to the viewport, or
“just let it scroll”
51

Test selection
Case
study
CASE STUDY 1
CASE STUDY 2
CASE STUDY 3

● Target size too small for touch screen
● Too many levels to show side by side
● “Grayed out” (unavailable) options unreadable
● Bewildering for novice users
● Annoying for expert users who know which item
they are looking for
54
How does the user’s level of knowledge
(expert vs novice) impact menu design?
Q:

55
CASE STUDY 1: IDEAS
A blank canvas
Full screen
menu devotes
the page to
navigation
Going “Back”
and the
Navigation Stack
smashingmagazine.com/
2022/11/navigation-
design-mobile-ux
htmlburger.com/blog/
mobile-menu-design/
#full-screen

CASE STUDY 1: IDEAS
This selection
could be made
on the home
page of the
new device
This selection
was usually the
same for all
tests on the
same site
These were very
routine, pre-packaged
tests that were
generally done by
novice technicians
These (and the
next level down)
were more likely
used by experts

57
CASE STUDY 1: IDEAS

CASE STUDY 1: IDEAS

CASE STUDY 1: AFTER
Tabs:
universally
understood
pattern
Strong visual
feedback on
tap

CASE STUDY 1: AFTER
Visual
dividers /
groupings
categorize
items
Ability to
see and
return to
previous
selections

CASE STUDY 1: AFTER
Navigation
queries

● Quick access to frequently used options, especially for novice or
infrequent users
● Visibility of previous selections
● Ability to return to, and change, previous selections
● Disable unavailable menu items instead of removing them
● Integrated menu search for experts who know the name of the item
● Ample height for legibility and selection (touch targets at least 48x48
pixels)
62

Summary

Not obvious that a menu is available
Visual cues (icons, kebab menus, arrows,
underlines, text color)
What’s wrong How to fix it
Unclear which object the menu is
connected to
Visual cues (background color or outline
indicating the originating item and the
selected item in the menu)
Location of menu is hard to reach
Mobile: top corner hard to reach
Desktop: wide monitors increase distance
Keyboard operability
Context menus available no matter
where the mouse is located

Menus accessed via hover are hard to
navigate, and may show and hide
unexpectedly
Activate menus on click instead of hover
Too cumbersome to get to frequent
actions
Billboard pattern / hierarchy of actions
Type ahead search of menu items
Recently used
Too many items in the menu
Reorganize
Move some to a higher or lower level
Balance between breadth and depth
Multi-level and multi column layout
Accordion menus

Hard to find things within the menu
Group related items
Add icons for recognition where useful
Try logical order first; use alpha order as
a backup plan
Consider spatial memory
Type ahead search for longer menus
Options in the menu unclear
Shorten long labels
Start with important words
Consolidate similar menu items
Use familiar vocabulary

Menu Mania:
What’s wrong with menus
and how to fix them
UXPA 2024 • June 25, 2024 slides will be posted at: www.designforcontext.com/insights
Lisa Battle
President & Principal Consultant
lisa@designforcontext.com
Rachel Sengers
Senior UX Designer
rachel@designforcontext.com
 #UXPA2024 @design4context
https://d4c.link/UXPA24-menus

Menus_UXPA2024_Battle-Sengers_20240625.pdf

Recommended

Recommended

More Related Content

Similar to Menus_UXPA2024_Battle-Sengers_20240625.pdf

Similar to Menus_UXPA2024_Battle-Sengers_20240625.pdf (20)

More from Design for Context

More from Design for Context (20)

Recently uploaded

Recently uploaded (20)

Menus_UXPA2024_Battle-Sengers_20240625.pdf