Responsive Navigation Design for Mobile Devices
description
Transcript of Responsive Navigation Design for Mobile Devices
LUNCH AND LEARNRESPONSIVE NAVIGATION DESIGN
Slide
© UsabilityOne. All rights reserved.
Slide
© UsabilityOne. All rights reserved.
2Footer Text
> Elements of good website navigation
> Ways to display mobile navigation
> Dealing with deep menu structures
> Breadcrumbs
Date
RESPONSIVE NAVIGATION DESIGN
Slide
© UsabilityOne. All rights reserved.
3Footer Text
What are some of the elements that make good website navigation?
Date
ELEMENTS OF NAVIGATION
Slide
© UsabilityOne. All rights reserved.
4Footer Text
Mega menus:
Shows users what content is under each category label. 3-tier navigation can be even more effective
Landing pages:
A good landing page gives a snapshot of the content within that category and leads users deeper into the content
Date
ELEMENTS OF NAVIGATION
Slide
© UsabilityOne. All rights reserved.
5Footer Text
Breadcrumbs:
Breadcrumbs show a user where they are in the site, and allows them to easily navigate within similar categories
Fat footers:
Helps direct users to additional content and can remove the less important content from the primary navigation
Date
ELEMENTS OF NAVIGATION
Slide
© UsabilityOne. All rights reserved.
6Footer Text
The key is to think mobile first!
Date
ELEMENTS OF NAVIGATION
Slide
© UsabilityOne. All rights reserved.
7Footer Text
Display all
Fly out menu
Push down or overlay
Skip to footer
Date
WAYS TO PRESENT NAVIGATION
Slide
© UsabilityOne. All rights reserved.
8Footer Text
Navigation is displayed at the top of the screen in a small amount of space
Pros: > All links displayed upfront> Easy to read and navigate
Cons:> Very restrictive
- Only works with small menu structures: 4-8 links max, short link labels and a single level
> Can take up screen real estate> Small touch area (bad for fat fingers)> Can have cross device rescaling
issues
Date
WAYS TO PRESENT NAVIGATIONDISPLAY ALL
Example: http://www.abookapart.com/
Slide
© UsabilityOne. All rights reserved.
9Footer Text
Navigation is displayed in a column to the side of the screen
Pros: > If via a sticky nav, then can maintain
current page positioning> Most users are familiar due to
Facebook> Menu can take the whole length of the
screen> Scrollable
Cons:> Some browser capability issues – a
fallback is required
Date
WAYS TO PRESENT NAVIGATIONFLY OUT MENU
Example: http://www.nixon.com/us/en/
Slide
© UsabilityOne. All rights reserved.
10Footer Text
Menu is overlaid on content, or content is pushed down the page
Pros: > No page reload required
Cons:> Needs a sexy animation> Can be javascript dependent > Pushes page content down
Date
WAYS TO PRESENT NAVIGATIONPUSH DOWN OR OVERLAY
example: http://www.easterseals.com
Slide
© UsabilityOne. All rights reserved.
11Footer Text
Navigation is presented at the bottom of the page with a simple link at the top of the page
Pros: > Content first> Quick access to the menu
Cons:> Can be a disjointed experience> Requires scrolling of the entire page
Date
WAYS TO PRESENT NAVIGATIONSKIP TO FOOTER
Example: http://www.greygoose.com
Slide
© UsabilityOne. All rights reserved.
12Footer Text
Not all users know the hamburger icon
A study found 20% more visitors clicked a menu button than a hamburger button
Date
WAYS TO PRESENT NAVIGATIONOTHER THINGS TO CONSIDER
Slide
© UsabilityOne. All rights reserved.
13Footer Text
Hiding the sub navigation
Nested accordion menu
Off canvas multiple menus
Date
DEALING WITH DEEP MENU STRUCTURES
Slide
© UsabilityOne. All rights reserved.
14Footer Text
Users are forced to view landing pages
Pros: > Keeps the menu small and digestible> Landing pages can be designed to be
menu pages with secondary menus – ideal if mega menus are incorporated into the desktop version
Cons:> No direct access to sub menu links> A whole page load is required to access
child links> Need to code to ensure smaller
screens don’t download the sub-nav content in the background
Date
DEALING WITH DEEP MENU STRUCTURESHIDING THE SUB NAVIGATION
Example: http://www.worldwildlife.org/
Slide
© UsabilityOne. All rights reserved.
15Footer Text
Things to consider:
Where do you then display child navigation?
Top or bottom of the page?
How well are landing pages designed in order to direct users to relevant content?
Date
DEALING WITH DEEP MENU STRUCTURESHIDING THE SUB NAVIGATION
Examples: http://www.cafamerica.org/ www.newscastle.edu.au www.monash.edu.au http://www.chapman.edu
Slide
© UsabilityOne. All rights reserved.
16Footer Text
A new screen is displayed for each layer of navigation with clear toggles to move up and down the hierarchy
Pros: > Keeps the menu small and digestible> Good for sites with multiple levels as it
doesn’t push menus down> Takes users directly to the content they
want without moving through a number of content pages
Cons:> No use of landing pages, meaning users
must continue clicking until they reach the lowest level
> A strong IA is needed > Does not easily allow jumping between
sections from a higher levelDate
DEALING WITH DEEP MENU STRUCTURESOFF CANVAS MULTIPLE MENUS
Example: http://aids.gov/
Slide
© UsabilityOne. All rights reserved.
17Footer Text
The user taps on a parent link to revel the child links.
2 options: > Allow access to landing pages> Don’t allow access to landing pages
Date
DEALING WITH DEEP MENU STRUCTURESNESTED ACCORDION MENU
Example: http://www.darrencousins.com/lab/mobile-menus/side-slide-iScroll-extended-deep-nav.html#
Slide
© UsabilityOne. All rights reserved.
18Footer Text
OPTION 1: Don’t allow access to landing pages
Pros:> Solution for large sites> Users can scan through menu choices
before making a selection
Cons:> Menu can get really long, especially if
many child options> No use of landing pages, meaning
users must continue clicking until they reach the lowest level
> A strong IA is needed
Date
DEALING WITH DEEP MENU STRUCTURESNESTED ACCORDION MENU
Example: http://bradfrost.github.io/this-is-responsive/patterns.html
Slide
© UsabilityOne. All rights reserved.
19Footer Text
OPTION 2: Allow access to landing pages
Pros: > Gives users the option of using a landing
page or jumping deeper> Can put all the menus under this one
menu
Cons:> It adds 2 different tap actions within a
close area = potentially confusing> Users are not always sure what they
want> Users likely to miss the option to drill via
menu
Date
DEALING WITH DEEP MENU STRUCTURESNESTED ACCORDION MENU
Example: www.newscastle.edu.auhttp://www.darrencousins.com/lab/mobile-menus/side-slide-iScroll-extended-deep-nav.html#
Slide
© UsabilityOne. All rights reserved.
20Footer Text
Things to consider: > Ensure it looks like there are 2
interactions available – no convention- An arrow can mean 2 things
> Landing pages still must be optimised incase the expandable menu is not used
> If users do not use the accordian menu will they know this is where they find child navigation?
Date
DEALING WITH DEEP MENU STRUCTURESNESTED ACCORDION MENU
Example: www.newscastle.edu.au http://medicine.umich.edu/medschool
Slide
© UsabilityOne. All rights reserved.
21Footer Text
What about page titles and breadcrumbs?
Date
RESPONSIVE NAVIGATION DESIGN
Slide
© UsabilityOne. All rights reserved.
22Footer Text
It’s about finding the perfect recipe
Small real estate means displaying all 3 could be overkill
Date
RESPONSIVE NAVIGATION DESIGN
Slide
© UsabilityOne. All rights reserved.
23Footer Text
Date
THE PERFECT RECIPE
Example: http://www.cafamerica.org/
PAGE TITLES ARE ALSO NAVIGATION
Slide
© UsabilityOne. All rights reserved.
24Footer Text
Date
THE PERFECT RECIPE
Example: http://www.monash.edu.au
PAGE TITLES ARE BREADCRUMBS
Slide
© UsabilityOne. All rights reserved.
25Footer Text
Mobile navigation is still in it’s infancy
trial and error … and TEST
Date
RESPONSIVE NAVIGATION DESIGN
Slide
© UsabilityOne. All rights reserved.
26Footer Text
Stacked 2 menus directly on top of each other
Date
EXAMPLES
Page menu and global nav are presented in fly out but seperated
Slide
© UsabilityOne. All rights reserved.
27Footer Text
Different way of presenting different sub menus
Date
EXAMPLES
Footer Text28
© UsabilityOne. All rights reserved.
Slide
Date
QUESTIONS?
MELBOURNE119 Ferrars StreetSouth Melbourne Vic 3205
SYDNEY26-28 Wentworth AvenueSurry Hills NSW 2010
Web: www.UsabilityOne.comPhone: 1300 783 103
THANK YOU
User testingCard sortsWebsite metricsOptimiser ExperimentsFocus GroupsUser SurveysExpert reviewsUsability compliance ordersWebsite performance managementContent writing