6. Navigation and Information Architecture

1. 6.Navigation and Information Architecture Navigering og sidestruktur

2. Vi ønsker • Godt strukturerte sider • Klare linker videre • Oversiktlighet • Da finner vi fram til det vi trenger • men, dette er applikasjons- og brukerorientert og det er ikke så enkelt å gi generelle råd her

3. Kriteriene for suksess • Du vet du har en god sidestruktur når: • sidene blir brukt • brukerne ikke klager over at de ikke finner fram • når de ikke lengre kommenterer sidestrukturen • Det er vår jobb, som utviklere, å bry oss om struktur

4. Viktig • Mange finner en side ved hjelp av søkemotoren. • Understøtt Google og andre. • Denne siden blir da inngangsdøren for brukeren • Fortell hvor du er kommet, fortell hva som tilbys – fang kunden, skap interesse • Gode linker videre

5. Følg konvensjonene • Det er enklest å lage en vellykket site om du gir brukerne det de forventer • Når de finner det de leter etter, når de finner det der de forventer • Intuitivitet er ingen selvfølge! • Din måte å se verden på kan være forskjellig fra brukerens

6. Eksempel • Tidligere organiserte en ofte Web-sidene ut fra sin egen organisasjonsstruktur (fakulteter, institutter, avdelinger,…), men de fleste innser at dette ikke er fornuftig. • Hvorfor? Vanligvis vil ikke brukeren kjenne til den interne strukturen • Forsøke å se verden fra brukerens synspunkt • Lytt til brukerne, ta de med på råd,… • Test for å se om du har klart dette

7. Miniøving • Skal vi presentere produkter ut fra funksjon eller ut fra merkenavn? • Der merkenavn er lite relevant (f.eks. når vi skal selge konvolutter) organiserer vi ut fra funksjon (størrelse, farge, m.m) • Der merkenavn er meget relevant (f.eks. parfyme) bruker vi det (Chanel, Boss, …) • Ellers (kanskje også i tilfellene over) organiserer vi ut fra begge deler, men lar det mest sentrale være ”default”

8. Navigasjon • Konsistens er viktig, da kan brukerne ta med seg erfaringer fra en side til den neste • Minimalt med tid går med på å lete i menyene, brukeren kan konsentrere seg om innholdet på siden • Problem nå en site er satt sammen av flere site (avdelinger, andre selskaper, andre funksjoner) • Gode eksempler www.pixar.com, www.himolde.no

9. Stabilitet i en forvirrende verden • Brukeren går fra side til side • Da er det lett å miste oversikten • Skap stabilitet: • Beholde overordnet design • Beholde menystruktur (fast del øverst eller til venstre) • En sentral side som en kan gå tilbake til (f.eks. listen over biler i Finn)

10. Funksjonalitet i sentrum • En Web-side er et brukergrensesnitt • Men det er fristende å lage noe nytt, annerledes og flott • Greit om en kan kombinere dette med god funksjonalitet, men ofte ofres funksjonaliteten • Godt eksempel: www.gucci.com, god kombinasjon av design og funksjonalitet • Dårlig før, bedre nå: www.wynnlasvegas.com

11. Unngå redundans • Ofte lager vi ”både-og” løsninger • Lærebokforfatterne advarer mot dette: • Dupliserte kategorier og menyer kompliserer sidene • Brukerne jobber med å forstå forskjellene (som kanskje ikke er der) • Sannsynligheten for at brukerne ser en link minker med det antall kopier vi har på siden • Men, har vi en alfabetisk meny må vi sette inn synonymer! • Vi må godta synonymer for søking! • www.usps.comwww.nav.no

12. Spesifikke linker • Klare link-beskrivelser (”lønnskonto” eller ”brukskonto” er bedre enn ”postbankens leve”) • Optimaliser for scanning: • korte navn • sentralt ord til venstre • unngå generiske navn (”les mer” ?)

13. Dropdown menyer • Fordel: Sparer skjermplass • Ulempe: Ikke synlig før klikk eller ”mouseover” • Lange lister kan med fordel presenteres som vanlige linker • Menyer bør være korte (ellers havner cursor lett utenfor menyområdet) • Faste menyer (lister) kan være lengre

14. Flernivå menyer • Se www.himolde.no (forskning -> forskningsområder) • Ikke mer enn to nivåer • Få alternativer i hver meny • Vanskelig musbruk (laptop) • Men hvorfor ikke gi en ny side, der du sier litt om kategorien og gir eksplisitte linker videre.

15. Er det klikkbart? • Åpenbare, godt synlige linker • Brukerne blir forvirret om de ikke ser hva som er klikkbart • Blått innbyr til klikking, men også andre farger som skiller seg ut fra siden • Knapper innbyr til klikking

16. Direkte tilgang fra hjemmesiden • Direkte tilgang fra hjemmesiden til sentrale sider • Det kan være for: • Et nytt produkt • En ny versjon av et produkt • En viktig nyhet • En viktig beskjed • Det må være noe som er aktuelt for en god andel av de som kommer inn på siden • Begrenset antall (dynamisk)

17. Web-sider: • www.himolde.no • www.molde.kommune.no • http://www.visitnorway.com/ • http://www.politi.no/ • http://www.oslo.kommune.no/ • http://www.billettluka.no/moldekino/ • http://www.ringnes.no/