I n t r o d uk s jo n

Webløft 2015av Kristin Kokkersvold, Studio Netting

Interaksjonsdesign

• - Merennblogg

UX

Interaksjonsdesigneller UX-design, informasjonsarkitektur, GUI-design, usability, webdesign,

brukskvalitet, informasjonsdesign, digital design, app-design…?

UX-designer

User Experience Designer /ˈju:zǝ(r) ikˈspıǝrıǝns dıˈzaınǝ(r)/ noun [C], a person who designs user experiencesUX-designer /ˈju:ˌeks dıˈzaınǝ(r)/ abbrev. User Experience Designer

ProsessUX-design fra analyse til lansering

Overordnet prosess

Personas

Brukeroppgaver

Visjon og målUtvikling

Wireframes

Universell utforming

Brukertest

Skisser

Prototype

Prioritering

MålsetningerHvorfor skal biblioteket være på nett?

Mål og KPIer

• Visjon• Overordnete mål• Konkrete mål• KPIer

*KPI – Key Performance Indikator

Eksempel: målkortHovedmål Delmål Relatertbrukeroppgave KPISelgeklærØke omsetning

VeiledetilriktigplaggGjennomføresalgetpånettSelgeflereplaggperkunde

Få studentertilåspisesunneremat

Tilgjengeliginformasjonommatvarerssunnhet

Målgrupper og brukereHvem er brukerne deres, og hva trenger de?

Hvem er brukerne?

• Målgrupper• Hvem bruker biblioteket mest?• Hvem bruker bibliotekets nettsider?• Hvem ønsker dere å nå?

Personas

• Arketyper på brukere• Minst en persona per målgruppe

Personas: et eksempel

Hva trenger brukerne?

• Statistikk på dagens nettsted• Spør dem som jobber i skranken og ute i

biblioteket• Bruk personasene• Spør brukerne!

Drammen bibliotek

Drammen bibliotek

Drammen bibliotek

• Søke etter bøker• Fornye lån• Sjekke åpningstider• Reservere bøker/venteliste• Se hva som skjer på biblioteket• Søke etter filmer• Lesetips• Låne e-bøker• Dato/tidspunkt for et arrangement• Søke etter musikk

Organisasjonensmål Brukeroppgaver

Pull vs. push

Hold det enkelt

• Ved å løse topp fem løser du flesteparten av brukerenes oppgaver

• Forsiden er ikke den viktigste siden. Identifiser kjernesider.

• Trenger brukerne deres nyheter?

Målkortet, igjenHovedmål Delmål Relatertbrukeroppgave KPISelgeklær Veiledetilriktigplagg

GjennomføresalgetpånettSelgeflereperkunde

”Finnenoesompassertilanledningen””Kjøpeklær””Finnerettstørrelse”

Øke antall salg med10%på nettØke verdien påhandlekurven med25%

Få ungdomtilåspisesunneremat

Tilgjengeliginformasjonommatvarerssunnhet

”Finneutomhvorbrajegspiser””Fortelleandreatjegharsluttetåspisejunk”

30.000 bruk påmatkalkulator permndØke delinger av matplanermed50%til sosialemedier

Effektive verktøyRaske verktøy og workshops

Post-it

Wireframes

BrukertestS t a r t s å t i d l i g s o m m u l i g

Test på virkelige brukere

• Geriljatesting• Online-testing• Brukertest i lab

Visuell utforming

Fargevalg, fonter og utforming har mye å si for brukeropplevelsen

Fargevalg

Typografi og lesbarhet

Kilde: Unge og voksne med lese- og skrivevansker, 2008 (Gabrielsen, Heber og Høien)http://www.dysleksiforbundet.no/no/dysleksi/Statistikk.9UFRjM5Q.ips

Responsivt design: i nettleseren

• Fordeler: • Får raskt en protype som kan brukertestes• Sparer tid• Mer realistisk design

• Ulemper: • Designer må kunne kode HTML og CSS

§Tilgjengelighet

L o v e n o m u n i v e r s e l l u t f o r m i n g o g W C A G 2 . 0 A A

http://uu.difi.no/

Innhold” C o n t e n t i s k i n g ”

Ti huskeregler

1. Sett målbare mål2. Vit hvem du lager nettsider for3. Finn ut hva brukerne trenger. Spør dem.4. Prioriter5. Bruk effektive skisse og protoypingsverktøy6. Test7. Design i nettleseren8. Tilgjengelighet9. Lag godt og relevant innhold10. Bruk KPIene. Forbedre, forbedre, forbedre.

”Don’t make me think”S t e v e K r u g

Verktøy og ressurser• Don’t make me think av Steve Krug• Wireframes-program: Balsamiq eller Omnigraffle• Utvikler-verktøyet i nettleseren• Universell utforming: http://uu.difi.no

• Slik skriver du webtekster som fenger http://masterbloggen.no/gjest/slik-skriver-du-webtekster-som-fenger/

• Effektiv nettskriving av Ove Dalen• Typografi først http://www.slideshare.net/kristinkokkersvold/typografi-frst

• Gerilja-testing http://www.uxbooth.com/articles/the-art-of-guerrilla-usability-testing/

Takk for meg!

Twitter: @kekkakokkersEpost: kristin@studionetting.no

Mobil: 911 07 367

Husk, det virkelige arbeidet starter ved lansering!