If a tree falls in the forest and no one is there to hear it, did it make a sound? What if you have a feature that your user can’t find? Does it really exist? Hero menus (more formally known as mega menus) have become increasingly popular for large sites with many sections and pieces of information to put all of the options in front of the user at once. E-commerce sites such as Amazon.com, Staples.com and Target.com all utilize mega menus to display more context and additional levels of navigation. The question becomes whether these mega menus are going to become the best choice for all websites or whether there is still place for the standard drop down, fly out, and accordion menus. Jakob Nielsen may have blessed the mega menu, but is it really the most usable of the options in your situation? During this session I will cover: - The differences between mega menus and other navigational menu structures - When is the best time to use each type of navigational menu structures? - How do you determine your navigational needs? - What implications are there when considering the mobile first mindset See the presentation here: https://www.youtube.com/watch?v=PV55EKIbFkY

1. 25 1st St., Suite 104, Cambridge, MA 02141 | www.BioRAFT.com
Are Mega Menus Really Heroic?
Designing Your Site Navigation
Heather Bauer
Design4Drupal
Saturday, August 1, 2015 – 11:00

2. About Me: Heather Bauer
• UX Product Specialist at
BioRAFT
• M.S. in Human Factors in
Information Design at Bentley
University
• Co-Organizer of Boston
Service Jam 2014
• Expert in Residence for GA
UXD course summer 2014
drupal.org/u/hezzieb
twitter.com/hezzieb524
linkedin.com/in/heathersbauer
Introduction

3. About BioRAFT
• Enterprise safety, compliance
& training software for lab
scientists and those that work
with them built with Drupal
• SaaS, multi-site application.
• WE’RE HIRING!
BioRAFT.com
DrupalNights.org
Introduction

4. About You
• Usability Professionals
• Project Managers
• Developers
• Designers
• Other
Introduction

5. The Philosophy
Introduction

6. Agenda
• Introduction
• What is Information Architecture?
• How to Research
• Navigation Overview
• Navigation Design
• Things to Keep in Mind
Introduction

7. 25 1st St., Suite 104, Cambridge, MA 02141 | www.BioRAFT.com
Information Architecture

8. Information Architecture
Information Architecture

9. Information Architecture
• Creates intuitive ways to navigate data
• Makes information easy to find
• Schemes must be:
– Concise
– Descriptive
– Mutually exclusive
– Possess information scent
Information Architecture

10. Information Scent?
Information Architecture

11. Information Scent
• Cues that indicate what you’re looking for is
down a particular path
• Informs decisions
• Allows information that doesn’t seem relevant
to be discarded or ignored
Information Architecture

12. Information Scent
Information Architecture

13. What Users Need to Know
• Am I in the right place?
• Does the site have what I’m looking for?
• Is there anything better?
• What now?
Information Architecture

14. What Users Need to Know
• Am I in the right place?
– Make sure they can tell what your site is for
– Every page is your home page
• Does the site have what I’m looking for?
• Is there anything better?
• What now?
Information Architecture

15. What Users Need to Know
• Am I in the right place?
• Does the site have what I’m looking for?
– Use organization systems that make sense (e.g.
alphabetical, by time, location, etc.)
– Obvious labels
– Navigation should look like navigation
– You are here and you were there indicators
• Is there anything better?
• What now?
Information Architecture

16. What Users Need to Know
• Am I in the right place?
• Does the site have what I’m looking for?
• Is there anything better?
– Hierarchy should be obvious
– Breadcrumbs
– “See also” options
• What now?
Information Architecture

17. What Users Need to Know
• Am I in the right place?
• Does the site have what I’m looking for?
• Is there anything better?
• What now?
– Next steps should be obvious
– Don’t hide the last step to success
Information Architecture

18. Why Users Visit Your Site
• Searching for something
• Task to accomplish
• Killing time
• Not always mutually exclusive
Information Architecture

19. 25 1st St., Suite 104, Cambridge, MA 02141 | www.BioRAFT.com
Research

20. How to Do Organization
• Observe people
• Study the competition
• Look at the search logs – what are people
looking for and not finding?
Research

21. Doing Your Research
• Card Sort
• Sitepath diagramming
• Task analysis
• Journey mapping
• Sitemap
Research

22. Card Sort
Research

