How to build a menu, from choosing the correct labels to how to make the correct choices. An introduction to the mapping strategies - conceptuals, technicals and graphics - that are the foundations of a website that reach its goals.

1. LABEL YOUR CONTENTS
Dana Donato
@danuccia
#WCTRN
How to build an efficient menu[ ]

2. “Clear menus and links are the foundations
upon which all great websites are built.”
- Gerry McGovern[ ]
www.customercarewords.com
@gerrymcgovern

3. NOPE!
THIS ISN’T AN EASY TO USE MENU

4. WHY DOESN’T IT WORK?
‣ Too many items in the menu create mess and confusion
= 13 Items!
+ + + + +
+ + + + + +

5. ‣ Ambiguity in naming
WHY DOESN’T IT WORK?

6. ‣ Bilingualism
WHY DOESN’T IT WORK?

7. ‣ Unnecessary items
WHY DOESN’T IT WORK?

8. CAN WE IMPROVE IT
?[ ]

9. BUILDING THE MENU
4 rules to build an easy to use menu[ ]

10. 1) TALK ABOUT YOUR BRAND
IDENTITY
Think about:
‣ Who you are
‣ What you do
‣ What you want to say
‣ Who are your users
and what they look for

11. 2) USE CLEAR NAMING
NOPE! YES!
ABOUT US
SHOP
GRAPES
COMPANY
ONLINE SHOP
VINEYARD

12. 3) BALANCE WIDTH AND DEPTH
FIRST LEVEL MENU
WIDTH
DEPTH
SECOND
LEVEL
MENU

13. 4) BE CONSISTENT

14. MAPPING TECHNIQUES
3 techniques to build the menu[ ]

15. 1) DRAW THE MAP

16. 2) CARD-SORTING

17. 3) ONLINE SHARABLE MAP

18. TESTS
[ ]how can I know if I built an efficient menu?

19. 1) USABILITY TESTS

20. 2) HEATMAP WORDPRESS
PLUGINS

21. 3) CHECK THE NAMING

22. Menu before and after its redesign[ ]
FINAL RESULT

23. BEFORE
Problems we had to solve:
‣ Too many items in the menu create mess and confusion
‣ Ambiguity in naming
‣ Bilingualism
‣ Unnecessary items (disclaimer, cookie policy, ecc..)

24. Solved problems:
‣ The right amount of items, clear and easy to remember
‣ Clear naming
‣ Same language (Italian)
‣ Correct hierarchy
AFTER

25. GOT QUESTIONS?
@danuccia
#WCTRN
Thank you!