Usability for utviklere

1. urbandictionary.com
low-hanging fruit:
• Targets or goals which are easily achievable and
which do not require a lot of effort
• Easiest tasks of the day
• Male with low-hanging fruit (nuts, balls, testes,
etc..)

2. Hva er en lavthengende frukt?
Fordeler:
Enkel å få tak i
Enkel å forholde seg til
Modne og gode 
Ulemper:
Kvalitet kan variere
Du trenger egentlig en grønnsak
….når de blir modne så faller de ned
Risiko:
Noen ganger trenger du noe mer avansert enn et
frukttre

3. Hjernestorm i frukthagen
• Målgrupperettet innhold + funksjoner
• White-space
• Kontrast/ fargebruk
• Størrelser
• Grid
• Typografi
• Skjema
• Bildebruk/ ikoner/ hjelpegrafikk
• Linker/ knapper/ tydelig klikkbare soner
• Universell tilgjengelighet
• Vaner og konvensjoner
• Riktige funksjoner
• Tilbakemeldinger fra systemet
• Innholdsmengde per seksjon/ struktur på innhold

4. Sett brukeren i sentrum
• De fleste ønsker å lage løsninger slik brukerne
vil ha dem og har behov for
- svært få klarer det…
• Observer
• Still spørsmål
• Lytt
• Observer

5. Prosjekt! Spec og målgruppe
• Finn ut hva slags innhold løsningen skal ha
FØR du lager noe
• Hva er relevant for målgruppen?
• Hva har målgruppen behov for?
• Ha disse spørsmålene/ svarene i bakhodet når
du fortsetter
• SPØR MÅLGRUPPEN

6. Utviklers fargepalett

7. Designerutvikler?
• Primærfarger - RGB. Sekundærfarger og
Tertiærfarger.
• Kalde og varme farger
• Komplementærfarger står rett overfor
hverandre i fargesirkelen og passer godt
sammen
• Fargekontraster:
– lys/mørk kontrast, kald/varm kontrast, komplementærkontrast,
simultankontrast, kvalitetskontrast, kvantitetskontrast og
egenkontrast.

8. Basis fargeteori
• Fargehjulet
• Harmoni
• Komplementærfarger
• Kontekst (kontrast)
• Symbolikk og følelser

9. Lesbarhet
• Test kontraster i en kontrastkalkulator
– Ikke sikt mot laveste godkjente kontrast
– Sikt mot så god kontrast og lesbarhet som mulig
– Unngå mye grå tekst på grå bakgrunn

11. White-space, kort fortalt
• Avstanden mellom elementer i en komposisjon
• Gruppering av elementer som hører naturlig
sammen.
• Mer whitespace = oversiktelig og lukseriøst
• Mindre whitespace = rotete og billig

12. Luftige, oversiktlige og
brukervennlige nettsteder
med en riktig mengde
white-space

13. Fontstørrelse
• Bruk en fontstørrelse som er stor nok for dem
som skal lese teksten.
– Test og observer
• Ulike enheter kan kreve ulike fontstørrelser.
• Viktige funksjoner og beskrivelser må blåses
opp slik at de får oppmerksomhet.
• 90 % bruker for liten fontstørrelse
– Opp med størrelsen, kutt innhold for å få plass

14. Linjeavstand = 150% av brødtekst
Optimal linjeavstand avhenger av medium, fonttype og kontekst.
Men tommelfingerregelen sier at linjehøyde skal være mellom 140-160% av
størrelsen på brødtekst.
Mer om web typografi: http://alistapart.com/article/on-web-typography

15. Lengde på tekstkolonner
Generelle retningslinjer:
– 12 ord per linje
– Rundt 50-60 tegn
• Maks 75 tegn inkl. mellomrom
Generelle retningslinjer: 12 ord per linje. Rundt 50-60 tegn. Maks 75 tegn inkl. mellomrom.
Anbefalt lesning: http://ia.net/blog/100e2r

16. Hvorfor dummytekst ikke skaper verdi

17. Hvorfor dummytekst ikke skaper verdi

18. Hvorfor dummytekst ikke skaper verdi

21. Ikoner
- Bruk gjerne ikoner som støtteelementer til menyer, lister etc.
- Følg konvensjoner (kreative toalettskilt er ikke morsomt!)
- Bruk ikoner som kunden/ brukerne kjenner
- Benytt et profesjonelt ikonsett hvor alle ikoner er av samme stilart

22. Kort om fonter

23. Nye utfordringer.
1993 2003 2013

24. Design for pølsefingre!
….plansystemer…tilsynssystemer…kalkulatorer…innspeksjonsverktøy…

25. Plasser elementer på en grid

26. Plasser elementer på en grid

27. Det finnes regler
og guider for alt…

28. …det gylne snitt!

29. Test-test-test
• Det kan ikke sies nok…

30. Flyt og forståelse
• La brukerne komme til målet på en intuitiv
måte (her må du brukerteste)
• Bruk begrep som målgruppen kjenner
• Ikke lag løsningen for avansert
Børge har laget beskrivelse av dagens arbeidsflyt og anbefalt arbeidsflyt

31. Informasjonsarkitektur
• Hva er løsningens hovedinnhold?
– Lag et innholdshierarki i stikkordsform
• Bruker du ekte tekst vet du hvor mye plass du
trenger. Ikke bruk dummytekst.
• Ref. summer of code 2013

32. Prototype og brukertest
• Lag en ikke-avansert prototype som beskriver
hvordan løsningen kan komme til å se ut og fungere
• Brukertest (live) prototypen på målgruppen og gjør
nødvendige endringer
• Lag eventuelt en mer detaljert prototype.
• Prototypen har som formål å holde deg i ørene slik at
spec følges

33. Hvor går grensen?
Lavthengende frukt i naboens hage!

34. Skjema
• Hva er gevinsten med usability i skjemadesign?
– Brukeren oppfatter hva som skal fylles ut (mestring)
– Mindre feil i utfyllingen
– Tidsbesparelse

35. Warning!
• Dette er grunnleggende regler som nesten
alltid blir tilpasset
• Målet er å få deg som utvikler til å huske på,
og reflektere over usability
• Din nydelige kode blir en suksess når
målgruppen adopterer løsningen
• Utvikler + usability = killerkombo!

36. Ekspertvurdering
Er du i tvil om du har laget noe bra?
Ikke spør din nærmeste kollega - spør din mor, venn, Jarle, kjæreste, bror…

37. Se på andre!
De store kan være gode forbilder
Finn dine favoritter

38. https://www.youtube.com/watch?v=D7hkukXrPx0&feature=player_detailpage