23. Card Sorting
• Early stage technique
• 2 types:
– Open Card Sort: Can make as many groups as
appropriate
– Closed Card Sort: Groups pre-determined
• Can be done with users or stakeholders
Research

24. Card Sorting Tools
• Sticky Notes
• OptimalSort
• UserZoom
• UserTesting.com
• Many more:
www.measuringuserexperience.com/CardSort
ing/index.htm
Research

25. Sitepath Diagramming
Research

26. Sitepath Diagramming
• Sketching system – determine users and their
activities
• Good for deciding site flow, early UI design,
and workflow
• Can show a process that you can design for
one user and reuse
Research

27. Sitepath Diagramming Tools
• Something to draw on
• Lots of colored drawing implements
• Draw people (stick figures A-OK)
• Personas (Optional)
Research

28. Sitepath Diagramming How To
• Draw a circle representing your system
• Put types of people around the edge (obvious
people in upper left)
• Ways people might come to the site (lower
left)
• People using the site very differently (right)
• Draw the scenarios within the circle
Research

29. Task Analysis
Research

30. Task Analysis
• Much more detailed than Sitepath
Diagramming
• A way to fill in the little pieces the scenarios
may gloss over
• Helps figure out design questions to be
answered
• Captures subtleties of each step in the process
Research

31. Task Analysis How To
• Determine task goal
• Pull pieces of the scenario that relate directly
• Determine subtasks
• Determine sub-subtasks
• Add system interaction
Research

32. Sitemapping
Research

33. Sitemapping 4 Types
• Tree Map – great for hierarchy
• Comb Map – uses space better
• Star Map – hierarchy isn’t strict
• Tab Map – grouped by similarities instead of
hierarchy
Research

34. Sitemap considerations
• Big or small?
• Shallow or deep?
• How important is the hierarchy?
• Are there multiple ways to get to one page?
Research

35. Journey Mapping
Research

36. Journey Mapping
• Identifies problem areas with workflows
• Focuses on users’ emotional state at a given
step
• Combination of Sitepath Diagramming/Task
Analysis/Sitemap and Personas
Research

37. Design Time!
Research

38. Forces at Play
• Business
• Users
• Technology
Research

39. Roadblocks
• Sometimes you can put them in users’ way
• Sometimes they cause more harm than good
Research

40. 25 1st St., Suite 104, Cambridge, MA 02141 | www.BioRAFT.com
Navigation

41. Types of Navigation
• Structural Navigation: Hierarchy including
global and local
• Associative Navigation: Similar items that help
with exploratory seeking
• Utility Navigation: Sign in, user info, etc.
Navigation

42. Types of Navigation
• Global Navigation
– Your big categories
– Visible from every page
– Gives a rough feel for what the site is about
• Local Navigation
– Page specific
– Gets to the finer details
– Allows for more specific browsing
Navigation

43. Navigation Access Pogosticking
• Have to go to a parent category before a new
sub category
• Usually for large, varied collections of content
• Requires very clear and clickable sense of
place
• Hiding top level categories – easier to focus
• Allows for space saving methods
Navigation

44. Navigation Access Crabwalking
• Can move between categories at the same
depth
• Easier error recovery
• Requires everything of the same level to be
visible at the same time
Navigation

45. Faceted Classification
• Good if you have items that can be classified
by many characteristics
• Considers the question of how else someone
would search for this
• Becoming increasingly common
Navigation

46. 25 1st St., Suite 104, Cambridge, MA 02141 | www.BioRAFT.com
Navigation Design

47. Navigation Location Top
• All navigation visible at once
• Full width of the screen is available to content
below navigation
• Good if you have a few big categories
• Gets messy if you have more than about 5
Navigation Design

48. Navigation Location Left
• More flexible with the number of
categories
• Vertical space continues infinitely
• Leaves less space for local
navigation and content
Navigation Design

49. Navigation Location Right
• Don’t do it
• Least effective with users
Navigation Design

50. Navigation UI Mega Menu
Navigation Design

51. Navigation UI Mega Menu
• Jakob Nielsen endorsed Mega Menus in 2009
• Allow you to see multiple levels of navigation
• Requires less drill down
• Allows for recognition over recall
• Potentially overwhelming
• Can be used at any level of navigation
• Take up a large portion of the screen
• Not mobile friendly
Navigation Design

