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 a 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 - Does your navigational structure introduce a paradox of choice? Who will benefit - Anyone building or revamping information architecture - Anyone deciding where to put that new page they are designing

1. 25 1st St., Suite 104, Cambridge, MA 02141 | www.BioRAFT.com
Form & Function for Menus
How to Get IA and Navigation Right
Heather Bauer
UXPA Boston
Friday, April 29th, 2016 – 1: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
• Totally new
• Somewhat experienced
• Old hat at this
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. Examples
Introduction

8. Examples
Introduction

9. Examples
Introduction

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

11. Information Architecture
Information Architecture

12. 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

13. Information Scent?
Information Architecture

14. 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

15. Information Scent
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?
• What now?
Information Architecture

17. 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

18. 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

19. 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

20. 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

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

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

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

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

25. Card Sort
Research

26. 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

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

28. Sitepath Diagramming
Research

29. 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

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

31. 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

32. Task Analysis
Research

33. 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

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

35. Sitemapping
Research

36. 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

37. Sitemap considerations
• Big or small?
• Shallow or deep?
• How important is the hierarchy?
• Are there multiple ways to get to one page?
NOTE: No right or wrong answers!
Research

38. Journey Mapping
Research

39. 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

40. Design Time!
Research

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

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

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

44. 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

45. 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

46. 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

47. 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

48. 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

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

50. 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

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

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

53. Navigation UI Mega Menu
Navigation Design

54. 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

55. 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

56. 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

57. Top-Left-Left Navigation
Navigation Design

58. Left-Left-Left Navigation
Navigation Design

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

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

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

62. Navigation for Wayfinding
Navigation Design

63. 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

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

65. 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

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

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

68. 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

69. 25 1st St., Suite 104, Cambridge, MA 02141 | www.BioRAFT.com
Questions?

70. 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
• https://cs3240team8.wordpress.com/2012/09/06/week-3-good-and-bad-
examples-of-web-design/
• http://www.blogtyrant.com/wordpress-news-themes/
http://maadmob.net/donna/blog/tag/navigation

71. 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

72. 25 1st St., Suite 104, Cambridge, MA 02141 | www.BioRAFT.com
Form & Function for Menus
Heather Bauer
UXPA Boston
Friday, April 29th, 2016 – 1:00pm
UXPA Slack: hezzieb
twitter.com/hezzieb524
linkedin.com/in/heathersbauer
Slides will be available on
drupalnights.org/library