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