Uppsala Universitet Institutionen för informationsvetenskap
Design av whatismykidplaying.com
En fallstudie i användbarhet för webbplatser
Jonas Celander Guss
C-uppsats VT-11 23/5-11
Sammanfattning
Detta arbete består av designen av ett gränssnitt för webbplatsen whatismykidplaying.com.
Designen var tänkt att ge hög användbarhet för målgruppen och testades av användare i ett think-aloud test. De fick testa och utvärdera hur väl gränssnittet fungerar och deras feedback utvärderades och resultaten låg till grund för förslag på förändringar i gränssnittet, vissa som sedan blev implementerade. Studien har utgått från de olika stegen i en användarcentrerad utvecklingsmodell, analys - design - utvärdering - återkoppling, och en iteration har genomförts.
Som utgångspunkt, för att öka användbarheten i webbplatsens gränssnitt, användes diverse regler och riktlinjer för hur användbarhet bäst kan uppnås, när designen gjordes. Hur väl dessa regler och riktlinjer fungerat tillsammans, i detta projekt och design, blev således en del i think-aloud testest utvärdering. Studien presenterar och analyserar hur användarna upplevt resultatet av den första designen av gränssnittet, och vad som fungerat bra och mindre bra ur användbarhetssynpunkt.
Abstract
This thesis consists of the design of a user interface for the website whatismykidplaying.com.
The design of the user interface was meant to increase usability for the target-group, and was tested by users in a think-aloud test. The users evaluated the usability and their feedback was evaluated and the results were used to produce suggestions for improvements in the user interface, some of which were implemented. The basis for the study is the steps in user- centered-design, analysis - design - evaluation - feedback, and one cycle has been carried out.
To enhance usability in the user interface, different rules and guidelines regarding how to design for usability were used for the design. How well these rules played together, in this design, was evaluated in the think-aloud test. The thesis presents and analyses how the users experienced the first design of the user interface and which parts had worked well and those that didn't, from the usability point of view.
Nyckelord
Användbarhet, användarcentrerad design, webbdesign, think-aloud test, prototyping
Innehållsförteckning
Kapitel
1 INLEDNING ... 1
1.1 BAKGRUND ... 1
1.2 SYFTE ... 2
1.2.1 Arbetet ... 2
1.2.2 Uppsatsen ... 2
1.3 METOD FÖR ARBETET ... 2
1.4 AVGRÄNSNINGAR... 2
1.5 BEGREPP OCH DEFINITIONER ... 3
1.6 DISPOSITION ... 4
2 TEORI ... 5
2.1 ANVÄNDARCENTRERAD DESIGN ... 5
2.2 ANVÄNDBARHET ... 6
2.2.1 Användbarhet vid webbdesign ... 7
2.2.2 Webbutveckling ... 8
3 ANALYS ... 10
3.1 ANVÄNDARNA ... 10
3.1.1 Målgrupp ... 11
3.1.2 Användbarhet för målgruppen ... 11
4 DESIGNFÖRSLAG ... 12
4.1 PROTOTYPING ... 12
4.2 UTVECKLING ... 12
4.2.1 Relevanta regler ... 13
4.2.2 Första prototypen ... 14
4.2.3 Andra prototypen ... 15
4.2.4 Alternativa designlösningar ... 17
4.3 REGELBROTT I PROTOTYPDESIGN ... 18
5 UTVÄRDERING ... 19
5.1 HUR MAN UTVÄRDERAR ... 19
5.1.1 Användbarhetstest ... 19
5.1.2 Think-aloud test ... 20
5.2 UTFORMNING AV ANVÄNDBARHETSTESTER ... 21
5.2.1 Think-aloud test ... 22
5.3 RESULTAT FRÅN ANVÄNDBARHETSTESTER ... 23
6 ÅTERKOPPLING ... 25
6.1 FÖRSLAG PÅ FÖRÄNDRINGAR ... 25
6.2 PRESENTATION AV PROTOTYP ... 26
6.2.1 Förändringar på webbplatsen ... 27
7 SLUTSATS ... 29
8 DISKUSSION ... 30
8.1 METODDISKUSSION ... 30
8.1.1 Alternativa metoder ... 30
8.2 RESULTATDISKUSSION ... 30
8.2.1 Användbarhetstester ... 31
8.2.3 Prototypdesign ... 32
8.3 FRAMTIDA UTVECKLING ... 32
Bilagor
BILAGA 1 – ANVÄNDBARHETSTESTER... 35
BILAGA 2 - FÖRFRÅGAN OM FÖRÄLDRAR TILL TEST ... 40
Figurer FIGUR 1 DE ITERATIVA STEGEN I ANVÄNDARCENTRERAD SYSTEMDESIGN ... 6
FIGUR 2 CSS BOX-MODELL FRÅN W3SCHOOLS.COM ... 9
FIGUR 3 URSPRUNGLIG DESIGN PÅ HEMSIDAN ... 14
FIGUR 4 FÖRSTA UTKASTET FÖR DESIGNEN PÅ WHATISMYKIDPLAYING.COM ... 15
FIGUR 5 NYA DESIGNEN PÅ WEBBPLATSEN ... 16
FIGUR 6 ALTERNATIVT UPPLÄGG FÖR HEADER-BOXEN, MED BREADCRUMBS OCH SÖKRUTA ... 17
FIGUR 7 JAKOB NIELSEN GRAF FÖR PROCENT AV PROBLEM FUNNA VID ANVÄNDBARHETSTEST. ... 20
FIGUR 8 OMDESIGNEN AV WEBBPLATSEN EFTER ANVÄNDBARHETSTESTERNA ... 27
1
1 Inledning
1.1 Bakgrund
Sen några år tillbaka har debatter kring dataspel varit vanligt förekommande i media i flera länder i västvärlden. Debatterna har handlat om hur dataspelande påverkar barn och ungdomar och har dragit igång på grund av att det blivit allt vanligare att barn och unga spelar data- och tv-spel. I debatten lyfts oftast de negativa sidorna och extremfallen fram och de är dem som uppmärksammats mest i media. Det har skrivits mycket om dataspelsberoende, att spelande innebär ensamhet och isolering framför datorn och att det ger överviktiga ungdomar.
Dataspelande har även sammankopplas med att barn och ungdomar blir allt våldsammare och det har sammankopplats med skolskjutningar. Ett exempel på överdrivet dataspelande är det vi kunnat läsa om en 15-åring som fick föras till sjukhus efter att ha spelat för mycket.
Dataspel har kopplats samman med andra tragiska händelser, till exempel har vi kunnat läsa om en 27-årig kvinna som blev mördad i sin lägenhet utanför Stockholm där motivet troddes ha koppling till spelvärlden och en 17-årig som tvångsvårdats för sitt beroende av dataspel.
Men även mer positiva artiklar som den om en 12-åring som hade lärt sig att man kunde spela död när man blev attackerad, vilket han använde när en älg anföll honom.(Aftonbladet 2008, Aftonbladet 2009, DN 2007a, DN 2007b)
Det är inte bara media som uppmärksammat spelandet som fenomen, flertalet vetenskapliga studier har gjorts på området som visar på att spelandet är utbildande. Eftersom många spel är på engelska och mycket som skrivs runt spelet även skrivs på engelska mer eller mindre måste man, som svensk, utveckla sina språkkunskaper för att kunna delta aktivt. Det finns också en gren där personer försöker att bygga upp matematiska modeller för att optimera sitt spelande.
Detta innehåller mycket matematiskt tänkande och är på avancerad nivå och de spelare som vill använda modellerna måste förstå den bakomliggande matematiken. (Steinkuehler 2008) Personer som inte är insatta i spelvärlden får svårt att se vad som är vad och hur man ska tolka och tackla det som skrivs om vad barnen gör, och vad det kan leda till. Barnen som investerat flera timmar i att lära sig spelet och hur det fungerar har därför svårt att förklara för föräldrarna. Om föräldrarna vill informera sig om vad spelen går ut på och hur de fungerar finns det inget enkelt sätt att göra det på. Om de till exempel söker på ”World of Warcraft” på Google får de upp ungefär 95 miljoner träffar att leta sig igenom (Google – 2011-04-20).
Många föräldrar har inte heller tiden som krävs för att själva börja spela och på så sätt kunna sätta sig in i vad det är deras barn gör.
Därför startades projektet ”Whatismykidplaying.com”. Projektet har som som syfte att skapa och tillhandahålla en webbportal dit föräldrar och anhöriga kan söka sig för att få information om olika dataspel. På webbportalen ska de kunna lära sig mer om spelvärlden barnen upplever och vad det kan innebära att spela dataspel. Detta för att de lättare ska förstå och kunna relatera till vad deras barn gör och inom vilka gränser det sker, det är viktigt för att förstå hur de kan göra för att förbättra kommunikationen kring ämnet.
2
1.2 Syfte
1.2.1 Arbetet
Studiens syfte är att designa, testa och implementera ett användargränssnitt för en webbplats, whatismykidplaying.com i en användarcentrerad utvecklingsmodell.
1.2.2 Uppsatsen
Målet med uppsatsen är att skapa ett enkelt och lättanvänt gränssnitt som användarna lätt förstår och upplever som lättanvänt. En undersökning av olika användares preferenser gällande användbarhet ska ligga till grund för designen av whatismykidplaying.com.
Designregler och rekommendationer för att skapa användbarhet kommer att följas och deras effekt på designen för whatismykidplaying kommer således att vara en del av utvärderingen.
1.3 Metod för arbetet
Utvecklingen av webbplatsen skedde enligt en användarcentrerad modell, i en iterativ process, där sidan testats på användare för att undersöka och utvärdera hur väl den fungerar. Detta sker i ett think-aloud test där användbarheten utvärderas. De resultat som fåtts från studien har varit vägledande för vad som ska ändras på sidan i nästa prototyp och även för fortsatt utveckling av webbplatsen.
Dels har jag designat en prototyp på gränssnittet för webbplatsen. När prototypen var färdig gjordes ett användartest av think-aloud typ. Användare fick då testa webbplatsen och utvärdera dess användbarhet. Den feedback jag fick från testet utvärderades och kom att ligga till grund för några konkreta förslag på förändringar på webbplatsen som infördes i efterföljande iteration. Studien är tänkt att vara en grund för eventuella framtida förändringar och förbättringar av gränssnittet och andra delar av webbplatsen.
Att åstadkomma hög användbarhet var målet för första iterationen då prototypen på gränssnittet skapades. När prototypen var klar testades den av användare, som utvärderade dess användbarhet. Efter testet sammanställdes den feedback som fåtts, förslag på förändringar togs fram och nästa iteration var redo att påbörjas. Tanken med att driva utvecklingen i en iterativ process var att gång på gång designa, testa och utvärdera, tills inga nya krav på förändringar dyker upp. Men på grund av tidsramen för min uppsats har bara en fullständig iteration kunnat göras.
1.4 Avgränsningar
I mitt test kommer det material som redan fanns på hemsidan användas och de uppgifter som användarna får utföra handlar inte om informationen utan om själva upplägget på webbplatsen.
3 Ingen utvärdering av hur väl de förändringar som gjorts efter första användartestet av gränssnittet på webbplatsen fungerar kommer att göras, detta på grund av min tidsmässiga begränsning.
Jag kommer inte att samla in information för att ha på webbplatsen utan bara utforma och utveckla själva gränssnittet för webbplatsen.
Jag kommer inte göra någon efterforskning i vilket språk som lämpar sig bäst för denna typ av utveckling utan kommer hålla mig till HTML och CSS.
Studien ska inte ses som ett ställningstagande i huruvida dataspelande ska ses som något bra, eller dåligt, för barn och ungdomar.
1.5 Begrepp och definitioner
Begrepp Förståelse
Användbarhet Enligt ISO-9421-11, standarden för användbarhet, definieras som ”Den grad i vilken användare i ett givet sammanhang kan bruka en produkt för att uppnå specifika mål på ett ändamålsenligt, effektivt och för användaren tillfredsställande sätt.”.
Iterativ utveckling Ett arbetssätt inom programmering som generellt innebär att regelbundna mindre leveranser görs, vilka utvärderas löpande och enkelt kan ändras för att möta nya krav och önskemål från beställaren.
Prototyping En iterativ utvecklingsmetod där man tar fram prototyper av det slutgiltiga programmet, prototyperna utvecklas iterativt och utvärderas kontinuerligt.
Språk Det program- och skript-språk som används för koden som skrivs för webbplatsen och dess funktioner.
Testmetod Metod för att utvärdera hur väl något fungerar, i detta fall webbplatsen och hur hög användbarhet den har.
Think-aloud En testmetod där testpersonerna tänker högt om det de gör medans de testar och testledaren övervakar och antecknar om testpersonens reaktioner och tankar.
Webbdesign Det arbete som både ger en webbplats en grundläggande grafisk struktur och det slutliga grafiska utseendet.
Webbutveckling Det arbete som bland annat innefattar webbdesign men även utveckling och implementering av funktioner i webbplatsen.
Webbportal I detta fall bör man jämföra det med en ämnesportal, då det kommer fungera som en samlingspunkt på internet med ett specifikt syfte och med en ämnesinriktning.
4
1.6 Disposition
Dispositionen för uppsatsen följer dels en mer klassisk uppsatsdisposition, men metoden och resultaten är indelade i olika kapitel efter de olika stegen i användarcentrerad design.
Inledning
I inledningen presenteras bakgrunden till projektet whatismykidplaying.com, syftet med uppsatsen, en sammanfattning av metoden i arbetet, avgränsningarna för uppsatsen och några definitioner av ord och uttryck som används.
Teori
Teorin presenterar dels användarcentrerad systemdesign som utvecklingsmetod för uppsatsen, som ligger till grund för dispositionen av uppsatsen, och även olika teorier om utvecklingen av webbplatsen.
Analys
I analysdelen ligger fokuset på användarna och deras behov i form av användbarhet.
Design
Designdelen presenterar prototypen som skapats för webbplatsen och teorin bakom skapandet av prototypen.
Utvärdering
I utvärderingen presenteras användbarhetstestets utformning, resultaten från användbarhets- testerna och en analys av dessa.
Återkoppling
Här presenteras de förslag på förändringar som tagits fram för webbplatsen, samt den slutliga prototypen som skapats utifrån resultaten från testerna.
Slutsats och diskussion
Uppsatsen avslutas med slutsatser kring användbarhet och prototypen för webbplatsen.
Diskussionen innehåller en metoddiskussion, resultatdiskussion och tankar om framtida utveckling av webbplatsen.
5
2 Teori
Målet med webbplatsen är att den ska vara användbar och lättförstådd för alla personer, oavsätt dator- och internet-vana. Användarna är väldigt centrala då det är tänkt att de själva ska bygga upp en community. Webbplatsen måste kunna locka till sig användare och vara lätt att använda. För att uppnå detta bör användare involveras i och ges fokus under själva utvecklingen. I användarcentrerad design involveras användarna redan från början och kommer därför användas som utvecklingsmetod.
2.1 Användarcentrerad design
Användarcentrerad design är enligt Gulliksen & Göransson (2002) en process, ett tillvägagångssätt för att utveckla användbara system. Genom hela processen ska fokuset ligga på användarna och användbarhet. Användarnas feedback är det som ger förutsättningarna för hur utvecklingen ska fortskrida. Nyckeln till ett användbart system ligger i själva utvecklingsprocessen, och den uppfattning utvecklarna har om användarna, användarnas uppgift och användningssammanhanget för programmet. Deras definition baseras på ett antal nyckelprinciper, nedan följer ett utdrag av några.
Användarfokus – verksamhetens mål, användarnas arbetsuppgifter och behov skall tidigt vara vägledande i utvecklingen. Användarprofiler, kontextuella intervjuer och uppgiftsanalys måste vara en naturlig del av utvecklingsprocessen. Prioritera vad som är bra för användarna framför vad som är tekniskt möjligt.
Aktiv användarmedverkan i utvecklingen – representativa användare skall aktivt medverka, tidigt och kontinuerligt genom hela systemets livscykel. Slutanvändare bör involveras under analysen och designen, primärt för utvärderingar av diverse designlösningar.
Evolutionär utveckling – systemet skall utvecklas iterativt och inkrementellt.
Designlösningarna bör kontinuerligt itereras med användarna. En iteration måste innehålla följande aktiviteter:
o En ordentlig analys av användarnas krav och användningssammanhanget o En designfas
o En dokumenterad utvärdering med konkreta förslag till förändringar
Prototyping – tidigt och kontinuerligt skall prototyper användas för att visualisera och utvärdera idéer och designlösningar med slutanvändarna.
Utvärdera verklig användning – mätbara mål för användbarheten och kriterier för designen skall så långt som möjligt styra utvecklingen.
Utvärdering är ett återkommande moment i principerna och har således en central roll i användarcentrerad design. Det är viktigt att börja med utvärdering tidigt i utvecklingen, vilket kommer naturligt i en iterativ process (se prototyputveckling figur 2), detta för att upptäcka och åtgärda fel och brister innan de blir allt för stora och tidskrävande att åtgärda.
Även Ottersten & Berndtsson (2002) anser att utvärdering är en viktig aktivitet som kan ske så snart det finns något att utvärdera och det bör vara ett återkommande inslag i utvecklingen.
6 Molich (2002) summerar kärnkomponenterna i en utvecklingsstrategi som leder till användbara webbplatser som han kallar ”de fem gyllene reglerna”
Känn dina användare. Sätt dig in i vilka de framtida användarna är. Bestäm och beskriv målgruppen för webbplatsen.
Engagera dina användare. Håll god kontakt och regelbundna möten med användare och diskutera och testa prototyper.
Testa och korrigera designen. Skapa prototyper som användarna får lösa uppgifter med, använd erfarenheterna från testen till förbättrad design.
Lär av varandra. Använd konkurrenters webbplatser som förebilder för att bli lite bättre än dem.
Samordna hela användargränssnittet. Skapa en enhetlig skärmdialog för webbplatsen, utarbeta en dialogstandard för att säkra enhetligheten i webbplatsens olika delar.
Grundelementen i användarcentrerad systemdesign sammanfattas av Gulliksen & Göransson (2002) i användarfokus, mätbar användbarhet och iterationer (se figuren nedan).
Figur 1 De iterativa stegen i användarcentrerad systemdesign, Gulliksen & Göransson 2002 (www.it.uu.se 2003)
2.2 Användbarhet
Användarcentrerad systemdesign syftar även till att utveckla produkter med hög användbarhet. Hur definierats då användbarhet? Den internationella standarden ISO 9241
”Software ergonomics for office work with visual display terminals (VTD’s)” del 11
”Guidance on usability” definierar det som ”Den utsträckning till vilken en specificerad användare kan använda en produkt för att uppnå specifika mål, med ändamålsenlighet, effektivitet och tillfredsställelse i ett givet användningssammanhang.” (ISO 9241-11 1998) Vidare definieras i standarden
Ändamålsenlighet som ”Noggrannhet och fullständighet med vilken användarna uppnår givna mål.”
Effektivitet som ”Resursåtgång i förhållande till den noggrannhet och fullständighet med vilken användarna uppnår givna mål.”
7
Tillfredsställelse som ”Frånvaro av obehag samt positiva attityder vid användningen av en produkt.”
Användningssammanhang som ”Användare, uppgifter, utrustning (maskinvara, programvara och annan materiel) samt fysisk och social omgivning i vilken produkten används.”
Jakob Nielsen menar att användbarhet (usability) inte är en enkel, endimensionell egenskap i ett användargränssnitt. Det har flera olika komponenter och det associeras med följande användbarhetsattribut (Nielsen 1993)
Learnability – Systemet ska vara lätt att lära sig, så att användaren snabbt kommer igång med arbetet.
Efficiency – När användaren har lärt sig systemet bör det vara effektivt att arbeta med.
Användarna ska kunna uppnå hög produktivitet enkelt.
Memorability – En användare som inte använt systemet på en tid måste snabbt och enkelt komma tillbaka utan att behöva lära om hur systemet fungerar.
Errors – Systemet ska vara enkelt att använda, användarna ska göra så få fel som möjligt. Om de ändå gör fel måste det gå att komma tillbaka till situationen innan felet uppstod. Katastrofala fel får inte förekomma.
Satisfaction – Det ska kännas angenämt att använda systemet. Användarna skall känna att de tycker om att arbeta med det.
Enligt Ottersten & Berndtsson (2002) är användbarhet en kvalitetsegenskap hos interaktiva produkter. Användbarheten visar sig i samband med användning av produkten. Det är alltså inte en inneboende egenskap hos en produkt, utan det är något som uppstår när en specifik användare använder en produkt för att utföra en uppgift i ett specifikt sammanhang.
Utifrån dessa definitioner kan man förstå att användbarhet är ett komplicerat begrepp. Det är både situations- och individberoende, olika individer kan vid samma situation uppleva olika hög användbarhet hos en produkt och en och samma individ kan vid olika situationer uppleva olika hög användbarhet hos en produkt. För att kunna mäta användbarhet bör man därför ha definierat de olika variablerna. (se vidare avsnitt 5.1)
2.2.1 Användbarhet vid webbdesign
När man skapar en webbplats måste man ha två former av uppmärksamhet i tankarna, användbarheten måste ägnas vederbörlig uppmärksamhet av utvecklarna, och webbplatsen måste kunna dra till sig och behålla användarens uppmärksamhet. För att kunna uppnå hög användbarhet på en webbplats är tre egenskaper särskilt viktiga (Molich 2002)
Tillförlitlighet – Webbplatsen ska vara stabil, funktionsfel och dataförlust som resulterar i att användarna måste göra om sitt arbete bör inte förekomma.
Säkerhet – Användarna ska vara förvissade om att de data som de anförtror webbplatsen är skyddade.
Tillgänglighet – Webbplatsen ska vara tillgänglig när användarna vill utnyttja den.
Om en eller flera av dessa egenskaper inte är uppfyllda finns det ingen mening med att tala om användbarhet menar Molich (2002). En begriplig och konsistent design bör användas på
8 webbplatsen, detta för att underlätta för användaren. Man kan då utgå från följande principer till sin design
Sätt användaren i centrum – se till att användarna upplever att webbplatsen vänder sig till dem.
Synliggör användarens möjligheter – visa vad användarna kan och bör göra i olika situationer.
Det är även viktig att komma ihåg att även om en webbplats från början kan vara liten och för dess storlek välstrukturerad kommer den att kunna växa över tid. Då är det viktigt att ha en enkel och tydlig navigation till användarnas hjälp, den ska vara utformad för att underlätta för användarna att hitta det de söker. För att åstadkomma detta är det viktigt att den underliggande strukturen för webbplatsen är välplanerad. (Benyon, Turner & Turner 2005) En sammanställning av vart användare förväntar sig hitta olika element av en webbplats ges i en rapport från thinkingweb.com.
Logotyp – överst till vänster
Meny – vertikalt till vänster på sidan.
Hem-länk – i det övre vänstra hörnet eller i mitten av sidans nedre kant.
Sökfält – i mitten av sidan mot den övre kanten.
Hjälp-länk – överst i högra hörnet
Flera andra saker som är viktiga att tänka på för designen tas upp i rapporten. Till exempel har nästan 50% av alla internetanvändare (2001) har en skärmupplösning på 800*600 pixlar, vilket ger en effektiv yta på 750*425 pixlar att presentera informationen på om användarna ska slippa skrolla för att kunna se allt. (thinkingweb.com)
Molich (2002) har några konkreta exempel på vad man bör tänka på, till exempel bör inte en menyrad ha fler än sju länkar i sig. Detta för att underlätta för användarna då enbart ett fåtal kommer kunna få en snabb överblick av dem om det är fler.
När man designar webbgränssnitt ska man undvika att användaren ska behöva tänka efter för att förstå och hitta det denne letar efter. Länkar bör vara självförklarande, i den mån att man förstår vart de leder och får en förståelse vad som finns där. Det ska även tydligt framgå att de är länkar och inget annat, tydliga knappar och understrukna textlänkar är att föredra. Detta för att ge ett professionellt intryck och förenkla för användaren att hitta det denne söker. (Krug 2006)
2.2.2 Webbutveckling
Flertalet olika tekniker finns till hands när man jobbar med webbutveckling. I detta projekt har jag tänkt att använda mig av de som följer nedan.
HTML
HTML står för Hyper Text Markup Language och är ett märkspråk (eng. markup language) som ger struktur åt hemsidor. HTML bygger upp själva beskrivningen av innehållet och utgör själva hemsidedokumentet. Detta sker genom att man ”taggar” innehållet med olika taggar.
Dessa kan sedan läsas och tolkas av webbläsare, som sen visar upp innehållet. (w3schools a)
9 CSS
CSS står för Cascading Style Sheets och är ett komplement till HTML. I CSS definieras hur de olika elementen i HTML dokumentet ska visas upp. Det styr designen och formateringen av hemsidornas innehåll. En av finesserna i CSS är dess box model (se figuren nedan) där HTML-element ses som en box bestående av marginal, ram, utfyllnad och själva innehållet.
Alla dessa kan ges olika värden och attribut för att ge webbplatsen det utseende som eftersträvas. (w3schools b)
Figur 2 CSS box-modell från w3schools.com
JavaScript
JavaScript är ett skriptspråk som används på hemsidor, några användningsområden är bland annat att ge feedback till användaren när denne interagerar med webbplatsen och att bidrar med olika hjälpfunktioner. JavaScript körs hos klienten, i webbläsaren (eng client side script), och är inget som tynger ner trafiken på servern. Dock innebär det att klientens webbläsare måste stödja JavaScript och att det måste vara tillåtet att köras i klientens webbläsare.
(w3schools.com c)
PHP
PHP står för PHP: Hypertext Preprocessor och är ett skriptspråk som har utvecklats till ett objektorienterat programmeringsspråk. PHP körs på webbservern där det genererar HTML kod som skickas till klientens webbläsare, det är inget som användarens webbläsare måste stödja. Det används ofta tillsammans med databaser för att generera dynamiska hemsidor.
(w3schools.com d)
10
3 Analys
3.1 Användarna
Ett centralt begrepp som återkommer i användarcentrerad design är användare. Innan man kan starta med utvecklingen måste man veta vilka man utvecklar för och förstå deras behov. För att ta reda på vilka de är och vad deras behov är behöver en användaranalys göras.
För att få en förståelse för vilka som kan komma att använda din webbplats bör olika användare identifieras, alla användare har olika förutsättningar och intressen. En generell uppdelning av användarna föreslås av Rosenfeld & Morville (2002). De anser att det finns tre huvudtyper av användare som besöker en webbplats, dessa är
Personer som söker svar på en specifik fråga
Personer som är intresserade av ett ämne
Personer som söker utförlig information
Det kan vara svårt att generalisera på detta sätt för inom varje grupp är det förstås stor skillnad från en användare till en annan. Men dessa tre grupper av användare är något som en designer bör ha i åtanke när gränssnittet görs, så att ingen blir utelämnad.
Enligt Ottersten & Berndtsson (2002) är en målgruppsanalys själva grunden för att bygga rätt produkt. Målgruppsanalysen bör göras så tidigt som möjligt i projektet för att få förståelse för vilka behov som behöver tillmötesgås i designen. Utan en målgruppsanalys är det svårt att förutsäga och möta tilltänkta användares behov. Även användningsområdet och användningssammanhanget är av stor betydelse. Beroende på om produkten ska användas i arbetet eller på fritiden, för att utföra vissa uppgifter eller till nöje, kan samma användare ha olika preferenser gällande designen.
Molich (2002) ger en beskrivning av hur man får en överblick över målgrupperna som webbplatsen kommer att rikta sig till. En summering av dessa följer
Utarbeta en kravspecifikation där huvudsyftet med webbplatsen framgår. Frågan
”Varför ska användare besöka denna webbplats?” ska besvaras med denna.
Beskriv olika målgrupper där användarna delas in efter olika intressen och förutsättningar.
Dela upp målgrupper i primära och sekundära, där de primära målgruppernas behov är de som webbplatsen i första hand ska stödja.
Gör målgruppsbeskrivningar där målgruppens viktigaste förväntningar på webbplatsen framgår.
För att kunna designa en för användarna användbar produkt bör allt detta vara specificerat, vilka användarna är, vilket användningsområde produkten kommer användas i och vilket sammanhang användandet sker i.
11 3.1.1 Målgrupp
De som var tilltänkta användare för whatismykidplaying.com var redan beskrivna som målgrupp när jag kom in i projektet. Denna målgrupp är föräldrar, och i viss mån även nära anhöriga, till barn och ungdomar som spelar dataspel. Detta följer ganska naturligt eftersom det är dom som har jobbet att handskas med situationen i hemmet på vardagen. Andra intressenter för webbplatsen kan vara skolor, föräldraorganisationer och barnen själva.
3.1.2 Användbarhet för målgruppen
Målet var att skapa ett användbart gränssnitt för webbplatsen, en bra grundsten att stå på för vidareutveckling av hemsidan. Det finns flera olika tankar och teorier om användbarhet och hur man bäst uppnår den, men för att kontrollera om man uppnått hög användbarhet är enda sättet att testa med de faktiska användarna.
Då hemsidan riktar sig till en väldigt bred grupp människor, föräldrar, som alla har olika förutsättningar vad gäller datorvana och internetanvändning skulle inte designen på hemsidan stänga ute någon. Hemsidans gränssnitt skulle vara tillräckligt enkelt och tydligt för att de allra flesta ska förstå det vid användning.
12
4 Designförslag
4.1 Prototyping
I traditionella vattenfalls-liknande utvecklingsmetoder kommer ofta framtagningen av användargränssnittet sent i utvecklingen. Detta kan bli ett problem ur användbarhetssynpunkt, det innebär att testningen av interaktionen med systemet inte kommer att kunna ske förrän i utvecklingens slutskede. Om någonting skulle behöva förändras, eller om nya krav dyker upp, kan det bli en kostsam och tidskrävande process att föra in dem. Alternativet är att ignorera de nya kraven eller förändringarna och ha ett system som användarna inte trivs med. Liknande problem är lättare att undvika om utvecklingen sker med i en iterativ process. Prototyping är en iterativ utvecklingsprocess som består av kontinuerlig utveckling av prototyper på delar av systemet som testas och utvärderas. De nya krav och förslag på förändringar som dyker upp utvärderas och kan, om det är motiverat, läggas till i nästa iteration. Prototyperna ska inte representera en detaljerad bild av slutresultatet utan vara ett förlag som användarna ska kunna tycka till om och som utvecklarna är villiga att ändra i ända tills de uppfyller så gott som alla krav. (Gulliksen & Göransson 2002, Dennis, Wixom & Roth 2006)
Iterativ utveckling har som fördel att man som utvecklare lär sig mer om kraven under processens gång. När de olika faserna upprepas kan designlösningar formas och förfinas efter hand, för att slutligen ge ett resultat som är anpassat efter kundens behov. (Gulliksen &
Göransson 2002)
Prototyper kan vara av olika sorter, low-fidelity prototyper som representeras på papper med skisser och high-fidelity där prototypen är representerad på dator. Prototyping delas även in i horisontell och vertikal prototyping. I horisontell har de flesta funktioner skalats bort, oftast visas bara ett användargränssnitt som tillåter interaktion. I vertikal prototyping är det istället en eller några centrala funktioner som utvecklats och testats utförligt. Prototyp sorterna är användbara i olika situationer, vill man testa hur väl ett generellt användargränssnitt fungerar är horisontell prototyping bättre, vertikal prototyping ger bra förståelse för slutanvändarnas behov i specifika situationer. (Gulliksen & Göransson 2002, Benyon, Turner & Turner 2005)
4.2 Utveckling
Målet med den, för uppsatsen, slutgiltiga prototypen var att skapa ett nytt gränssnitt för webbplatsen som skulle främja användbarhet för de tilltänkta användarna. Hemsidan riktar sig till en bred grupp människor, föräldrar, vars datorvana och internetanvändning inte nödvändigtvis är på en så hög nivå. Hemsidans gränssnitt ska vara tillräckligt enkelt och tydligt för att de allra flesta ska förstå det vid användning, designen på hemsidan ska inte stänga ute någon för att de inte förstår den. För att uppnå det använde jag under min prototyputveckling rekommendationer och teorier från Nielsen (1993, 2002), Molich (2002), Krug (2006) och thinkingweb.org. Det fanns många regler och riktlinjer att följa och bland de olika författarna fanns det många likheter i vad de ansåg var viktigt att tänka på och följa, det är dessa som följs om inget annat anges i texten.
13 4.2.1 Relevanta regler
En sammanställning av de regler som varit relevanta för designen av webbplatsen följer.
Vart bör olika element finnas på hemsidan:
Logotyp – överst till vänster
Meny – vertikalt till vänster på sidan.
Hem-länk – i det övre vänstra hörnet eller i mitten av sidans nedre kant.
Sökfält – i mitten av sidan mot den övre kanten.
Hjälp-länk – överst i högra hörnet Sidans storlek, bredd och höjd:
Bredden bör vara anpassad så att personer med skärmupplösning på 800*600 pixlar kan se hela sidan utan att behöva scrolla horisontellt för att se innehållet.
Höjden på sidan bör ej vara mer än tre "sidor", detta för att användaren inte ska behöva scrolla mycket för att se informationen som finns på webbplatsen.
Länkar och menyer:
En länkgrupp eller meny bör inte ha mer än sju länkar, detta för att göra det mer överskådligt för användaren att hitta det denne letar efter.
Länkar bör vara självförklarande, som användare ska man förstå vart man kommer hamna om man följer en länk.
Länknamn ska vara självförklarande och inte innehålla förkortningar som inte är allmänt kända.
Länkar ska vara tydliga även i den mån att det ska synas tydligt att det är länkar och inget annat. Tydliga knappar och understrukna länkar är att föredra.
Hem-länken, till förstasidan, bör inte vara aktiv när man är på förstasidan, för att inte förvirra användaren och få den att tro att det finns en annan förstasida.
En länk bör inte heta "länkar", det ger ingen som helst information till användaren om vart denne kommer om länken följs.
Det bör synas på färgen vilka länkar som besökts tidigare och vilka som är obesökta.
Sidlayout:
Sidan ska helst vara i en flytande (liquid) layout som gör det enkelt för användaren att zooma och som gör att sidan tar upp så stor del av skärmytan som möjligt.
Brödtexten ska vara i så hög kontrast som möjligt mot bakgrunden, för att underlätta för användaren att se och läsa vad som står.
Brödtexten bör även vara enkel att förstora genom att zooma, detta ska gå att göra utan att sidans layout "bryts" eller förstörs.
Alla bilder, animationer och banners som tar bort användarens fokus från det riktiga och viktiga innehållet bör undvikas.
Webbplatsen bör ha en rubrik och en slogan som talar om vart man kommit och vad som erbjuds på sidan.
14 4.2.2 Första prototypen
När jag började i projektet fanns redan en hemsida med material att utgå från och använda. (se figur 3 nedan) För att ha material till den nya sidan tog jag HTML koden, själva innehållet, från den gamla sidan och utgick från. Några små ändringar gjordes i koden, en del har tagits bort och andra delar har flyttats runt. Det största jobbet har lagts ned på att skapa CSS koden, en helt ny stilmall har gjorts och används för webbplatsen. I och med att jag inte ändrat något i själva layouten har jag redan brutit mot några av de rekommendationer och teorier som thinkingweb.org, Nielsen, Molich och Krug har. (se mer om det under regelbrott, avsnitt 4.3)
Figur 3 Ursprunglig design på hemsidan
Något som man bör tänka på när man arbetar med webbdesign är att alla webbläsare tolkar koden olika och har olika standardvärden som man behöver ta hänsyn till. För att "nollställa"
dessa och på så vis ge ett mer standardiserat utseende använder jag mig av en CSS-reset mall från Eric Meyer, hämtat från meyerweb.com (Meyer 2008).
15 När jag precis hade börjat med uppsatsen gjorde jag en prototyp på hur jag tänkte mig att sidan skulle kunna se ut. Detta var bara ett utkast som var som en förbättring av den dåvarande webbplatsen, utan tanke på användbarhet och andra kriterier. (se figur 4 nedan) Denna prototyp motsvarade dock inte vad beställaren hade tänkt sig att webbplatsen skulle se ut som och en ny design fick skapas som skulle ge ett mer vetenskapligt och seriöst intryck på användaren. Till skapandet av den nya designen har jag gett fler av kriterierna för användbarhet mer uppmärksamhet och jag har även fått önskemål om att den ska vara enkel att förstå och använda för alla sorters användare av min beställare, inga ska känna sig uteslutna för att det är en svår design.
Figur 4 Första utkastet för designen på whatismykidplaying.com
4.2.3 Andra prototypen
Upplägget på den andra prototypen av webbplatsen, den som ska testas av användare, följer en em-baserad layout. Detta då en em-baserad layout gör att det enklare går att zooma in på texten, storleken på allt bestäms av inställningar i användarens webbläsare och skalas efter dess standardmått på texten.
När jag skapade sidan utgick jag från de olika sidorna med innehåll på den gamla webbplatsen. För att strukturera upp navigationen delade jag upp sidorna i två grupper, jag kallar de olika för innehållssidor och hjälpsidor. Innehållssidorna var sidor med innehåll som
16 var av den sort som webbplatsen tillhandahöll, till exempel Games och Genres. Hjälpsidor var sidor av mer hjälpande och förklarande karaktär, till exempel FAQ och About. Länkar till de olika delarna upp efter de två grupperna och placerades sedan ut på webbplatsen.
Sidan är uppbyggd med olika boxar, div-element, där innehållet presenteras. (se box-model figur på sid 9) Överst är header-boxen, där en huvudrubrik med sidans namn och en mindre underrubrik med sidans syfte presenteras. Rubrikerna i headern har fått speciell stil för att skilja sig från de andra rubrikerna. Färgen i header-boxen är mörkare blå och rubrikerna är i vit färg för att synas bättre. Under header-boxen till höger har en länksamling placerats.
Under denna finns content-boxen, där själva textinnehållet är placerat, med vit bakgrund.
Flytandes till vänster under header-boxen, bredvid content-boxen finns en sidebar med menyn. I underkant av header-boxen placerades hjälplänkarna och innehållslänkarna i sidebar-boxen. (se figur 5 nedan)
Figur 5 Nya designen på webbplatsen
Färgerna på länkarna sattes till olika beroende på vad för länk det är. Hjälplänkarna fick en svart färg och sattes till fetstil, för att de skulle vara enkla att skilja från innehållslänkarna.
Innehållslänkarnas första bokstav är 50% större än resten av länktexten, som är i fetstil, hela länken är i en mörkare blå färg. De "vanliga" länkarna på sidan fick samma färgsättning vid visning som innehållslänkarna, men länkarna fick en ljuslila färg om de blivit besökta tidigare av användaren, detta för att användarna enkelt ska kunna urskilja vilka länkar de besökt tidigare. Alla länkarnas text är understruket utom när man håller muspekaren över, då försvinner understrykningen, detta för att ge lite dynamik åt dem för att visa att de är möjliga att interagera med. Ett statiskt element är mer osäkert för användarna om det går att interagera med eller inte.
17 Användare är vana att hitta en meny, en länksamling, för navigering till vänster på sidan, varför jag placerade innehållslänkarna där. Hjälplänkarna placerades i övre delen av sidan, mot högra kanten, vilket var en lämplig plats att placera liknande delar. Anledningen till grupperingen av länkarna är dels att en länkgrupp inte bör ha fler än sju länkar i sig men också för att tydliggöra och underlätta för användaren att hitta i strukturen på webbplatsen.
Någon logotyp för webbplatsen fanns inte då prototypen skapades, istället för logotyp placerade jag, rubriken från tidigare webbplats där logotypen brukar vara. Det var webbplatsens namn whatismykidplaying.com, överst till vänster på sidan, med underrubriken som slogan nedanför.
All text i content-boxen är svart, för att maximera kontrasten mot den vita bakgrunden, texten är i Verdana som tillhör font-familjen sans-serif och radavståndet är ökat till 33% större än det normala för att öka läsbarheten på texten och för att motverka att användarna ska få känslan av en ogenomtränglig vägg av text som presenteras.
De färger som jag använt har jag försökt att välja så att även personer med någon form av färgblindhet ska kunna skilja på dem, även om det ibland är väldigt små skillnader i nyansen.
Detta har jag gjort med hjälp av ett gratisverktyg på colorschemedesigner.com (2010) som är väldigt lätt att använda. Som jag tidigare nämnt har jag försökt att ha så stor konstrast som möjligt för att öka läsbarheten på texten. Jag har även använt mig av så kallade webbsäkra färger, detta för att öka sannolikheten att olika webbläsare och datorer visar färgerna lika.
4.2.4 Alternativa designlösningar
Under den senare delen av arbetets gång har jag provat några olika designlösningar för header-boxen och dess innehåll, men även för själva färgerna. (se figur 6 nedan)
Figur 6 Alternativt upplägg för header-boxen, med breadcrumbs och sökruta
De alternativa designerna har bland annat som den här ovanför innehållit fler element, en sökruta för att underlätta för användarna att hitta vad de söker, placerad där en sökruta bör vara placerad. Även ett försök med så kallade brödsmulor (eng. breadcrumbs) användes.
Brödsmulor visar dels vart på webbplatsen användaren befinner sig och vad som finns bakåt i hierarkin. Detta är en rekommenderad funktion, som underlättar för användaren att se vart på webbplatsen denne är. Om brödsmulor används kan man undvika att ha en länk till förstasidan på förstasidan, då Home inte är en aktiv länk utan bara visar vart man är när man är på förstasidan. Det är rekommenderat att inte ha en aktiv länk till förstasidan på förstasidan då detta kan förvirra användare. (thinkingweb.org, Nielsen)
18 För att brödsmulor ska vara effektivt krävs att den underliggande strukturen på webbplatsen är bra och att den har flera nivåer av sidor med information, annars blir det bara en variant av hem-knappen som redan finns på menyn, som det är nu. Som whatismykidplaying.com är uppbyggt finns bara en nivå med ett gränssnitt överst och en underliggande nivå med några olika sidor med lite information. Detta är även anledningen till att ingen sökfunktion har implementerats, det finns för lite information och det är en väldigt enkel struktur.
Ett annat alternativ för navigationen hade varit att ha en global huvudmeny horisontellt, under header-boxen, vars olika länkar skulle representera huvudområdena på webbplatsen. De skulle i sin tur ha vars en egen områdesspecifik undermeny i sidebar-boxen. Dock saknar varje huvudområde, som Games och Genres, specifika delområden och en sådan design hade inte varit effektiv. Om sidan skulle växa och få fler nivåer med underliggande sidor skulle en sådan design fungera bättre.
4.3 Regelbrott i prototypdesign
Jag har i och med att jag inte ändrat i det material som fanns på den ursprungliga webbplatsen behållit vissa saker som är kända för att orsaka förvirring och osäkerhet hos användarna.
En länk bör vara självförklarande i vart det är den leder och vad som finns bakom.
Det bör inte finnas en länk till webbplatsens förstasida på förstasidan, det kan få användarna att tro att de inte är på förstasidan och försöka att ta sig dit fast de redan är där.
En länk bör inte ha namnet ”länkar” (Links), detta då det inte ger någon som helst förklaring av vart den egentligen leder.
Games och genres kan behöva vara tydligare i sina namn efter vad de faktiskt innehåller. Games leder till en video om en genre, vilket kan göra det otydligt för användarna vart de är och vad de kan förvänta sig att hitta var.
FAQ är inte en allmänt känd förkortning och blir därför inte lättförstådd som länk, för äldre svenska användare i alla fall. För användare med engelska som modersmål kan situationen vara annorlunda. Men jag vet inte hur välkänt uttrycket är hos äldre personer med engelska som modersmål.
Det behövdes inga stora ingrepp för att rätta till dessa relativt små regelbrott och problem men de fick ändå vara kvar, mest som en test för att se om de regler och rekommendationer som hittats faktiskt stämmer med användarnas åsikter.
19
5 Utvärdering
5.1 Hur man utvärderar
Enligt Gulliksen & Göransson (2002) behöver man specificera följande punkter för att kunna mäta användbarheten hos ett system
En beskrivning av användarens mål och intentioner
En beskrivning av användningssammanhanget, inbegripet användarna, uppgifterna, utrustningen och miljöerna
Målen eller faktiska värden för ändamålsenlighet, effektivitet och tillfredsställelse i det avsedda användningssammanhanget
Man bör även specificera användningsmålen för systemet. Målen kan uppdelas i delmål som specificerar komponenter i ett överordnat mål och vilka kriterier som krävs för att man skall uppfylla målet.
Användbarhetsmått i termer av ändamålsenlighet, effektivitet och tillfredsställelse kan man specificera för överordnade mål och mera begränsade mål. Exempel på användbarhetsmått kan inbegripa
Ändamålsenlighet
Procent av mål som uppnåtts
Procent uppgifter som slutförts framgångsrikt vid första försöket
Procent av relevanta funktioner som används Effektivitet
Tiden att slutföra en uppgift
Antal allvarligare fel
Tiden som spenderas på att rätta dessa fel Tillfredsställelse
Bedömningsnivå av tillfredsställelsen
Bedömningsnivå av felhanteringen
Frekvensen av återanvändning
5.1.1 Användbarhetstest
För att få bra feedback från ett användbarhetstest till utvärderingen bör deltagande utvärderingsmetoder användas. I deltagande utvärderingsmetoder involveras användarna i utvärderingen. (Gulliksen & Göransson 2002)
Enligt Krug (2006) är användbarhetstester viktigt att göra, de fungerar alltid. Att börja testa med en användare tidigt under projektet är bättre än att testa med 50 användare mot slutet. Ett
20 enkelt test tidigt i utvecklingen kan ge bättre resultat än ett sofistikerat test när sidan börjar bli kvar. Det viktiga är att man tar tiden och har möjlighet att dra lärdom av testet och sen att använda lärdomen för att förbättra sidan. Även om det är fördelaktigt att ha användare som tillhör målgruppen som testar är det inget måste, det ska inte hindra från att börja testa tidigt och ofta. Ett litet test med en användare som inte tillhör målgruppen visar också på saker som kan och bör förbättras på sidan. Krug menar även att användbarhetstesterna är något som inte räcker att göra en gång utan de bör ske iterativt, skapa något - testa det - fixa det - testa igen.
Även Nielsen (1999) lyfter fram vikten av att ha med användarna och låta dem testa under arbetet med att utveckla användbara hemsidor. Det är enligt honom den mest grundläggande metoden för att uppnå användbarhet. Genom den får man direkt information och feedback från användarna på hur väl designen fungerar. Han har tillsammans med Tom Landauer gjort en matematisk funktion som visar antalet användbarhetsproblem funna i ett användbarhetstest med olika många användare. (se figur 7 nedan)
Figur 7 Jakob Nielsen graf för procent av problem funna vid användbarhetstest.
Som grafen visar krävs det i teorin 15 användare som testar för att alla användbarhetsproblem ska upptäckas i ett test, med fem användare upptäcks ungefär 85% av problemen. Men att testa med fler än fem per test rekommenderar inte Nielsen. Han menar att det är bättre att testa tre gånger med fem användare än en gång med 15 användare. Teoretiskt blir det samma resultat, alla användbarhetsproblem i första designen kommer upptäckas. Men om tre test görs kan designen ändras och åtgärdas mellan testen, således kan den nya designen utvärderas och eventuella brister i den upptäckas och åtgärdas. Det är på detta sätt, med en iterativ design och test, som en hög användbarhet uppnås. Det räcker inte att testa en design en gång, dokumentera det som hittas och rätta till de brister som anses viktiga då och där. Även den nya designen bör testas och åtgärdas för att säkerställa att de ändringar som införts hade förväntad effekt och inte ett dåligt gränssnitt ersatts med ett sämre. (Nielsen 2000 www)
5.1.2 Think-aloud test
Think-aloud metoden är en observerande utvärderingsmetod där deltagarna beskriver vad de gör och deras tankar om hur de upplever det de gör, medan de utför en förutbestämd uppgift.
21 Mer specifikt ska deltagarna som testar berätta vad de tittar på, gör, tänker och känner medan de utför en uppgift. Tekniken är speciellt användbar för att utvärdera prototyper och hitta potentiella problem ur användbarhetsperspektiv.
Fördelarna med think-aloud metoden är att den möjliggör för de som ska utvärdera att se hur användarna går till väga för att lösa en uppgift. Metoden bidrar med innehållsrik kvalitativ data, men för att den ska ge resultat måste användarna prata. Om de inte gör det blir det svårt att förstå och utvärdera vad användaren gör, ville göra och vad användaren tänkte och tyckte om det. Att försöka dra ut tankar från användaren kan göra att användaren känner sig obekväm och ännu mer ovillig att prata. Ett sätt att komma runt det är att ha utvärderingen i par, eller grupper.
Nackdelarna är som nämnts ovan, deltagarna kan vara ovilliga att beskriva vad de gör och känner inför det de gör. Metoden fungerar bara så länge deltagarna är villiga att göra det.
(tireseas.org 2009)
Nielsen (1999) beskriver think-aloud test som den mest värdefulla metoden att utvärdera användbarhet med. Genom att användaren hela tiden tänker högt om det denne gör fås en insikt i hur de ser på systemet som testas som är svår att få annars. Det underlättar att reda ut och förtydliga missförstånd eller oklarheter som användaren upplever. Dessutom får man en tydlig bild av vad för något det är som skapar dessa oklarheter och vet på så sätt vart någon stans det är förändringar bör göras för att en förbättring ska uppnås. Men det är viktigt att man som testledare inte lägger för stor vikt vid användarens egna teorier om vad det är som skapar problemet som upplevs. Det som fås ut från ett think-aloud test ska vara data över vad användaren gjorde och tyckte om det, som ska ligga till grund för en egen analys av problemet och hur det ska åtgärdas. Styrkan i think-aloud metoden ligger i att man som testledare deltar och ser precis vad användaren gör och varför de gör det, samtidigt som de gör det. På så vis undviks efterkonstruktioner av hur något gått till.
5.2 Utformning av användbarhetstester
För min del i detta projekt använde jag mig av vissa delar av de som bör vara med i ett test.
Detta då inte alla kändes så relevanta för undersökningen. Av de användbarhetsmått som presenterats var det bara några som verkade intressanta. De som använts för att mäta ändamålsenlighet, effektivitet och tillfredsställelse är:
Ändamålsenlighet
Procent av mål som uppnåtts
Procent uppgifter som slutförts framgångsrikt vid första försöket Effektivitet
Tiden att slutföra en uppgift Tillfredsställelse
Bedömningsnivå av tillfredsställelsen
Övriga bedömdes som icke tillämpliga i detta fall eftersom det endast är ett test av ett användargränssnitt och inte ett test av ett system med funktioner och felhantering etc.
22 Dessa punkter kommer att tillsammans med think-aloud testet ge både kvalitativ och kvantitativ data på hur användarna upplevde webbplatsens gränssnitt.
5.2.1 Think-aloud test
För att kunna hålla think-aloud tester med målet att utvärdera användbarhet behövde flera olika parametrar definieras.
Användarens mål och intentioner
Användningssammanhanget, inbegripet användare, uppgifter, utrustning och miljön
Målen eller faktiska värden för ändamålsenlighet, effektivitet och tillfredsställelse i det avsedda användningssammanhanget
Eftersom det bara är ett gränssnitt som utvecklats blev testuppgifterna relativt simpla, och det som egentligen utvärderats är hur väl navigationen och strukturen, layouten, fungerar.
Användarens mål och intentioner blev de uppgifter som skulle utföras
Hitta information om RolePlayingGames
Ta reda på hur man går till väga för att efterfråga en video om ett speciellt spel
Hitta videon om FPS spel
Ta reda på vem som är ansvarig för sidan
Hitta länken till the "world cyber games"
Navigera runt på sidan (allmänna tankar som feedback)
Användningssammanhanget har varierat från test till test. Ett test var på personens kontor, ett i personens hem och ett i mitt eget hem. Varje test har gjorts från min bärbara dator, via webbläsare av användarens val, med skärmupplösning på 1280x800.
Telefontest
Det test som gjordes över telefon var inte lika till innehållet som vad think-aloud testen var.
Detta på grund av att jag inte hade frågorna tillgängliga för tillfället och det var inte heller planerat att bli något test över telefon.
Användbarhetsmåtten som användes blev därför annorlunda än vid de andra testen. Jag kunde inte mäta tillfredsställelse över telefon och jag kunde inte heller se hur många uppgifter som löstes på första försöket. Det blev mer som en telefonintervju än ett riktigt test. De kriterier som användes blev enbart för att mäta ändamålsenlighet och effektivitet och sattes upp i efterhand, de är som följer:
Ändamålsenlighet
Procent av mål som uppnåtts Effektivitet
Tiden att slutföra en uppgift
Måttet för tillfredsställelse gick inte att bedöma och inte heller antalet uppgifter som löstes på första försöket. Detta då jag inte kunde vara med och se testpersonens reaktioner eller se hur många försök som krävdes för att hitta rätt.
23 De uppgifter som användaren fick göra blev frågor om att hitta vissa delar på sidan.
Vart ska man maila om man har några frågor om sidan
Vilka speltyper kommer det att publiceras information om inom kort
Vilken spelgenre finns det en video för publicerad på webbplatsen
Hur upplever du sidan och layouten (allmänna tankar som feedback) Personen i fråga satt under testet på sitt kontor vid sin egna dator.
5.3 Resultat från användbarhetstester
Resultaten som jag fick från användbarhetstesterna ligger till grund för de förändringar som införts på webbplatsen. Enbart en utvärdering och en sammanställning av resultaten från testerna kommer att presenteras, vilket följs av en analys av resultaten och förslag på förändringar av webbplatsen. Testerna i helhet presenteras som bilaga till uppsatsen.
Webbplatsen testades av fyra olika personer, tre som gjorde think-aloud tester och en som gjorde en variant över telefon, mer av en telefonintervju. De personer jag fick tag på som var med och testade var alla någon som tillhörde min bekantskapskrets, det blev en sorts bekvämlighetsurval. Jag är medveten om att detta kan vara lite av ett problem, men jag tror inte att det är något som har påverkat de resultat jag fått. Innan testen började var jag tydlig med att poängtera att all feedback är bra feedback, oavsett hur taskig den är, och att utvärderingen inte är av personen som testar utan av hur väl webbplatsen fungerar. Alla som testade hade relativt hög internetvana, att hitta personer med låg internetvana i Sverige var inte det lättaste då många äldre använder datorer och internet dagligen i sina jobb och på sin fritid och de lite yngre har växt upp med datorer i skolan och till viss del i hemmet.
Alla användarna hade olika saker som de kommenterade på och tyckte saker om under sina tester, men det fanns också saker som var lika och liknande bland deras feedback. Själva telefon-testet var inte förberett och därför hade jag inte samma frågor, det blev frågor som jag kom på allt eftersom vi pratade. På grund av detta och eftersom det inte var något think-aloud test där jag var närvarande känner jag inte att jag kan lägga någon större vikt på de testsvaren.
Det som var mest intressant med samtalet och som jag känner att jag kan ha med är de allmänna tankarna och feedbacken om designen, det som togs upp då var även liknande det som kommit fram under think-aloud testerna.
Alla tre som gjorde think-aloud testet kände osäkerhet för vad som fanns bakom de olika länkarna games och genres. När de skulle hitta information om rollspel (RolePlayingGames) gick de nästan instinktivt till games länken, inte till genres.
När de skulle se hur man gjorde för att efterfråga ett spel var det ingen av de tre som instinktivt gick till FAQ länken. Antingen var den svår att förstå innebörden i eller så förbisågs den av användarna, endast en av tre hittade svaret där.
Instruktionsvideon var enklare att hitta eftersom delen med den redan besökts i jakten på information om RPG, så resultaten här kanske inte säger så mycket. Men i ett av testen gick ändå användaren till genres först, och en av de andra sade att om hon inte redan sett att filmen fanns där när hon letade efter information om rollspel skulle hon antagligen letat på andra ställen först.
24
Att hitta den som är ansvarig för sidan var enkelt, alla användarna klarade det ganska enkelt, två hittade direkt och en hittade på andra försöket.
World cyber games länken hade alla användare svårt att hitta, det var inte självklart vart på hemsidan den skulle finnas, och vissa svårigheter med att hitta länken i texten fanns.
Kommentarerna från fri navigation (fria tankar) var väldigt spridda, men alla belyste delar som upplevdes som problematiska och de hänger ihop med resultaten från uppgifterna. Här inkluderas även tankarna eller den feedback som fåtts från telefonintervjun.
Två av fyra uttryckte att det var svårt att förstå vad som finns vart bland länkarna, vilket även kan utläsas i testresultaten hos de andra två.
Två av fyra ansåg att det var för mycket fokus till vänster på sidan.
Två av fyra tyckte det var svårt att upptäcka och komma ihåg hjälp-länkarna i övre högra delen av sidan.
Två av fyra upplevde att sidan var för bred.
En av fyra ansåg att det var för långa textrader att skanna igenom, vilket hör lite ihop med att sidans bredd är för stor.
Två personer klagade på designen, att den var tråkig, enkel, inte såg ut som en sida som handlade om spel.
Alla dessa kommentarer kändes relevanta då de lyfte fram hur sidan upplevdes och fungerade för de som användare. Deras kommentarer om att det var svårt att förstå länkarna stärker de regler och rekommendationer som finns i litteraturen. Det blev ett bevis på att de "regelbrott"
som jag låtit vara kvar faktiskt upplevdes som problematiska, till viss del.
Det som inte stämmer överrens med litteraturen är det att sidan blivit för bred. Om jag skulle följt litteraturen till fullo hade sidan varit ännu bredare, på grund av deras rekommendation om flytande layout som tar upp hela sidan. Detta är något som visserligen blivit mer av ett problem på senare tid då skärmarnas upplösning stigit oerhört från det som var "standard" i början på 2000-talet, 800*600 pixlar.
Att sidan hade för mycket fokus till vänster kan bero på hur jag designat den, utifrån det material jag hade. Eftersom den blev ganska bred när den visades i fullskärm och det mesta materialet fanns till vänster, det var mycket tomrum till höger, blir det lätt att fokus hamnar till vänster och de länkar som finns uppe till höger lätt förbises.
Att sidan upplevdes som tråkig och enkel, "den ser inte ut som en sida som handlade om spel", är något som jag tror har att göra med att personer i Sverige har hög datorvana och internetvana och helt enkelt förväntar sig mer av en hemsida. Detta kan stärkas av en sak som jag upptäckte under testernas gång, alla som testade var väldigt vana vid att använda internet och de hade sina egna tankar och förslag på hur saker skulle kunna göras istället. Detta kan vara vanligt vid test med vana användare och som Nielsen (1993) säger gäller det att inte låta användarnas idéer om vad som är fel och hur det kan förbättras bli ens egna.
25
6 Återkoppling
6.1 Förslag på förändringar
Förändringarna för webbplatsen som föreslås kommer dels från användbarhetstestet men även från de regelbrott som tidigare nämnts (4.3 sid 17). Även om dessa inte nämnts direkt under testerna anser jag som utvecklare att de regler som jag valt ut är bra att följa för att förtydliga för användarna, vilket mycket av den feedback som fåtts från testerna också pekar på att det behöver göras.
Ett av de mer generella problemen som kom fram under testen var osäkerheten användarna uttryckte inför vart olika länkar ledde, detta förstärktes av viss oförståelse av vissa länkars innebörd. För att förbättra detta har dessa åtgärder tagits fram som förslag.
En bättre indelning vad gäller länkarna games och genres behövs, i alla fall så som de används idag. Att göra en till "huvud-sida" och den andra till underliggande sida skulle kunna göra saker tydligare.
Games länken och sidan borde som den används i dagsläget heta videos och vara underliggande sida till genres eftersom det dessutom är en spelgenre och inte ett spel som visas i videon.
Links bör få ett annat namn för att bättre beskriva innehållet, kanske information, eller att det hamnar som en underliggande sida till about.
FAQ länken kan behöva ett annat namn som är lite tydligare, i alla fall för svenska användare. Den skulle kunna integreras med help-länken och bli en underliggande sida till den, eller helt och hållet flytta sitt innehåll till help för att förenkla.
Home-länken bör inte vara aktiv när man är på webbplatsen. Ett alternativ vore att lägga till en javascript funktion som inaktiverar länken till sidan man just nu är på.
Annars skulle anpassade huvudmenyer vara ett alternativ, där innehållet ändras beroende på vart man är på sidan. Men för att anpassade menyer ska vara effektivt kan sidan behöva mer innehåll och nivåer med underliggande sidor.
Även att sidan var för bred var något som flera användare påpekade, antingen direkt på sidbredden, eller på textradernas längd, eller på att de hade svårt att komma ihåg och upptäcka länkgruppen med hjälplänkar uppe till höger. För att motverka detta föreslås dessa åtgärder.
Minska sidans max-bredd för att göra sidan mer sammanhållen och samtidigt minska på textradernas längd för att öka läsbarheten på dessa.
Tillsätt en minimi-bredd för att personer som inte har så hög upplösning eller som inte kör med webbläsare i fullskärm ska hitta en behaglig bredd på sidan utan att materialet blir oläsbart.
Den övre länkgruppen med hjälplänkar skulle behöva göras tydligare, kanske något större, så att den inte förbises när en användare letar efter information på sidan. Den kommer även att flyttas längre in mot resterande innehåll då sidans bredd kommer att minskas.
