Å jobbe med brukervennlighet Thor Fredrik Eie
Thor
En liten historie.
http://flickr.com/photos/kiichigo/
- Vi har hatt et formidabelt salg på nett, og omsatt for en god del millioner kroner. Så sett i forhold til det har ikke kritikken være veldig stor.
- Vi trodde flere av dem ville bestille billetter over nett, derfor er ikke billettluka stor nok til å ta over all køen. Flere av våre publikummere er kanskje litt eldre og ikke vant til å bruke nettet
Tre slides om NetLife Research
Vi som jobber i NetLife Research
Ledende private og offentlige kunder Rammeavtaler med DIFI, UIO, NSB, Telenor, Eniro og Nortura
Hva vi jobber med Brukersentrert design Rådgivning Konseptutvikling Testing og evaluering Foredrag og kurs Konferanser Juryarbeid
Dette kommer vi til å være innom Skjemadesign Noen problemstillinger vi har løst Brukervennlighetsbransjen Litt om brukertesting Følg med på det norske fagmiljøet Det du lurer på om å jobbe med brukervennlighet på heltid
Vår metodikk Analyse Konseptskisser Design Utvikling Strategi og mål Interaksjonsdesign/ Grafisk design Brukerbehov Brukertest Innholdsstrategi og innholdsutvikling Evaluering Brukertesting Copyright NetLife Research - www.netliferesearch.com - kontakt@netliferesearch.comnetlife Research AS,
Skjemadesign Thor Fredrik Eie
Skjemadesign (nesten) Alle ne8sider/applikasjoner har skjema Skaper stor frustrasjon Vi har brukertestet utrolig mange skjemaer
Første møte med forsikring IF.no - Storebrand
VANLIGE PROBLEMER
Har ikke lyst! Dårlig mohvasjon Redd for å gjøre feil Stresset Hvor langt er skjemaet?
Databasevrengning System Database Brukeren Grensesni8 Applikasjon forstår ikke Tabell Skjema datamodellen! Kolonne Felt
Det tar for lang Hd å implementere Antall minu8er hver bruker er forvirret * Antall brukere = Antall minu8er du bør bruke på implementering I Hllegg får du: Flere fornøyde kunder Mindre trykk på kundestø8e Høyere konverteringsrate (potensielle kunder som blir kunder)
Obey! Copyright NetLife Research - www.netliferesearch.com - kontakt@netliferesearch.comnetlife Research AS,
DESIGNPRINSIPPER I SKJEMADESIGN
Designprinsipper Minst mulig sve8e Ingen liker å fylle ut skjemaer Smarte standardverdier, inline validering, snille felt
Veien Hl målet må være tydelig Designprinsipper
Designprinsipper Vær konteksten bevisst Kjent informasjon vs. ukjent informasjon OWe vs. sjeldent brukt Avbrytelser i arbeidet
Designprinsipper Vær konsistent i kommunikasjonen Feilmeldinger, hjelp og suksess Bruk samme språk selv om mange er involvert Brun Rød Blå Svart
Vit mer om skjemaet di8 BrukertesHng Feilmeldinger, problemer, gjennomføringsgrad Kundestø8e Hva er de vanligste problemene? Hvor owe skjer de? StaHsHkk Hvor forsvinner kunden i skjemaet? Er det et stort frafall fra et skjermbilde Hl et annet?
Visualisering av trinnvis progresjon Flere sider Visualiser at det er en prosess Disse er ikke prosesser
Visualisering av skjema 1. 2. 3.
VI SKAL REDESIGNE ET SKJEMA
Skjemaet vårt Fornavn E8ernavn Adresse Postnummer Poststed Reset OK Vi skal redesigne de8e skjemaet for å gjøre det le8ere å bruke
Feltlengde Fornavn E8ernavn Adresse Postnummer Poststed Reset OK Lengden på feltet kommuniserer Hl brukeren La feltlengden fortelle hvor mye brukeren skal fylle ut
Gruppering av felt Fornavn E8ernavn Adresse Postnummer Poststed Reset OK Plasser felt som hører sammen te8, og ha mellomrom Hl neste gruppe
Visuell støy
Tekst på knapper Fornavn E8ernavn Adresse Postnummer Poststed Avbryt Lagre La det som skjer synes på knappen Teksten bør være så forståelig som mulig
Utseende på knapper Fornavn E8ernavn Adresse Postnummer Poststed Avbryt Lagre Knappeutseende La knappen se ut som en knapp La primærvalget være tydeligere Farge, størrelse
Knapper forts. Hjelp brukeren med å prioritere hvilken man skal klikke på. Unngå knapperader på bunnen av skjemaer Kanskje de andre valgene ikke bør se ut som knapper?
Knapper Hva er primær og hva er sekundær aksjon? Primære er den knappen brukerne mest sannsynlig skal klikke på OK Avbryt Sekundære den nest mest vikhge knappen Gjør det tydelig hvilken som bør klikkes Størrelse, farge, u_orming
Hvor klikker du?
Ledetekster/labels Fornavn E8ernavn Adresse Postnummer Poststed Avbryt Lagre Topplabels Når det er vanlige data som samles inn Raskere u_ylling Trenger mer verhkal plass Pixelnazisme er nødvendig for å få ledetekstene Hl være scannbare
Obligatoriske felt Fornavn E8ernavn Adresse Postnummer Poststed Avbryt Lagre Marker dem der det er mange felt, men bare noen er obligatoriske Marker frivillige felt i skjema der de fleste er obligatoriske
Obligatoriske felt Fornavn E8ernavn obligatorisk obligatorisk Adresse Postnummer Poststed Avbryt Lagre Tekst er best, men * funker også (pass på å forklare hva * betyr)
Obligatoriske felt Fornavn E8ernavn Adresse Postnummer Poststed Avbryt Lagre Marker dem der det er mange felt, men bare noen er obligatoriske Marker frivillige felt i skjema der de fleste er obligatoriske
Primære og sekundære aksjoner Fornavn E8ernavn Adresse Postnummer Poststed Lagre avbryt Marker den knappen brukeren bør trykke på
Hjelpetekster Trenger du når Det er uvant data som skal fylles ut Brukeren synes det er rart at det spørres om Hjelpetekster kan forkludre og skape mye visuell støy Vurder dynamiske teknikker Hjelpeteksten vises når et felt er akhvt
Hjelpetekster Skriv teksten fullt ut Unngå å bruke? ikoner etc. Legg hjelpeteksten te8 på det det forklarer
Validering
Bruk inline validering Validering
Gode forslag Validering
Feilmeldinger
Feilmeldinger
Feilmeldinger Ha topplassering Gjør feilmeldingen visuell, så den synes Fortell brukeren hva han/hun skal gjøre Marker feltet som trenger en korreksjon Bruk samme farger og visuell kommunikasjon både i feilmeldingen og i markeringen av feltet
www.bloglines.com
TILGJENGELIGHET I SKJEMA
Tilgjengelighet - <accesskey> & <tabindex> Rekkefølgen på skjema horisontalt og tabell skaper problemer Accesskey <input type="text" name="firstname" size="15" accesskey=v>! Tabindex <input type="text" name="firstname" size="15" accesskey=v tabindex=1>!
Tilgjengelighet - <label> Bruk <label>! <label for="phonehm">telefon</label>! <input id="phonehm" type="text" title= Ditt mobiltelefonnummer" name="homephone" size="15">! <label for="roses">roses</label>! <input id="roses" type="checkbox" title ="rose factsheet" name="roses" value="checkbox">!
Tilgjengelighet - <fieldset> Bruk <fieldset> og <legend> for å gruppere felt <fieldset>!!<legend>! <b>personlige opplysninger</ b>!!</legend>! Skjemainnhold </fieldset>!
Pass også på Tabindex - > la tab flyte pent gjennom skjemaet
Verktøy for Hlgjengelighet Firefox Accessibility Extension h8ps://addons.mozilla.org/en- US/firefox/addon/5809 IE: Web Accessibility Toolbar h8p://www.visionaustralia.org.au/info.aspx?page=1569
Leseliste Web Form Design Luke Wroblewski www.lukew.com/ff The Inmates are Running the Asylum Alan Cooper
NYTT SKJEMA FOR FJORDKRAFT
Konsept for nye UiO.no
Målgrupper for ny UiO-web Eksterne målgrupper 1. Potensielle studenter 2. Potensielle forskere og undervisere 3. Eksterne studenter, forskere og undervisere 4. Alumni 5. Næringsliv 6. Myndigheter/forvaltning inkl EU 7. Medier 8. Forsknings- og utdanningsinstitusjoner 9. Interesseorganisasjoner 10. Potensielle teknisk-administrative ansatte 11. Allmennheten Interne målgrupper 1. Studenter 2. Vitenskapelige ansatte (forskere og undervisere) 3. Teknisk - administrative ansatte Kilde: Mål og målgrupper for ny UiO-web (2008).
Brukerprofiler
Hva er brukerprofiler? Fiktive, men spesifikke personer som er i målgruppene for nettstedet Troverdige som eksempler på brukere i målgruppene Et sett av brukerprofiler får fram et spekter av brukerbehov knyttet til målgruppene Ikke en super-brukerprofil som har alle behovene
Hvorfor brukerprofiler? Økt forståelse for brukerne og deres situasjoner/omgivelser Behandle brukere som individer, ikke som en ensartet masse Økt fokus på brukerne tidlig i prosjektet Bedre brukeropplevelse for nettstedet
UiO brukerprofilene Silje (18) fra Grimstad, går i 3. klasse på videregående, vil gå på UiO, er interessert i språk, medier, kanskje jus. Tore (42), førsteamanuensis ved matematisk institutt, flink foreleser, samarbeider faglig med foreleser i Utrecht, svaksynt. Thomas (21) fra Lillehammer, 3. semester internasjonale studier ved SV-fakultetet, miljøengasjert, bor på Kringsjå Helga (40) fra Tyskland, filosof og forsker, tenker å søke jobb på Center for the study of mind in nature, norsk mann, 2 barn Kristian (31), journalist i VG, sosial, søker lettfattelig stoff og uttalelser fra fagfolk Stein (61), lærer for 9. klasse, bestefar til gutter på 9 og 11, opptatt av historie Marianne (38), jobber i Kunnskapsdepartementet, opptatt av kvalitet i forskningen
Lurer på om jeg kan ta et semester i Brussel? Thomas (22), student, 3. semester internasjonale studier ved SV Målgruppe: Eksisterende student Biografi 22 år Fra Lillehammer Bor på Kringsjå studentby Ett år på Sund Folkehøgskole med retning Miljø og klima, siviltjeneste i barnehage Samfunnsengasjert og miljøbevisst Er med å arrangere debattkvelder på Studentersamfundet 3. semester internasjonale studier ved det samfunnsvitenskapelige faktultet Erfaring/kunnskap Databruk Web uio.no Mål Thomas vil ta en master i internasjonale studier, og han lurer på å ta 1-2 semestre i Brussel. Viktigste oppgaver på uio.no Hvilke studiemuligheter finnes i utlandet? Hvilke(t) semester er aktuelt for utenlandsstudier? Finne studieveileder og erfaringer fra andre som har studert i utlandet Finne informasjon om ERASMUS Hvilke støtteordninger har Lånekassen? Hvilke avtaler har UiO med universiteter i utlandet? Hvem kan være potensielle arbeidsgivere? Triggerord Meteorologi, studier i utlandet, miljø, Brussel, timeplan, studentpolitikk, ERASMUS Viktigste sider Velge studievei Lage timeplan (i rom og tid) Levere oppgaver på nett Betale semesteravgift Registrere seg Skifte passord Få beskjeder i tilknytning til undervisningen Programside, Internasjonal dag, emnesider, sio.no (livet rundt studiene), facebook.com
Konseptskisser
Universitetets forside - prinsipper Viktigste oppgaver støttes øverst på siden Finne kontaktinformasjon Velge / finne studier Gjøre noe via en tjeneste / verktøy Hva, når og hvor ang. emne Alt innhold tilgjengelig gjennom bunnmeny Forskningsformidling sentralt plassert
Potensielle studenter finner raskt ut hvor de skal gå Eksisterende studenter kan kjapt finne tidspunkt, pensumlister etc. for spesifikke emner Forskning i fokus. Får mye plass. En sak med stor illustrasjon prioriteres og man viser flere saker under Nyheter fra UiO a.la Ny direktør og lignende. Personer og enheter er sentralt for mange. Et eget søk tar deg raskt til der du skal Snarveier til de mest brukte verktøyene og tjenestene på UiO Viser bredden i arrangementer ved UiO: Aggregert versjon av det som skjer ved enheter ved UiO. Museum, fakultet osv. Bunnmeny gir rask tilgang til alt som finnes ved UiO
Temasider Det forskes på samme tema på mange ulike enheter Men, mange kjenner ikke organisasjonsstrukturen til UiO og klarer ikke å finne innhold på tvers av ulike enheter UiO trenger å få synliggjort forskning og innhold relatert til forskningen på en bedre måte enn i dag Temasidene er optimalisert for Google, andre søkemotorer, wikipedia, presse, blogger osv.
Om temasidene Aggregert fra mange ulike kilder ved UiO Baseres på at innhold merkes med metadata Finnes på mange ulike nivå: fra Dinosaur til Molekylær biologi
Interaksjonsprinsipper
Headeren brukes for å etablere kontekst for brukeren + navigasjon Hvor er du? Navigasjon oppover Spare plass Fokus på der du er
Venstremeny + sti Inspirasjon fra BBC sport Brukeren har gått inn i seksjonen for sport og klikker på Football Kan klikke seg opp til Sport homepage, men fokus er på Football Kan klikke seg opp til Football, men fokus er på Premier League
Bunnmeny Finnes på alle sider Gir brukeren enkel navigasjon sideveis og nedover i strukturen Samme kategorier går igjen på de 3 nivåene UiO, Fakultet og Institutt, men innholdet er spesifikt for nivået. Bunnmeny blir spesifikk i de ulike seksjonene (f.eks Forskning og fakta) Inspirasjon: Apple sin bunnmeny
Søk Innholdsmengden ved UiO er svært stor og søk blir svært viktig Ved spesifikke oppgaver finnes det skreddersydde søk med suggestfunksjon: Psy 10 Psy 1000 Innføring i generell psykologi Psy 1010 Forskningmetode Søker i hele UiO Direktesøk etter emner Spesifikt søk for personer
Arbeidet videre 1. Konsept 2. Håndtegnede skisser 3. Digital prototype 4. Grafisk design 5. Teknisk utvikling
Brukertesting
Fakta om brukertesting Kan teste alt fra papirversjon til ferdig løsning Flere små tester er bedre enn en stor Testtid ca 1 time per person Oppgavene skal være realistiske og ikke ledende Prosjektgruppa bør observere Enkel testing er bedre enn ingen testing Kvalitativ, ikke kvantitativ metode
Spørre eller teste?
Brukertesting Typiske brukere som løser realistiske oppgaver på et nettsted
Hvor mange testpersoner?
Testing av prototype
Testing av prototyper Fordeler Tidlig input på om brukerne får svar på sine viktigste oppgaver på nettstedet Får feedback på om en har tenkt riktig i forhold til innhold og struktur Billig og enkelt å gjøre endringer Ulemper Innholdet er ofte begrenset og få elementer er klikkbare, noe som kan gjøre testsituasjonen urealistisk for testpersonene
Testing av nettside
Testing av nettsider Fordeler Realistisk gjengivelse av kompleksitet og innhold for testpersonene Ulemper Dyrt og komplisert å gjøre endringer Større endringer kan være vanskelig (umulig) å gjennomføre
Rekruttering av deltakere til test Viktigste målgrupper og/eller personas som bakgrunn Vi bruker et eksternt rekrutteringsbyrå Kjønn Geografisk spredning Alder Bakgrunn Arbeidssted og situasjon Spesielle kriterier i forhold til testen
Hvordan lage gode oppgaver? Ikke still ledende spørsmål Prøv å unngå å bruke de samme uttrykkene som brukes i tekstene på nettsida Ha et klart bilde av formålet med oppgaven hva ønsker du å teste?
Eksempel på oppgaver
Eksempel på rapport Søk K L L 1. For eit par av testpersonane tok det litt tid å leggja merke til søkefeltet. 2. Inne på resultatsida var det ingen av testpersonane som forstod avgrensinga med Søk i filer og Bare hele ord. 3. Søkeordet forsvinn når ein set markøren i feltet. Minst ein av testpersonane oppdaga dette når han forsøkte å retta ei feilskriving. 2. 3. 1.
Forslag til forbedring: Søk 1. Søkjefeltet kan med fordel flyttast litt lenger ned frå sidekanten og utforminga frå søketreffsida (med søkeknapp) bør brukast her òg. På søkjetreffsida kan søkjefeltet flyttast lenger inn på sida for å tydelegare visa kva ein har søkt på. 2. Avgrensinga inne på søkjesida gir ikkje betre søkjeresultat og bør fjernast. 3. Søkeordet bør stå i feltet når ein set markøren i det på nytt. Ofte har ein behov for å retta feilskrivingar og det kan vera irriterande om heile ordet forsvinn. 4. Søkjesida treng ikkje å liggja i menysystemet, men koma til syne når ein trykker søk. 5. Nummerering av søketreffa gir ikkje noko ekstra informasjon og kan fjernast. Standard visning er at det viktigaste/det beste treffet kjem øverst. Søkeresultat: Om Acusto Fiberhimling (18/8/2008) Fiberhimling er glassull- eller steinullbaserte forseglede himlingsplater. Platene blir også levert i såkalt våtpressmateriale. Fiberhimling har... Bjørnholt videregående skole (20/8/2008) Ny videregående skole og flerbrukshall i bydel Søndre Nordstrand, Oslo. Skolens areal er ca 20.000 m², og er dimensjonert for 1.090 elever... 6. Dersom ein skal ha datoformat bruk norsk standardformat: dag, månad, år. 7. For å gjera det tydelegare kva for ein tittel og ingress som høyrer saman kan ein gruppera dei betre saman ved å fjerna mellomrommet mellom tittel og ingress. 1.
Bruk av eyetracking Kan se hvor testpersonene ser underveis i testen Vanlig å ha egne oppgaver der testpersonen jobber uavhengig av moderator Nyttig tilleggsinformasjon for observator
Eye tracking