form and function for menus: how to get ia and navigation right uxpa boston 20160429
TRANSCRIPT
25 1st St., Suite 104, Cambridge, MA 02141 | www.BioRAFT.com
Form & Function for Menus
How to Get IA and Navigation Right
Heather BauerUXPA Boston
Friday, April 29th, 2016 – 1:00
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/hezziebtwitter.com/hezzieb524
linkedin.com/in/heathersbauer
Introduction
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.comDrupalNights.org
Introduction
About You
• Totally new• Somewhat experienced• Old hat at this
Introduction
The PhilosophyIntroduction
Agenda
• Introduction• What is Information Architecture?• How to Research• Navigation Overview• Navigation Design• Things to Keep in Mind
Introduction
ExamplesIntroduction
ExamplesIntroduction
ExamplesIntroduction
25 1st St., Suite 104, Cambridge, MA 02141 | www.BioRAFT.com
Information Architecture
Information ArchitectureInformation Architecture
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
Information Scent?Information Architecture
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
Information ScentInformation Architecture
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
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
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
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
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
Why Users Visit Your Site
• Searching for something
• Task to accomplish
• Killing time
• Not always mutually exclusive
Information Architecture
25 1st St., Suite 104, Cambridge, MA 02141 | www.BioRAFT.com
Research
How to Do Organization
• Observe people• Study the competition• Look at the search logs – what are people
looking for and not finding?
Research
Doing Your Research
• Card Sort• Sitepath diagramming• Task analysis• Journey mapping• Sitemap
Research
Card SortResearch
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
Card Sorting Tools
• Sticky Notes• OptimalSort• UserZoom• UserTesting.com• Many more:
www.measuringuserexperience.com/CardSorting/index.htm
Research
Sitepath DiagrammingResearch
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
Sitepath Diagramming Tools
• Something to draw on• Lots of colored drawing implements• Draw people (stick figures A-OK)• Personas (Optional)
Research
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
Task AnalysisResearch
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
Task Analysis How To
• Determine task goal• Pull pieces of the scenario that relate directly• Determine subtasks• Determine sub-subtasks• Add system interaction
Research
SitemappingResearch
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
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
Journey MappingResearch
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
Design Time!Research
Forces at Play
• Business• Users• Technology
Research
Roadblocks
• Sometimes you can put them in users’ way• Sometimes they cause more harm than good
Research
25 1st St., Suite 104, Cambridge, MA 02141 | www.BioRAFT.com
Navigation
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
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
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
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
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
25 1st St., Suite 104, Cambridge, MA 02141 | www.BioRAFT.com
Navigation Design
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
Navigation Location Left
• More flexible with the number of categories
• Vertical space continues infinitely• Leaves less space for local
navigation and content
Navigation Design
Navigation Location Right
• Don’t do it• Least effective with users
Navigation Design
Navigation UI Mega MenuNavigation Design
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
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
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
Top-Left-Left NavigationNavigation Design
Left-Left-Left NavigationNavigation Design
Hover = Bad Usability
• People think hover is faster than click• The problems:– Accidental menu triggering/un-triggering– Unnatural cursor movements
Navigation Design
Absent Navigation
• When it is crucial for users to take a specified path
• Wizards• Initial setup
Navigation Design
How Users Search
• Known-item search• Exploratory seeking• Don’t know what I need to know• Re-finding
Navigation Design
Navigation for WayfindingNavigation Design
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
25 1st St., Suite 104, Cambridge, MA 02141 | www.BioRAFT.com
Keep in Mind
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
Novices
• Only novice for a short time• Many plateau at intermediate• Don’t be in the way
Keep in Mind
Sustainable Structures
• Allow room for growth (within a section and whole new sections)
• Avoid making structures too narrow or deep
Keep in Mind
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
25 1st St., Suite 104, Cambridge, MA 02141 | www.BioRAFT.com
Questions?
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-in
formation-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-we
bsites-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
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-i
nformation-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-w
ebsites-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
25 1st St., Suite 104, Cambridge, MA 02141 | www.BioRAFT.com
Form & Function for Menus
Heather BauerUXPA Boston
Friday, April 29th, 2016 – 1:00pm
UXPA Slack: hezziebtwitter.com/hezzieb524
linkedin.com/in/heathersbauer
Slides will be available on drupalnights.org/library