IWM 14
description
Transcript of IWM 14
![Page 1: IWM 14](https://reader035.fdocuments.us/reader035/viewer/2022070423/568167da550346895ddd37a8/html5/thumbnails/1.jpg)
IWM 14
Information Architecture: Designing Navigation
![Page 2: IWM 14](https://reader035.fdocuments.us/reader035/viewer/2022070423/568167da550346895ddd37a8/html5/thumbnails/2.jpg)
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 3: IWM 14](https://reader035.fdocuments.us/reader035/viewer/2022070423/568167da550346895ddd37a8/html5/thumbnails/3.jpg)
Page Dimensions
![Page 4: IWM 14](https://reader035.fdocuments.us/reader035/viewer/2022070423/568167da550346895ddd37a8/html5/thumbnails/4.jpg)
Page Dimensions
![Page 5: IWM 14](https://reader035.fdocuments.us/reader035/viewer/2022070423/568167da550346895ddd37a8/html5/thumbnails/5.jpg)
Page Dimensions
![Page 6: IWM 14](https://reader035.fdocuments.us/reader035/viewer/2022070423/568167da550346895ddd37a8/html5/thumbnails/6.jpg)
Page Length
![Page 7: IWM 14](https://reader035.fdocuments.us/reader035/viewer/2022070423/568167da550346895ddd37a8/html5/thumbnails/7.jpg)
Page Length
![Page 8: IWM 14](https://reader035.fdocuments.us/reader035/viewer/2022070423/568167da550346895ddd37a8/html5/thumbnails/8.jpg)
Page Length
![Page 9: IWM 14](https://reader035.fdocuments.us/reader035/viewer/2022070423/568167da550346895ddd37a8/html5/thumbnails/9.jpg)
What’s meant by navigation?
“exploiting Web site’s structure and content to find, browse and explore information”
![Page 10: IWM 14](https://reader035.fdocuments.us/reader035/viewer/2022070423/568167da550346895ddd37a8/html5/thumbnails/10.jpg)
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
![Page 11: IWM 14](https://reader035.fdocuments.us/reader035/viewer/2022070423/568167da550346895ddd37a8/html5/thumbnails/11.jpg)
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?)
![Page 12: IWM 14](https://reader035.fdocuments.us/reader035/viewer/2022070423/568167da550346895ddd37a8/html5/thumbnails/12.jpg)
How does navigation work in real life?
following road signs “automatic pilot” landmarksmapsask guide/take guided tourfollow step by step directions
![Page 13: IWM 14](https://reader035.fdocuments.us/reader035/viewer/2022070423/568167da550346895ddd37a8/html5/thumbnails/13.jpg)
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
![Page 14: IWM 14](https://reader035.fdocuments.us/reader035/viewer/2022070423/568167da550346895ddd37a8/html5/thumbnails/14.jpg)
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
![Page 15: IWM 14](https://reader035.fdocuments.us/reader035/viewer/2022070423/568167da550346895ddd37a8/html5/thumbnails/15.jpg)
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?
![Page 16: IWM 14](https://reader035.fdocuments.us/reader035/viewer/2022070423/568167da550346895ddd37a8/html5/thumbnails/16.jpg)
Lands’ End Catalog
![Page 17: IWM 14](https://reader035.fdocuments.us/reader035/viewer/2022070423/568167da550346895ddd37a8/html5/thumbnails/17.jpg)
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
![Page 18: IWM 14](https://reader035.fdocuments.us/reader035/viewer/2022070423/568167da550346895ddd37a8/html5/thumbnails/18.jpg)
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
![Page 19: IWM 14](https://reader035.fdocuments.us/reader035/viewer/2022070423/568167da550346895ddd37a8/html5/thumbnails/19.jpg)
Lands’ End Catalog
page 4
page 15
page 51
repetition
![Page 20: IWM 14](https://reader035.fdocuments.us/reader035/viewer/2022070423/568167da550346895ddd37a8/html5/thumbnails/20.jpg)
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
![Page 21: IWM 14](https://reader035.fdocuments.us/reader035/viewer/2022070423/568167da550346895ddd37a8/html5/thumbnails/21.jpg)
Lands’ End Catalog
Reference and redirection
![Page 22: IWM 14](https://reader035.fdocuments.us/reader035/viewer/2022070423/568167da550346895ddd37a8/html5/thumbnails/22.jpg)
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
![Page 23: IWM 14](https://reader035.fdocuments.us/reader035/viewer/2022070423/568167da550346895ddd37a8/html5/thumbnails/23.jpg)
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
![Page 24: IWM 14](https://reader035.fdocuments.us/reader035/viewer/2022070423/568167da550346895ddd37a8/html5/thumbnails/24.jpg)
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
![Page 25: IWM 14](https://reader035.fdocuments.us/reader035/viewer/2022070423/568167da550346895ddd37a8/html5/thumbnails/25.jpg)
Building flexibility hierarchies can be very restrictive direct links can allow user to move around at
will - but can be complex
yx
![Page 26: IWM 14](https://reader035.fdocuments.us/reader035/viewer/2022070423/568167da550346895ddd37a8/html5/thumbnails/26.jpg)
Building flexibility hierarchies can be very restrictive direct links can allow user to move around at
will - but can be complex
yx yx
![Page 27: IWM 14](https://reader035.fdocuments.us/reader035/viewer/2022070423/568167da550346895ddd37a8/html5/thumbnails/27.jpg)
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
![Page 28: IWM 14](https://reader035.fdocuments.us/reader035/viewer/2022070423/568167da550346895ddd37a8/html5/thumbnails/28.jpg)
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.
![Page 29: IWM 14](https://reader035.fdocuments.us/reader035/viewer/2022070423/568167da550346895ddd37a8/html5/thumbnails/29.jpg)
Global systems
Site wide system, normally with main sections, referenced on every page via a navigation bar with buttons or tabs
![Page 30: IWM 14](https://reader035.fdocuments.us/reader035/viewer/2022070423/568167da550346895ddd37a8/html5/thumbnails/30.jpg)
Explicit architectureArchitecture 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
![Page 31: IWM 14](https://reader035.fdocuments.us/reader035/viewer/2022070423/568167da550346895ddd37a8/html5/thumbnails/31.jpg)
Headers & footers
![Page 32: IWM 14](https://reader035.fdocuments.us/reader035/viewer/2022070423/568167da550346895ddd37a8/html5/thumbnails/32.jpg)
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.
![Page 33: IWM 14](https://reader035.fdocuments.us/reader035/viewer/2022070423/568167da550346895ddd37a8/html5/thumbnails/33.jpg)
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
![Page 34: IWM 14](https://reader035.fdocuments.us/reader035/viewer/2022070423/568167da550346895ddd37a8/html5/thumbnails/34.jpg)
Supplemental navigation elements Table of contents Index Site Map Guided tour Site search
![Page 35: IWM 14](https://reader035.fdocuments.us/reader035/viewer/2022070423/568167da550346895ddd37a8/html5/thumbnails/35.jpg)
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
![Page 36: IWM 14](https://reader035.fdocuments.us/reader035/viewer/2022070423/568167da550346895ddd37a8/html5/thumbnails/36.jpg)
Supplemental Navigation FacilitiesGuided 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.
![Page 37: IWM 14](https://reader035.fdocuments.us/reader035/viewer/2022070423/568167da550346895ddd37a8/html5/thumbnails/37.jpg)
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
![Page 38: IWM 14](https://reader035.fdocuments.us/reader035/viewer/2022070423/568167da550346895ddd37a8/html5/thumbnails/38.jpg)