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