21
PBA Front-End Programming Links and Navigation
PBA Front-End Programming
Links and Navigation
Links and navigation
• Most websites cannot be contained within a single web page
• Information Architect should– Decide how to split content
across multiple pages– Decide how to navigate
between the pages
Links and navigation
• Fundamental categories of site structure– Linear– Hierarchical (shallow)– Hierarchical (deep)– …and combinations
Links and navigation
• Linear structure – the user is ”forced” to visit the pages in a certain order
• Well suited for – Instructions / Guides– Surveys / Questionnaires– Ordering and Payment– Subscription– …?
Page 1
Page 2
Page 3
Page 4
Links and navigation
• Hierarchical structure (shallow)
• Can navigate to many pages from a given page
• Distance from start page to ”end” pages is low (< 3)
• Well suited for small websites (< 20 pages)
S
A.1
A.2
A.3
A.4
B.2
B.1
Links and navigation
• Hierarchical structure (deep)• No fundamental difference -
navigate to many pages from a given page
• Distance from start page to ”end” pages can be high
• Breath vs. depth…
Links and navigation
• How to organise a website with 1000+ pages…
• Very ”wide”– Few clicks to end pages– Many links on each page
• Very ”deep”– Many clicks to end pages– Few links on each page
Links and navigation
• …and combinations!• Many sites willl need to
use both types of organi-sation
• Web-shop– Presentation (hierarchical)– Sales (linear)
Links and navigation
• Links in general serve two purposes:– Navigation within the website– Links to other, external websites
Links and navigation
• Why link to other websites?• Unless that is the specific purpose of the
website, limit the number of external links– Users leave your website (will they come back?)– No control over the linked-to website (form,
content,…)• Integrate relevant material into your own
website, if possible (and legal)
Links and navigation
• How can we ”serve” links to the user…?– Classic, explicit link (www.cnn.com)– Text-anchored link (read about tigers here)– Part of a navigation structure, e.g. menu– As a graphic or using other types of metaphors
Links and navigation
• Advice on text links– Avoid too many text links in bodies of text – move
to the end of section if possible– Make sure links stand out (e.g.like this)– Make sure that visited links are distinguishable
(e.g. like this)– Avoid writing sentences around links:• Bad: Click here for more information• Good: The tiger lives in the jungle
Links and navigation
• Menus is a very common way to organise a set of ”similar” links
• Most users are used to menus from various software products
• Are menus old-school…?
Links and navigation
• Where do we put a menu…?
?
Best for reading…
Normal in software…
Links and navigation
• What is a metaphor?• One explanation: A metaphor is defined as a
figure of speech, or something that we use to replace normal words in order to help others understand or enjoy our message
• In the context of a website: Wrapping a link into e.g. a graphic, to make the functionality of the link more intuitive
Links and navigation
• Example: What will the below buttons do, on a website with linear structure…?
Links and navigation
• Why use metaphors…?– More intuitive– Usability– Align navigation with
general visual design
Links and navigation
• Find your local weather forecast…
Links and navigation
• What will a 5-year old prefer…?
…or text links?
Links and navigation
• Using metaphors, we assume that the user actually understands the metaphor…– Law of Isomorphism– Culture, background, …
• Usability tips– Provide helpful text in mouse-over tooltip– Link should react to mouse-over
Links and navigation
