6. Navigation and Information Architecture Navigering og sidestruktur.

Presentasjon om: "6. Navigation and Information Architecture Navigering og sidestruktur."— Utskrift av presentasjonen:

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.nowww.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 funksjonalitetwww.gucci.com  Dårlig før, bedre nå: www.wynnlasvegas.comwww.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.com www.nav.no 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)www.himolde.no  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.himolde.no  www.molde.kommune.no www.molde.kommune.no  http://www.visitnorway.com/ http://www.visitnorway.com/  http://www.politi.no/ http://www.politi.no/  http://www.oslo.kommune.no/ http://www.oslo.kommune.no/  http://www.billettluka.no/moldekino/ http://www.billettluka.no/moldekino/  http://www.ringnes.no/ http://www.ringnes.no/