HCI and

Hypermedia/WWW
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.”

August 10, 2021 Human-Computer Interaction 2

The World Wide Web
World Wide Web

Electronic pathway
Node (Hyperlink) Node
(Page) (Page)

Node
(Page)

Node Node
(Page) (Page)

August 10, 2021 Human-Computer Interaction 3

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

August 10, 2021 Human-Computer Interaction 4

Web Navigation Guidelines
Farkas and Farkas:
 Designing an effective link
 Managing large numbers of links
 Providing orientation information
 Augmenting link-to-link navigation

August 10, 2021 Human-Computer Interaction 5

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

August 10, 2021 Human-Computer Interaction 6

Designing An Effective Link

Make Links Noticeable (Cont.)

August 10, 2021 Human-Computer Interaction 7

Designing An Effective Link

Make 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

August 10, 2021 Human-Computer Interaction 8

Designing An Effective Link

Clearly Indicate Destination

 Text Links
 Use short phrases if possible
 Use augmentations or pop-up explanations
for lengthy phrases

August 10, 2021 Human-Computer Interaction 9

Designing An Effective Link

Clearly Indicate Destination (Cont.)

August 10, 2021 Human-Computer Interaction 10

Designing An Effective Link

Clearly 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/

August 10, 2021 Human-Computer Interaction 11

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

August 10, 2021 Human-Computer Interaction 12

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.

August 10, 2021 Human-Computer Interaction 13

Managing Large Numbers of Links
Grouping Links
Grouping a large number of links under
headings reduces the amount of scanning.

August 10, 2021 Human-Computer Interaction 14

Managing Large Numbers of Links

Primary Links
 Primary Links
 Define the main hierarchical structure
 Example:

August 10, 2021 Human-Computer Interaction 15

Managing Large Numbers of Links

Secondary Links
 Shortcut Links
 Augment primary links
 Move to lower-level nodes

 Example:

August 10, 2021 Human-Computer Interaction 16

Managing Large Numbers of Links

Secondary Links (Cont.)

 Systematic Secondary Links
 Connect a group of closely related nodes
 Example:

August 10, 2021 Human-Computer Interaction 17

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:

August 10, 2021 Human-Computer Interaction 18

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: http://antpac.lib.uci.edu/

August 10, 2021 Human-Computer Interaction 19

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.

August 10, 2021 Human-Computer Interaction 20

Providing Orientation Information

Provide Information on Home Page

 Provide identification http://www.gnu.org
information – site name,
general purpose, sponsor
 Must be highly http://www.grace.com/
conspicuous – brief and
clear
 Use “identity elements” –
banners, logos, headings

August 10, 2021 Human-Computer Interaction 21

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:
 http://www.google.com/

August 10, 2021 Human-Computer Interaction 22

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:
 http://disney.go.com/home/today/index.html

August 10, 2021 Human-Computer Interaction 23

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: http://www.sfgate.com/index/

August 10, 2021 Human-Computer Interaction 24

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: 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

August 10, 2021 Human-Computer Interaction 25