Download
pba front end programming n.
Skip this Video
Loading SlideShow in 5 Seconds..
PBA Front-End Programming PowerPoint Presentation
Download Presentation
PBA Front-End Programming

PBA Front-End Programming

113 Views Download Presentation
Download Presentation

PBA Front-End Programming

- - - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript

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

  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) • Text-anchored link (read about tigers here) • 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) • 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

  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