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 types 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 (< 10 pages) A.1 B.1 A.2 S B.2 A.3 A.4
Links and navigation • Hierarchical structure (deep) • No fundamental difference - navigate to many pages from a given page • Distance from start page to ”end” pages is 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: • Links to other, external websites • Navigation within the website
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
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 function 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, bckground, … • Usability tips • Provide helpful text i mouse-over tooltip • Link should react to mouse-over