Yggdrasil, 2010 - Yggdrasil er Norges største konferanse om brukeropplevelser, brukervennlighet og kommunikasjon.

1. Rike, men brukbare?
En analyse av rike brukergrensesnitt på norske nettsteder.

2. Prinsipper for rik interaksjon
1. Vær direkte
2. Gjør opplevelsen lett
3. Bli på siden
4. Gi invitasjon
5. Bruk overganger
Bill Scott Theresa Neill
6. Reager umiddelbart

3. Teknikker (patterns)
Fokusere på:
• Kontekstavhengige verktøy
• Paneler (Inlays)
• Foredling av søk

4. Nettsteder

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

6. Testbrukere
• 3 menn
• 3 kvinner
• Alder: 31 – 68
• Netterfaring: Middels til høy
”Hjemme hos” - besøk

7. 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: Hover
Toggle
Sekundære menyer (høyreklikk)

8. Kontekstavhengige verktøy
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?

9. Sekundære menyer – gulesider.no
Resultat
Alle fikk definert startpunkt
Ingen benyttet høyreklikkvalg

10. Sekundære menyer – gulesider.no
Funn
• 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?

11. Kontekstavhengige verktøy
Tilsvarende nettsteder – tilsvarende
teknikker
Gå til Henrik Ibsens gate 50 i Oslo. Kan du finne mer
informasjon om hva som befinner seg på 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
Gå til Karl Johans gate 15. Kan du finne kartkoordinatene for
denne adressen?
• Alle finner valget i meny som vises med en gang

12. 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

13. Kontekstavhengige verktøy – eks. Jira
Hvordan det bør gjøres

14. Kontekstavhengige verktøy – eks. google Docs

15. 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

16. Bli på siden
Teknikker
• Overlays
eks: lightbox
• Inlays
-paneler på siden

17. 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?

18. Inlays – matprat.no
Resultat
Alle fant en eller flere oppskrifter som matchet oppgaven.
2 av 6 benyttet panelet for å få forslag

19. Inlays – matprat.no
Funn
• 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?
På oppfordring:
Ble funnet men mange felter gjør det omstendelig å bruke.

20. Inlays – matprat.no
Tilsvarende nettsted – tilsvarende
teknikk
Du skal lage middag av kylling og ønsker at det ikke skal ta mer
enn 30 minutter. Kan du finne forslag til ulike oppskrifter?
Alle fant.
Funn:
6 av 6. • ”Så oversiktlig, som et arkiv”
• Inngang plassert fordelaktig
• Now you see me, now you don’t
• Ajaxfiendtlig

21. 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.

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

23. Reager umiddelbart
Teknikker
• Autofullfør
• Foreslå ”live” og ”live” søk
• Progressive disclosure
• Foredling av søk
m.m.

24. 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.

25. Slider – osl.no
Resultat
Alle fant riktige tider
Ingen.

26. Slider – osl.no
Funn
• Ingen bruker slider.
• 1 klikker seg bortover på aksen men drar
ikke
• Resten bruker andre valg for søk og
filtrering

27. Slider – osl.no
Tilsvarende nettsteder – ”gamle”
teknikker
Alle fant riktige tider
Alle fant riktige tider

28. Slider – osl.no
Hvordan det bør gjøres

29. Reager umiddelbart - Slider
Tilsvarende teknikk
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.

30. Reager umiddelbart - Slider
Hvordan det bør gjøres

31. 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

32. Litt inspirasjon...

33. Oppsummering – Rike, men brukbare?
f• ”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!