[ux series] 5 - navigation

Download [UX Series] 5 - Navigation

Post on 21-Feb-2017

525 views

Category:

Design

0 download

Embed Size (px)

TRANSCRIPT

FileNewTemplate

NAVIGATIONVu Phuong Hoang2015/08

1

ContentNavigationSignpostsNavigation costPatternsGlobal navigationHub and spokePyramidModal windowAnnotated scrollbarComparision

2

1. NavigationUsers have to go around in your productThey do it mainly by grouped links called NAVIGATION

3

1. Navigation

4

1. Navigation

5

2. SignpostsSigns helping user to figure out the surroundingCommon signposts:TitlesTabsHighlighted selectionLabels

6

2. Signposts

7

3. Navigation costIn order to navigate, you need a map

Reference clip: movie Premium Rush

8

3. Navigation costIn order to navigate, you need a mapIt takes time to draw a mapStrange structures cost more

9

Find a path to the balcony

10

Living room before the makeover

11

Living room after the makeover

12

Living room after the makeover

13

3. Navigation costIn order to navigate, you need a mapIt takes time to draw a mapStrange structures cost moreFamiliar structures with new style still cost

14

4. PatternsGlobal navigationHub and spokePyramidModal windowAnnotated scrollbar

15

4.1. Global navigationFixed navigation bar(s) in all pagesLimited (short) linksUsers can jump directly to other areasIt takes space

16

4.1. Global navigation

17

4.1. Global navigation

18

4.1. Global navigation

19

4.2. Hub and spokeHub is where shortcuts to spoke areSpoke has an exit back to hubUsers must go back to hub to access other areasIt takes least spaceBack button is prominent

20

4.2. Hub and spokeFor deep nested content, its the long way to go back

21

4.2. Hub and spoke

22

23

4.3. PyramidSimilar to Hub and spoke, but adjacent spokes are connectedIts a hybrid of Hub and spoke and Global navigationOnly if spokes areconnectedBack, Next (and Up) buttons are prominent

24

4.3. Pyramid

25

4.3. Pyramid

26

4.3. Pyramid

27

4.4. Modal windowSimilar to Hub and spokeBut new spoke is in front of current spokeOnly applied to short contentKeep current context

28

4.4. Modal window

29

4.4. Modal window

30

4.5. Annotated scrollbarAdd information about current area while scrolling

For very long content, normal scrollbars have disadvantages:Reading speed vs scrolling speedHard to know where it isMust scan for keyword positionContent can be heavy to load

Info

31

4.5. Annotated scrollbar

32

4.5. Annotated scrollbar

33

4.5. Annotated scrollbar

34

5. ComparisonNavigation costSpace costUse whenFew linksNeed direct jumpMany independent linksNeed to focus on 1 taskLinks can be connectedShort contentVery long content

35

CombinationCombine navigation models for best use

36

CombinationGood navigation + visual effects = great experienceBe creative:AWWWardsHouse of BorelBoseBagigia

37

ReferencesDesigning interfaces (1st edition) Jenifer TidwellDesigning interfaces (2nd edition) Jenifer TidwellChanges log: http://designinginterfaces.com/patterns/

Wayfinding for the mobile web Smashing MagazineWeb design navigation showcases Smashing MagazineOther articles Smashing Magazine

38

Other UI elements in the bookDesigning interfaces 2nd edition:TextLayoutActionComplex data representationInputSocial media

39

Any questions?

40

Recommended

View more >