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
call girls in Vaishali (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝✔️✔️
Are Mega Menus Really Heroic?
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
Hinweis der Redaktion
Enterprise safety, compliance & training software for lab scientists and those that work with them built with Drupal
Wodtke, C., & Govella, A. (2009). Information Architecture: Blueprints for the Web. Pearson Education.
Wodtke, C., & Govella, A. (2009). Information Architecture: Blueprints for the Web. Pearson Education.
Wodtke, C., & Govella, A. (2009). Information Architecture: Blueprints for the Web. Pearson Education.
Wodtke, C., & Govella, A. (2009). Information Architecture: Blueprints for the Web. Pearson Education.
photo: http://imgbuddy.com/pogo-stick-clip-art.asp
Wodtke, C., & Govella, A. (2009). Information Architecture: Blueprints for the Web. Pearson Education.
Photo: https://www.flickr.com/photos/peterkaminski/47922080
Wodtke, C., & Govella, A. (2009). Information Architecture: Blueprints for the Web. Pearson Education.
Photo: http://www.creativebloq.com/navigation/design-better-faceted-navigation-your-websites-41411437
Wodtke, C., & Govella, A. (2009). Information Architecture: Blueprints for the Web. Pearson Education.
Wodtke, C., & Govella, A. (2009). Information Architecture: Blueprints for the Web. Pearson Education.
Wodtke, C., & Govella, A. (2009). Information Architecture: Blueprints for the Web. Pearson Education.
Wodtke, C., & Govella, A. (2009). Information Architecture: Blueprints for the Web. Pearson Education.
http://www.nature.com/neuro/journal/v3/n4/full/nn0400_404.html
Wodtke, C., & Govella, A. (2009). Information Architecture: Blueprints for the Web. Pearson Education.