Föreläsning i webbdesign Prototyper och användartest Rune Körnefors Medieteknik 1 2012 Rune Körnefors rune.kornefors@lnu.se
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" Fältanalys (strategy) Ad Planering (scope) Design (structure) ProdukAon (skeleton) Utvärdering / testning Dokumentering SAl (surface) 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! Syfte med testet" Vad vill du veta och varför?" Hur ska resultatet tolkas och användas?" Vad testas" Gränssnitt, navigering, funktionalitet,?" Kan användarnas mål uppfyllas?" Testa endast en sak åt gången?" Skisser, pappersprototyp, webbsidor, den färdiga webbplatsen?" Aktivitet" Ska testpersonen få en uppgift eller prova på egen hand?" Användare Välj personer som kan representera målgruppen Behöver du veta något om personerna? Bakgrundsfakta? Var testet genomförs 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? 6
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 Tänka- högt- metoden Thinking Aloud Usability Test Thinking Out Loud User/Usability Test 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 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. 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
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