1 / 21

PBA Front-End Programming

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.

chava
Télécharger la présentation

PBA Front-End Programming

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

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

More Related