Menus_UXPA2024_Battle-Sengers_20240625.pdf
DesignforContext
278 views
67 slides
Jun 25, 2024
Slide 1 of 67
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
About This Presentation
Menus are ubiquitous in websites and applications of all types. They are critical to accessing the information and actions that users need, yet they can be very frustrating to use. In our UX consulting practice, many clients have come to us for help solving problems with menus, such as scaling to ha...
Slide Content
@design4context Menu Mania UXPA20241
© Design for Context
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
[email protected]
Rachel Sengers
Senior UX Designer
[email protected]
© Design for Context
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
[email protected]
Rachel Sengers
Senior UX Designer
[email protected]
@design4context Menu Mania UXPA20242
© Design for Context
Website menuApplication menuMobile app menu
© Design for Context
Website menuApplication menuMobile app menu
@design4context Menu Mania UXPA20243
© Design for Context
Website menus
See the types of content on
the site
Navigate to pages of interest
© Design for Context
Website menus
See the types of content on
the site
Navigate to pages of interest
@design4context Menu Mania UXPA20244
© Design for Context
Application menus
See what actions are
available
Take action to complete a
task
© Design for Context
Application menus
See what actions are
available
Take action to complete a
task
@design4context Menu Mania UXPA20245
© Design for Context
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
© Design for Context
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
@design4context Menu Mania UXPA20246
© Design for Context
What’s wrong with menus?
ContentInteractionLayout
© Design for Context
What’s wrong with menus?
ContentInteractionLayout
@design4context Menu Mania UXPA20247
© Design for Context
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
© Design for Context
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
@design4context Menu Mania UXPA20248
© Design for Context
Case Studies
CASE STUDY 1
CASE STUDY 2
CASE STUDY 3
CASE STUDY 4
© Design for Context
Case Studies
CASE STUDY 1
CASE STUDY 2
CASE STUDY 3
CASE STUDY 4
@design4context Menu Mania UXPA20249
© Design for Context
Medical ReferenceCASE
STUDY
CASE STUDY 2
CASE STUDY 3
CASE STUDY 4
© Design for Context
Medical ReferenceCASE
STUDY
CASE STUDY 2
CASE STUDY 3
CASE STUDY 4
@design4context Menu Mania UXPA2024
© Design for Context
10
CASE STUDY 1: BEFORE
© Design for Context
10
CASE STUDY 1: BEFORE
@design4context Menu Mania UXPA2024
© Design for Context
11
CASE STUDY 1: BEFORE
© Design for Context
11
CASE STUDY 1: BEFORE
@design4context Menu Mania UXPA2024
© Design for Context
12
CASE STUDY 1: BEFORE
© Design for Context
12
CASE STUDY 1: BEFORE
@design4context Menu Mania UXPA202413
© Design for Context
●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:
© Design for Context
●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:
@design4context Menu Mania UXPA2024
© Design for Context
14
CASE STUDY 1: IDEAS
“Limit the number of
items to 7.”
www.webstacks.com/blog/design-menu-
navigation-ux-strategy
© Design for Context
14
CASE STUDY 1: IDEAS
“Limit the number of
items to 7.”
www.webstacks.com/blog/design-menu-
navigation-ux-strategy
@design4context Menu Mania UXPA2024
© Design for Context
15
CASE STUDY 1: IDEAS
“Use no more than two
levels of submenus.”
www.toptal.com/designers/ux/
multilevel-menu-design
© Design for Context
15
CASE STUDY 1: IDEAS
“Use no more than two
levels of submenus.”
www.toptal.com/designers/ux/
multilevel-menu-design
@design4context Menu Mania UXPA2024
© Design for Context
16
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
© Design for Context
16
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
@design4context Menu Mania UXPA2024
© Design for Context
17
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
© Design for Context
17
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
@design4context Menu Mania UXPA2024
© Design for Context
18
CASE STUDY 1: IDEAS
© Design for Context
18
CASE STUDY 1: IDEAS
@design4context Menu Mania UXPA2024
© Design for Context
19
CASE STUDY 1: AFTER
© Design for Context
19
CASE STUDY 1: AFTER
@design4context Menu Mania UXPA2024
© Design for Context
20
CASE STUDY 1: IDEASCASE STUDY 1: AFTER
© Design for Context
20
CASE STUDY 1: IDEASCASE STUDY 1: AFTER
@design4context Menu Mania UXPA2024
© Design for Context
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
© Design for Context
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
@design4context Menu Mania UXPA202422
© Design for Context
Shipping logisticsCASE
STUDY
CASE STUDY 1
CASE STUDY 3
CASE STUDY 4
© Design for Context
Shipping logisticsCASE
STUDY
CASE STUDY 1
CASE STUDY 3
CASE STUDY 4
@design4context Menu Mania UXPA2024
© Design for Context
23
CASE STUDY 2: BEFORE
ACTIONS
FOR EACH ORDERLIST OF ORDERS
© Design for Context
23
CASE STUDY 2: BEFORE
ACTIONS
FOR EACH ORDERLIST OF ORDERS
@design4context Menu Mania UXPA2024
© Design for Context
24
CASE STUDY 2: BEFORE
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.
© Design for Context
24
CASE STUDY 2: BEFORE
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.
@design4context Menu Mania UXPA202425
© Design for Context
●Not scalable to add many more actions
●Icons not intuitive to new users
●Unconventional visual design cues: brown link color & capital letters
What’s wrong with the menu?
25
How to provide better support
to users with large monitors? Q:
© Design for Context
●Not scalable to add many more actions
●Icons not intuitive to new users
●Unconventional visual design cues: brown link color & capital letters
What’s wrong with the menu?
25
How to provide better support
to users with large monitors? Q:
@design4context Menu Mania UXPA2024
© Design for Context
26
CASE STUDY 2: IDEAS
“Use the 80/20 rule”
Billboard pattern gives
more prominence to the
most frequently used
actions, allowing quicker
access
smashingmagazine.com/2022/11/
navigation-design-mobile-ux
© Design for Context
26
CASE STUDY 2: IDEAS
“Use the 80/20 rule”
Billboard pattern gives
more prominence to the
most frequently used
actions, allowing quicker
access
smashingmagazine.com/2022/11/
navigation-design-mobile-ux
@design4context Menu Mania UXPA2024
© Design for Context
27
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
© Design for Context
27
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
@design4context Menu Mania UXPA2024
© Design for Context
28
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
© Design for Context
28
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
@design4context Menu Mania UXPA2024
© Design for Context
29
CASE STUDY 2: AFTER
ACTIONS
FOR EACH ORDER
© Design for Context
29
CASE STUDY 2: AFTER
ACTIONS
FOR EACH ORDER
@design4context Menu Mania UXPA2024
© Design for Context
30
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.
© Design for Context
30
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.
@design4context Menu Mania UXPA2024
© Design for Context
CASE STUDY 2: AFTER
31
CONTEXT MENU
FOR EACH ORDER
© Design for Context
CASE STUDY 2: AFTER
31
CONTEXT MENU
FOR EACH ORDER
@design4context Menu Mania UXPA2024
© Design for Context
32
CASE STUDY 2: AFTER
CONTEXT MENU
ADDITIONAL ACCESS METHOD
© Design for Context
32
CASE STUDY 2: AFTER
CONTEXT MENU
ADDITIONAL ACCESS METHOD
@design4context Menu Mania UXPA2024
© Design for Context
33
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
© Design for Context
33
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
@design4context Menu Mania UXPA2024
© Design for Context
34
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
© Design for Context
34
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
@design4context Menu Mania UXPA2024
© Design for Context
35
CASE STUDY 2: AFTER
CONTEXT MENU EXAMPLE ON MOBILE
© Design for Context
35
CASE STUDY 2: AFTER
CONTEXT MENU EXAMPLE ON MOBILE
@design4context Menu Mania UXPA2024
© Design for Context
UX DESIGN CONSIDERATIONS
●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
© Design for Context
UX DESIGN CONSIDERATIONS
●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
@design4context Menu Mania UXPA202437
© Design for Context
Banking ApplicationCase
study
CASE STUDY 1
CASE STUDY 4
CASE STUDY 2
© Design for Context
Banking ApplicationCase
study
CASE STUDY 1
CASE STUDY 4
CASE STUDY 2
@design4context Menu Mania UXPA2024
© Design for Context
38
CASE STUDY 3: BEFORE
© Design for Context
38
CASE STUDY 3: BEFORE
@design4context Menu Mania UXPA2024
© Design for Context
39
CASE STUDY 3: BEFORE
© Design for Context
39
CASE STUDY 3: BEFORE
@design4context Menu Mania UXPA202440
© Design for Context
●Multi-level flyout menus are very hard to manipulate
●Menu disappears if user strays just 1 pixel away
●Menu placement feels unpredictable
What’s wrong with the menu?
40
How to position the menus in a
predictable and efficient location?Q:
© Design for Context
●Multi-level flyout menus are very hard to manipulate
●Menu disappears if user strays just 1 pixel away
●Menu placement feels unpredictable
What’s wrong with the menu?
40
How to position the menus in a
predictable and efficient location?Q:
@design4context Menu Mania UXPA2024
© Design for Context
41
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
smashingmagazine.com/2021/05/
frustrating-design-patterns-mega-
dropdown-hover-menus/
41
© Design for Context
41
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
smashingmagazine.com/2021/05/
frustrating-design-patterns-mega-
dropdown-hover-menus/
41
@design4context Menu Mania UXPA2024
© Design for Context
42
CASE STUDY 2: IDEAS
IF YOU MUST USE HOVER:
Delay the deactivation of a
hover
smashingmagazine.com/2009/03/
designing-drop-down-menus-examples-
and-best-practices/#delay-the-deactivation-
of-a-hover
42
Safe zone around the
menus
© Design for Context
42
CASE STUDY 2: IDEAS
IF YOU MUST USE HOVER:
Delay the deactivation of a
hover
smashingmagazine.com/2009/03/
designing-drop-down-menus-examples-
and-best-practices/#delay-the-deactivation-
of-a-hover
42
Safe zone around the
menus
@design4context Menu Mania UXPA2024
© Design for Context
43
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/
© Design for Context
43
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/
@design4context Menu Mania UXPA2024
© Design for Context
44
CASE STUDY 2: IDEAS
POSITION OF THE MENU
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
© Design for Context
44
CASE STUDY 2: IDEAS
POSITION OF THE MENU
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
@design4context Menu Mania UXPA2024
© Design for Context
45
CASE STUDY 2: IDEAS
POSITION OF THE MENU
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
© Design for Context
45
CASE STUDY 2: IDEAS
POSITION OF THE MENU
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
@design4context Menu Mania UXPA2024
© Design for Context
46
CASE STUDY 2: IDEAS
POSITION OF THE MENU
46
Or: just let it scroll
© Design for Context
46
CASE STUDY 2: IDEAS
POSITION OF THE MENU
46
Or: just let it scroll
@design4context Menu Mania UXPA2024
© Design for Context
47
CASE STUDY 3: AFTER
© Design for Context
47
CASE STUDY 3: AFTER
@design4context Menu Mania UXPA2024
© Design for Context
48
CASE STUDY 3: AFTER
© Design for Context
48
CASE STUDY 3: AFTER
@design4context Menu Mania UXPA2024
© Design for Context
49
CASE STUDY 3: AFTER
MORE LINK - EXPANDEDDEFAULT MENU
© Design for Context
49
CASE STUDY 3: AFTER
MORE LINK - EXPANDEDDEFAULT MENU
@design4context Menu Mania UXPA2024
© Design for Context
50
CASE STUDY 3: AFTER
ADDITIONAL CATEGORIESRECENTLY 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.
© Design for Context
50
CASE STUDY 3: AFTER
ADDITIONAL CATEGORIESRECENTLY 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.
@design4context Menu Mania UXPA2024
© Design for Context
UX DESIGN CONSIDERATIONS
●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
© Design for Context
UX DESIGN CONSIDERATIONS
●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
@design4context Menu Mania UXPA202452
© Design for Context
Test selectionCase
study
CASE STUDY 1
CASE STUDY 2
CASE STUDY 3
© Design for Context
Test selectionCase
study
CASE STUDY 1
CASE STUDY 2
CASE STUDY 3
@design4context Menu Mania UXPA2024
© Design for Context
53
CASE STUDY 1: BEFORE
© Design for Context
53
CASE STUDY 1: BEFORE
@design4context Menu Mania UXPA202454
© Design for Context
●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
What’s wrong with the menu?
54
How does the user’s level of knowledge
(expert vs novice) impact menu design?Q:
© Design for Context
●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
What’s wrong with the menu?
54
How does the user’s level of knowledge
(expert vs novice) impact menu design?Q:
@design4context Menu Mania UXPA2024
© Design for Context
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
© Design for Context
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
@design4context Menu Mania UXPA2024
© Design for Context
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
© Design for Context
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
@design4context Menu Mania UXPA2024
© Design for Context
57
CASE STUDY 1: IDEAS
© Design for Context
57
CASE STUDY 1: IDEAS
@design4context Menu Mania UXPA2024
© Design for Context
CASE STUDY 1: IDEAS
© Design for Context
CASE STUDY 1: IDEAS
@design4context Menu Mania UXPA2024
© Design for Context
CASE STUDY 1: AFTER
Tabs:
universally
understood
pattern
Strong visual
feedback on
tap
© Design for Context
CASE STUDY 1: AFTER
Tabs:
universally
understood
pattern
Strong visual
feedback on
tap
@design4context Menu Mania UXPA2024
© Design for Context
CASE STUDY 1: AFTER
Visual
dividers /
groupings
categorize
items
Ability to
see and
return to
previous
selections
© Design for Context
CASE STUDY 1: AFTER
Visual
dividers /
groupings
categorize
items
Ability to
see and
return to
previous
selections
@design4context Menu Mania UXPA2024
© Design for Context
CASE STUDY 1: AFTER
Navigation
queries
© Design for Context
CASE STUDY 1: AFTER
Navigation
queries
@design4context Menu Mania UXPA2024
© Design for Context
UX DESIGN CONSIDERATIONS
●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
© Design for Context
UX DESIGN CONSIDERATIONS
●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
@design4context Menu Mania UXPA202463
© Design for Context
Summary
© Design for Context
Summary
@design4context Menu Mania UXPA2024
© Design for Context
64
Not obvious that a menu is availableVisual cues (icons, kebab menus, arrows,
underlines, text color)
What’s wrongHow 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
© Design for Context
64
Not obvious that a menu is availableVisual cues (icons, kebab menus, arrows,
underlines, text color)
What’s wrongHow 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
@design4context Menu Mania UXPA2024
© Design for Context
65
Menus accessed via hover are hard to
navigate, and may show and hide
unexpectedly
Activate menus on click instead of hover
What’s wrongHow to fix it
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
© Design for Context
65
Menus accessed via hover are hard to
navigate, and may show and hide
unexpectedly
Activate menus on click instead of hover
What’s wrongHow to fix it
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
@design4context Menu Mania UXPA2024
© Design for Context
66
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
What’s wrongHow to fix it
Options in the menu unclear
Shorten long labels
Start with important words
Consolidate similar menu items
Use familiar vocabulary
© Design for Context
66
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
What’s wrongHow to fix it
Options in the menu unclear
Shorten long labels
Start with important words
Consolidate similar menu items
Use familiar vocabulary
@design4context Menu Mania UXPA202467
© Design for Context
Menu Mania:
What’s wrong with menus
and how to fix them
UXPA 2024 • June 25, 2024slides will be posted at: www.designforcontext.com/insights
Lisa Battle
President & Principal Consultant
[email protected]
Rachel Sengers
Senior UX Designer
[email protected]
#UXPA2024 @design4context
https://d4c.link/UXPA24-menus
© Design for Context
Menu Mania:
What’s wrong with menus
and how to fix them
UXPA 2024 • June 25, 2024slides will be posted at: www.designforcontext.com/insights
Lisa Battle
President & Principal Consultant
[email protected]
Rachel Sengers
Senior UX Designer
[email protected]
#UXPA2024 @design4context
https://d4c.link/UXPA24-menus
Download
Download Slideshow Get the original presentation fileQuick Actions
Statistics
- Views 278
- Slides 67
- Age 523 days
Related Slideshows
1
MGV Residential Design projects for different clients, including a New Mexico Adobe project-1-.pdf
mannyvesa
26 views
16
EUNITED_Advocacy and Public Engagement through Visual Media
GeorgeDiamandis11
30 views
31
DESIGN THINKINGGG PPT 2 TOPIC IDEATION.pptx
HibaZaidi2
24 views
36
DESIGN THINKING CHAPTER 1 PPTT PPT 1.pptx
HibaZaidi2
27 views
112
Hinduism and Its History - PowerPoint Slides.pptx
ConorMcCormack10
23 views
20
Service Attributes of Manufactured Parts.pptx
MustafaEnesKrmac
24 views