6 navigation and information architecture
Download
1 / 17

6. Navigation and Information Architecture - PowerPoint PPT Presentation


  • 77 Views
  • Uploaded on

6. Navigation and Information Architecture. Navigering og sidestruktur. 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.

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about ' 6. Navigation and Information Architecture' - julio


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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
6 navigation and information architecture

6.Navigation and Information Architecture

Navigering og sidestruktur


Vi nsker
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


Kriteriene for suksess
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


Viktig
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


F lg konvensjonene
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


Eksempel
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


Mini ving
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”


Navigasjon
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


Stabilitet i en forvirrende verden
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)


Funksjonalitet i sentrum
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


Unng redundans
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


Spesifikke linker
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” ?)


Dropdown menyer
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


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


Er det klikkbart
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


Direkte tilgang fra hjemmesiden
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)


Web sider
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/


ad