1. PBA Front-End Programming Links and Navigation

2. 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

3. Links and navigation Fundamental types of site structure – Linear – Hierarchical (shallow) – Hierarchical (deep) – …and combinations

4. 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

5. 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) S A.1 A.2 A.3 A.4 B.2 B.1

6. 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…

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

8. Links and navigation …and combinations! Many sites willl need to use both types of organi- sation Web-shop – Presentation (hierarchical) – Sales (linear)

9. Links and navigation Links in general serve two purposes: – Links to other, external websites – Navigation within the website

10. 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

11. Links and navigation How can we ”serve” links to the user…? – Classic, explicit link (www.cnn.com)www.cnn.com – Text-anchored link (read about tigers here)tigers – Part of a navigation structure, e.g. menu – As a graphic or using other types of metaphors

12. 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)this – Make sure that visited links are distinguishable (e.g. like this) – Avoid writing sentences around links: Bad: Click here for more informationClick here Good: The tiger lives in the junglejungle

13. 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…?

14. Links and navigation Where do we put a menu…? ? Best for reading… Normal in software…

15. 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

16. Links and navigation Example: What will the below buttons do, on a website with linear structure…?

17. Links and navigation Why use metaphors…? – More intuitive – Usability – Align navigation with general visual design

18. Links and navigation Find your local weather forecast…

19. Links and navigation What will a 5-year old prefer…? …or text links?

20. 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

21. Links and navigation