IWM 14

Information Architecture: Designing Navigation

Classification to navigation

Mapping from raw information collections to pages, with labelling, must be designed to support user navigation (and printing)

Some issues:

• Hypertext linking• Separate pages vs scrolling long page• Page length > page design

Page Dimensions

Page Dimensions

Page Dimensions

Page Length

Page Length

Page Length

What’s meant by navigation?

“exploiting Web site’s structure and content to find, browse and explore information”

Navigation Systems

Global (site-wide) navigation systems Local (sub-site) navigation systems Supplementary navigation systems

• Tables of contents/site maps.• Site indexes.• Guides and guided tours.

Give flexibility and user control without confusing user through too much choice

Navigation Systems

Navigation systems need to:• Provide context (Where am I?)• Provide flexibility (Where can I go?)• Avoid wasting user’s time (Why should I go

there? What will I find?)• Provide guidance (How can I get there?

And get back to here?)

How does navigation work in real life?

following road signs “automatic pilot” landmarksmapsask guide/take guided tourfollow step by step directions

How does “navigation” work in spatial environments?

use map or floorplanlook for signsuse a classification system, e.g. Dewey Decimalgo to favourite sectionuse computerised searchuse recommendationask guide/take guided tourask librarian or ask other usergo to the place marked for you, e.g. research students

onlygo where you see other students from course

Translate into Web navigation aids?

navigation buttons = directions to sections/areas

sitemaps home as landmark breadcrumb trails guided tours user group areas graphically distinguished areas

How does “navigation” work in paper information sources?

using table of contents using index flicking through pages using tabs, coloured sections ask guide/take guided tour using turned down pages, bookmarks looking for “landmark” e.g. photo inserts how much has been read so far?

Lands’ End Catalog

Lands’ End Catalog

An implicit architecture

64

1

2 3

18 19

34 35

10 11

26 27

42 43

56 57

4 5

20 21

36 37

50 51

12 13

28 29

44 45

58 59

6 7

22 23

38 39

52 53

14 15

30 31

46 47

60 61

8 9

24 25

40 41

54 55

16 17

32 33

48 49

62 63

showcase

kids

women

unisex

men women

women

Lands’ End Catalog

An alternative view

64

1

2 3

18 19

34 35

10 11

26 27

42 43

56 57

4 5

20 21

36 37

50 51

12 13

28 29

44 45

58 59

6 7

22 23

38 39

52 53

14 15

30 31

46 47

60 61

8 9

24 25

40 41

54 55

16 17

32 33

48 49

62 63

kids

cool-weather casual

dressy

summer casual

spring casual

spring casual

special purpose shoes

Lands’ End Catalog

page 4

page 15

page 51

repetition

Lands’ End Catalog

64

1

2 3

18 19

34 35

10 11

26 27

42 43

56 57

4 5

20 21

36 37

50 51

12 13

28 29

44 45

58 59

6 7

22 23

38 39

52 53

14 15

30 31

46 47

60 61

8 9

24 25

40 41

54 55

16 17

32 33

48 49

62 63

repetition

Lands’ End Catalog

Reference and redirection

64

1

2 3

18 19

34 35

10 11

26 27

42 43

56 57

4 5

20 21

36 37

50 51

12 13

28 29

44 45

58 59

6 7

22 23

38 39

52 53

14 15

30 31

46 47

60 61

8 9

24 25

40 41

54 55

16 17

32 33

48 49

62 63

Lands’ End Catalog

Reference and redirection

Translate into Web navigation aids?

favourites/bookmarks back go to previous site = breadcrumb trail url of linked site displayed at bottom of screen directory structure, e.g. alphabetical search visited links

Building context

branding navigation needs to present structure of

information hierarchy plan that any page could be the first page for

users reaching the site from a search engine give url on page use breadcrumb technique, e.g.

my studies/IS355/course material use meaningful URLs and page titles

Building flexibility

hierarchies can be very restrictive direct links can allow user to move around at

will - but can be complex

yx

Building flexibility

hierarchies can be very restrictive direct links can allow user to move around at

will - but can be complex

yx yx

Building flexibility

often via in-text hyperlinks users often don’t see them if they’re important, may be better to group

them in indented list, e.g. The three best team names in the UK:

– Heart of Midlothian– Accrington Stanley– Hamilton Academicals

Building flexibility

Just make sure their meanings are obvious:

The SAC was set up in 1999 by UBSU. We can advise you on topics such as unreturned deposits, properties in need of repair and any situation where you think you are being treated unfairly. The information on these pages is only intended as a guide; if you need further information or advice, please contact us.

Global systems

Site wide system, normally with main sections, referenced on every page via a navigation bar with buttons or tabs

Explicit architecture

Architecture that is made apparent to the user

Very common for information retrieval tasks

Labels can serve to make architecture explicit

But explicitness doesn’t ensure clarity

Example:

home solutions resources channels

Headers & footers

Local systems

subsites may need special treatment and may not fit the global navigation pattern

often expected by user, e.g. U of Brighton faculty sites or course database; product catalogue within large e-commerce site

needs to be integrated into global navigation system, e.g. link to Home, contact, etc should be same.

Integrated navigation elements

Navigation bars– text vs graphical?– button or (expanding) menu?– side vs top vs bottom of screen?– current page?

Frames– real estate– the page model– ever tinier page displays

Supplemental navigation elements

Table of contents Index Site Map Guided tour Site search

Supplemental Navigation Facilities

Table of Contents/Site Map• Reflects site’s organisation system (mental

model).• Gives reassurance of completeness

Site Index• Flattens organisation system (greater granularity).• Supports known-item searching.• Often not directly available - use via search facility

Supplemental Navigation Facilities

Guided Tour• Highlights a few of the site’s resources for a

specific audience, topic, or task.• Good for introducing users to especially relevant

aspect of the site’s content.

Searching Systems

“Search is one of the most important user interface elements in any large web site...Our usability studies show that more than half of all users are search-dominant.” (Jakob Nielsen)

But don’t take user off site Think about scoped search