52. Navigation UI Breadcrumbs
• Provide a trail of hierarchy
• Useful for pogosticking
• Expert users get the most use of breadcrumbs
• Use > instead of : to indicate hierarchy
• Should live right under page title
• Jury is still out on whether they decrease task
completion time or increase success rate
Navigation Design

53. Sub Navigation Best Location
• Start left OR top
• 2nd and 3rd selections should be from the
same place but 1st selection can be separated
• Top-left-left and left-left-left were the best
Navigation Design

54. Top-Left-Left Navigation
Navigation Design

55. Left-Left-Left Navigation
Navigation Design

56. Hover = Bad Usability
• People think hover is faster than click
• The problems:
– Accidental menu triggering/un-triggering
– Unnatural cursor movements
Navigation Design

57. Absent Navigation
• When it is crucial for users to take a specified
path
• Wizards
• Initial setup
Navigation Design

58. How Users Search
• Known-item search
• Exploratory seeking
• Don’t know what I need to know
• Re-finding
Navigation Design

59. Navigation for Wayfinding
Navigation Design

60. Navigation for Wayfinding
• Landmarks are the only way to navigate
• Users need to know:
– Where they are
– Where’s the thing they need
– How did they get there?
– Where have they already looked?
• Be consistent with organization
• Provide detours for errors
Navigation Design

61. 25 1st St., Suite 104, Cambridge, MA 02141 | www.BioRAFT.com
Keep in Mind

62. When Organizing Content
• Users perform better with deep (3 levels)
rather than wide (2 levels) navigation
• Good navigational structure doesn’t make up
for junk labels
• Organize products/features together with a
focus on what they have in common instead
of organizing by goal
Keep in Mind

63. Novices
• Only novice for a short time
• Many plateau at intermediate
• Don’t be in the way
Keep in Mind

64. "You knew when you were needed and when to go
away - it's a rare talent"
Jaime Lannister – Game of Thrones Season 2 Episode 7
Keep in Mind

65. Sustainable Structures
• Allow room for growth (within a section and
whole new sections)
• Avoid making structures too narrow or deep
Keep in Mind

66. What’s Different with Mobile?
• Space is more limited
• Fat Finger Syndrome – targets need to be large
enough
• Navigation may be hidden
• Hover is not an option
• Relevant content may be different
Keep in Mind

67. Photo Credits
• http://downthenaturetrail.blogspot.com/2013/05/architecture-
design-wallpaper.html
• https://www.interaction-design.org/ux-daily/194/web-user-
behaviour-directed-by-information-scent
• https://www.newfangled.com/an-offline-information-architecture-
exercise/
• http://itcourses.cs.unh.edu/assets/docs/502/tutorials/fall09-
tut/asr25/page2.html
• http://kaylaashley345.blogspot.com/2013/12/task-analysis.html
• http://imgbuddy.com/pogo-stick-clip-art.asp
• https://www.flickr.com/photos/peterkaminski/47922080
• http://www.creativebloq.com/navigation/design-better-faceted-
navigation-your-websites-41411437

68. Resources
• http://www.usabilityfirst.com/about-usability/information-architecture
• http://www.usabilityfirst.com/glossary/information-scent
• https://www.interaction-design.org/ux-daily/194/web-user-behaviour-directed-
by-information-scent
• Wodtke, C., & Govella, A. (2009). Information Architecture: Blueprints for the Web.
Pearson Education.
• http://theuxreview.co.uk/user-journeys-beginners-guide/
• http://www.creativebloq.com/navigation/design-better-faceted-navigation-your-
websites-41411437
• http://www.usability.gov/get-involved/blog/2006/11/breadcrumb-navigation.html
• http://www.usability.gov/get-involved/blog/2006/04/left-navigation-is-best.html
• http://www.nature.com/neuro/journal/v3/n4/full/nn0400_404.html
• http://www.usability.gov/how-to-and-tools/methods/organization-structures.html

69. 25 1st St., Suite 104, Cambridge, MA 02141 | www.BioRAFT.com
Are Mega Menus Really Heroic?
drupal.org/u/hezzieb
twitter.com/hezzieb524
linkedin.com/in/heathersbauer
Slides will be available on
drupalnights.org/library
Heather Bauer
Design4Drupal
Saturday, August 1, 2015 – 11:00