Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

Usability for utviklere

525 vues

Publié le

Usability for utviklere

Publié dans : Design
  • Soyez le premier à commenter

Usability for utviklere

  1. 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. 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. 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. 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. 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. 6. Utviklers fargepalett
  7. 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. 8. Basis fargeteori • Fargehjulet • Harmoni • Komplementærfarger • Kontekst (kontrast) • Symbolikk og følelser
  9. 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
  10. 10. 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
  11. 11. Luftige, oversiktlige og brukervennlige nettsteder med en riktig mengde white-space
  12. 12. 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
  13. 13. 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
  14. 14. 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
  15. 15. Hvorfor dummytekst ikke skaper verdi
  16. 16. Hvorfor dummytekst ikke skaper verdi
  17. 17. Hvorfor dummytekst ikke skaper verdi
  18. 18. 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
  19. 19. Kort om fonter
  20. 20. Nye utfordringer. 1993 2003 2013
  21. 21. Design for pølsefingre! ….plansystemer…tilsynssystemer…kalkulatorer…innspeksjonsverktøy…
  22. 22. Plasser elementer på en grid
  23. 23. Plasser elementer på en grid
  24. 24. Det finnes regler og guider for alt…
  25. 25. …det gylne snitt!
  26. 26. Test-test-test • Det kan ikke sies nok…
  27. 27. 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
  28. 28. 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
  29. 29. 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
  30. 30. Hvor går grensen? Lavthengende frukt i naboens hage!
  31. 31. Skjema • Hva er gevinsten med usability i skjemadesign? – Brukeren oppfatter hva som skal fylles ut (mestring) – Mindre feil i utfyllingen – Tidsbesparelse
  32. 32. 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!
  33. 33. 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…
  34. 34. Se på andre! De store kan være gode forbilder Finn dine favoritter
  35. 35. https://www.youtube.com/watch?v=D7hkukXrPx0&feature=player_detailpage

×