Responsive Navigation Design for Mobile Devices

LUNCH AND LEARNRESPONSIVE NAVIGATION DESIGN

Slide

© UsabilityOne. All rights reserved.

Slide


2Footer Text

> Elements of good website navigation

> Ways to display mobile navigation

> Dealing with deep menu structures

> Breadcrumbs

Date

RESPONSIVE NAVIGATION DESIGN

Slide


3Footer Text

What are some of the elements that make good website navigation?

Date

ELEMENTS OF NAVIGATION

Slide


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


Slide


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


Slide


6Footer Text

The key is to think mobile first!

Date


Slide


7Footer Text

Display all

Fly out menu

Push down or overlay

Skip to footer

Date

WAYS TO PRESENT NAVIGATION

Slide


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/

http://www.abookapart.com/

http://www.abookapart.com/

Slide


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/

http://www.nixon.com/us/en/

http://www.nixon.com/us/en/

Slide


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

http://www.easterseals.com/



Slide


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

http://www.greygoose.com/



Slide


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


13Footer Text

Hiding the sub navigation

Nested accordion menu

Off canvas multiple menus

Date

DEALING WITH DEEP MENU STRUCTURES

Slide


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/

http://www.worldwildlife.org/



Slide


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

http://www.cafamerica.org/



http://www.newscastle.edu.au/

http://www.monash.edu.au/

http://www.chapman.edu/

http://www.chapman.edu/

Slide


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/

http://aids.gov/

http://aids.gov/

Slide


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#

http://www.darrencousins.com/lab/mobile-menus/side-slide-iScroll-extended-deep-nav.html




Slide


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


Example: http://bradfrost.github.io/this-is-responsive/patterns.html

http://bradfrost.github.io/this-is-responsive/patterns.html

http://bradfrost.github.io/this-is-responsive/patterns.html

Slide


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


Example: www.newscastle.edu.auhttp://www.darrencousins.com/lab/mobile-menus/side-slide-iScroll-extended-deep-nav.html#




Slide


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


Example: www.newscastle.edu.au http://medicine.umich.edu/medschool


http://medicine.umich.edu/medschool

http://medicine.umich.edu/medschool

Slide


21Footer Text

What about page titles and breadcrumbs?

Date


Slide


22Footer Text

It’s about finding the perfect recipe

Small real estate means displaying all 3 could be overkill

Date


Slide


23Footer Text

Date

THE PERFECT RECIPE

Example: http://www.cafamerica.org/

PAGE TITLES ARE ALSO NAVIGATION




Slide


24Footer Text

Date

THE PERFECT RECIPE

Example: http://www.monash.edu.au

PAGE TITLES ARE BREADCRUMBS




Slide


25Footer Text

Mobile navigation is still in it’s infancy

trial and error … and TEST

Date


Slide


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


27Footer Text

Different way of presenting different sub menus

Date

EXAMPLES

Footer Text28


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