Embed Size (px)
Citation preview
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.
26
De som upplevde att fokus på sidan låg till vänster kommer dels få en mer samlad sida om
bredden minskas, men även följande åtgärder kan vidtas.
Flytta ut sidans material från vänster kant. Detta tillsammans med en minskad
sidbredd kommer ge känslan av en mer sammanhängande sida och att fokuset inte
ligger direkt till vänster på sidan.
Sidans design upplevdes som enkel och tråkig, vilket känns tråkigt att höra. Men tanken var
inte att skapa en flashig och prålig sida med ett avancerat gränssnitt. Målet var att skapa ett
enkelt och lättanvänt gränssnitt som alla skulle förstå och tycka var lätt att använda. Men man
bör inte avskräcka användarna för att de upplever sidan som amatörmässig. Viss koppling
finns det mellan avancerad design och en förväntan på att innehållet ska leva upp till samma
höga nivå. Någon sorts balans kan behöva uppnås, några förslag för att uppnå detta är.
Något eller några grafiskt element bör införas för att liva upp designen lite och göra
den mer intressant, till exempel bör en logotyp införas som också visar på att det är en
sida om spel man har kommit till.
Att få fram en mer professionell känsla hos sidan kommer nog med tiden, mer
innehåll, mer funktioner och mer saker att göra på sidan kommer att ge intrycket av en
mer seriös och inte lika enkel sida.
För att enkelt lösa problemet med att ingen logotyp fanns tog jag kontakt med beställaren och
förelslog att en logotyp bör finnas som reflekterar sidans syfte och innehåll. Dels för att öka
känslan av att det är en sida om spel men också för att öka känslan av att det är en seriös sida.
Efter det fick jag snabbt en logotyp för sidan skickat till mig.
Det kanske mest intressanta, för mig, som ficks som feedback under think-aloud testerna var
det om att användaren aldrig kör webbläsaren i fullskärm. Jag har utgått från att man ska ha
det som utgångspunkt när man designar, och testa sidan i flera olika upplösningar för att se
hur den beter sig. Men den kommentaren fick mig att tänka om, mest i banorna om att
skärmarna har utvecklats mycket på sista tiden. Många skärmar har nu mycket större
upplösning än 1024*768px som förut, i början av 2000-talet, ansågs vara stort. Att designa
hemsidan så att den ska fungera bra grafiskt, i sitt nuvarande upplägg, på både skärmar med
lägre och större upplösning känns som en stor utmaning. Dels eftersom jag redan på en
sidbredd på 1024px fick kommentaren om att textraderna blev för långa för att läsa. Att
begränsa sida till att som mest utnyttja 880px på bredden ger mycket ”död yta” på en större
skärm om webbläsaren körs i fullskärm. Samtidigt som att textraderna blir kortare och lättare
att läsa.
6.2 Presentation av prototyp
Utifrån resultaten och analysen av användbarhetstesten togs ett antal förslag på förändringar
på webbplatsen fram. De flesta av dessa kom att implementeras och kommer att presenteras
nedan. De som inte implementerades kommer att presenteras och en motivering till varför jag
valt att inte implementera dessa.
27
6.2.1 Förändringar på webbplatsen
De förändringar som införts på sidan är dessa
Logotypen för hemsidan, som även är i linje med hemsidans syfte har lagts till uppe
till vänster.
Sidobredden har minskats och är nu max 55em, från tidigare 64em.
Länkarna och innehållet flyttades ut något från vänstra kanten för att få en luftigare
känsla.
Rubriken flyttades ut från vänster kant och sitter nu mer centrerat på sidan, mer över
själva innehållet.
Hjälplänkarna fick större typsnitt och de hamnade även längre in på sidan, detta då
sidobredden minskades.
About flyttades från hjälplänkarna till innehållslänkarna.
Links har tagits bort från innehållslänkarna och finns nu som underliggande till about.
Games sidan har blivit en ny sida, som fungerar som ingångssida till att läsa om spel,
genres och se videos.
Förra games sidan heter nu videos och är en underliggande sida till nya games.
Figur 8 Omdesignen av webbplatsen efter användbarhetstesterna
28
Rent designmässigt är det inga större förändringar som gjorts på layouten. Det är mest i det
strukturella som förändringarna har skett.
De förslag som inte implementerats är dessa
Home-länken är fortfarande aktiv på förstasidan, jag tänker mig att menyn kommer att
vara mer dynamisk framöver och att home-länken då tas bort från förstasidan.
FAQ står kvar, detta då jag inte kan svara för om det är en allmänt känd förkortning
för engelskspråkiga personer. Om en sida som skulle rikta sig till Sveriges befolkning
skulle skapas och skrivas på svenska skulle en annan förkortning användas.
29
7 Slutsats
Studiens syfte var att designa, testa och implementera ett användargränssnitt för en webbplats,
närmare bestämt whatismykidplaying.com. Efter att ha följt rekommendationer om design för
användbarhet och vart användare förväntar sig att hitta olika delar på en sida var det vissa
saker med designen som ändå inte verkade fungera för användarna.
Grafiska element och saker som ser ut som reklam och stjäl användarens uppmärksamhet från
viktigare innehåll har inte använts. Detta kan vara en bidragande orsak till att sidan upplevs
som enkel och tråkig. Visst kan jag förstå tanken bakom varför man inte bör använda sig av
liknande element på en hemsida. Men utvecklingen har kommit långt och i alla fall i Sverige
har många hög internetvana och höga förväntningar på vad de förväntar sig att en sida ska se
ut som och innehålla. Att ha med grafiska element och animationer för att ge en känsla av att
sidan inte är för enkel och tråkig skulle kunna öka intresset för hemsidan och dess innehåll.
Hjälplänkarna var svåra att upptäcka och uppmärksammades inte alltid. Att de skulle vara
svåra att upptäcka uppe till höger på sidan var inget jag hade trott skulle vara ett problem.
Dels för att jag förstod det som en vanlig placering av liknande element från de
rekommendationer jag läst, men även för att de tydligt skilde sig från rubriker och brödtext
och var understrukna som länkar brukar vara. Sammantaget gav designen, innehållslänkar
lodrätt till vänster, sidbredd på 1024px och hjälplänkar uppe till höger en för spridd design,
där fokuset låg till vänster och hjälplänkarna därför lätt förbisågs. Det är alltså en design som
inte är att rekommendera, fast än de designregler som finns följts.
De data som var av intresse som samlats in under think-aloud testerna var inte den data som
var av kvantitativ natur. Det var svårt att få ut mycket mer än en mätning av hur effektivt
användaren kunde använda gränssnittet och det var inte vad som var av intresse för studien.
De frågor som gav den riktigt användbara datan var dels deras kommentarer om de besvär de
upplevde medan de försökte lösa uppgifterna. Men viktigast var den öppna frågan där
användarna bads säga vad de tyckte och tänkte när de navigerade runt på sidan. För framtida
tester bör öppna frågor där användaren ombeds tänka fritt och göra lite vad den vill användas i
större utsträckning.
Även fast det var ett enkelt och litet test på användbarheten belystes flera problem med
designen. Med detta vill jag inte säga att några säkra slutsatser kring användbarheten kan dras,
för att kunna säga säkert om det som gjorts fungerat som tänkt måste fortsatta
användbarhetstester göras.
30
8 Diskussion
8.1 Metoddiskussion
I projektet jobbade jag efter den modell som presenterats under användarcentrerad design, (se
figur 1) med analys – design – utvärdering – återkoppling. Efter att ha läst om och jobbat med
modellen har jag förstått och insett att den fungerar bäst om man utvecklar kontinuerligt efter
de olika stegen, inte bara genom en iteration. Tanken var från början att jag skulle hinna med
hela första iterationen och så långt som möjligt i den andra, tiden räckte precis till att jag hann
igenom första iterationen.
Som utvärderingsmetod valdes think-aloud metoden på grund av att det i den litteratur jag läst
under uppsatsen rekommenderades dels att en deltagande utvärderingsmetod skulle användas.
Av de som fanns verkade think-aloud metoden vara både vanlig att använda och högt
värderad. Resultaten hade antagligen inte varit lika bra om jag använt mig av en annan metod
för att utvärdera.
8.1.1 Alternativa metoder
Istället för att använda think-aloud som utvärderingsmetod hade jag kunnat använda mig av
till exempel enkäter, fokus grupper eller telefonintervjuer. Alla har olika för och nackdelar,
och olika användningsområden. En tanke som jag hade var att låta användarna fylla i en enkät
efter testet där jag skulle samla lite mer kvantitativ data om deras tankar och hur de upplevde
sidan, och eventuell någon öppen fråga på slutet. Men jag insåg att det var nästan det jag
redan gjorde, fast med think-aloud testet, och skippade det. Jag höll även som tidigare nämnts
en sorts telefontest och intervju, där jag försökte få data om hur användaren klarade av att
utföra uppgifterna och hur väl de fungerade. Det var svårt att försöka få annan data än om
användaren klarat uppgiften eller inte och hur snabbt det gick. Men ett alternativ hade varit att
låta användaren surfa runt på sidan och bara säga vad denne tyckte över telefon, vilket skulle
kunna vara ett alternativt sätt till att samla in kvalitativ data.
8.2 Resultatdiskussion
Denna uppsats har egentligen inte skapat en användbar webbplats, den har utvärderat hur
användbar den dåvarande webbplatsen var. Under projektets gång visade det sig att för att
kunna utveckla användbarhet måste man utvärdera flera gånger. Som Nielsen (2000 www)
säger så räcker det inte att utvärdera användbarhet en gång, analysera resultaten och åtgärda
de fels om upptäckts då och där. Man måste göra det flera gånger, dels för att upptäcka ännu
fler problem med den ursprungliga designen men också för att utvärdera de åtgärder som
vidtagits. Detta bör göras till inga nya förändringar införs på webbplatsen, vilket skulle vara
när inga nya kritiska problem eller missar i designen upptäcks. För att vara säker på att det jag
gjort har förbättrat och inte förvärrat webbplatsen bör alltså ett nytt användbarhetstest utföras.
Detta får dock ligga utanför uppsatsens ramar.
31
8.2.1 Användbarhetstester
Det visade sig vara svårt att få tag på personer som kunde testa webbplatsen och som tillhörde
den tilltänka målgruppen. Målet var att testa med fem användare från målgruppen men det
blev bara tre think-aloud tester och ett telefonsamtal, varav en av de som gjorde think-aloud
testet och den jag hade telefonintervju med tillhörde målgruppen. Men de resultat som jag fick
från användbarhetstesterna anser jag var bra. Som Krug (2006) säger så är det bättre att ha
testat med en användare än ingen användare och i början av utvecklingen spelar det enligt
honom ingen roll vad för någon det är som testar, det måste inte nödvändigtvis vara
användare ur målgruppen för att bra resultat ska erhållas.
8.2.2 Think-aloud
Testets utformning var ganska begränsat då det inte fanns mycket material eller mycket
fuktioner på hemsidan som användarna kunde utvärdera. Det blev därför ett ganska enkelt test
där utvärderingen egentligen handlade om och fokuserade på hur väl gränssnittet och den
underliggande strukturen fungerade. När jag utformade testet tänkte jag att det skulle vara bra
att ha mer kvantifierbar data att utvärdera och använda. Men i efterhand upptäckte jag att den
öppna frågan på slutet, där användarna skulle navigera runt på sidan och säga sina intryck av
den och vad de tyckte, gav nästan bättre data än mycket av de kvantitativa data som till
exempel deras tillfredsställelse och hur lång tid uppgiften tog att lösa. Egentligen är det bara
om de lyckats lösa uppgiften och hur mycket jobb som låg bakom, hur många försök de
behövde, som jag tycker var intressant data i efterhand.
När jag utförde think-aloud testerna var detta med personer jag var bekant med. Hur det har
påverkat resultaten kan jag inte avgöra, men jag tror inte att det påverkat resultaten. Ett
vanligt problem som kan uppstå vid think-aloud tester och som hela testet egentligen står och
faller på är att användarna inte känner sig bekväma med att säga vad de tycker och tänker. Jag
vill gärna tro att mina bekanta vågar säga vad det tycker och tänker, hade det varit personer
jag inte kände hade de kanske inte känt sig lika bekväma med att säga vad det tyckte och
tänkte. Men det kan också ha varit så att mina bekanta kan ha känt sig tvungna att vara snälla
och inte säga vad de kände var allt för taskiga saker, saker som hade varit bra att veta för att
göra webbplatsen ännu bättre.
Något annat som kan ha påverkat testresultaten är jag som testledare och testfrågeutformare.
Dels via frågorna det vill säga uppgifterna som testanvändarna fick utföra. Beroende på vad
jag lyft fram för delar av hemsidan via frågorna får vissa delar större belysning än andra och
vissa problem kan därför vara lättare att upptäcka. Men även min inställning till hemsidan och
testet i sig kan ha påverkat resultaten. Testledareffekten, att den som leder testet kan påverka
resultatet från testet genom sin inställning, sitt kroppsspråk och sitt sätt att ställa frågorna på,
är inget som jag läst något om i litteraturen, men borde även finnas med som en faktor som
kan ha påverkat de resultat som jag fick från testerna. Eftersom jag som testledare var med vid
testet och observerade det hela, ställde frågorna och försökte få de som testade att prata så
mycket som möjligt är testledareffekten något som jag tror kan ha haft stor inverkan på
resultaten samtidigt som den är svår att utvärdera och ta med i beräkningarna.
32
8.2.3 Prototypdesign
Den prototyp som har tagits fram efter användbarhetstestet är, som jag nämnt ovan, inte
nödvändigtvis bättre än den förra som var innan användbarhetstestet genomfördes. Jag kan
inte veta säkert förrän ett nytt test genomförts och användarna fått utvärdera den nya
designen.
Det som varit svårast med att utveckla prototypen är att det har varit svårt att tänka sig hur
den famtida sidan skulle komma att se ut och vad den skulle innehålla, utifrån det material
som fanns tillgängligt vid projektets start. Det är svårt att föreställa sig ett gränssnitt och en
struktur som fungerar bra på en enkel sida, men som även kommer kunna fungera väl om
sidan utökas. Det är också svårt att skapa en struktur på en enkel sida utan att det känns
överarbetat och onödigt krångligt. Om sidan skulle utökas med mera innehåll, och därmed
också få en annan underliggande struktur, finns det andra alternativ på gränssnitt som skulle
passa bättre än det som är just nu. Några av dessa har nämnts under rubriken alternativa
lösningar i metodkapitlet.
Prototypen är just nu väldigt liten, den består enbart av ett gränssnitt med lite information
under och det är inte mycket som går att göra på sidan. Ett forum var tänkt att skapas, men det
hann bara påbörjas och fick tas bort för att endast HTML filer kunde köras på webbhotellet
när testet av webbplatsen skulle göras. Detta då hemsidan publicerades på min studentsida.
För att webbplatsen ska fungera så som jag förstått att den är tänkt att göra bör prototypen
utökas och utvecklas vidare, inte bara grafiskt.
8.3 Framtida utveckling
För fortsatt utveckling av webbplatsen anser jag att fokus bör flyttas från ren design över till
funktioner som ger ökad användning av webbplatsen. En webbplats som har ett användbart
gränssnitt men inga funktioner eller väldigt lite innehåll kommer inte att attrahera användare.
Att byta från enbart HTML och CSS till att inkludera PHP och någon form av SQL-databas
skulle vara ett steg i rätt riktning, alternativt att utöka med Java, byta till MVC och C# eller
ruby för att nämna några alternativ. Det finns många möjligheter på vad som skulle fungera
och det viktiga är inte vilket språk som används utan att något mer än bara HTML och CSS
används om sidan ska kunna växa och bli den portal jag förstod att det var tänkt att den skulle
bli från början.
33
Källförteckning
Tryckta källor
Benyon, David, Turner, Phil & Turner, Susan (2005). Designing interactive systems: people,
activities, contexts, technologies. Harlow: Addison-Wesley
Dennis, Alan, Wixom, Barbara Haley & Roth, Roberta M. (2006). Systems analysis design. 3.
ed. New York: Wiley
Gulliksen, Jan & Göransson, Bengt. (2002). Användarcentrerad systemdesign. Lund,
Studentlitteratur. ISBN 91-44-02029-5
Krug, Steve (2006). Don't make me think!: a common sense approach to web usability. 2. ed.
Berkeley, Calif.: New Riders
Molich, Rolf. (2002). Webbdesign med fokus på användbarhet. Lund: Studentlitteratur
Nielsen, Jakob. (1993). Usability engineering. [New ed.] Boston: AP Professional
Nielsen, Jakob. (2000). Designing web usability: [the practice of simplicity]. Indianapolis,
Ind.: New Riders
Nielsen, Jakob & Tahir, Marie (2002). Användbara hemsidor: analys av 50 webbplatser.
Harlow: Pearson Education
Ottersten, Ingrid & Berndtsson, Johan. (2002). Användbarhet i praktiken. Lund:
Studentlitteratur.
Rosenfeld, Louis & Morville, Peter. (2002). Information Architecture: for the World Wide
Web. 2nd ed. Sebastopol: O'Reilly & Associates, Inc.
Steinkuehler, C. Duncan, S. (2008). Scientific Habits of Mind in Virtual Worlds. Journal of
Science Education and Technology. Vol.17, No. 6. pp. 530-543.
Elektroniska källor
Aftonbladet (2008) Kollapsade efter ett dygns spel.
[http://www.aftonbladet.se/halsa/article11568558.ab] (2011-04-27)
Aftonbladet (2009) Begärd häktad efter mordet på Erika.
[http://www.aftonbladet.se/nyheter/article12143696.ab] (2011-04-27)
ColorSchemeDesigner (2010) [http://colorschemedesigner.com/#3F91Tw0w0w0w0] (2011-
04-24)
Dagens Nyheter (2007a) Tvångsvård för dataspelande.
[http://www.dn.se/nyheter/sverige/tvangsvard-for-dataspelande] (2011-04-27)
Dagens Nyheter (2007b) ”World of Warcraft” räddade 12-åring från älg.
[http://www.dn.se/spel/spel-hem/world-of-warcraft-raddade-12-aring-fran-alg] (2011-04-27)
Meyer, Eric (2008). Eric Meyer's CSS Reset. [http://meyerweb.com/eric/tools/css/reset/]
(2011-03-24)
Nielsen, Jakob (2000 www). Why you only need to test with 5 users.
[http://www.useit.com/alertbox/20000319.html] (2011-03-27)
34
tireseas.org (2009). Think-aloud method. [http://www.tiresias.org/tools/think_aloud.htm]
(2011-04-10)
thinkingweb.org (?). Criteria For Optimal Web Design.
[http://thinkinginweb.com/podcasts/09/CriteriaForOptimalWebDesign.pdf] (2011-04-03)
it.uu.se (2003). Användarcentrerad Systemdesign.
[http://www.it.uu.se/research/hci/acsd/principerna.html] - (i context på sidan) (2011-04-01)
[http://www.it.uu.se/research/hci/acsd/IterativtText.gif] - (som bild)
w3schools.com (a). HTML introduction [http://www.w3schools.com/html/html_intro.asp]
(2011-05-02)
w3schools.com (b). CSS introduction [http://www.w3schools.com/css/css_intro.asp] (2011-
05-02)
w3schools.com (c). JavaScript introduction. [http://www.w3schools.com/js/js_intro.asp]
(2011-05-02)
w3schools.com (d). PHP introduction. [http://www.w3schools.com/jphps/php_intro.asp]
(2011-05-02)
35
Bilagor
Bilaga 1 – Användbarhetstester
Användbarhetstester – think-aloud metod
Användarens mål och intentioner
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än feedback
Bedömning – think-aloud
Har uppgiftens mål uppnåtts
Slutfördes uppgiften framgångsrikt vid första försöket
Hur lång tid det tog
Bedömningsnivå av tillfredsställelsen (Nöjd, besvärad, missnöjd?)
Test 1 – think aloud
Hitta information om RolePlayingGames
Hittat
Andra försöket, först games sen genres
Ca 1 min
Lite besvärad av otydlighet
Ta reda på hur man går till väga för att efterfråga en video om ett speciellt spel
Inte löst
Gav upp efter lite mer än 2 min
36
Besvärad av att inte ha hittat, hittade FAQ senare och blev bekymrad över att den
horisontella menyn förbisetts (fast han sade han lagt märke till den)
Hitta instruktionsvideon till FPS spel
Hittat
Andra försöket, först genres sen games
Ca 10 sek
Nöjd, kom snabbt på att han hittade på games delen på första frågan
Ta reda på vem som är ansvarig för sidan
Löst
Andra försöket, först home sen about
Ca 20 sek
Relativt nöjd, glömde av horisontella först men kom ihåg efter en stund
Hitta länken till the "world cyber games"
Hittat
Tredje försöket, forum, sen news, sist links
Ca 1 min
Besvärad av att det fanns så mycket länkar som han ansåg skulle passa att ha
innehållet på
Navigera runt på sidan
Bred sida
Tyngdpunkten till vänster på skärmen
Glömmer lätt länkarna uppe till höger
Test 2 – think aloud
Hitta information om RolePlayingGames
Hittat
Andra försöket, först games sen genres
Ca 20 sek
Lite besvärad av otydlighet i vad som finns vart
Ta reda på hur man går till väga för att efterfråga en video om ett speciellt spel
Hittat
Tredje försöket, först games sen forums sen efter en stunds tänkande FAQ
Ca 1 min
Besvärad av knepiga länknamn, svårt att förstå innebörd av FAQ
37
Hitta instruktionsvideon till FPS spel
Hittad
Första försöket, redan sett när games besökts efter info om rpg
Ca 5 sek
Nöjd
Ta reda på vem som är ansvarig för sidan
Hittat
Första försöket
Ca 10 sek
Nöjd
Hitta länken till the "world cyber games"
Hittat
Andra försöket, först news sen links
Ca 30 sek
Lite besvärad över all text att gå igenom
Navigera runt på sidan
Otydliga namn på länkar
Svårt att förstå vad som är vart ibland
Tråkig sida designmässigt - verkar inte vara en sida om spel
Test 3 – think aloud
Hitta information om RolePlayingGames
Hittat
Andra försöket, först games sen en stunds eftertanke och skannande av de olika
länkarna på sidan klickas på genres länken
Ca 30 sek
Lite besvärad av länknamnet genres
Ta reda på hur man går till väga för att efterfråga en video om ett speciellt spel
(Nästan) Löst
Gick till contact och sade han skulle maila och fråga, gick aldrig till FAQ och såg
fråga och svar
Ca 15 sek
Nöjd att det var lätt att hitta kontaktinfo
38
Hitta instruktionsvideon till FPS spel
Hittat
Första försöket, hade redan sett videon när info om rpg söktes
Ca 10 sek
Nöjd
Ta reda på vem som är ansvarig för sidan
Hittat
Första försöket
Ca 5 sek
Nöjd
Hitta länken till the "world cyber games"
Misslyckades
Började direkt med links, men hittade inte länken, sökte genom alla länkar i menyerna
och links igen men gav upp
Ca 3 min
Mycket besvärad över att ha missat länken i texten och sen letat som en tok
Navigera runt på sidan
Ovan vid att sidan tar upp så stor del av skärmytan, kör aldrig med webbläsare i
fullskärm – mac-användare
Svårt att skanna genom ”brödtexten” - world cyber games kanske missats på grund av
det
39
Användbarhetstester – telefonintervju
Användarens mål och intentioner
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å hemsidan
Hur upplever du sidan och layouten
Bedömning – telefonintervju
Har uppgiftens mål uppnåtts
Ungefär hur lång tid det tog
Test 4 - telefon
Vart ska man maila om man har några frågor om sidan?
Löst
Tog lite tid – ca 30 sek
Vilka speltyper kommer det att publiceras information om inom kort?
Löst
Tog lång tid – mer än en minut
Vilken spelgenre finns det en video för publicerad på hemsidan?
Löst
Tog lite tid – ca 30 sek
Hur upplever du sidlayouten?
Enkel och tråkig
Knepigt att förstå vad som finns vart
Fokus till vänster, missar lätt de små hjälp-länkarna uppe till höger
40
Bilaga 2 - Förfrågan om föräldrar till test
