Transcript Prototyper och användartest

Föreläsning i webbdesign Prototyper och användartest Rune Körnefors Medieteknik 1 © 2012 Rune Körnefors [email protected] Prototyp för en webbplats!
•  Utkast eller enkel variant av webbplatsen"
•  Syfte"
–  Testa olika alternativ"
–  Skapa en gemensam syn på webbplatsen i utvecklingsteamet"
–  Utföra test med användare, t.ex. test av struktur/navigering, layout,
vokabulär, …"
•  Olika former av prototyper"
– 
– 
– 
– 
– 
Pappersprototyp"
Skärmbilder i datorn"
Struktur i HTML"
Layout i CSS"
…"
Länkar All eB par filmer om pappersprototyp finns under rubriken "Projekt, prototyper, målgrupp, användartest, m.m." i länklistan på kursens webbplats. 2 Bilder från freedigitalphotos.net Användartest och annan utvärdering!
•  Användartest är ej test av användare, utan med användare!"
–  Användartest – Test av användbarhet"
–  User testing – Usability testing"
•  Test med användare"
–  Testa om målgruppen kan uppfylla sina mål,
om behoven tillgodoses"
–  Testa anpassning till målgruppen"
•  Rätt vokabulär, arbetssätt, förståelse, etc."
–  Testa upplevelse"
•  Utvärdering (test) som ej utförs av användare"
– 
– 
– 
– 
Utvärdering av användbarheten, expertutlåtande"
Är projektets mål uppfyllda?"
Validering mot kravspecifikationen"
Teknisk kontroll"
•  Koden korrekt, funkar alla länkar, anpassning till olika skärmstorlekar, näthastighet, etc."
3 Bilder från freedigitalphotos.net Varför användartest?!
”You will learn if participants are able to complete identified routine
tasks successfully and how long it takes to do that. You will find out
how satisfied participants are with your Web site. Overall, you will
identify changes required to improve user performance. And you can
match the performance to see if it meets your usability objectives.”!
(Usability.gov) •  Användartest bekräftar inte att webbplatsen fungerar!!!"
•  Användartest är till för att identifiera problem!"
–  Resultatet används för att göra förbättringar."
U.S. Department of Helth and Human Services, Usability.gov, Allgänglig: hBp://www.usability.gov/methods/test_refine/learnusa/index.html [2012-­‐09-­‐13] 4 Planera testen!
• 
• 
Lägg in testen i tidsplanen"
Se till att det finns tid att analysera resultaten och göra förbättringar"
Ad Fältanalys (strategy) Planering (scope) Design (structure) ProdukAon (skeleton) SAl (surface) Utvärdering / testning Dokumentering Pappersprototyp Test av layout HTML-­‐prototyp Test av struktur och navigering HTML-­‐prototyp Test av funkAonalitet 5 Att tänka på inför ett användartest!
•  Användare •  Syfte med testet"
–  Välj personer som kan representera målgruppen –  Behöver du veta något om personerna? Bakgrundsfakta? –  Vad vill du veta och varför?"
–  Hur ska resultatet tolkas och
användas?"
•  Vad testas"
•  Var testet genomförs –  Gränssnitt, navigering,
funktionalitet, …?"
–  Kan användarnas mål uppfyllas?"
–  Testa endast en sak åt gången?"
–  Skisser, pappersprototyp,
webbsidor, den färdiga
webbplatsen?"
–  Laboratorium, ”på stan”, naturlig miljö (hemma/arbetsplats), ...? •  Var kan man få tag i testpersoner? •  Vad behövs för aB genomföra testet? •  Vilka faktorer kan påverka resultatet? •  Aktivitet"
–  Ska testpersonen få en uppgift
eller prova på egen hand?"
6 ”Tänka-­‐högt-­‐metoden” Thinking Aloud Usability Test Thinking Out Loud User/Usability Test •  Genomförande – 
– 
– 
– 
Förklara aB det är webbplatsen och inte användaren som testas Ge användaren en uppgig aB lösa Låt användaren beräBa vad han/hon tänker och gör Studera och anteckna •  Kan kompleBeras med eB ”egersnack” – 
– 
– 
– 
Intervjua användarna och diskutera med dem eger testet Gå igenom anteckningarna från testet Enkät Hur upplevdes systemet? Vad var problemaAskt? Förslag på ändringar? ... Society for Technical CommunicaAon, Usability Toolkit, Allgänglig: hBp://www.stcsig.org/usability/topics/arAcles/B-­‐think_outloud_proc.html [2012-­‐09-­‐14] 7 Bilder från freedigitalphotos.net Enkla (billiga) användartest •  Test av prototyp –  Prototyp -­‐> -­‐> Användartest -­‐> Utvärdera -­‐> -­‐> FörbäBra prototypen -­‐> -­‐> Användartest -­‐> Utvärdera -­‐> -­‐> FörbäBra prototypen -­‐> -­‐> ... •  Syge –  Upptäcka problem eller sådant som kan förbäBras •  Antal test –  Räcker ogast med fem test i varje steg, enligt Jakob Nielsen Nielsen, J. (2010) Intervju i How to Conduct a Simple User Test with Jakob Nielsen, Allgänglig: hBp://www.youtube.com/watch?v=r0A6IW2TFFI [2012-­‐09-­‐14] 8 Länkar All eB några sidor med info och filmer om användartest finns under rubriken "Projekt, prototyper, målgrupp, användartest, m.m." i länklistan på kursens webbplats. Förutseende design •  Helhetssyn på webbplatsens design –  Förutse hur webbplatsen kommer aB användas –  Förutse eventuella problem och svårigheter för användaren •  Olika hjälpmedel: –  Skisser, scenarier, storyboard, … •  Scenario –  Kort beskrivning (ev. kompleBerad med skiss) av en situaAon där användarna ska usöra någon uppgig med webbplatsen –  Syge: få en ökad förståelse för hur webbplatsen kan användas, analysera hur webbplatsen stödjer användarna –  Urval: välj både typiska och otypiska situaAoner och användare 9 Exempel: Scenario • 
Förutsä(ning: –  SAna Johansson har nyligen blivit medlem i fotoklubben Bild i Växjö och ska imorgon delta i klubbens årsmöte. Innan dess vill hon ta reda på vad som togs upp på det förra årsmötet. • 
Scenario för användning av webbplatsen: –  SAna fyller i siB medlemsnummer och lösenord för aB komma All medlemsavdelningen. Navigeringsmenyn utökas då med yBerligare eB antal val. –  Hon klickar på länken ”möten” och sedan underavdelningen årsmöten. Hon får en lista med årtal och klickar på förra året. Protokollet från förra årsmötet visas då. • 
Eventuellt uppföljningsscenario: –  SAna läser aB klubben förra året beslutade aB genomföra en fotoutställning med medlemmarnas foton. Hon blir nyfiken och vill ha mer informaAon om denna utställning. –  I den övre delen av navigeringsmenyn (den del som är Allgänglig även för icke-­‐medlemmar) hiBar hon länken ”akAviteter” och provar den. Hon får då en sida med en lista sorterad eger datum. Listan är inte längre än aB hon snabbt hiBar länken ”fotoutställning” och klickar på den. –  Sidan hon kommer All anger var och när utställningen arrangerades. Den innehåller också eB reportage från utställningen med några exempel på bilder och intervjuer med besökare. 10