Rike, men brukbare?

En analyse av rike brukergrensesnitt på norske nettsteder.

Prinsipper for rik interaksjon

1. Vær direkte

2. Gjør opplevelsen lett

3. Bli på siden

4. Gi invitasjon

5. Bruk overganger

6. Reager umiddelbart

Bill Scott Theresa Neill

Teknikker (patterns)

Fokusere på:

• Kontekstavhengige verktøy

• Paneler (Inlays)

• Foredling av søk

Nettsteder

Måler etter

Ikke en test av nettstedets generelle brukeropplevelse men av brukskvaliteten knyttet til rike teknikker og gjøremål den støtter.

Testbrukere

• 3 menn

• 3 kvinner

• Alder: 31 – 68

• Netterfaring: Middels til høy

”Hjemme hos” - besøk

Prinsipp: Gjør opplevelsen lett

• Kontekstavhengige verktøy

Knytte funksjonalitet til innhold

Verktøy som alltid er synlig på siden vs aktivering ved handling

Eks: HoverToggleSekundære menyer (høyreklikk)

Sekundære menyer

Nettsted: Gulesider.no

Funksjonalitet:

Definer startsted

for kjørerute

Oppgave:

Finn Storgata 15 i Oslo.Kan du bruke denne adressen som startpunkt for reise?

Kontekstavhengige verktøy

Resultat

Sekundære menyer – gulesider.no

Ingen benyttet høyreklikkvalg

Alle fikk definert startpunkt

Funn

Sekundære menyer – gulesider.no

• Kjent applikasjon - gjør som de pleier (Kjørerute)

• Orienterer seg mot inputfelter og ikke ”outputflaten”

• Ingen leser hint i skrivefelt

På oppfordring om alternative muligheter:

Tool tip skjuler høyreklikkmulighet Trekker oppmerksomhet vekk fra høyreklikkvalg Tool tip gir ingen merverdi. Hva er analysen her?

Tilsvarende nettsteder – tilsvarende teknikker

Kontekstavhengige verktøy

Gå til Henrik Ibsens gate 50 i Oslo. Kan du finne mer informasjon om hva som befinner seg på adressen?

Gå til Karl Johans gate 15. Kan du finne kartkoordinatene for denne adressen?

• Sterkere fokus på outputflate• Ingen finner valget ”Hva er dette?”• Det klikkes på merket for adressen, dog venstreklikk

som eksponerer annen meny.• Ingen høyreklikker, leter i den første som ble

aksessert.• Bruker panelet til venstre for å få mer info

• Alle finner valget i meny som vises med en gang

Kontekstavhengige verktøy- anbefalinger

• Reduser antall ulike verktøy og valg på verktøyene for å minimere støy

• Klarere hint om at det finnes valg. Jfr, dra fokus mot outputflate.

• Vis valg med en gang. Jfr 1881.

Unngå tool tip overkill - bruker skal ikke være avhengig av hover for å finne ut av hva valg betyr

Kontekstavhengige verktøy – eks. Jira

Hvordan det bør gjøres

Kontekstavhengige verktøy – eks. google Docs

Prinsipp: Bli på siden

Reduser unødig og ineffektiv navigasjon ved å holde brukeren i samme skjermbilde

Skape en oppgaveflyt uten avbrudd

Dagens virkelighet: Fortsatt page reload-syken

Teknikker

• Overlays

eks: lightbox

• Inlays

-paneler på siden

Bli på siden

Inlays

Nettsted: matprat.no

Funksjonalitet:

Finne oppskrift

Oppgave:

Du skal lage middag av kylling og ønsker at det ikke skal ta mer enn 30 minutter. Kan du finne forslag til ulike oppskrifter?

Bli på siden

Resultat

Inlays – matprat.no

Alle fant en eller flere oppskrifter som matchet oppgaven.

2 av 6 benyttet panelet for å få forslag

Funn

Inlays – matprat.no

På oppfordring:Ble funnet men mange felter gjør det omstendelig å bruke.

• Flere tror hovedmenyen til venstre er raffinering av søk. Eks: Rask

• Svak relasjon mellom hovedsøket og panelet med utvidet søk - ingen eksponering og hint av raffineringsalternativer for bruker

• ”Utvidet søk” – begrepet gjemmer mer enn stimulerer

• For mange veier til mål?

Tilsvarende nettsted – tilsvarende teknikk

Inlays – matprat.no

Du skal lage middag av kylling og ønsker at det ikke skal ta mer enn 30 minutter. Kan du finne forslag til ulike oppskrifter?

Funn:

• ”Så oversiktlig, som et arkiv”

• Inngang plassert fordelaktig

• Now you see me, now you don’t

• Ajaxfiendtlig

Alle fant.

6 av 6.

Bli på siden - anbefalinger

• Fungerer godt for å bevare kontekst for bruker i en prosess

• Inlays egner seg til å foredle informasjon, endre oppsett ved side o.l

• Vis panel direkte ved første innlasting. Event. hint ved animasjon.

Prinsipp: Reager umiddelbart

...the system should always keep users informed about what is going on, through appropriate feedback within reasonable time.

• Autofullfør

• Foreslå ”live” og ”live” søk

• Progressive disclosure

• Foredling av søk

m.m.

Teknikker

Reager umiddelbart

Slider

Nettsted: osl.no

Funksjonalitet:

Finne flytid

Oppgave:

Du ønsker å finne ut av tidspunktene for dagens fly fra Paris. Finn tidspunkt for landingene.

Reager umiddelbart

Resultat

Slider – osl.no

Alle fant riktige tider

Ingen.

Funn

Slider – osl.no

• Ingen bruker slider.

• 1 klikker seg bortover på aksen men drar ikke

• Resten bruker andre valg for søk og filtrering

Tilsvarende nettsteder – ”gamle” teknikker

Alle fant riktige tider

Alle fant riktige tider

Slider – osl.no

Hvordan det bør gjøres

Slider – osl.no

Tilsvarende teknikk

Reager umiddelbart - Slider

Oppgave:a) Du skal lage middag av laks og den bør være ferdig på 20 minutter. Kan du finne forslag?b) Du ønsker også at det skal være litt sofistikert å lage. Kan du finne forslag?c) Du har fått bedre tid og kan bruke opptil 40 minutter. Kan du finne flere forslag?"

Alle fant en eller annen oppskrift, men kun 3 fant oversikt med flere

1 av 6.

Hvordan det bør gjøres

Reager umiddelbart - Slider

Foredling av søk - anbefalinger

• Sliders oppfattes ”knotete” å bruke

• Sliders egner seg best når det er flere fasetter å filtrere

• Sømløs oppdatering av siden (jfr Din Mat)

• Prioriter ned alternativ interaksjon

Litt inspirasjon...

f

Oppsummering – Rike, men brukbare?

• ”Gammel” interaksjon foretrekkes framfor alternativ rik interaksjon

• Brukere ser ikke merverdi ved å bruke rik interaksjon vs gammel

• Rik interaksjon gjemmes bort – gi hint (prinsipp 4)

• Dårlig og halvveis utførelse - hvis man mener den ”rike” løsningen er best: Favoriser den!