Å jobbe med brukervennlighet. Thor Fredrik Eie

Transkript

1 Å jobbe med brukervennlighet Thor Fredrik Eie

2 Thor

3

4 En liten historie.

5

6

7

8 - 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.

9

10 - 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

11

12 Tre slides om NetLife Research

13 Vi som jobber i NetLife Research

14 Ledende private og offentlige kunder Rammeavtaler med DIFI, UIO, NSB, Telenor, Eniro og Nortura

15 Hva vi jobber med Brukersentrert design Rådgivning Konseptutvikling Testing og evaluering Foredrag og kurs Konferanser Juryarbeid

16 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

17 Vår metodikk Analyse Konseptskisser Design Utvikling Strategi og mål Interaksjonsdesign/ Grafisk design Brukerbehov Brukertest Innholdsstrategi og innholdsutvikling Evaluering Brukertesting Copyright NetLife Research kontakt@netliferesearch.comnetlife Research AS,

18 Skjemadesign Thor Fredrik Eie

19 Skjemadesign (nesten) Alle ne8sider/applikasjoner har skjema Skaper stor frustrasjon Vi har brukertestet utrolig mange skjemaer

20 Første møte med forsikring IF.no - Storebrand

21 VANLIGE PROBLEMER

22 Har ikke lyst! Dårlig mohvasjon Redd for å gjøre feil Stresset Hvor langt er skjemaet?

23 Databasevrengning System Database Brukeren Grensesni8 Applikasjon forstår ikke Tabell Skjema datamodellen! Kolonne Felt

24 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)

25 Obey! Copyright NetLife Research kontakt@netliferesearch.comnetlife Research AS,

26 DESIGNPRINSIPPER I SKJEMADESIGN

27 Designprinsipper Minst mulig sve8e Ingen liker å fylle ut skjemaer Smarte standardverdier, inline validering, snille felt

28 Veien Hl målet må være tydelig Designprinsipper

29 Designprinsipper Vær konteksten bevisst Kjent informasjon vs. ukjent informasjon OWe vs. sjeldent brukt Avbrytelser i arbeidet

30 Designprinsipper Vær konsistent i kommunikasjonen Feilmeldinger, hjelp og suksess Bruk samme språk selv om mange er involvert Brun Rød Blå Svart

31 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?

32 Visualisering av trinnvis progresjon Flere sider Visualiser at det er en prosess Disse er ikke prosesser

33 Visualisering av skjema

34 VI SKAL REDESIGNE ET SKJEMA

35 Skjemaet vårt Fornavn E8ernavn Adresse Postnummer Poststed Reset OK Vi skal redesigne de8e skjemaet for å gjøre det le8ere å bruke

36 Feltlengde Fornavn E8ernavn Adresse Postnummer Poststed Reset OK Lengden på feltet kommuniserer Hl brukeren La feltlengden fortelle hvor mye brukeren skal fylle ut

37 Gruppering av felt Fornavn E8ernavn Adresse Postnummer Poststed Reset OK Plasser felt som hører sammen te8, og ha mellomrom Hl neste gruppe

38 Visuell støy

39 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

40 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

41 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?

42 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

43 Hvor klikker du?

44 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

45 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

46 Obligatoriske felt Fornavn E8ernavn obligatorisk obligatorisk Adresse Postnummer Poststed Avbryt Lagre Tekst er best, men * funker også (pass på å forklare hva * betyr)

47 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

48 Primære og sekundære aksjoner Fornavn E8ernavn Adresse Postnummer Poststed Lagre avbryt Marker den knappen brukeren bør trykke på

49 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

50 Hjelpetekster Skriv teksten fullt ut Unngå å bruke? ikoner etc. Legg hjelpeteksten te8 på det det forklarer

51 Validering

52 Bruk inline validering Validering

53 Gode forslag Validering

54 Feilmeldinger

55 Feilmeldinger

56

57 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

58

59 TILGJENGELIGHET I SKJEMA

60 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>!

61 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">!

62 Tilgjengelighet - <fieldset> Bruk <fieldset> og <legend> for å gruppere felt <fieldset>!!<legend>! <b>personlige opplysninger</ b>!!</legend>! Skjemainnhold </fieldset>!

63 Pass også på Tabindex - > la tab flyte pent gjennom skjemaet

64 Verktøy for Hlgjengelighet Firefox Accessibility Extension h8ps://addons.mozilla.org/en- US/firefox/addon/5809 IE: Web Accessibility Toolbar h8p://

65 Leseliste Web Form Design Luke Wroblewski The Inmates are Running the Asylum Alan Cooper

66 NYTT SKJEMA FOR FJORDKRAFT

67

68

69

70 Konsept for nye UiO.no

71

72 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).

73 Brukerprofiler

74 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

75 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

76 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

77 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

78 Konseptskisser

79 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

80 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

81 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.

82 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

83 Interaksjonsprinsipper

84 Headeren brukes for å etablere kontekst for brukeren + navigasjon Hvor er du? Navigasjon oppover Spare plass Fokus på der du er

85 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

86 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

87 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

88 Arbeidet videre 1. Konsept 2. Håndtegnede skisser 3. Digital prototype 4. Grafisk design 5. Teknisk utvikling

89

90

91

92

93

94 Brukertesting

95 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

96 Spørre eller teste?

97 Brukertesting Typiske brukere som løser realistiske oppgaver på et nettsted

98 Hvor mange testpersoner?

99 Testing av prototype

100 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

101 Testing av nettside

102 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

103 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

104 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?

105 Eksempel på oppgaver

106 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

107 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 m², og er dimensjonert for elever 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.

108 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

109 Eye tracking

110

111