HCI and Hypermedia/WWW

1. HCI and Hypermedia/WWW By Grace Zhang Cecilia Phuong Do For ICS205

2. The Navigation Metaphor • Human beings perceive Web use as navigation. • Physically moving from page to page • Virtually performs real-world tasks • This metaphor is referred to as the “navigation paradigm.” Human-Computer Interaction

3. Electronic pathway (Hyperlink) Node (Page) Node (Page) Node (Page) Node (Page) Node (Page) The World Wide Web World Wide Web Human-Computer Interaction

4. Information Structures • In hypertext theory, the arrangements of nodes and links are called information structures. • The hierarchy is the most prevalent structure, because it is a highly usable combination of order and navigational freedom. Hierarchy Human-Computer Interaction

5. Web Navigation Guidelines Farkas and Farkas: • Designing an effective link • Managing large numbers of links • Providing orientation information • Augmenting link-to-link navigation Human-Computer Interaction

6. Designing An Effective LinkMake Links Noticeable • Styles • Do’s: • Underline blue texts (classic cue) • (strong cue) • Show semantic meanings • Use icons • Don'ts: • Non-iconic graphics – must be accompanied by other cues Human-Computer Interaction

7. Designing An Effective LinkMake Links Noticeable (Cont.) Human-Computer Interaction

8. Designing An Effective LinkMake Links Noticeable (cont.) • Positions • Do’s: • Positioning by importance • Don’ts: • Cluttered pages (http://www.paleothea.com/Majors.html) • Below scroll line – minimize scrolling, use visual cues Human-Computer Interaction

9. Designing An Effective LinkClearly Indicate Destination • Text Links • Use short phrases if possible • Use augmentations or pop-up explanations for lengthy phrases Human-Computer Interaction

10. Designing An Effective LinkClearly Indicate Destination (Cont.) Human-Computer Interaction

11. Designing An Effective LinkClearly Indicate Destination (Cont.) • Graphics Links • Use rollover labels (ALT tags) • Use text labels • Examples: • Rollover labels: http://www.dilbert.com/ • Text labels: http://www.canon.com/cdcc/award2002/ Human-Computer Interaction

12. Designing An Effective LinkClearly Indicate Destination (Cont.) • Text links vs. graphics links • Graphics links… • Are more meaningful than text links • Are visually interesting and attractive • Communicate across language barriers • Link Typing • Conveys the relationship between the link’s destination and the current node Human-Computer Interaction

13. Managing Large Numbers of LinksBreadth and Depth • It is better to favor breadth over depth in a hierarchy. • 16 x 16 x 16 is better then 5 x 5 x 5 x 5 x 5. Human-Computer Interaction

14. Managing Large Numbers of LinksGrouping Links • Grouping a large number of links under headings reduces the amount of scanning. Human-Computer Interaction

15. Managing Large Numbers of LinksPrimary Links • Primary Links • Define the main hierarchical structure • Example: Human-Computer Interaction

16. Managing Large Numbers of LinksSecondary Links • Shortcut Links • Augment primary links • Move to lower-level nodes • Example: Human-Computer Interaction

17. Managing Large Numbers of LinksSecondary Links (Cont.) • Systematic Secondary Links • Connect a group of closely related nodes • Example: Human-Computer Interaction

18. Managing Large Numbers of LinksSecondary Links (Cont.) • Associational Links • Call for user’s attention to a relevant node in a distant region of the hierarchy • Example: Human-Computer Interaction

19. Managing Large Numbers of LinksConvergence of Branches • A node can be access from multiple distinct link paths. • Convergence of branches obscures the user’s perception of the fundamental hierarchical structure. • Example: http://antpac.lib.uci.edu/ Human-Computer Interaction

20. Managing Large Numbers of LinksConceptual Information Structure • Web designers must… • Provide navigational freedom. • Enable the user to build a conceptual map of the nodes and links. • Reveal structure on… • Home page. • Lower-level pages. • Examples: navigation bars and columns, multi-level tables of contents, systems of tabs. • Mark current location. Human-Computer Interaction

21. Providing Orientation InformationProvide Information on Home Page • Provide identification information – site name, general purpose, sponsor • Must be highly conspicuous – brief and clear • Use “identity elements” – banners, logos, headings http://www.gnu.org http://www.grace.com/ Human-Computer Interaction

22. Providing Orientation InformationProvide Info on Lower-Level Pages • Maintain site identity • Two roles: • Differentiating among sections of the site • Encouraging the perception of continuity from one page to the next • Use elements – logos and headings • Example: • http://www.google.com/ Human-Computer Interaction

23. Augmenting Link-to-Link NavigationSite Maps • A site map serves as a global view that is equivalent to a city map. It works well for small web sites. • Site maps can support hierarchical structure • Using “You are here” markers on site maps make them more effective. • Example: • http://disney.go.com/home/today/index.html Human-Computer Interaction

24. Augmenting Link-to-Link NavigationSearch Facilities and Indexes • A search facility and an index both provide powerful alternatives to link-to-link navigation. • Search Engines • The search engine interface should be appropriately configured for all users. • Search zones • Boolean operators • Natural language interfaces • Sort search results – chronologically, alphabetically, by priority • Indexes • Give better results than a search facility • Too difficult to maintain • Example: http://www.sfgate.com/index/ Human-Computer Interaction

25. Augmenting Link-to-Link NavigationLinks to Home Page • Provide a link from every page to the home page. • Help keep users from getting lost. • Restart navigation. • Guide users who has followed an external link. • If appropriate, use a corporate logo as a link to the home page. • Example: http://www.google.com/ • If the site has subsites, provide links from subsite pages • To the subsite home page. • To the main Web site home page. • Example: http://disney.go.com/home/today/index.html Human-Computer Interaction