Användarvänlig färgsättning
på webben
User-friendly color scheme
on the web
Dina Chanyalew & Miran Amin
Datavetenskap med inriktning mot Systemutveckling Kandidatnivå - 180 HP
15 HP
Vårtermin 2019
Handledare: Mia Persson Examinator: Steve Dahlskog Slutseminarium: 2019-06-04
3
Abstract
With the development of the web, the competition between companies has occurred the last century. Websites, what used to mostly be about the functionality has changed and is more user friendly centric. Web Usability are involved in this process and gives the developers a new perspective to shape, color and structure a website. Colors world wide has different meanings. What people don’t think about is how the colors affect their subconscious. The purpose with this study is to examine which feelings the that invokes by the coloring of a website and how the coloring affects the web usability. The methods encompasses both search and reviews from literature as data collection regarding web usability and the meaning of colors. Apart from literature study an experiment containing a survey is also used. The purpose of the survey is aimed at examining which feelings that are evoked in people while using a red respective blue website. The result of this study identifies and discusses which feelings that invokes from people and how web usability is affected by websites coloring scheme
4
Sammanfattning
Med utvecklingen av webben, har konkurrensen mellan företagen ökat det senaste seklet. Tidigare låg fokus på funktionaliteten vid utvecklandet av webbsidor. Nu ligger fokus även på användarvänligheten. Principerna för användbarhet ger utvecklare nya perspektiv för form, struktur och
färgsättning av en webbsida. Färger runt om i världen har olika betydelser. Det människor inte tänker på är hur färger påverkar deras känslor och undermedvetna. Syftet med denna studien är att undersöka vilka känslor som inges från en webbsidas färgsättning och hur färgsättningen påverkar användbarheten. Med hjälp av litteraturstudie som datainsamlingsmetod kan detta besvaras. Även ett experiment används som innehåller en enkät. Syftet med enkäten är att undersöka vilka känslor som inges vid
användandet av en röd respektive blå webbsida. Resultatet av denna studien identifierar och diskuterar vilka känslor som inges och hur användbarheten påverkas av en webbsidas färgsättning.
5
Abstract 3
Sammanfattning 4
1. Introduktion 8
1.1 Bakgrund 8
1.2 Syfte och frågeställning 11
1.3 Avgränsningar 11
2. Metod 12
2.1 Metodöversikt 12
2.2 Litteraturstudie 12
2.3 Experiment 13
2.4 Metodbeskrivning - Uppsättning för Experiment 13
2.5 Metoddiskussion 14 3. Resultat 15 3.1 Implementation av färgsättning 15 3.2 Utförande av Experiment 16 3.3 Bakgrundsinformation om deltagarna 20 3.3.1 Kön 20 3.3.2 Nationalitet 21 3.3.3 Ålder 22
3.4 Resultat av Experiment (enkät) 22
3.4.1 Fråga 1 23 3.4.2 Fråga 2 24 3.4.3 Fråga 3 25 3.4.4 Fråga 4 26 3.4.5 Fråga 5 27 3.4.6 Fråga 6 28 3.5 Resultat av litteraturstudie 28
3.5.1 Color, Arousal, and Performance— A Comparison of Three
Experiments - Küller m.fl. [3] 29
3.5.2 The effect of web interface features on consumer online
purchase intentions - Hausman m.fl. [12] 29
3.5.3 Information Dashboard Design : Displaying data for
at-a-glance monitoring - Few [15] 29
3.5.4 The Impact of Web Page Text- Background Color
Combinations on Readability, Retention, Aesthetics and Behavioral
Intention - Hall m.fl. [16] 30
3.5.5 Web Style Guide: Basic Design Principles for Creating Web
6 3.5.6 Webbdesign, med fokus på användbarhet - Molich [11] 30 3.5.7 Användbarhetsboken - Sundström [18] 31 3.5.8 Interaction Design: Beyond human-computer interaction -
Preece m.fl. [19] 31
3.5.9 Usability 101: Introduction to Usability - Nielsen [20] 31
4. Analys 32
5. Diskussion 36
5.1 Besvarande av forskningsfråga 1 36
5.2 Besvarande av forskningsfråga 2 37
5.2.1 Sundström - ISO standarden [18] 37
5.2.2 Molich - principer för användarvänlighet [11] 37 5.2.3 Nielsen - principer för överlevnad utifrån användbarhet [20] 38
5.3 Metoddiskussion 38
5.3.1 Alternativa metoder 38
5.3.2 Genomförd Experiment och litteraturstudie samt lärdomar från
dessa 39
8
1. Introduktion
När webbsidor först integrerades i samhället låg fokus främst på
funktionaliteten. Vid skapandet av webbsidor fanns det ytterst få krav på form, struktur och användarvänlighet. Med utvecklingen så har det framgått att interaktionen mellan maskin och människa är nyckeln till den bästa användarupplevelsen [9]. HCI står för Human-Computer interface som uppkom tillsammans med den datavetenskapliga utvecklingen. HCI står för interaktionen mellan människa och maskin. Det innehåller bearbetningen av det psykologiska, estetiska, datavetenskapliga, beteendeframhävande och design principer. Vid skapandet av webbsidor bidrar dessa till
användarvänligheten [10].
1.1 Bakgrund
Konkurrenskraften mellan företag har gjort att utvecklingen av webbsidor ökat. Molich diskuterar hur företag kan marknadsföra sig och förbättra sitt varumärke genom att inrikta sig på användarvänlighet [11]. Molich menar att en webbsida inte kan överleva på Internet om den inte är användarvänlig mot slutanvändaren. Mängden av information som finns tillgänglig gör att företag måste utveckla attraktiva webbsidor för att locka användare [11].
Molich nämner att många tekniska funktioner på en webbsida är mindre viktiga då man konstruerar webbsidan. Genom att fokusera på
användarvänligheten medför det att fler användare med olika bakgrunder och åldrar kan interagera med webbsidan. Den stora målgruppen som använder internet idag och dess webbsidor gör att mer fokus behövs på designprinciperna. En användarvänlig webbsida kännetecknas av dess enkla tillvägagångssätt och dess enkla gränssnitt [11].
Pressey har utfört en studie som syftar till att undersöka det autonoma nervsystemets respons på varma och kalla färger [1]. Pressey kom fram till att responsen hos det autonoma nervsystemet är detsamma oavsett varma eller kalla färger. Pressey upptäckte också att ljuset gör skillnad på vår prestationsförmåga [1].
9 Küller utförde en studie med avseende på människors påverkan genom färgsättning under deras arbete. Humöret hos de anställda på den färgrika arbetsplatsen var bättre jämfört med arbetsplatsen med neutrala färger. Det är dock värt att notera att majoriteten av de arbetsplatser som undersöktes i studien hade en neutral färg [2].
I en annan studie utförd av Küller m.fl utfördes ett experiment på ett antal testpersoner. Man lät varje testperson vistas i ett blått rum och i ett rött rum under två och en halv timme vid två olika tillfällen [3]. Under denna tid skulle hjärt- och hjärnaktiviteten samt humöret mätas hos de olika testpersonerna. Parametrar såsom rumstemperaturen, ljudisolering och ljuset i det röda och blåa rummet hölls konstanta för att inte inverka på experimentet som skulle utföras. Testpersonerna fick även utföra en testuppgift som bestod av att skriva en text då de vistades i de två olika rummen. Resultatet visade att i det röda rummet så blev testpersonerna mer exalterade, vissa så till den grad att deras hjärtfrekvens förhöjdes. Vidare observerades att de
testpersoner som hade ett negativt humör eller var introverta och vistades i det röda rummet presterade bättre. Dock observerade man även att antalet stavfel och liknande fel uppkom i större utsträckning i det röda rummet. Man fann även att hjärnaktiviteten ökade i det röda rummet gentemot det blå där personerna istället blev lugnare. En viktig slutsats som forskarna kom fram till var att man bör ha svalare färger i arbetsrum, eftersom starkare färger väcker mer stress. Vilket konstaterades under experimentet i det röda rummet [3].
Campbell har studerat färgpsykologi inom marknadsföring [4]. Tabell 1 listar några av Campbells forskningsresultat inom ovannämnda område. Liksom studien som utfördes av Kuller m.fl. [3] fokuserar hon på starka och svala färger. I hennes studie diskuterar hon bland annat att färger såsom röd och orange ofta används av snabbmatskedjor och detta är ingen slump menar hon; ovannämnda färger används för att uppmuntra kunder att äta snabbt och sedan lämna restaurangen.
10
Tabell 1 beskriver Campbells forskningsresultat om vad för känslor tillhörande färg inger.
Färg Känslor
Röd spänning, styrka, sex, passion, fart,
fara Blå (listad som den mest populära
färgen)
trovärdighet, tillförlitlighet, tillhörighet, kyla
Gul värme, sol, glädje, lycka
Orange lekfull, varm, livfull
Grön natur, fräsch, kall, tillväxt, överflöd
Lila kunglig, spirituell, värdighet
Rosa mjuk, söt, uppfostran, trygghet
Vit skör, oskuldsfull, ren, ungdomlig,
mild
Svart sofistikerad, elegant, förförande,
mystisk
Guld prestige, dyr
Silver prestige, kall, vetenskaplig
(Tabell 1)
Borowska har studerat hur färger på webbsidor påverkar oss människor [5]. Borowska menar på att de flesta webbsidor har en enkel bakgrundsfärg som ofta ligger inom gråskalan. Detta på grund av att färgglada knappar eller andra länkar på webbsidan ska sticka ut från bakgrunden. Borowska menar att syftet här är att få besökarna att klicka på vissa länkar för att dessa leder till något annat som man vill framhäva [5]. Vidare påpekar hon att beroende på vad man vill förmedla med en webbsida så gäller det att välja rätt färg [5]. Det handlar därmed inte bara om att bakgrundsfärgen ska ligga inom gråskalan, såsom majoriteten av webbsidor. Utan att det även faktiskt handlar om hur man vill att människor ska uppfatta webbsidan och det budskap som den vill förmedla genom sin valda färgsättning. Ett
11 illustrerande exempel på detta tar Borowska upp en symfoniorkesters webbsida. Här tänker nog många att en symfoniorkester ska ha en
glamorös sida och därmed använder sig av en guldfärgad färgsättning. Men vad händer om just denna symfoniorkesters webbsida är i en skrikande rosa färg; orkestern har kanske valt denna färgsättning på grund av att de anser sig själva vara roliga och kreativa. Och vad händer med vår
uppfattning om orkestern vid denna färgsättning?
1.2 Syfte och frågeställning
Syftet är att ta reda på hur människors känslor och användarvänlighet påverkas av en webbsidas färgsättning.
Denna uppsats baseras på studien som Küller m.fl genomförde [3]. Istället för att se hur färger påverkar en grupp av personer i två olika rum
implementeras detta istället på två webbsidor. Genom att utgå från färgerna röd och blå som forskarna i Lund använde sig av kommer två webbsidor att designas, en i färgen röd och en i färgen blå. Webbsidorna kommer vara identiska med varandra så att andra faktorer kan uteslutas. Genom att designa på detta sätt går det att konstatera hur människors känslor påverkas av en webbsidas färgsättning. En delfråga till detta är om användarvänligheten påverkas av en webbsidas färgsättning.
Användarvänligheten går hand i hand med känslorna i detta fall. Det talar även Küllers studie om också [3] där en röd rumsmiljö ökade prestationen men samtidigt ökade antalet fel gjorda. På en webbsida kanske en ökad prestation kan jämföras med en ökad interaktion vilket kanske ökar stressen?
För att uppnå ovan nämnda syfte behöver följande frågeställningar besvaras:
1. Vilka känslor inges av en webbsidas färgsättning?
2. Hur påverkas webbsidans användarvänlighet av dess färgsättning?
1.3 Avgränsningar
I studien som gjordes av forskare på Lunds tekniska högskola [3] fokuserar forskarna inte bara på känslor, utan även hjärt- och hjärnaktiviteter. I denna uppsats är syftet att avgränsa så att känslor är huvudfokus. Fokus ligger
12 även på Campbells artikel om känslorna som färgerna röd och blå ger upphov till (se tabell 1). Åldrarna för deltagarna som kommer att ingå i studien är ett spann på 20 till 50 år. Detta på grund av att barn har en annan uppfattning av färg och form än vad vuxna har [21]. Deltagarna har olika bakgrunder och olika nationaliteter. Studien är ämnad att avgränsa sig endast till deltagare med icke teknisk utbildning. Detta för att de med teknisk utbildning kan påverkas av sin tekniska förmåga.
2. Metod
2.1 Metodöversikt
Experiment innebär att man genomför en studie, forskning eller
undersökning där man formar en teori och testar en hypotes. Informationen som tas in består av att sätta upp miljön för teorin och testa om liknande resultat kan uppnås för den angivna hypotesen [7]. Litteraturstudien består av att söka och granska litteratur inom ämnet som datainsamling för den andra frågeställningen (se avsnitt 1.3). Datainsamlingen som görs genom litteraturstudien ska ge upphov till en webbsidas användarvänlighet baserat på dess färgsättning.
2.2 Litteraturstudie
Fokus för litteraturstudien är att samla data från tidigare forskning. Datan utgörs av det uppnådda resultatet av artiklarna. Det vi letar efter är artiklar som innehåller resultat av hur en webbsidas användarvänlighet påverkas baserat på dess färgsättning. Det som söks efter ska innehålla en förklaring till användarvänlighet för en webbsida som är knutet till färger. Valet av artiklar väljer vi ut genom titeln. De rubriker som är av intresse väljs ut för granskning av abstract. De artiklar vars abstract verkar intressanta för ändamålet och ämnet väljs ut för en noggrann granskning. Denna
granskningen ligger i grund för vår datainsamling. Alla artiklar vars rubriker inte lockar eller ger inslag av ändamålet väljer vi bort. Källorna som ska användas för studien tar vi fram genom sökningar på Google search, IEEE databas, Google Scholar, ACMs artikeldatabas och böcker från Malmö Universitets bibliotek.
Sökningar av artiklar från artikeldatabaser som ACMs och IEEE kommer bestå av nyckelord. Likaså sökningar på Google Scholar. Nyckelorden skriver vi både på engelska och svenska för ett större utbud av relevanta
13 artiklar. Ord som web usability, användarvänlighet för webben,
användarvänlighet färger, color and user friendliness. Sökningarna som ger många träffar skalar vi ner genom att lägga till sekundära ord tillhörande ämnet.
2.3 Experiment
För att få svar på den första frågeställningen utgår vi från en kvalitativ undersökning. Vi formar ett experiment där deltagare besvarar en enkät. Enkäten besvaras i samband med användandet och jämförelsen av två olika webbsidor. Experimentet ger svar på frågeställningen “Vilka känslor inges av en webbsidas färgsättning?”.
Ett experiment används när något vill tas reda på. Inom forskningen är experiment en strategi som undersöker orsak och effekt. Metoden går ut på utveckla en teori och testa en hypotes. Experiment går ut på att bevisa eller motbevisa hypotesen och är ofta associerad till något som bevisas och sker i en fysisk miljö [7].
Enkäten framställs via surveymonkey. Surveymonkey tillåter användandet av slutna och öppna enkätfrågor. De öppna enkätfrågorna är konstruerade på så sätt att respondenten får besvara frågorna med ord. De slutna enkätfrågorna har redan färdiga svar som respondenten får välja mellan. Som nämndes innan är valet för denna studie slutna frågor.
2.4 Metodbeskrivning
● Deltagare. Deltagarna i studien ska spegla den målgrupp som
använder denna typ av webbsidor som studien tar fram. Studien har tagit hänsyn till att avgränsa åldern till endast vuxna då barn har en annan uppfattning av färgsättning [21].
● Uppgift. Deltagarnas uppgift är att besvara enkätfrågor i samband
med interaktionen mellan de två olika webbsidorna. Deltagarna instrueras även att lägga större fokus på webbsidornas färgsättning än själva strukturen. Detta för att få ett optimalt resultat.
● Miljö. Miljön ska återspegla så långt som möjligt den verkliga
14 stadsbibliotek i enskilt rum där en deltagare åt gången kommer vistas under utförandet av studien. Deltagaren kommer även ha tillgång till en bärbar dator, den webbläsare deltagaren känner sig bekvämast med, bord och stol.
● Forskare. Forskarnas uppgift är att se till så att enkäten blir
besvarad till fullo och skickas in. Vara närvarande för svar vid frågor av deltagarna. Försöka eliminera alla faktorer som kan påverka resultatet för varje deltagare.
2.5 Metoddiskussion
Experimentet för denna studien baseras på Küllers studie. Küllers studie utgår från en teori som handlar om att undersöka hjärt - och hjärnaktiviteten tillsammans med känslor vid interaktionen med färger [2]. Hypotesen är att undersöka om liknande resultat kan uppnås i förhållande till webben. Experiment lämpar sig bäst för denna studien för att det just är en teori som är utvecklad och en hypotes som vill testas. Experimentet till skillnad från andra metoder tillåter forskarna att sätta upp en miljö och strategi som enklast kan svara på forskningsfrågan.
Fördelar med att tillämpa ett experiment är att det är en väletablerad strategi. Ses som den mest vetenskapliga metoden och anses vara den mest acceptabla tillvägagångssättet. Experiment är den enda
forskningsstrategin som tillåter en bevisa en relation i förhållande till något annat. Experiment tillåter hög level av precision vid mätning och analysering av data. En stor fördel med experimentet är tid och kostnadseffektiviteten då metoden tillåter forskarna att utföra experimentet med lättåtkomliga resurser [6].
15
3. Resultat
I detta avsnitt presenteras resultat fram utifrån experimentet och litteraturstudien.
3.1 Implementation av färgsättning
Webbsidorna som använts för denna studie är egengjorda istället för två webbsidor med olika färg och struktur. Anledningen till detta är för att olika färg och struktur kan påverka en deltagares omdöme. Webbsidorna erhåller identisk struktur och design där endast färgerna skiljer sig åt (se figur 2 och 3).
Valet av färgsättning i denna studie baserades på Küllers forskning som handlar om människors beteende och känslor gentemot färgen rött och blått [3]. I Küllers forskning placerade han 10 personer i identiska rum med 2 olika färger, ett rött och ett blått. Küller med hjälp av teknologi och utrustning mätte deltagarnas känslor, hjärt- och hjärnaktivitet efter en viss tid av
vistelse i rummet. Studien ämnar att få en uppfattning om denna sorts metodik ger liknande resultat gentemot webben och hur färgerna påverkar användarvänligheten.
I en undersökning av Campbell [4] visas det att färger har dessa effekterna på individer:
Röd spänning, styrka, sex, passion, fart,
fara Blå (listad som den mest populära
färgen)
trovärdighet, tillförlitlighet, tillhörighet, kyla
16
3.2 Utförande av Experiment
Experimentet ägde rum på Malmö stadsbiblioteket mellan datumen 2019-03-28 och 2019-03-29.
Deltagarna kallades in en och en till ett studierum i Malmö stadsbiblioteket. En bärbar dator användes för studien där både webbsidorna och enkäten var förberedda. Vid ankomst instruerades deltagaren att sätta sig framför datorn. Deltagaren hade fått uppgiften om att fritt använda sig av båda webbsidorna (se figur 2 och 3) tills deltagaren kände sig redo för att svara på enkäten (se figur 1). Enkäten består av 6 frågor som sammanställts utifrån tidigare forskning av Küller [3] och Campbell [4]. Küllers resultat är hypotesen som ligger till grund för denna forskning därav valet av färger och utformandet av enkäten. Enkätens har två valsalternativ. Valalternativen är Röd och Blå.
17
18
19
20
3.3 Bakgrundsinformation om deltagarna
I detta avsnitt visas fullständig bakgrundsinformation om deltagarna som noterats. Ingen av deltagarna innehar en teknisk utbildning eller bakgrund. Informationen framtogs på plats i samband med experimentet.
3.3.1 Kön
Totalt deltog 8 personer, varav 5 var män och 3 kvinnor. Se cirkeldiagrammet nedan.
21
3.3.2 Nationalitet
2 av 8 respondenter hade amerikansk nationalitet, resterande 6 hade svensk nationalitet. Se cirkeldiagrammet nedan.
22
3.3.3 Ålder
Det totala åldersspannet låg på 20-50 år. Detta visas i tabellen nedan.
(Figur 6 : Åldersfördelning)
3.4 Resultat av Experiment (enkät)
Utifrån tidigare forskning om färgers påverkan på känslor kunde resultat framställas. Enkäten besvarades av 8 deltagare, en åt gången. Enkäten var placerad i en annan flik för att besvaras under experimentets gång.
23
3.4.1 Fråga 1
Fråga 1 löd: Vilken sida är mest trovärdig?
Av diagrammet nedan (Diagram 1) framgår det att 7 deltagare gav svaret blå, medan en deltagare svarade röd .
24
3.4.2 Fråga 2
Fråga 2 löd: Vilken sida inger mest stress?
Av diagrammet nedan (Diagram 2) framgår det att 8 deltagare gav svaret röd, medan ingen deltagare svarade blå.
25
3.4.3 Fråga 3
Fråga 3 löd: Vilken sida känner du dig säkrast på?
Av diagrammet nedan (Diagram 3) framgår det att 7 deltagare gav svaret blå, medan en deltagare svarade röd .
26
3.4.4 Fråga 4
Fråga 4 löd: Vilken sida inger mest energi?
Av diagrammet nedan (Diagram 4) framgår det att 6 deltagare gav svaret röd, medan 2 deltagare svarade blå.
27
3.4.5 Fråga 5
Fråga 5 löd: Vilken sida inger mest lugn?
Av diagrammet nedan (Diagram 5) framgår det att 8 deltagare gav svaret blå, medan ingen deltagare svarade röd .
28
3.4.6 Fråga 6
Fråga 6 löd: Vilken sida inger mest aggression?
Av diagrammet nedan (Diagram 6) framgår det att 8 deltagare gav svaret röd, medan ingen deltagare svarade blå.
(Diagram 6 : Vilken sida inger mest aggression)
3.5 Resultat av litteraturstudie
Tidigare forskning har framställts som är liknande denna. Här presenteras resultatet av litteraturstudien.
29
3.5.1 Color, Arousal, and Performance— A Comparison of Three Experiments - Küller m.fl. [3]
Titel: Color, Arousal, and Performance— A Comparison of Three Experiments.
Författare: Küller R, Mikellides B, Janssens J.
Denna artikel beskriver resultatet av de känslor som uppkom då testpersoner vistades i ett rött rum respektive ett blått rum. I det röda rummet blev testpersonerna mer exalterade, vissa till den grad att deras hjärtfrekvens förhöjdes. De med ett negativt humör eller var introverta presterade bättre i det röda rummet. Antalet stavfel och liknande fel uppkom i större utsträckning i det röda rummet. I det blå rummet blev testpersonerna lugnare. Det resulterade i att svalare färger bör finnas i arbetsrum då starka färger väcker mer stress. Stress leder till att man är mer benägen till att göra fel [3].
3.5.2 The effect of web interface features on consumer online purchase intentions - Hausman m.fl. [12]
Titel: The effect of web interface features on consumer online purchase intentions.
Författare: Hausman, A. V. and Siekpe, J. S.
Denna artikel framlägger resultat där köpintentioner påverkats då en användare interagerat med en webbsidas gränssnitt. Detta visar att känslor har en stor påverkan. De känslor som visats har varit trovärdighet,
användarvänlighet samt visuellt utseende. Detta i samband med andra tekniska funktioner. För att en webbsida ska vara lyckad och framgångsrik krävs bägge delar [12]. Med detta konstaterades resultat om att det
känslomässiga har en stor påverkan utifrån en individs köpintentioner [12,13].
3.5.3 Information Dashboard Design : Displaying data for at-a-glance monitoring - Few [15]
Titel: Information Dashboard Design : Displaying data for at-a-glance monitoring
30 Few belyser att vid valet av färg är det inte alltid så lätt för utvecklaren [15]. Många färger betyder olika saker (se tabell 1) som även Campbell beskriver [4]. Det uppträder då att användaren anser att färgen röd påvisar till att något är fel. Utvecklaren har inte detta i åtanke vid skapandet vilket leder till förvirring hos både utvecklare och användare [15].
3.5.4 The Impact of Web Page Text- Background Color Combinations on Readability, Retention, Aesthetics and Behavioral Intention - Hall m.fl. [16]
Titel: The Impact of Web Page Text- Background Color Combinations on Readability, Retention, Aesthetics and Behavioral Intention
Författare: Hall, R.H. and P. Hanna
Hall och Hanna förklarar att ökade kontrastförhållanden av färger ökar läsbarheten hos webbsidor. Färger som blå ökade användarnas köpintentioner, då blå signalerar köp [16].
3.5.5 Web Style Guide: Basic Design Principles for Creating Web Sites - Lynch m.fl. [17]
Titel: Web Style Guide: Basic Design Principles for Creating Web Sites Författare: Lynch, P. J., & Horton, S
För att ta hänsyn till färgblinda bör den röda färgen inte användas i kombination till den gröna färgen. Dessa två färger tillsammans gör det svårt att urskilja skillnaden för färgblinda [17].
3.5.6 Webbdesign, med fokus på användbarhet - Molich [11]
Titel: Webbdesign, med fokus på användbarhet Författare: Molich Rolf
Molich beskriver olika principer som bör finnas för att en webbsida ska anses som användarvänlig [11].
● Tillförlitlighet - Desto mer funktionella fel en webbsida har minskas tillförlitligheten.
31 ● Tillgänglighet - Webbsidan ska finnas tillgänglig.
3.5.7 Användbarhetsboken - Sundström [18]
Titel: Användbarhetsboken Författare: Sundström Tommy
Enligt ISO standard 9241-210 definieras användbarhet som [18]: ● Ändamålsenlighet - noggrannhet och fullständighet med vilken
användarna uppnår givna mål
● Effektivitet - resursåtgång i förhållande till den noggrannhet och fullständighet med vilken användarna uppnår givna mål
● Tillfredsställelse - frånvaro av obehag samt positiva attityder vid användningen av en produkt.
3.5.8 Interaction Design: Beyond human-computer interaction - Preece m.fl. [19]
Titel: Interaction Design: Beyond human-computer interaction Författare: Preece, Jenny, Sharp Helen & Rogers, Yvone
Preece m.fl förklarar att en webbsidas gränssnitt kan utge en del positiva effekter hos användaren. Vissa undersökningar konstaterar att attraktiva gränssnitt på webbsidor gör det lättare för användaren att använda än oattraktiva [19].
3.5.9 Usability 101: Introduction to Usability - Nielsen [20]
Titel: Usability 101: Introduction to Usability Författare: Jacob Nielsen
Nielsen listar viktiga principer för att en webbsida ska överleva utifrån användbarhet [20].
● Om webbsidan är svåranvänd lämnar användaren webbsidan. ● Om startsidan är otydlig med vad det är den erbjuder och vad
användaren kan utföra på webbsidan lämnar användaren webbsidan.
● Om användaren blir vilsen på webbsidan lämnar användaren webbsidan.
32 ● Om webbsidan är svårläst eller inte svarar på användarens
huvudfråga lämnar användaren webbsidan.
4. Analys
I detta avsnitt diskuteras och analyseras resultatet som har framställts. Även kopplingar till tidigare studier kring ämnet tas upp. Utifrån
litteraturstudien och experimentet kan likheter ses mellan båda resultat delarna.
Uppsatsen är baserad på studien av Küller m.fl där skillnaden är i form av implementering på webbsidor istället för rum [3]. Forskning har utförts för att se om färgsättningen för de två olika rummen i Küllers studie kan resultera samma för webbsidorna i denna studie. Utifrån det som framställts av experimentet (se diagram 1-6) kan vi se tydliga liknelser från Küllers studie. Küller belyser att starka färger inger mer stress, därför bör svala färger finnas i miljöer som arbetsrum då det bringar lugn [3]. Utifrån enkäten i experimentet kan vi se att 8 av 8 deltagare svarade på att den röda webbsidan inger mest stress (se diagram 2). Därefter ser vi att 8 av 8 deltagare svarade på att den blå webbsidan inger mest lugn (se diagram 5). Detta svarar på frågeställningen “Hur påverkas våra känslor av en
webbsidas färgsättning?”. Küller nämner även att de testpersoner som vistades i det röda rummet blev mer exalterade, vissa till den grad att hjärtfrekvensen ökade. Kopplingar kan dras till enkäten där 6 av 8 deltagare svarade på att den röda webbsidan ingav mest energi (se diagram 4). Exalterad är ett synonym till ivrig. Energi är också ett synonym till ivrig. Därav kan samband påvisas utifrån Küllers studie och vad deltagarna i denna studie svarade. Vilket även här svarar på forskningsfrågan “Vilka känslor inges av en webbsidas färgsättning”.
Sundström beskriver ISO standarden för användbarhet där tillfredsställelse är en av punkterna [18]. För att en produkt ska uppnå användbarhet enligt ISO standarden krävs tillfredsställelse som kriterium. Vi kan se utifrån enkäten och även Küllers studie att stress är en faktor i bägge studierna. I Küllers studie ökade antalet fel och stavfel i större utsträckning då personer vistades i det röda rummet [3]. Stressen var en faktor till varför antalet stavfel och liknande fel ökade. Deltagarna i experimentet svarade likartat att den röda webbsidan ingav mest stress. Detta leder till en minskad
33 obehag och positiva attityder vid användningen av en produkt [18]. Detta leder till att användbarheten försämras då tillfredsställelsen inte blir uppnådd. Detta svarar på frågeställning två “Hur påverkas webbsidans användarvänlighet av dess färgsättning”.
Det Few tar upp om att utvecklare har en annan avsikt med färg än vad en användare har kan man dra slutsatser ifrån. Färgen röd skapar en viss förvirring mellan användare och utvecklare. Användaren menar att färgen röd signalerar fel och utvecklare har en annan avsikt med färgen [15]. Detta leder till nedsatt tillfredsställelse och Ändamålsenlighet enlig ISO
standarden [18]. Syftet är inte att signalera att något är fel i detta fall. Det här är ett problem som uppkommer då utvecklare får bestämma helt fritt vad för färg som ska appliceras [15]. Därför krävs det tydliga designprinciper. Vilket kan ge svar på frågeställning “Hur påverkas webbsidans
användarvänlighet av dess färgsättning?”.
Hall m.fl förklarar att ökade kontrastförhållande mellan färger möjliggör en ökad läsbarhet [16]. Det vill säga att färger som är lika varandra så som röd, rosa och lila minskar läsbarheten. En ökad läsbarhet leder till en ökad användbarhet enligt Nielsens principer. Nielsen påpekar att “Om webbsidan är svåranvänd lämnar användaren webbsidan” och “Om webbsidan är svårläst ... lämnar användaren webbsidan” [20]. En läsbar webbsida leder till att den blir lättare att använda och tyda. Det bör även tas hänsyn till färgblinda redogör Lynch m.fl för. Röd färg i kombination med grön färg gör det svårare att urskilja för färgblinda [17]. Även här påverkas läsbarheten och användandet av webbsidan negativt. Detta leder till att Nielsens principer för användbarhet förfaller. Valet av färgsättning spelar stor roll för läsbarheten och användandet av en webbsida. Vilket kan ge svar på frågeställningen “Hur påverkas webbsidans användarvänlighet av dess färgsättning”.
Utifrån enkäten i experimentet, ser vi att 7 av 8 deltagare svarar på att den blå webbsidan är mest trovärdig (se diagram 1). Tidigare studier av
Campbell påvisar att blå inger känslor som trovärdighet, tillförlitlighet, tillhörighet och kyla (se tabell 1). Färgen blå är också den mest populära färgen (se tabell 1). Med tanke på att blå är den mest populära färgen kan det vara ett av skälen till varför majoriteten av deltagarna svarade på den blå webbsidan som mest trovärdig. Populära webbsidor som har färgen blå är Nordéa, Facebook, Danske Bank och Microsofts olika verktyg (Outlook,
34 Microsoft Office). Kanske finns det en anledning till varför dessa företag valt färgen blå som primär färg. 7 av 8 deltagare svarade på att den blå
webbsidan i studien kändes mest säker (se diagram 3). Eftersom dessa företag och banker är kända för att dess sidor används av många människor världen över, kan det vara en anledning till att majoriteten svarade så som de gjorde på enkäten för experimentet.
Vi kan se ett mönster på hur färgen blå kan förknippas med något som är säkert, lugnt och trovärdigt (se diagram 1, 3 och 5). Kanske är det därför vi ser samma mönster på valet av färgsättning hos tillhörande webbsidor hos ovannämnda kända företag. Vilket kanske visar på att i grunden går vi efter tidigare erfarenheter när vi känner en viss känsla på webbsidor.
Molich redogör principer som bör finnas för att en webbsida ska anses som användarvänlig, två av dessa är tillförlitlighet och säkerhet [11].
Trovärdighet och säkerhet var något som 7 av 8 deltagare svarade på att den blå webbsidan var (se diagram 1 och 3). Vilket uppfyller majoriteten av Molich principer för användarvänlighet. Vidare kan vi se att den röda webbsidan inte uppfyller någon av Molich principer för användarvänlighet (se diagram 1 och 3). Vilket resulterar till att den blå webbsidan är mer användarvänlig än den röda. En av ISO standarderna för användbarhet är tillfredsställelse [18]. Under experimentet svarade 8 av 8 deltagare på att den röda webbsidan ingav mest aggression (se diagram 6). En webbsida som uppnår kriteriet tillfredsställd ska inte utge någon form av obehag för användaren [18]. Aggression är en känsla som inte är behaglig. Likaså är stress, opålitlig, spänd och osäker. Där opålitlig är motsatsen till trovärdig, spänd motsats till lugn och osäker motsats till säker. Det framgår tydligt ett mönster på hur den röda webbsidan inte uppfyller kriteriet för
tillfredsställelse. Vilket leder till en försämrad användbarhet.
Sammanfattningsvis kan vi se att den blå webbsidan uppfyller mer kriterier inom användbarhet som Sundström nämnde och användarvänlighet som Molich nämnde [18,11]. Vilket kan ge oss ett svar på båda
frågeställningarna.
Utifrån experimentet ser vi att den blå webbsidan uppfyller mer positiva känslor än den röda webbsidan. Tillsammans med tidigare studier kan slutsatser dras som kan svara på frågeställningarna “Vilka känslor inges av en webbsidas färgsättning” och “ Hur påverkas webbsidans
35 webbsidor är lättare att använda än oattraktiva webbsidor [19]. Utifrån det som tagits fram kan vi se att den blå webbsidan kan vara behagligare än den röda webbsidan. Deltagarna kände flera positiva känslor hos den blå webbsidan gentemot den röda. Utifrån detta kan slutsatser dras att den blå webbsidan kan vara mer attraktiv än den röda. Vilket gör att den blå
webbsidan enligt Preece m.fl bör vara lättare att använda, dock spelar faktorer roll så som det lilla antalet testpersoner som svarade på enkäten [19]. När en webbsida är lätt att använda resulterar det till att användaren stannar kvar på webbsidan enligt Nielsen [20].
36
5. Diskussion
5.1 Besvarande av forskningsfråga 1
Följande forskningsfråga ställdes i studien:
● Vilka känslor inges av en webbsidas färgsättning?
I denna studie försöker vi ta reda på om en webbsidas färgsättning kan ha någon påverkan på en människas känslor. Utifrån Küller m.fl har vi utformat forskningsmetoder för att efterlikna resultatet som Küller framställt.
Resultatet som framställts utifrån denna studie påvisade ett liknande
forskningsresultat som Küllers. Hur en webbsidas gränssnitt utformas spelar roll. Hausman belyser att det känslomässiga har en stor påverkan utifrån hur en webbsidas gränssnitt konstrueras [12]. Genom att fokusera på hur enbart färgsättning på en webbsidas gränssnitt påverkas av det
känslomässiga har vi kunnat skala ner denna studie. Hausman fokuserar på köpintentioner i samband med en webbsidas gränssnitt och det
känslomässiga [12]. För att studera om ytterligare forskning skulle behöva tillämpas i form av nya datainsamlingsmetoder och tidigare forskning. Studien är strukturerad och formad på så sätt att vidare forskning kan upptas och implementeras.
Det som skalades ner ytterligare i denna studie var färgen röd och blå. Att använda sig av flera färger skulle kräva ytterligare forskning vilket inte räckte till tidsmässigt för denna studie.
Utifrån experimentet och litteraturstudien kan vi sammanfattningsvis
besvara forskningsfråga 1. Färgsättningen för de två olika webbsidorna som konstruerades kan ha en påverkan på våra känslor. Den röda webbsidan fick majoriteten av deltagarna att känna känslor som stress, aggression och energi (se diagram 2, 4 och 6). Den blå webbsidan fick majoriteten av deltagarna att känna känslor som trovärdighet, säkerhet och lugn (se diagram 1, 3 och 5).
Fördelen med att besvara denna forskningsfrågan var tillgången till datainsamlingsmetoden vilket var enkäten som utfördes i samband med experimentet. Det var lätt att framställa data och visa resultat. Inga
37 enkäten under experimentet. 8 deltagare kan man inte med säkerhet dra fullständiga slutsatser ifrån. Ytterligare information kan tas fram från litteraturstudien för att styrka resultatet från enkäten men inte mer än så.
5.2 Besvarande av forskningsfråga 2
Följande forskningsfråga ställdes i studien:
● Hur påverkas webbsidans användarvänlighet av dess färgsättning?
I denna studie försöker vi ta reda på om en webbsidas färgsättning påverkar användarvänligheten på något sätt. Utifrån litteratur undersökningen
tillsammans med experimentet kan resultat framställas. Den huvudsakliga datainsamlingsmetoden för att besvara denna fråga är litteratur
undersökningen. En webbsidas färgsättning kan påverka
användarvänligheten. Genom att besvara forskningsfråga 1 kan vi se vad för känslor en viss färg inger. I denna studie är det färgerna röd och blå som tidigare nämnts. Den röda färgen på webbsidan fick deltagarna att känna känslor som aggression, stress och energi (se diagram 2, 4 och 6) . Den röda webbsidan fick även deltagarna att känna motsatta effekt från vad den blå webbsidan fick dem att känna. Vilket var trovärdighet, säkerhet och lugn (se diagram 1, 3 och 5). Genom att koppla dessa känslor till ISO
standarderna för användbarhet, Molich principer för användarvänlighet och Nielsens principer för användbarhet kan resultat framställas [18,11,20]. Användarvänlighet och användbarhet går hand i hand för att uppnå bästa upplevelsen för användaren.
5.2.1 Sundström - ISO standarden [18]
Den huvudsakliga ISO standarden som forskas om i denna studie är tillfredsställelse. Den röda webbsidan uppfyllde inte attributet
tillfredsställelse eftersom resultatet av forskningsfråga 1 ingav negativa känslor till färgen röd. Tillfredsställelse ska förbigå obehagliga känslor som i detta fall den röda webbsidan ingav. Däremot uppvisade den blå webbsidan för attributet tillfredsställelse eftersom känslorna var behagliga av det som resulterade i forskningsfråga 1.
38 De principer ur användarvänlighet som forskas om i denna studie är
tillförlitlighet och säkerhet. Dessa två attribut beskriver Molich för att en webbsida ska anses som användarvänlig. Det resultat som forskningsfråga 1 framställt kan kopplas till dessa principer inom användarvänlighet. Den blå webbsidan fick deltagarna att känna känslorna trovärdighet och säkerhet (se diagram 1 och 3). De två principerna som Molich beskriver om
tillförlitlighet och säkerhet stämmer överens utifrån de känslor som den blå webbsidan ingav. Medan den röda webbsidan inte uppfyller några av dessa känslor.
5.2.3 Nielsen - principer för överlevnad utifrån användbarhet [20]
En webbsidas användbarhet kan påverkas så negativt att den inte kan överleva enligt Nielsens principer. 2 av 4 principer har kunnat besvaras i denna studie. Dessa 2 principer är “Om webbsidan är svåranvänd lämnar användaren webbsidan” och “Om webbsidan är svårläst eller inte svarar på användarens huvudfråga lämnar användaren webbsidan”. I samband med en webbsidas färgsättning kan dessa två principer påverkas negativt.
Webbsidor med färger som har låga kontrastförhållande, där färgerna är lika varandra som röd, rosa och lila påverkas negativt utifrån användbarheten [16]. Det leder till att webbsidan blir svåranvänd och svårläst eftersom högre kontrastförhållanden gör webbsidan mer lättläst och användbar. Detta gäller även kombinationen av färgen röd och grön. Dessa två kombinationer av färger gör det svårare för färgblinda att orientera sig [17]. Vilket leder till försämrad läsbarhet och användandet av webbsidan försämras. I sin tur leder det till att användaren inte stannar på sidan utan lämnar den.
5.3 Metoddiskussion
I nedanstående avsnitt diskuteras för och nackdelar av de använda metoder. Vidare diskuteras alternativa metoder som övervägdes att tillämpa.
5.3.1 Alternativa metoder
Vi hade kunnat besvara den andra forskningsfrågan (se avsnitt 5.2) med hjälp av en observationsstudie. Genom att ha använt en observationsstudie kunde mer data genererats. Problemet med en observationsstudie till
39 specifikt denna studie är att det är svårt att observera hur användarvänlig en webbsidas färger är. Därför valdes denna datainsamlingsmetoden bort.
Vi kunde även använt oss av en intervjustudie för att besvara
forskningsfråga 1 (se avsnitt 5.1). Till skillnad från en enkät genererar intervjuer mer data. Men att få ett antal deltagare att ställa upp på intervjuer är svårare än ett experiment tillhörandes enkät. Intervjuer kräver också mer tid både för forskarna och deltagarna. Därför valde vi inte intervjuer som forskningsmetod.
5.3.2 Genomför Experiment och litteraturstudie samt lärdomar från dessa
Vi genomförde ett experiment och en litteraturstudie. Dessa två
forskningsmetoder ansågs vara lämpligast för denna studie med tanke på tidsramen. Det som var till fördel med att tillämpa enkäten under
experimentet var de standardiserade svaren vi fick. Det var lätt att
presentera. Datan framställdes med hjälp av cirkeldiagram. En annan fördel med enkäten var att vi forskare inte påverkade processen. Deltagarna svarade utifrån vad det själva tyckte och tänkte. Enkäter är även till fördel då man vill ställa samma frågor till alla respondenter [6]. Detta gjorde att vi fick den svarsfrekvens som förväntat. Ett problem med experiment kan vara att deltagarna känner sig iakttagna under utförandet av experimentet. Resultatet av det gjorde att vi fick fram den data vi behövde från alla deltagare. Vilket gav denna studie en fördel.
Som svar på den andra forskningsfrågan (se avsnitt 5.2) utgick vi från en litteraturstudie. Litteraturstudien gjorde att vi kunde samla in mycket data från tidigare liknande studier. För att sedan granska den data och ta ut relevant fakta som passade denna studie. Fördelen med litteraturstudien var urvalet av data som fanns att hämta från olika databaser. Det tidigare angivna databaserna IEEE databas, ACMs artikeldatabas och böcker från Malmö Universitets bibliotek underlätta utförandet av litteraturstudien. Om vi inte hade dessa databaser att utgå ifrån skulle litteraturstudien bli betydligt svårare. Att söka på rätt nyckelord för att få fram den förväntade datan var en svårighet som vi stötte på. De sökta nyckelorden gjorde inte alltid att vi fick rätt artiklar. För att lösa det problemet var vi tvungna att skala ner eller lägga till nyckelord för att få det förväntade resultatet.
40
Källförteckningar
[1] Pressey SL. The influence of color upon mental and motor efficiency. Am J Psychol 1921;32:326–356.
[2] Küller R, Ballal S, Laike T, Mikellides B, Tonello G. The impact of light and colour on psychological mood: A cross-cultural study of indoor work environments. Ergonomics 2006;49:1496–1507.
[3] Küller R, Mikellides B, Janssens J. Color, Arousal, and Performance— A Comparison of Three Experiments.11 feb 2008.
[4] Campbell J. nightcast, The Psychology of Color in Marketing. Tillgänglig: http://www.nightcats.com/samples/colour.html. [Hämtad: 2019-04-10]. [5] Borowska P. Designmodo, How to use color in web design, 2015 [Online] Tillgänglig:
https://designmodo.com/web-design-colors/#comments.[Hämtad: 23 november, 2018]
[6] B. J. Oates, Researching Information Systems and Computing, Andra upplagan. United Kingdom: Sage publications Ltd, 2006. S. 137.
[7] B. J. Oates, Researching Information Systems and Computing, Andra upplagan. United Kingdom: Sage publications Ltd, 2006. S. 126-127. [8] J.W Creswell, V.L Plano Clark, Designing and Conducting: Mixed
Methods Research, United Kingdom: Sage publications Ltd, 2007.
[9 ]Luo Shi jian. “Human-Computer Interface Design”,Beijing: China Machine Press, 2004
[10] Wang Yu, Sui Yong. “Design of Web Visual Element”, Journal of Beijing Institute of Graphic Communication,2005,13(04):59-62
[11] Molich Rolf, 2002: Webbdesign, med fokus på användbarhet. Första upplagan, Lund: Studentlitteratur AB
[12] Hausman, A. V. and Siekpe, J. S. (2009) ‘The effect of web interface features on consumer online purchase intentions’, Journal of Business Research, 62(1), pp. 5–13. doi: 10.1016/j.jbusres.2008.01.018
41 [13] Wann-Yih Wu, Chia-Ling Lee, Chen-Su Fu, Hong-Chun Wang, (2013) "How can online store layout design and atmosphere influence consumer shopping intention on a website?", International Journal of Retail & Distribution Management, Vol. 42 Issue: 1, pp.4-24,
https://doi.org/10.1108/IJRDM-01-2013-0035
[14] J.W. Creswell. Research Design: Qualitative, Quantitative, and Mixed Methods Approaches. SAGE Publications, 2003.
[15] Few, S. Information Dashboard Design : Displaying data for at-a-glance monitoring. (2th ed.). Burlingame, CA: Analytics Press, 2013.
[16] Hall, R.H. and P. Hanna."The Impact of Web Page Text-
Background Color Combinations on Readability, Retention, Aesthetics and Behavioral Intention," Behavior & Information Technology, 23:3, 2004, pp. 183-195.
[17] Lynch, P. J., & Horton, S. Web Style Guide: Basic Design Principles for Creating Web Sites, 3rd Edition. Yale University Press, 2009.
[18] Sundström, Tommy. Användbarhetsboken, Printed in Sweden, Lund, 2005.
[19] Preece, Jenny, Sharp Helen & Rogers, Yvone. Interaction Design: Beyond human-computer interaction, John Wiley & Sons Ltd, England, 2007.
[20] Jakob Nielsen. Usability 101: Introduction to Usability. Tillgänglig: https://www.nngroup.com/articles/usability-101-introduction-to-usability/. [Hämtad: 2019-05-21]
[21] Boyatzis, C. & Varghese, R. Children’s Emotional Associations with Colors. Department of Child Development. California State University: Fullerton, 1994.
