usability for utviklere
DESCRIPTION
Usability for utviklereTRANSCRIPT
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..)
Hva er en lavthengende frukt?
Fordeler:Enkel å få tak iEnkel å forholde seg tilModne og gode
Ulemper:Kvalitet kan variereDu 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
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
Sett brukeren i sentrum
• De fleste ønsker å lage løsninger slik brukernevil ha dem og har behov for
- svært få klarer det…
• Observer
• Still spørsmål
• Lytt
• Observer
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
Utviklers fargepalett
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.
Basis fargeteori
• Fargehjulet
• Harmoni
• Komplementærfarger
• Kontekst (kontrast)
• Symbolikk og følelser
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
White-space, kort fortalt
• Avstanden mellom elementer i en komposisjon
• Gruppering av elementer som hører naturligsammen.
• Mer whitespace = oversiktelig og lukseriøst
• Mindre whitespace = rotete og billig
Luftige, oversiktlige og brukervennlige nettsteder med en riktig mengde white-space
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
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% avstørrelsen på brødtekst.
Mer om web typografi: http://alistapart.com/article/on-web-typography
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
Hvorfor dummytekst ikke skaper verdi
Hvorfor dummytekst ikke skaper verdi
Hvorfor dummytekst ikke skaper verdi
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
Kort om fonter
Nye utfordringer.
1993 2003 2013
Design for pølsefingre!
….plansystemer…tilsynssystemer…kalkulatorer…innspeksjonsverktøy…
Plasser elementer på en grid
Plasser elementer på en grid
Det finnes regler og guider for alt…
…det gylne snitt!
Test-test-test
• Det kan ikke sies nok…
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
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
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
Hvor går grensen?
Lavthengende frukt i naboens hage!
Skjema
• Hva er gevinsten med usability i skjemadesign?
– Brukeren oppfatter hva som skal fylles ut (mestring)
– Mindre feil i utfyllingen
– Tidsbesparelse
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!
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…
Se på andre!De store kan være gode forbilderFinn dine favoritter
https://www.youtube.com/watch?v=D7hkukXrPx0&feature=player_detailpage