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.”
December 31, 2018
Human-Computer Interaction

3. Human-Computer Interaction
The World Wide Web
World Wide Web
Node
(Page)
Electronic pathway
(Hyperlink)
December 31, 2018
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
December 31, 2018
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
December 31, 2018
Human-Computer Interaction

6. Designing An Effective Link Make 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
December 31, 2018
Human-Computer Interaction

7. Designing An Effective Link Make Links Noticeable (Cont.)
December 31, 2018
Human-Computer Interaction

8. Designing An Effective Link Make Links Noticeable (cont.)
Positions
Do’s:
Positioning by importance
Don’ts:
Cluttered pages (
Below scroll line – minimize scrolling, use visual cues
December 31, 2018
Human-Computer Interaction

9. Designing An Effective Link Clearly Indicate Destination
Text Links
Use short phrases if possible
Use augmentations or pop-up explanations for lengthy phrases
December 31, 2018
Human-Computer Interaction

10. Designing An Effective Link Clearly Indicate Destination (Cont.)
December 31, 2018
Human-Computer Interaction

11. Designing An Effective Link Clearly Indicate Destination (Cont.)
Graphics Links
Use rollover labels (ALT tags)
Use text labels
Examples:
Rollover labels:
Text labels:
December 31, 2018
Human-Computer Interaction

12. Designing An Effective Link Clearly 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
December 31, 2018
Human-Computer Interaction

13. Managing Large Numbers of Links Breadth 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.
December 31, 2018
Human-Computer Interaction

14. Managing Large Numbers of Links Grouping Links
Grouping a large number of links under headings reduces the amount of scanning.
December 31, 2018
Human-Computer Interaction

15. Managing Large Numbers of Links Primary Links
Define the main hierarchical structure
Example:
December 31, 2018
Human-Computer Interaction

16. Managing Large Numbers of Links Secondary Links
Shortcut Links
Augment primary links
Move to lower-level nodes
Example:
December 31, 2018
Human-Computer Interaction

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

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

19. Managing Large Numbers of Links Convergence 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:
December 31, 2018
Human-Computer Interaction

20. Managing Large Numbers of Links Conceptual 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.
December 31, 2018
Human-Computer Interaction

21. Providing Orientation Information Provide 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
December 31, 2018
Human-Computer Interaction

22. Providing Orientation Information Provide 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:
December 31, 2018
Human-Computer Interaction

23. Augmenting Link-to-Link Navigation Site 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:
December 31, 2018
Human-Computer Interaction

24. Augmenting Link-to-Link Navigation Search 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:
December 31, 2018
Human-Computer Interaction

25. Augmenting Link-to-Link Navigation Links 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:
If the site has subsites, provide links from subsite pages
To the subsite home page.
To the main Web site home page.
Example:
December 31, 2018
Human-Computer Interaction