NAVIGATION

Vu Phuong Hoang2015/08

Content

1. Navigation

2. Signposts

3. Navigation cost

4. Patterns1. Global navigation

2. Hub and spoke

3. Pyramid

4. Modal window

5. Annotated scrollbar

5. Comparision

1. Navigation Users have to go around in your product

They do it mainly by grouped links called NAVIGATION

1. Navigation

1. Navigation

2. Signposts

Signs helping user to figure out the surrounding

Common signposts:

Titles

Tabs

Highlighted selection

Labels

2. Signposts

3. Navigation cost In order to navigate, you need a “map”

Reference clip: movie “Premium Rush”

3. Navigation cost

In order to navigate, you need a “map”

It takes time to “draw” a map

Strange structures cost more

Find a path to the balcony

Living room before the makeover

Living room after the makeover

Living room after the makeover

3. Navigation cost

In order to navigate, you need a “map”

It takes time to “draw” a map

Strange structures cost more

Familiar structures with new style still cost

4. Patterns

1. Global navigation

2. Hub and spoke

3. Pyramid

4. Modal window

5. Annotated scrollbar

4.1. Global navigation

Fixed navigation bar(s) in all pages

Limited (short) links

Users can jump directly

to other areas

It takes space

4.1. Global navigation

4.1. Global navigation

4.1. Global navigation

4.2. Hub and spoke

Hub is where shortcuts to spoke are

Spoke has an exit back to hub

Users must go back to

hub to access other areas

It takes least space

Back button is prominent

4.2. Hub and spoke

For deep nested content, it’s the long way to go back

4.2. Hub and spoke

4.3. Pyramid

Similar to “Hub and spoke”, but adjacent spokes are

connected

It’s a hybrid of “Hub and spoke”

and “Global navigation”

Only if spokes are

connected

Back, Next (and Up) buttons are prominent

4.3. Pyramid

4.3. Pyramid

4.3. Pyramid

4.4. Modal window

Similar to “Hub and spoke”

But new spoke is in front of current spoke

Only applied to short content

Keep current context

4.4. Modal window

4.4. Modal window

4.5. Annotated scrollbar

Add information about current area

while scrolling

For very long content, normal

scrollbars have disadvantages: Reading speed vs scrolling speed

Hard to know where it is

Must scan for keyword position

Content can be heavy to load

Info

4.5. Annotated scrollbar

4.5. Annotated scrollbar

4.5. Annotated scrollbar

5. Comparison

Navigation cost

Space cost

Use when Few linksNeed direct

jump

Many independent links

Need to focus on 1 task

Links can be connected

Short content

Very long content

CombinationCombine navigation models for best use

Combination Good navigation + visual effects = great experience

Be creative:

AWWWards

House of Borel

Bose

Bagigia

References

Designing interfaces (1st edition) – Jenifer Tidwell

Designing interfaces (2nd edition) – Jenifer Tidwell

Changes log: http://designinginterfaces.com/patterns/

Wayfinding for the mobile web – Smashing Magazine

Web design navigation showcases – Smashing

Magazine

Other articles – Smashing Magazine

Other UI elements in the book

Designing interfaces – 2nd edition:

Text

Layout

Action

Complex data representation

Input

Social media

Any questions?