EXAMENSARBETE INOM TEKNIK, GRUNDNIVÅ, 15 HP
STOCKHOLM, SVERIGE 2019
Grad av mättnad hos röd som signalfärg och dess påverkan på effektivitet vid användning av en webbsida
Degree of saturation of the color red and its effect on efficiency when using a web page
ELIN FORSBERG LOVISA FORSBERG
KTH
SKOLAN FÖR ELEKTROTEKNIK OCH DATAVETENSKAP
Grad av mättnad hos röd som signalfärg och dess påver- kan på effektivitet vid användning av en webbsida
Elin Forsberg
EECS, Skolan för elektroteknik och Datavetenskap KTH
elinfors@kth.se
Lovisa Forsberg
EECS, Skolan för elektroteknik och Datavetenskap KTH
lovfor@kth.se
ABSTRACT
The color red is often used to signal attention or to clarify functions such as cancel or finish on a website. This provides designers with a tool for controlling the user’s attention and illustrating common functions. The red hue may appear differently depending on its sat- uration and could therefore be more or less efficient as an indicator for attention. This study has examined if the degree of saturation affects the efficiency on a website. In order to answer the question, a web page was set up in three different variants. These versions differed in saturation of the color red on selected elements. Three groups, one for each version, executed five different assignments and the time required for the execution of each assignment was measured. The result indicates that the efficiency can be affected if the red elements are used to call attention and convey information that is important to complete assignments on the website. The con- clusion is that we cannot safely say if the saturation of the color red affects the efficiency of a website.
SAMMANFATTNING
Röd färg används ofta som signalfärg på webbsidor i syfte att dra till sig uppmärksamhet eller för att förtydliga funktioner som ex- empelvis avbryt eller avsluta. Detta innebär att om den röda färgen används på rätt sätt så skulle den kunna bidra med ökad effektivitet på webbsidan. Detta för att man då kan styra vart användarens upp- märksamhet går eller klargöra vanliga funktioner. Den röda färgto- nen kan se ut på många olika sätt beroende på vilken grad av mätt- nad den har och den kan därför vara mer eller mindre effektiv som signalfärg. Denna studie har undersökt om graden av mättnad på färgen röd påverkar effektiviteten på en webbsida. För att besvara frågan sattes en webbsida upp i tre olika varianter som skiljdes åt i mättnad på färgen röd på utvalda element. Tre grupper utförde fem uppgifter på varsin av de olika varianterna och tidsåtgången för att utföra varje uppgift mättes. Resultatet visar på att effektiviteten kan påverkas om de röda elementen används just för att påkalla upp- märksamhet och förmedla information som är viktig för att klara av uppgifter på webbsidan. Slutsatsen är att vi inte med säkerhet kan säga ifall färgmättnaden på signalfärgen röd påverkar effektiviteten på en webbsida.
Nyckelord
Effektivitet; Färgmättnad; Webbsida; Röd; Användbarhet
1. INTRODUKTION
En digital plattform måste vara enkel att använda. Är den inte enkel att använda så stannar användarna inte på plattformen [1]. Använ- dare ödslar alltså inte tid på en webbsida som är för svår att förstå sig på och kanske även byter till en konkurrerande. I och med den digitala utvecklingen uppkommer allt fler digitala plattformar. För
att kunna konkurrera med dessa plattformar krävs att webbsidan är användbar och att den samtidigt är estetiskt tilltalande. En vanlig strategi för att skapa en användbar plattform är att använda signal- färger (se begreppslista) för att förtydliga olika funktioner. Färgen röd förekommer ofta som signalfärg på webbsidor. I denna under- sökning utgår vi från att associationen av röd färg är så pass kultu- rellt grundad att det finns ett tydligt mönster i hur vi konnoterar färgen, att den ofta förknippas med “avsluta”, “avbryt” och “fel”.
Färger förknippas ofta med dess färgton, alltså grön, röd och blå etc. Andra egenskaper som spelar roll för färgens utseende är dess mättnad, ljusstyrka eller intensitet. En färgton kan skilja sig åt i dessa egenskaper och därmed se väldigt olika ut.
Samtidigt som färger kan användas som strategi för användbarhet så kan de också ha stor inverkan på användarupplevelsen. Vi kom- mer i denna undersökning att definiera användarupplevelsen som enbart de reaktioner och förnimmelser den estetiska utformningen ger användaren, alltså bortser vi från upplevelsen av själva funkt- ionaliteten.
1.1 Syfte
En undersökning gjord av Eriksson et.al [2] visar att färgmättnad spelar roll för just användarupplevelsen då den kan få webbsidan att upplevas mer eller mindre tilltalande eller förtroendeingivande.
Röda färgtoner upplevs ofta mer förtroendeingivande om de är omättade snarare än om de är mättade och de ger överlag även ett mer positivt intryck än de mättade [2]. Därför är det önskvärt att i så stor utsträckning som möjligt kunna ha friheten att välja mättnad på färgen röd. Syftet med undersökningen är således att undersöka graden av frihet för webbdesigners vid val av mättnad på signalfär- gen röd.
1.2 Problemformulering
Vad vi vet finns ingen tidigare forskning som behandlar korrelat- ionen mellan mättnad hos signalfärger och effektiviteten på en webbsida. Med effektivitet menar vi tidsåtgången för användning av webbsidan. I och med att färgmättnaden kan påverka användar- upplevelsen så skulle det kunna uppstå en konflikt mellan den och effektiviteten på en webbsida som använder röd som signalfärg. Vi vill därför undersöka detta genom att ställa frågan; Kan val av mätt- nad hos röd som signalfärg påverka effektiviteten för användning av en webbsida?
1.3 Avgränsningar
Vi har valt att avgränsa undersökningen till att enbart undersöka färgen röd då det är den färg som i högst utsträckning ändrar vilken känsla den förmedlar beroende på ljusstyrka och mättnad [2].
Vi avgränsar även undersökningen till att enbart undersöka egen- skapen mättnad hos färgen röd. Nivån av mättnad hos färgtoner spelar stor roll för hur användare uppfattar webbsidan, hög mättnad
ger en lägre trovärdighet än låg mättnad [2]. Då användarupplevel- sen påverkas av mättnaden anser vi att det är relevant att undersöka om den även påverkar effektiviteten.
Då vi i vår undersökning om färgmättnadens betydelse för an- vändarupplevelsen bygger vår argumentation på Eriksson et.al [2]
väljer vi att, på samma sätt som Eriksson, endast utgå ifrån en webbsida.
I och med att undersökningen behandlar färg väljer vi att inte ta hänsyn till färgblindhet, därmed är försökspersonerna i denna undersökning inte färgblinda.
1.4 Begrepp och definitioner
Effektivitet - resursåtgång i tid
Signalfärger - färger som signalerar en viss innebörd
Färgmättnad - en beteckning för en färgs renhet, en mättad röd färg innehåller inget gult, blått, svart eller vitt. En mindre mättad färg är mer gråtonad [3].
1.5 Hypotes
H0 = ingen skillnad i effektivitet mellan olika mättnadsgrader H1 = det finns en skillnad i effektivitet mellan olika mättnadsgrader Vi kommer i undersökningen att testa nollhypotesen H0 med en sig- nifikansnivå på 95%.
Vår hypotes är att effektiviteten hos en webbsida skiljer sig mellan mättad och omättad röd färg. Vi tror att den mättade röda färgen är mer effektiv än den omättade. Därför tror vi att vi kommer kunna förkasta H0 till förmån för mothypotesen H1. Dock tror vi att graden av mättnad spelar mindre roll då färgen fortfarande kan uppfattas som röd oavsett hur mättad den är.
2. TEORI OCH RELATERAD FORSKNING
Enligt Norman [5] så kan känslor påverka vår problemlösningsför- måga. Detta på grund av att det emotionella systemet i oss förändrar hur det kognitiva systemet arbetar. Om ett systems estetiska attrak- tivitet kan påverka användarens känslor så kan den därför indirekt påverka hur väl vi förstår systemet och på så sätt hur användbart det är [5].
Till skillnad från vad Norman påstår framgår det i en undersökning av Brady och Phillips [6] att effektiv navigation är av större vikt än estetiken på en webbsida med avseende på tillfredsställelse. Fyra olika varianter av en och samma webbsida som endast skiljde sig åt i sin estetiska utformning testades på ett antal försökspersoner. I resultaten framgick det att det inte fanns någon statistisk skillnad i tillfredsställelse hos användarna mellan de olika varianterna. I stu- dien nämner de att detta stödjer idén om att tillfredsställelse är mer relaterat till lyckad navigering än det estetiska utseendet. När de sedan frågade försökspersonerna om vilken av varianterna de trodde skulle vara enklast att använda rankade de dock den mest estetiskt tilltalande varianten högst.
2.1 Färgers påverkan på användbarhet
När det kommer till kopplingen mellan användandet av färg och användbarheten på en webbsida finns ett antal studier som visar på att färg har en inverkan på användbarheten. I en artikel av Bonnar- del et al. [7] framgår det att färgen på en webbsida är en avgörande faktor i användarens interaktion med webbsidan.
Dessutom framgår det, i en undersökning [8] om färg som desig- nelement på webbsidor för e-handel, att det finns fem principer för att skapa en “övertygande” webbsida; tydlighet, bra layout, bra vi- suell hierarki, god användning av färg samt enkel navigering. Vid skapandet av en webbsida har färg många användningsområden.
Med rätt komposition och val av färger kan användandet av färg få webbsidan att bli mer attraktiv. Dessutom kan färg även hjälpa an- vändaren att se hierarkin på webbsidan, det vill säga att användaren får hjälp med att avgöra vad det viktigaste på webbsidan är samt att användaren styrs till att interagera med webbsidan, exempelvis re- gistrering och köp [8].
Röd färg kan skapa uppmärksamhet [13] men det finns dock inget specifikt svar på varför röd färg skapar uppmärksamhet, ibland är det bara på grund av själva färgen i sig och ibland på grund av dess kontrast till andra färger [13]. I en kvalitativ studie av Jina, H. et al.
[13] framgick det, enligt flera respondenter, att varumärket Findus fångar uppmärksamhet hos konsumenter framförallt på grund av den breda röda rand företaget valt att placera på högersidan av dess förpackningar. I studien framgick det även att ett annat företags röda varumärkesfärg skapade en kontrast till den blå färg som de valt att använda i bakgrunden och att detta var anledningen till upp- märksamheten.
2.3 Röd som signalfärg
Det finns även forskning [9] som visar på att färgen röd kan fram- kalla en “avoidance motivation”, vilket innebär att användaren har en benägenhet att avvakta. Avoidance motivation har med andra ord visat sig göra användare mer vaksamma och riskavvikande.
Detta stöds i en undersökning av Gnambs et al [10] som genom- förde två självständiga experiment för att ta reda på hur färgen röd påverkar vårt kognitiva beteende på webbsidor. Slutsatsen av resul- taten är att den röda färgen påverkar människors kognitiva beteende på det sätt att de blir mer passiva och att människor behandlar röda designelement på ett avvaktande sätt.
2.3 Färgmättnad
Vi kommer i denna undersökning beskriva mättnaden med hjälp av HSV-systemet [4] som används för att beskriva en färg genom dess färgton (hue), mättnad (saturation) och ljusintensitet (value). För- tydligande av hur dessa parametrar hänger ihop visas i bild 2. Färg- tonen anges i grader och representerar en vinkel i färghjulet (se bild 1). Mättnaden anges i procent där en lägre siffra innebär fler gråto- ner. Även ljusintensiteten anges i procent där 0% är helt svart och 100% helt “ren”.
Bild 1 Bild 2
2.4 Effektivitet
Enligt ISO 9241-11 [12] definieras användbarhet som “the extent to which a system, product or service can be used by specified users to achieve specified goals with effectiveness, efficiency and satis- faction in a specified context of use”. Med efficiency (sv. effektivi- tet) menas resursåtgång i förhållande till de uppnådda resultaten, där resursåtgång inkluderar tid, mänskliga ansträngningar, kostnad och/eller material [12].
3. METOD
För att ta reda på skillnaden i effektivitet mellan olika grader av mättnad på färgen röd så ville vi jämföra tiden det tog att genomföra 5 olika uppgifter på en webbsida. Uppgifterna valdes på ett sådant sätt att interaktion med röda element är nödvändigt för att slutföra uppgiften. Exempel på en uppgift var: Hitta veckans mest sålda vara och lägg i varukorgen (resterande uppgifter hittas i bilaga 5).
Denna metod valdes för att den tydligt redogör för om det finns en skillnad i tid mellan de olika graderna av mättnad.
Webbsidan som användes för undersökningen var apotea.se, en webbshop för läkemedel. Webbsidan valdes för att det är enkelt att utföra konkreta uppgifter på en webbshop samt att den innehöll många röda element.
Tre olika varianter av apotea.se sattes upp, vardera med olika grad av mättnad på de röda elementen. För att ändra mättnaden på de ställen där röd förekommer ändrade vi färgkod i källkoden på hem- sidan på alla röda element och ersatte med de andra värdena av mättnad. Detta gjordes genom att skriva över webbsidans stylesheet och ersätta med ett nytt där färgerna var manipulerade. Varianterna tilldelades namnen Mättad, Halvmättad och Omättad.
3.1 Pilotstudie
För att bestämma graden av mättnad på varianterna så att de skiljde sig åt i högsta möjliga mån gjordes en pilotstudie. 21 personer i samma målgrupp, åldrarna 19–26, som försökspersonerna i studien fick titta på fyra olika alternativ på färgscheman innehållande tre olika grader av mättnad (se bilaga 6). De skulle avgöra i vilket av alternativen de tyckte att de tre färgerna skiljde sig mest åt. Re- sultatet visas i tabell 1.
Tabell 1 - resultat av pilotstudie
Alternativ 1 2 3 4
Antal Röster 8 4 5 4
Alternativ 1 fick flest röster och var följande färger:
Mättad: HSV(0,100%,80%), #cc0000 Halvmättad: HSV(0,30%,80%), #cc8e8e Omättad: HSV(0,0,80%), #cccccc Se figur 1.
Figur 1
Varianten Mättad var 100% mättad, varianten Halvmättad var 30%
mättad och varianten Omättad var 0% mättad. Samtliga varianter hade en ljusstyrka på 80%.
3.2 Metod för att mäta effektivitet
Ett vanligt sätt att mäta effektivitet på är genom att ta tid på hur lång tid det tar för en användare att bli klar med en given uppgift [14]. Då tiden det tar att utföra en uppgift kan bero på annat än färgmättnaden så mättes även variansen inom grupperna för att se- nare diskuteras. Att mäta tid kan vara problematiskt då ett enstaka testresultat kan skilja sig mycket från de resterande resultaten. Vad dessa avvikelser kan bero på och leda till kommer att diskuteras i avsnitt 5.3 Diskussion av metod.
Effektiviteten mättes genom att ta tid på hur lång tid det tog för varje försöksperson att genomföra varje förutbestämd uppgift. En skärminspelning utfördes under studiens gång och tiden mättes i efterhand genom denna skärminspelning.
3.3 Utförande
Av 18 tillfrågade studenter från Medieteknikprogrammet på KTH, som gick kursen DM1578 Programintegrerande kurs i medieteknik, dök 15 studenter i åldrarna 19–26 upp. De delades in i tre grupper:
Grupp Mättad, Grupp Halvmättad samt Grupp Omättad. Indel- ningen skedde slumpmässigt. Försökspersonerna i vardera grupp fick individuellt genomföra fem uppgifter på en av varianterna av hemsidan. Grupp Mättad fick testa den mättade varianten av webb- sidan (se bilaga 1), Grupp Halvmättad den halvmättade varianten av webbsidan (Se bilaga 2) och Grupp Omättad den omättade vari- anten av webbsidan (Se bilaga 3). Alla försökspersoner utförde undersökningen på samma dator.
3.4 Statistisk analys av data (analysmetod)
Den statistiska analysmetod vi valde att använda är Kruskal-Wallis H-test. Då vi hade tre oberoende, ej normalfördelade, grupper (Mät- tad, Halvmättad och Omättad), en beroende variabel (tid) och ville se om det förelåg någon signifikant skillnad i tid mellan de olika grupperna valdes den analysmetoden ut. Kruskal-Wallis H-testet [15] antar inte normalfördelning i grupperna och är till för att ana- lysera om det finns någon signifikant skillnad mellan resultatet av 2 eller fler grupper. Kruskal-Wallis H-test antar däremot 3 saker [15]:
1) Den oberoende variabeln ska bestå av två eller flera ka- tegoriska, oberoende grupper. Det var 3 oberoende grup- per i denna undersökning.
2) Det bör föreligga ett oberoende av observationer, vilket innebär att det inte finns något samband mellan observat- ionerna i varje grupp eller mellan grupperna själva. Till exempel måste det finnas olika deltagare i varje grupp utan att någon deltagare finns med i mer än en grupp. Alla deltagare i denna undersökning deltog endast i en av grupperna.
3) För att kunna tolka resultaten från ett Kruskal-Wallis H- test måste det avgöras om fördelningarna i varje grupp har samma form (samma variabilitet). Med hjälp av pro- grammet SPSS kunde det konstateras att gruppernas va- riabilitet var homogen och att vi därför kunde anta att lik- nande fördelning förekommer mellan grupperna. Denna analys genomfördes i analysprogrammet SPSS.
#cc0000 hsv (0,
100%, 80%)
#cc8e8e hsv (0,
30%, 80%)
#cccccc hsv(0,
0%, 80%)
För att undersöka mellan vilka grupper det fanns en skillnad använ- des Mann-Whitney U-Test då det är motsvarande Kruskal-Wallis H-test fast för två grupper [15]. Alltså görs detta test mellan alla grupper där Kruskal-Wallis testet visar på en signifikant skillnad.
4. RESULTAT
Resultatet visar att det med 95% sannolikhet fanns en signifikant skillnad i tid mellan grupperna för två av de fem uppgifterna som testades, uppgift 2 och 5. Skillnaden kan innebära att färgmättnaden kan påverka effektiviteten på en webbsida. Signifikansnivån är satt till 0,05 vilket innebär att ett p-värde < 0,05 gör att vi med 95%
säkerhet kan veta att det finns en signifikant skillnad mellan grup- perna.
Uppgift 2 hade ett p-värde = 0,038, 0,038 < 0,05 vilket således visar på en signifikant skillnad mellan grupperna (se tabell 2). Uppgift 5 hade ett p-värde = 0,049, 0,049 < 0,05 vilket då också visar på en signifikant skillnad mellan grupperna (se tabell 2). Det fanns även en skillnad mellan grupperna i den totala tiden det tog att utföra alla de fem uppgifterna då p-värdet 0,036 < 0,05 (se tabell 2).
Tabell 2 - P-värdet avgör om det finns någon signifikant skill- nad mellan de tre grupperna
Uppgift p-värde Signifikant skillnad 0,05
1 0,268 nej
2 0,038 ja
3 0,263 nej
4 0,356 nej
5 0,049 ja
Total tidsåtgång 0,036 ja
4.1 Avvikelser
För vissa av försökspersonerna skiljde sig tiderna det tog att utföra uppgifterna mycket från medianen. Dessa avvikelser kunde ha flera olika anledningar, till exempel var det en försöksperson i grupp Omättad som efter en tid uttryckte att hen inte förstod sista uppgif- tens innebörd. Andra orsaker till avvikelser kommer diskuteras se- nare. På grund av dessa avvikelser redovisas även variansen inom grupperna för varje uppgift (se tabell 3). Variansen är ett mått på hur mycket värdena inom gruppen skiljer sig från medelvärdet. En hög varians innebär en stor spridning bland värdena.
För att kunna tolka variansens storlek sattes den i kontrast till me- dianen, mätt i sekunder, per uppgift för varje grupp.
Tabell 3 - variansen (v) och medianen (m) [sekunder] inom grupperna för varje uppgift.
Uppgift Grupp Mättad Grupp Halvmättad Grupp Omättad
v m v m v m
1 112,7 7 24,3 15 612,8 18
2 163,5 65 240,8 34 449,7 85
3 49,7 33 298,8 40 2004,8 55
4 5,2 7 2004,3 9 8,2 8
5 25,5 13 49 23 402,7 26
Totalt 915,3 124 1169,3 119 4583,8 205
För uppgift 1 noterades ett testresultat (den tid det tog att utföra en uppgift) för vardera grupp som var avvikande från resterande resul- tat inom gruppen för den uppgiften. Dessa avvikande resultat på- verkade variansen. För grupp Mättad och grupp Omättad var det avvikande resultatet högre än resterande resultat och för grupp Halvmättad var det avvikande resultatet lägre än resterande resul- tat. För uppgift 2 noterades ett avvikande resultat i grupp Halvmät- tad som var högre än resterande resultat. För uppgift 3 och uppgift 5 noterades ett avvikande resultat i grupp Omättad, detta avvikande resultat var högre än resterande resultat i samma grupp. För uppgift 4 noterades inga avvikande resultat.
4.2 Skillnader mellan grupperna
Vidare visar Mann-Whitney U Testet att det för uppgift 2 finns en skillnad mellan grupp Mättad och grupp Omättad samt mellan grupp Halvmättad och grupp Omättad. Ingen skillnad fanns mellan grupp Mättad och grupp Halvmättad (se tabell 4). Hos grupp Halv- mättad noterades ett resultat som var avvikande från resterande inom gruppen.
Tabell 4 - P-värdet avgör om det finns någon signifikant skillnad mellan de två grupperna som anges i den vänstra kolumnen.
Uppgift 2 p-värde Signifikant skillnad 0,05
Mättad-Omättad 0,045 ja
Mättad-Halvmättad 0,344 nej Halvmättad-Omättad 0,028 ja
För uppgift 5 fanns en skillnad mellan grupp Mättad och grupp Halvmättad. Ingen skillnad påvisades mellan grupp Mättad och grupp Omättad samt grupp Halvmättnad och grupp Omättad (se ta- bell 5).
Tabell 5 - P-värdet anger om det finns en signifikant skillnad mellan de två grupperna som anges i den vänstra kolumnen.
Uppgift 5 p-värde Signifikant skillnad 0,05
Mättad-Omättad 0,207 nej
Mättad-Halvmättad 0,021 ja Halvmättad-Omättad 0,172 nej
Vid summering av tiden det tog att genomföra alla uppgifter påvi- sades en skillnad mellan grupp Halvmättad och grupp Omättad samt mellan grupp Mättad och grupp Halvmättad. Ingen skillnad kunde påvisas mellan grupp Mättad och grupp Omättad (se tabell 6).
Tabell 6 - P-värdet anger om det finns en signifikant skillnad mellan de två grupperna som anges i den vänstra kolumnen.
Totalt p-värde Signifikant skillnad 0,05
Mättad-Omättad 0,916 nej
Mättad-Halvmättad 0,028 ja Halvmättad-Omättad 0,028 ja
5. DISKUSSION
Studien undersöker om graden av mättnad på färgen röd påverkar effektiviteten på en webbsida. Syftet är att se hur stor frihet en webbdesigner har när det kommer till val av färger på en webbsida utan att kompromissa med effektiviteten.
5.1 Relaterad forskning
Teorin om att röd färg kan skapa uppmärksamhet [13] och att detta kan bero på själva färgen i sig eller på grund av dess kontrast till andra färger kan sannolikt stärkas av hur försökspersonerna i under- sökningen gick till väga för att utföra uppgift 2 (se bilaga 5). Upp- giften gick ut på att hitta en skylt med “stopptider för utleverans idag” och det var viktigt att skylten drog till sig uppmärksamhet för att försökspersonerna skulle notera den. Denna skylt ändrades i färgmättnad mellan de olika grupperna.
Vi kan i uppgift 2 se en signifikant skillnad mellan Grupp Omättad och Grupp Halvmättad samt mellan Grupp Omättad och Grupp Mättad (se tabell 4). Det fanns ingen skillnad mellan Grupp Halv- mättad och Grupp Mättad vilket tyder på att det antagligen inte var färgtonen röd som var avgörande, utan att den stack ut från den vita bakgrunden. Medianen av tidsåtgången för uppgift 2 var 34s för Grupp Halvmättad, 65s för Grupp Mättad och 83 s för Grupp Omät- tad (se tabell 3). Att effektiviteten var lägre för Grupp Omättad kan ha berott på att de hade svårare att notera skylten då kontrasten mel- lan den omättade färgen på skylten och den vita bakgrunden var lägre än för de två andra grupperna.
Att färgen på en webbsida är en avgörande faktor i användarens interaktion med webbsidan [7] kan också kopplas till hur försöks- personerna interagerade med skylten med “stopptider för utleve- rans idag”. Om syftet är att användarna ska interagera med ett visst element är det, i enighet med resultatet för uppgift 2 (se tabell 4) i
undersökningen, antagligen bra att ha en mer mättad färg på ele- mentet. Hur mättad färgen är spelar kanske inte så stor roll, så länge den inte är helt omättad.
Uppgift 2 som innehöll interaktion med skylten “stopptider för ut- leverans idag” var formulerad på ett sätt så det inte var helt uppen- bart för försökspersonerna vad de skulle leta efter på webbsidan.
Kanske var det därför extra viktigt att det elementet stack ut och syntes. Ett annat element som varierade i mättnad mellan grupperna var en skylt med texten “top 10” som användes för att hitta en gen- väg till topplistan i uppgift 1 (se bilaga 5). Vi kunde inte se någon skillnad i effektivitet mellan grupperna för uppgift 1. Detta tyder på att denna skylt inte hade samma effekt som skylten med stopptider som användes i uppgift 2.
Sammanfattningsvis kan vi konstatera att färgen troligtvis är viktig för interaktionen med avseende på uppmärksamhet och informat- ionshämtning, när användaren inte riktigt vet vad den letar efter och måste scanna sidan efter informationen men inte lika viktig när det kommer till genvägar och snabb navigation. Dock var dessa två ele- ment olika stora, skylten ”stopptider för utleverans idag” var betyd- ligt större än resterande element vilket skulle kunna ha betydelse.
Det är kanske lättare att hitta ett stort element än ett litet.
Att en webbsida med rätt komposition och val av färger bland annat kan hjälpa användaren att avgöra vad det viktigaste på sidan är [8]
är inte något denna undersökning kan stödja. Eftersom resultatet för exempelvis uppgift 1, i vilken försökspersonerna hade möjlighet att interagera med skylten till topplistan, inte visade på någon skillnad i effektivitet mellan grupperna (se tabell 2) tyder det på att färg- mättnaden inte påverkade hur snabbt försökspersonerna interage- rade med webbsidan. Många försökspersoner använde i uppgift 1 istället sidomenyn, kanske på grund av att man är van vid att hitta mycket information i just sidomenyn på andra webbsidor. Därför kan själva layouten på webbsidan vara en annan faktor som påver- kar effektiviteten på webbsidor, vilken vi i denna undersökning inte tog hänsyn till.
Den totala tidsåtgången för försökspersonerna i Grupp Omättad att klara av uppgifterna var längre än för försökspersonerna i Grupp Mättad och Grupp Halvmättad (se tabell 3). Resultaten från studien kan inte med säkerhet avfärda teorin om avvaktande beteende [9], att röd färg kan påverka användare att bli vaksamma och riskavvi- kande, men vi kunde i resultatet inte se några tendenser som stödde den. Om den totala tiden för grupp Omättad hade varit kortare än för de andra grupperna hade det möjligtvis kunnat stämma. Även i uppgift 1 och 5 där användaren skulle trycka på köpknappen kunde vi på medianvärdet se att det tog längre tid för de i Grupp Halvmät- tad och Grupp Omättad, än för de i Grupp Mättad (se tabell 3).
Detta innebär att undersökningen inte visar något stöd för ett av- vaktande beteende gentemot de mättade röda elementen. Istället för att se ett avvaktande och försiktigt beteende gentemot de mättade knapparna kunde vi se ett avvaktande beteende på några av de omättade knapparna, en person i Grupp Omättad uttryckte exem- pelvis att hen trodde att knappen “fortsätt” i kassan var avaktiverad när den var omättad och tog därför förhållandevis lång tid på sig att klicka på den knappen.
5.2 Analys av resultatet
Resultatet visade på att det fanns en signifikant skillnad mellan grupperna för uppgift 2, uppgift 5 samt för den totala tiden det tog att utföra samtliga uppgifter. Mellan vilka grupper som denna skill- nad fanns var dock olika för alla dessa tre uppgifter. I uppgift 2 skiljde sig grupp Omättad från både Grupp Mättad och Grupp Halv- mättad. Däremot fanns det ingen skillnad mellan Grupp Mättad och
Grupp Halvmättad (se tabell 4). I uppgift 5 visades ett motsatt re- sultat, där enbart en skillnad fanns mellan Grupp Halv-mättad och Grupp Mättad (se tabell 5).
Resultatet av den totala tidsåtgången för utförandet av samtliga uppgifter visar att det fanns en signifikant skillnad mellan Grupp Mättad och Grupp Halvmättad samt mellan Grupp Halvmättad och Grupp Omättad (se tabell 6). Det fanns dock ingen skillnad mellan Grupp Mättad och Grupp Omättad. Vi kan inte avfärda att resulta- ten är slumpmässiga eller att andra faktorer än färgmättnad var av- görande för skillnaden som påvisades mellan grupperna. Vi kan endast spekulera i vad som faktiskt utgjorde en skillnad för dessa tre uppgifter mellan grupperna.
Resultatet för uppgift 2 går i enlighet med vår hypotes att effektivi- teten inte skulle skilja sig mellan Grupp Mättad och Grupp Halv- mättad, men att Grupp Omättad skulle skilja sig från både de andra två. Uppgift 2 var att hitta ett leveranssätt som hade en specifik stopptid för utleverans. Detta involverade den röda informationsru- tan “stopptider för utleverans idag”. Detta stödjer diskussionen i avsnitt 5.1 om att färgmättnad spelar roll för att hitta information när man inte riktigt vet vad man ska leta efter. Det stödjer också vår hypotes om att det inte är graden av färgmättnad som spelar roll utan snarare att färgen helt enkelt inte bör vara helt omättad.
Uppgift 5 gick ut på att hitta en ansiktsprodukt som var på kampanj.
Där hade de röda elementen inte lika stor påverkan på effektiviteten då försökspersonerna även kunde välja att gå via sidomenyn. Tan- ken med uppgift 5 var att försökspersonerna skulle hitta en kam- panjvara på grund av skyltens färg, inte att de skulle gå via sidome- nyn för att hitta alla kampanjvaror. Sidomenyn fungerade alltså som en genväg till kampanjvarorna. Detta stödjer diskussionen i avsnitt 5.1 om att layouten kan vara en faktor som påverkar effek- tiviteten.
5.3 Diskussion av metod
Metoden att mäta tid kan vara problematisk då tid har egenskapen att ge väldigt spridda resultat på grund av exempelvis distraktioner och oförståelse av uppgiften. Att en försöksperson tar relativt längre tid på sig att utföra en uppgift behöver inte nödvändigtvis bero på att personen utförde den på ett sämre sätt.
I vår undersökning noterades att försökspersoner kan vara olika snabba på att scrolla. Variansen (se tabell 3) i Grupp Halvmättad kan ha berott på att en av försökspersonerna var väldigt försiktig i sitt utförande av uppgifterna, vilket visades då det tog betydligt längre tid för hen att scrolla jämfört med resterande försöksperso- ner i samtliga grupper. Denna typ av avvikelser är svåra att undvika när man mäter effektivitet med hjälp av tid. Kanske hade dessa av- vikelser kunnat elimineras om vi istället hade mätt effektivitet ge- nom att mäta exempelvis antal klick. Dock definierade vi effektivi- tet som just tidsåtgång och att mäta tiden det tog att utföra uppgif- terna var således en rimlig metod för just denna studie.
Metoden som valdes var som sagt en bra metod för att mäta effek- tivitet. Däremot hade själva undersökningen i vissa fall kunnat för- tydligas och förbättras. En försöksperson i Grupp Omättad ut- tryckte under försöket att hen inte förstod innebörden av uppgift 5.
Detta resulterade i att personen navigerade väldigt länge på webb- sidan innan själva utförandet av uppgiften startade. Detta syns tyd- ligt på variansen på uppgift 5 för Grupp Omättad då variansen var 402,7, jämfört med 49 i Grupp Halvmättad och 25,5 i Grupp Mät- tad. Detta tyder på att själva instruktionerna av genomförandet av undersökningen hade behövt vara tydligare. Då vi hade ett för litet
antal försökspersoner valde vi dock att ha kvar data från försöks- personen. Vi kan inte heller utesluta att förvirringen hade med färg- mättnaden att göra.
En av uppgifterna, uppgift 3, gick ut på att försökspersonerna skulle hitta en given jobbannons på webbsida och klicka på länken för att skicka in en ansökan. Denna uppgift valdes då den krävde interakt- ion med länken som var ett rött element. Vi hade också förutspått att försökspersonerna skulle kunna navigera sig på ett mer effektivt sätt till sidan med annonser genom att interagera med flera olika röda knappar. Vad vi inte hade förutspått var att ungefär hälften av försökspersonerna från början gick till den sida som hette “kontakta oss” istället för “jobba hos oss”. Denna “felnavigation” berodde troligtvis inte på mättnaden på färgen röd då den inte krävde inter- aktion med några röda element. Detta syns tydligt på variansen i Grupp Omättad och i Grupp Halvmättad för uppgift 5 (se tabell 3).
Även här valde vi att inte ta bort data från de försökspersoner som gick via “kontakta oss” då det var så pass många som gjorde det.
Eftersom vi såg ett mönster i denna “felnavigation” så kändes det relevant att ta med det i beräkningen trots att den troligtvis inte be- rodde på färgmättnaden.
Det som ovan diskuterats tyder på att tiden det tog att utföra upp- gifterna kunde bero på flera andra faktorer än endast färgmättna- den. För att eliminera dessa typer av fel skulle uppgifterna i vissa fall ha kunnat komponeras på ett bättre sätt. Exempelvis hade en ytterligare pilotstudie kunnat utföras i syfte att se om det fanns mönster i hur försökspersonerna navigerade sig på den undersökta webbsidan. Detta hade kunnat hjälpa oss att förutspå “felnavigat- ionerna” och vi hade kunnat utforma uppgifterna på ett bättre sätt.
Som tidigare nämnt var det väldigt få försökspersoner för att vara en kvantitativ undersökning och det hade troligtvis varit bättre med fler. Detta bidrog till att vår statistiska analys inte var helt pålitlig då den tog in värden vilka egentligen hade velat uteslutas. Med fler försökspersoner hade vi dels kanske fått ett annat resultat och vi hade kunnat utesluta de få fall där det sannolikt var andra faktorer som påverkade resultatet.
Vad som är modernt inom webbdesign varierar antagligen över tid, vilka färger som används för att förtydliga funktionaliteter inte be- höver vara samma idag som de var för 10–15 år sedan. Detta inne- bär att åldern på försökspersonerna kan spela roll för hur de uppfat- tar färgers innebörd och hur de används. I vår undersökning hade försökspersonerna åldern 19–26 vilket är en ung, homogen grupp.
Om försökspersonerna hade varit äldre så hade de kanske uppfattat innebörden hos signalfärgen röd annorlunda. Detta hade då kunnat ge ett annat resultat.
5.4 Framtida forskning
Denna studie har endast behandlat effektivitet i form av tidsåtgång.
Vad som ytterligare hade kunnat undersökas är exempelvis antalet klick en försöksperson behöver för att klara av en uppgift.
Vi har tidigare diskuterat ifall olika element dragit till sig uppmärk- samhet i olika grad beroende på dess färgmättnad. Vi har i vissa fall antagit att effektiviteten berott på just detta. För att med större sä- kerhet kunna anta detta så skulle en kompletterande studie där man följer en försökspersons ögonrörelser på skärmen kunna göras.
Detta skulle kunna ske med hjälp av eye-tracking. En sådan under- sökning skulle visa ifall försökspersonen ser element utan att lägga märke till eller använda dem.
För att få en tydligare uppfattning om hur försökspersonerna upp- lever olika färgmättnad skulle en think aloud undersökning kunna genomföras. Då skulle försökspersonerna under genomförandet av
uppgifter dela med sig av sina tankar kring navigeringen på webb- sidan. En sådan studie skulle komplettera denna undersökning ge- nom att addera användarupplevelsen. Vi har fört diskussion om vilka typer av element som påverkas av färgmättnad, något som denna studie inte undersöker. För att ta reda på detta och på så sätt få underlag till diskussionen som förts gällande detta, hade en upp- följning till denna studie kunnat utföras.
Vi har i denna studie spekulerat kring några andra faktorer som på- verkar effektiviteten. Det skulle därför vara intressant att undersöka om exempelvis layout kan påverka effektiviteten på en webbsida i en annan studie.
6. SLUTSATS
Denna studie har undersökt om färgmättnaden på signalfärgen röd påverkar effektiviteten på en webbsida. De uppgifter där signifikant skillnad mellan de olika grupperna konstaterades var som tidigare nämnt uppgift 2, uppgift 5 (se bilaga 5) och den totala tidsåtgången för alla uppgifter. Mellan vilka grupper som denna skillnad fanns var dock olika för alla dessa tre uppgifter vilket gör att det inte går att säga om graden av färgmättnad på signalfärgen röd påverkade effektiviteten, varken för uppgift 2, uppgift 5 eller för den totala tidsåtgången.
Med dessa resultat kan vi därför inte säga någonting om hur stora friheter en designer har vad gäller val av mättnad på signalfärgen röd på en webbsida.
REFERENSER
1. Nielsen, J. (2012). Usability 101: Introduction to Usabil- ity https://www.nngroup.com/articles/usability-101-in- troduction-to-usability/
2. Eriksson, E., & Jämting, J. L. (2015). Konsten att etablera ett förtroende med världens snabbaste kommunikations- medel.
3. (Nationalencyklopedin, 2019)
4. https://www.w3schools.com/colors/colors_hsl.asp
5. Norman, D. A. (2003). Attractive things work better.
Emotional design: Why we love (or hate) everyday things, Basic Books, New York.
6. Brady, L., & Phillips, C. (2019). Aesthetics and Usabil- ity: A Look at Color and Balance.
7. Bonnardel, N., Piolat, A., & Le Bigot, L. (2011). The im- pact of colour on Website appeal and users’ cognitive
processes. Displays (Vol. 32).
https://doi.org/10.1016/j.displa.2010.12.002
8. Swasty, W., & Adriyanto, A. R. (2017). Does Color Mat- ter on Web User Interface Design. CommIT Journal, 11(1), 17–24. https://doi.org/10.21512/com- mit.v11i1.2088
9. Mehta, R., & Zhu, R. (Juliet). (2009). Blue or Red? Ex- ploring the Effect of Color on Cognitive Task Perfor- mances. Science, 323(5918), 1226 LP-1229.
https://doi.org/10.1126/science.1169144
10. Gnambs, T., Appel, M., & Batinic, B. (2010). Color red in web-based knowledge testing. Computers in Human Behavior, 26(6), 1625-1631.
11. Wegman, E., & Said, Y. (2011). Color theory and design.
Wiley Interdisciplinary Reviews: Computational Statis- tics, 3(2), 104–117. https://doi.org/10.1002/wics.146 12. ISO 9241-11:2018(en). Ergonomics of human-system in-
teraction — Part 11: Usability: Definitions and concepts 13. Jina,H., Svensson, E., & Persson, H.(2005). Att skapa
uppmärksamhet - En studie om färger och motivs bety- delse för mindre kända varumärkens förpackningar.
Magister-uppsats från Lunds universitet - Företags- ekonomiska institutionen.
14. Nielsen, J. (2001). Usability Metrics https://www.nngroup.com/articles/usability-metrics/
15. Ruxton, G. D., & Beuchamp, G. (2008). Some sugges- tions about appropriate use of the Kruskal-Wallis test.
Animal Behaviour, 3(76), 1083-1087.
Bilaga 1 - Mättad webbsida
Bilaga 2 - Halvmättad webbsida
Bilaga 3 - Omättad webbsida
Bilaga 4 - Instruktionsblad
INSTRUKTIONER
Undersökningen går ut på att du ska utföra fem uppgifter på apotea.se på det sätt du tycker passar bäst. Vi kommer att spela in skärmen medan du utför uppgifterna.
Du kommer att få uppgifterna en och en, vartefter du blir klar. När du blir klar med en uppgift, ta bort händerna från datorn och vänta på ytterligare instruktioner.
Vid första uppgiften så klicka på skärmen för att börja, detta behöver du inte göra vid de andra uppgifterna.
Vänta på en signal att få börja med en uppgift.
Om sidan laddar, försök inte trycka igen utan vänta tills den laddat klart.
Bilaga 5 - Frågorna till försökspersonerna
1. Hitta veckans mest sålda vara och lägg i varukorgen.
2. Gå till kassan och välj det leveranssätt som har den senaste stopptiden för att dina varor ska levereras ut idag.
3. Antag att du ska skicka in en ansökan om att sommarjobba som farmaceuter. Skicka in en ansökan.
4. Ta bort allt från varukorgen.
5. Hitta en ansiktsprodukt som är på kampanj och lägg i varukor-
gen.
Bilaga 6 – pilotstudie
1 .
2 .
3 .
4.
Bilaga 7 - förklaringar till frågor
1. Hitta veckans mest sålda vara och lägg i varukorgen Klar när försökspersonen har klickat på knappen “köp”.
Denna uppgift valdes på grund av att försökspersonerna var tvungna att interagera med de röda elementen “topp 10” och “köp” på webbsi- dan.
2. Hitta en handprodukt som är på kampanj och lägg i varukorgen.
Klar när försökspersonen har klickat på knappen “köp”.
Denna uppgift valdes på grund av att försökspersonerna var tvungna att interagera med de röda elementen “kampanjer” och “köp” på webbsidan.
3. Antag att du ska skicka in en ansökan om att sommarjobba som farmaceuter. Skicka in en ansökan.
Klar när försökspersonen klickar på länken “jobb@apotea.se”.
Denna uppgift valdes på grund av att försökspersonerna var tvungna att interagera med den röda länken “jobb@apotea.se” på webbsidan.
4. Gå till kassan och välj det leveranssätt som gör att varorna skickas idag.
Klar när personen har valt rätt leveranssätt.
Denna uppgift valdes på grund av att försökspersonerna var tvungna att interagera med de röda elementen “Till kassan”, “Fortsätt” och
“Stopptider för utleverans idag” på webbsidan.
5. Ta bort allt från varukorgen (intressant om man klickar på krysset flera gånger eller om man trycker på “töm varukorg”) Klar när varukorgen är tom.
Denna uppgift valdes på grund av att försökspersonerna var tvungna att interagera med de röda elementen “Till kassan”/”Till varukorgen”,
“Töm varukorg” och kryss på webbsidan.
TRITA-EECS-EX-2019:212
