Uppsats i informatik (Ange vilken nivå av uppsats det gäller)

Uppsatsens titel här Och undertitel här

Författare: Handledare: Morgan Rydbrink Termin: VT16 Kurskod:

Sammanfattning/abstrakt Uppsatsen kan ha en sammanfattning eller ett abstrakt. Det är en viss skillnad på dessa. Om uppsatsen skrivs på svenska har man ofta både en svensk och en engelsk sammanfattning. Sammanfattningen eller abstraktet skrivs alltid sist när allt annat är färdigskrivet. Tempusformen är imperfekt, dåtid, det vill säga vad som har gjorts. En sammanfattning är en kortfattad återgivelse av uppsatsens hela innehåll. Sammanfattningen bör vara max 1 sida lång oavsett hur lång uppsatsen är. Ett bra sätt att skriva en bra sammanfattning kan vara att skriva en eller ett par meningar om varje kapitel i uppsatsen, det vill säga inledning, syfte, teori, metod, resultat, analys, diskussion och slutsats. Sammanfattningen kan gärna delas upp i styckeindelningar för att öka läsbarheten. Ett abstrakt är ett mer vetenskapligt sätt att sammanfatta uppsatsen. Abstraktet bör inte vara längre än ett stycke och är aldrig uppdelat i mer än ett stycke. I abstraktet skall man besvara frågorna:

Vad var problemet? Vad har man gjort för att belysa problemet? Vad har man kommit fram till?

Ibland följs abstraktet av några nyckelord, som är representativa för uppsatsens område. Utifrån att ha läst sammanfattningen eller abstraktet skall man tydligt förstå vad uppsatsen handlar om. Man brukar säga att titeln på uppsatsen sedan är en sammanfattning av sammanfattningen. Det vill säga att titeln på uppsatsen också skall ge en tydlig indikation på vad uppsatsen handlar om. Om man har nyckelord är det en god idé att titeln innehåller en stor del av dessa. Då vet man att man har en rättvisande titel.

2

Förord Man kan ha ett förord i uppsatsen om man vill, men det behövs inte. I detta kan man få skriva mer personliga reflektioner kring uppsatsskrivandet. Det kan exempelvis vara varför man själv personligen tyckte att det var ett intressant ämne att skriva om eller om man upplevt det som särskilt svårt eller givande att skriva uppsatsen. Det är också i förordet man kan passa på att tacka personer som varit till särskild hjälp under uppsatsskrivandet, exempelvis om man haft någon kontaktperson på ett företag som hjälpt till, de som har deltagit i intervjuer eller enkäter, om man fått någon finansiering från någon eller om man haft någon som hjälpt till med att korrekturläsa. Förordet bör inte bli långrandigt, max en halv sida. Tänk också på anonymitet och sekretess innan du nämner personer vid namn. Man kan tacka personer ändå, utan att skriva deras namn.

3

Innehåll

Sammanfattning/abstrakt Innehåll Bilagor 1 Introduktion

1.3 Syfte och forskningsfråga 1.5 Avgränsning/Begränsning 1.6 Målgrupp

2 Bakgrund/Teori 2.1 Användbarhet och användarupplevelse 2.2 Visuell perception och rörelse 2.3 Animation 2.4 Teoretisk sammanfattning

3 Metod 3.1 Vetenskaplig ansats 3.2 Datainsamling

3.2.1 Urval 3.2.2 Genomförande

3.3 Analys 3.4 Tillförlitlighet 3.5 Etiska överväganden

4 Resultat/Empiri 5 Analys 6 Diskussion

6.1 Problemlösning/resultat 6.2 Metodreflektion

7 Avslutning 7.1 Slutsats 7.2 Förslag till fortsatt forskning

Referenser Bilagor

4

Bilagor Här kan du skriva in bilagornas titlar om det bara är några få. Om det är många bilagor kan det vara bättre att göra en

särskild innehållsförteckning för bilagorna.

5

1 Introduktion Animation i gränssnitt blir allt vanligare. En vanligt förekommande slutsats bland forskning inom området är att animation i gränssnitt bör användas sparsamt och med stor försiktighet (lägg in källor), men att det kan förbättra användarupplevelsen om det används på rätt sätt. Det utfärdas vandingar för att implementationen av animation kan ge negativa effekter på användares upplevelse på grund av designers okunskap kring just animation. Denna kluvna uppfattning tyder på att det råder en osäkerhet kring hur animation bör användas i gränssnitt. Animation kan användas på ett funktionellt sätt eller rent estetiskt, men för att skapa en god användarupplevelse är det av stor vikt att uppfylla både funktionella och estetiska aspekter. Med funktionell animation syftar vi till tidigare utforskad rörelse i gränssnitt där animationen på ett funktionellt sätt kan hjälpa användaren att uppfatta och förstå navigation, spatial information, samt visuell kontinuitet. Denna typ av animation används oftast för att visa på samband mellan två olika element då animationen adderas för att fylla tomrummet mellan två stadier. Ett exempel på detta är den så kallade genie­effekten som används i iOS för att visa användaren var ett fönster hamnar när det minimeras. I tidigare forskning har det konstaterats att studier inom animation i gränssnitt sällan behandlar animation som helhet, utan istället studeras antingen för ytligt eller för detaljerat, vilket leder till att forskningsresultat kan bli svåra att applicera praktiskt (Bladh, 2006). Vidare menar Bladh att så kallad cartoon style animation, med ursprung i Disneys 12 principer för animation (Thomas & Johnston, 1981), kan vara ett intressant område för vidare forskning, till exempel för att se om det finns en mätbar effekt på den subjektiva tillfredsställelse som man tror att animation i gränssnitt eventuellt framkallar. Dan Saffer (2013) menar att det finns ett värde i att använda subtila animationer i gränssnitt som dels speglar hur rörelser fungerar i den fysiska världen, men framförallt för att visa användaren hur ett gränssnitt fungerar. Vidare menar han att animation i gränssnitt bör kommunicera något till användaren och ska inte användas för användandets skull, samt att all form av rörelse i digitala gränssnitt bör användas sparsamt och endast i de fall då de faktiskt bidrar till ett mer ­ för användaren ­upplevt effektivt användande. Genom att exempelvis använda animation för att visa användare från vilken position på en skärmyta som ett grafiskt element kommer ifrån, och var det tar vägen när det tas bort, kan animationen göra det lättare för användaren att hitta objektet tillika försäkra användaren om att hen kan hitta objektet igen efter att det tagits bort eller förflyttats (Scott & Neil, 2009). Om användare till exempel misslyckas med att dra och släppa (drag and drop) en fil och gränssnittet visar att filen återgår till sin

6

ursprungsposition visar detta tydligt för användaren att filförflyttningen misslyckades, utan någon användning av felmeddelande eller annan ny information i gränssnittet. ­­­­­ Det finns ett flertal studier som undersöker på vilket sätt animation i gränssnitt påverkar användbarheten utifrån mätbara faktorer. Det verkar dock inte finnas belägg för att animation bidrar till ökad användbarhet ur denna aspekt. Däremot visar flera studier på att användares subjektiva inställning till animation ofta är positiv, då användare föredrar ett gränssnitt med animation framför ett statiskt gränssnitt. Därmed bör det skiljas på objektiv och subjektiv effekt av animation ur användbarhetssynpunkt. Det råder dock brist på forskning som fokuserar på användbarheten ur ett subjektivt perspektiv, det vill säga användarupplevelsen. Ytterligare en aspekt till valet av forskningsområde är att flertalet av de nyligen genomförda studier som undersöker animation och rörelse inom gränssnittsdesign, ur användbarhetssynpunkt, har utgått från mobila gränssnitt. Animationer används genomgående mer frekvent i dessa i jämförelse med webbgränssnitt. Det har tagits fram kataloger/riktlinjer för animationer inom mobila gränssnitt och eftersom vi ser att det saknas motsvarande kataloger/riktlinjer för animationer inom webbgränssnitt ämnar vi med detta arbete ta fram detta. I denna studie kommer vi att undersöka hur animation i ett webbgränssnitt påverkar användarens upplevelse av användbarheten. Utifrån teorin kommer vi att definiera ett antal hedonistiska egenskaper vilka kommer att vara utgångspunkt för användartester och intervjuer. Dessa kan till exempel vara: upplevd användarvänlighet, glädje, kontroll, nyfikenhet, fokus (immersion), temporär (dislocation), intention för användning, upplevd användbarhet. Genom att använda små och subtila rörelser på ett sparsamt och funktionellt sätt tror vi att animationer i gränssnitt kan ge användaren en större förståelse för kontext och vad som sker i ett flöde under själva interaktionen. I ett större perspektiv tror vi att rörelse i gränssnitt är en viktig del i att skapa liv i en design, tillika ett sätt att upprätthålla användarens intresse, samtidigt som animationer och grafiska övergångar mellan designelement kan förmedla personlighet och karaktär (Thomas & Johnston, 1981). Ett grafiskt element som successivt tonas in under en längre tid uppfattas exempelvis annorlunda mot ett element som snabbt studsar fram i gränssnittet. Vidare tror vi att tid, i form av en animations längd samt den accelerationskurva som animationen följer, påverkar vår uppfattning om ett animerat objekts personlighet och attityd.

7

Animation används idag, i större eller mindre utsträckning, i de allra flesta gränssnitt på webbplatser och i mobila applikationer. Animation används dock ofta godtyckligt och valet som föregår varför något ska röra sig på ett visst sätt, eller varför en övergång mellan ett grafiskt element och ett annat ska ske på ett visst sätt, baseras ofta på designerns personliga preferenser. Inom branchmedia råder idag nästintill ett konsensus att animation är en av de stora nutida designtrenderna inom gränssnittsdesign, och på daglig basis skrivs artiklar och guider för hur designers och webbutvecklare kan använda olika designverktyg samt CSS3, Javascript och HTML5 för att skapa olika typer av animationer ­ men inte varför, när och hur de ska användas, eller i vilka sammanhang. Vi vill med en vetenskaplig grund arbeta för att ta fram designprinciper för hur animation kan användas i gränssnitt på både ett funktionellt och estetiskt sätt. Hur kan man exempelvis hjälpa användare genom rörelser och övergångar för att visa funktionalitet, förmedla känslor och kontext, visa flöden och rymd samt underlätta lärande? Det vill säga, finns det ett funktionellt syfte i ett använda animation i gränssnittsdesign utöver det estetiska syfte som idag ofta används som motivation till beslutet? Vi kan dock komma att behöva begränsa oss till att endast undersöka användares subjektiva upplevelse. ­­­ Från målgrupp: Webbbyrån Pixelant i Malmö är ett internationellt företag som sedan starten 2006 har specialiserat sig på digital informationhantering och publicering via licensfri CMS (Content Management System). Idag har företaget cirka 500 kunder i Sverige och andra delar av värden, där allt från svenska företag till internationella koncerner figurerar. På företaget har man för avsikt att ständigt utvecklas genom att tillgodose sina designers och utvecklare med de verktyg som krävs för att kunna erbjuda sina kunder det senaste inom både design och funktionalitet. Pixelant har likt många andra företag som arbetar med webbutveckling nyttjat animation i design av grafiska gränssnitt utan några egentliga riktlinjer för hur, när, var och varför animation ska användas. Och kanske framförallt, utan kunskap om hur animation och rörelse i gränssnitt påverkar användaren eller återspeglar ett företags personlighet och attityd. Walter (2011) menar att animation i gränssnitt, lika väl som färg och form, förmedlar känslor och attityder som tillsammans med en webbplats övriga grafiska komponenter ger användaren en bild av vem avsändaren är. Med detta som bakgrund vill man på Pixelant undersöka animationers påverkan på användare av webbplatser och e­tjänster, samt undersöka hur olika typer av animationer och övergångar kan användas för att skapa en bättre användarupplevelse i olika e­tjänster. Syftet med denna uppsats är således att ta fram ett antal designprinciper för

8

animation i gränssnittsdesign, för utvecklare och designers som arbetar med webbdesign och webbutveckling. ­­­ Som tidigare nämnts råder ingen brist på artiklar inom branchmedia kring animation i gränssnitt, och intresset för området verkar mer populärt än någonsin. Trots detta är det anmärkningsvärt hur en stor del av de artiklar som publiceras i media ofta kommer med en brasklapp som ­ samtidigt som en artikel förespråkar användande av animationer i gränssnitt ­ varnar för att implementationen av dessa animationer ofta kan få negativa effekter på användares upplevelse på grund av designers okunskap kring just animation. Även en stor del av studerad forskning inom ämnesområdet understryker vikten av att använda animation med stor försiktighet, vilket tyder på att det råder en osäkerhet kring hur animation bör användas i gränssnitt. Detta är för oss en motivation till att undersöka området närmare i ett försök att ta fram faktiska principer för hur animation kan och bör användas för att säkerställa en god användarupplevelse. FÖRKLARA TEORETISK MODELL FALLSTUDIE Er teoretiska modell kan ni lyfta in i inledningen, förklara teoretisk modell utan att presentera modellen, och förklara sedan teorin utifrån modellen. Efter ni har förklarat tidigare forskning ­ förklara då fallstudien. ”Såhär applicerar vi tidigare forskning på fallstudien”.

1.3 Syfte och forskningsfråga SYFTET ÄR ATT… Inled med att förklara syftet, eftersom syftet ska leda till forskningsfrågan. Under denna rubrik finns en del som kan flyttas till tidigare forskning. Kolla så ni inte upprepar er. Ha inte både innan och efter. Efter forskningsfrågan fokusera på att förklara HUR den ska besvaras. Förklara tillvägagånssätt. En kvalitativ undersökning kommer att genomföras för att kartlägga användares subjektiva upplevelser av olika typer av funktionella animationer i webbgränssnitt. Syftet är att utifrån denna information identifiera vilka egenskaper av en animation som bidrar till en förbättrad användarupplevelse. För att undersöka detta har följande forskningsfråga formulerats:

9

Hur kan funktionell animation i webbgränssnitt användas för att skapa en bättre användarupplevelse? Forskningsfrågan kommer att undersökas genom användartester (kan man kalla det så?) av ett antal funktionella animationer som kommer att tas fram. Användartestet genomförs i samband med contextual inquiry samt en kombination av pluppmetoden och core affect­modellen. Informationen kommer att analyseras utifrån användbarhet samt användarupplevelse vilket innefattar begreppen tilldelad meningsfullhet, emotionell reaktion samt estetisk upplevelse. Resultaten kommer att mynna ut i framtagandet av ett antal principer för hur funktionell animation kan användas i gränssnitt för att skapa en bättre användarupplevelse.

1.5 Avgränsning/Begränsning Animation är ett brett område och innehåller en mängd olika komponenter, bland annat tid, typ av rörelse, acceleration, grafiska element som former och färger, hur vi upplever en rörelse emotionellt, samt hur vi kognitivt uppfattar olika typer av rörelser. Då denna uppsats syftar till att ta fram generella riktlinjer för hur animation i gränssnitt kan användas för både ökad användbarhet samt användarupplevelse kommer samtliga komponenter att tas hänsyn till, vilket kan innebära att studien som sådan kommer hållas på en övergripande nivå och därför till en början på en hög grad av abstraktion. Med detta sagt ser vi ett stort behov att på någon nivå försöka undersöka hur människor upplever animation, både kognitivt och känslomässigt. Av denna anledning kommer vi inte att arbeta mot en specifik webbplats eller tjänst, utan i stället fokusera på olika typer av animationer i olika kontexter och scenarion. Exempelvis genom att visa upp en serie olika animationer i kortare scenarion där användare får utföra en specifik uppgift. Fortfarande förs diskussioner med produktägaren kring eventuella användartester och intervjuer, samt om och hur detta arbete ska mynna ut i ett faktiskt case där en eller flera av Pixelants kunder använder animationer utifrån framtagna designprinciper på deras webbplatser. En webbutvecklingbyrå som Pixelant arbetar oftast med stora företag vars webbplatser behöver uppdateras ­ både på grund av föråldrad design, men även på grund av bristande eller gammal webbplats­funktionalitet. Detta arbete planeras av projektledare och olika delar av design och funktionalitet föredelas sedan mellan designers, frontend­ samt backend­utvecklare. Både tidsfönstren samt budget för projekt är oftast väldigt snäva och lite (om något) utrymme ges därför till att testa olika saker i den design som levereras. Detta medför att skarpa test mot slutkund inte kommer att kunna realiseras ­ samtidigt som exempelvis A/B­tester närmare skulle kunna analysera animationers påverkan på användare före och efter implementering. Beroende på hur vi kommer att utföra tester kan även vissa begränsningar förekomma gällande urval. Ett

10

bekvämlighetsurval kan komma att göras gällande testpersoner för testning av designprinciper i ett tidigt stadie, vilka då mest troligt kommer att bestå av utvecklare, designers samt annan personal på Pixelant Malmö. Om resultatet av teoretiska och empiriska studier beslutas implementeras i ett kundcase, det vill säga på en av Pixelants kunders webbplatser, kommer intervjuer med kunderna genomföras samtidigt som analythics studeras. Utifrån studerad litteratur ser vi även en distinkt skillnad mellan animationer som sker på en och samma sida ­ exempelvis animationer som sker när en användare öppnar ett modal panel ­ och animationer som övergångar (transitions) som används för att visa på flöden mellan olika sidor i en applikation eller webbplats. Övergångar mellan sidor är något som idag används i de flesta mobila applikationer då användare till stor del navigerar mellan sidor genom att dra fönster upp/ner och i sidled med fingrarna. Detta är dock något som är relativt ovanligt inom webbdesign. Då det område som undersöks rör just webbdesign anser vi att dessa typer av övergångar inte kommer att vara relevanta att undersöka närmare.

1.6 Målgrupp LYFT UPP TILL… FALLSTUDIE INLEDNING Ta bort målgrupp. En del av texten kan flyttas till fallstudien, en del kan användas i inledningen när vi förklarar hur ämnet är relevant.

11

2 Bakgrund/Teori

2.1 Core Affect Desmet och Hekkert (2007) menar att upplevelse formas av användares karaktärer (exempelvis personlighet, färdigheter, bakgrund, kulturella värderingar och motiv) och produktens karaktär (exempelvis form, textur, färg och beteende). Alla åtgärder och processer som är involverade, så som fysiska handlingar och perceptuella och kognitiva processer (exempelvis att uppfatta, utforska, använda, minnas, jämföra och förstå), kommer att bidra till upplevelsen. Dessutom är upplevelsen alltid påverkad av i vilken kontext (exempelvis fysisk, social, ekonomisk) interaktionen äger rum. Desmet och Hekkert (2007) refererar till produktupplevelse som en upplevelse som är affektiv. I psykologi används generellt termen affekt, eller affektivt tillstånd, för att referera till hela spektrumet av positiva och negativa subjektiva upplevelser, det vill säga, upplevelsen av något bra eller dåligt, tillfredsställande eller ej tillfredsställande. Russell (1980, 2003) introducerar begreppet core affect genom att kombinera dimensionen av affekt med exaltering i en tvådimensionell cirkulär modell. Modellen representerar affektiva värden där varje känsla har en specifik position i modellen. Modellen presenteras som en cirkel med åtta kategorier av känslor. Den horisontella axeln representerar affektiv valens, (från ej tillfredsställande till tillfredsställande), och den vertikala axeln representerar exaltering (från lugn till exalterad). Russell menar att upplevelsen av core affect är en förening av dessa två dimensioner, och därmed kan core affect beskrivas genom en position i denna modell. De varierade positionerna på modellen illustreras med exempel på känslomässiga reaktioner som kan upplevas i interaktionen mellan användare och produkt. (Lägg in bild) Det kan vara svårt att diskutera användares känslomässiga reaktion av en produkt med användarna. Det finns flera förklaringar till detta fenomen. För det första är känslor svåra att sätta ord på, speciellt subtila känslor med låg intensitet som är framkallade av produkter (Desmet och Hekkert 1998). Dessutom, att be användare att beskriva deras känslomässiga reaktion kommer att kräva kognitiv involvering vilket i sig kan påverka deras svar. Detta verktyg kan stödja användare när de uttrycker deras känslomässiga reaktion av en produkt. Det finns andra metoder som kan hjälpa till i att mäta angelägenheter (concerns) (ge exempel på andra metoder?) men med hjälp av denna modell är det möjligt att se samband mellan människors underliggande motivation och intressen och deras känslomässiga reaktion av produkten.

12

Verktyget gör det möjligt att fokusera direkt på känslomässig reaktion och underliggande motivation/intresse (concerns) och går snabbt att använda vilket möjliggör för designers att använda den i designprocessen. Core affect är något vi upplever konstant genom dagen. Från stunden vi vaknar tills vi går och lägger oss förflyttar sig vår core affect genom modellen och påverkas av mängder av olika interna (exempelvis hormonella förändringar eller näringsbrist) och externa (exempelvis händelser, människor, väder) orsaker. Core affect kan vara neutral, måttlig eller extrem, vilket i modellen motsvarar från mittpunkten till periferin. Förändringar kan vara kortlivade eller långvariga och kan vara i centrum för uppmärksamhet eller i bakgrunden av en persons upplevelse, det vill säga, intensiv eller mild core affekt. Core affect­teorin erbjuder ett enkelt, men kraftfullt, sätt att organisera produktupplevelse, eftersom alla möjliga upplevelser som är involverade i interaktion mellan användare och produkt kan beskrivas utifrån core affect. Den aktiverade otrevliga känslan från den livliga irritation som uppstår som reaktion på en dator som krånglar, den lugna trevliga känslan från upplevelsen av att lägga sig i ett varmt bad, den aktiverade trevliga känslan av upprymdheten att åka skridskor, och den lugna men otrevliga känslan från sorgsenheten att minnas en krossad kristallvas, kan alla placeras ut på denna modell.

2.2 Framework of product experience Desmet och Hekkert (2007) urskiljer tre viktiga komponenter som ingår i en användares upplevelse av en produkt; aestethic pleasure (estetisk tillfredsställelse), attribution of meaning (tilldelande av meningsfullhet) och emotional response (emotionell reaktion). Den estetiska tillfredsställelsen är kopplad till den grad av tillfredsställelse som vi upplever från våra sinnesintryck, exempelvis när vi tycker att något luktar gott, låter trevligt, känns bra att använda, eller när vi uppfattar något som attraktivt (Hekkert, 2006). Tilldelad meningsfullhet syftar till den betydelse vi tilldelar och anser att en produkt har för oss som användare och därmed till den mening samt värde vi ger en produkt eller tjänst. Denna komponent menar Desmet och Hekkert (2007) är en kognitiv process där vi som användare genom igenkännande, tolkning, associationer och metaforer upplever en produkt som exempelvis lyxig eller av affektionsvärde (exempelvis ärvda produkter). En användare kan exempelvis tilldela en produkt meningsfullhet genom benämningen lyxig, och därmed ge produkten ett symboliskt värde samtidigt som denna produkt kan associeras med en viss livsstil. Tilldelad meningsfullhet kan även syfta till de egenskaper, och rent utav personligheter, som vi som användare tilldelar produkter och/eller tjänster. Exempelvis kan en mobiltelefon upplevas som maskulin och burdus, en kaffebryggare som femenin och elegant, eller en nyproducerad bil som omodern och klumpig (ibid.).

13

Både den estetiska tillfredsställelsen och den tilldelade meningsfullheten kan ge upphov till en emotionell reaktion. Gällande den estetiska upplevelsen kan en, för användaren, välkomponerad melodi ge upphov till en god känslomässig reaktion samtidigt som en webbdesign som upplevs slarvigt designad upplevas med besvikenhet (Desmet & Hekkert, 2007). Den mening vi tilldelar produkter är högst subjektiv och medan en specifik användare upplever rostfritt stål som modernt och stilrent, och därmed attraktivt, kan en annan användare uppleva det som kallt och opersonligt och därmed frånstötande. Vidare menar Desmet och Hekkert att tilldelad mening även är direkt kopplat till förväntan, så tillvida att en användare ofta har en inre bild om hur användandet eller ägandet av en produkt kommer att te sig innan det faktiska användandet, något som därefter bekräftas eller dementeras under själva användandet.

Figur X. Framwork of product experience (Desmet & Hekkert, 2007) Gällande känslor refererar författarna till de affektiva fenomen som vanligen diskuteras inom emotionspsykologi. Känslor är funktionella eftersom de etablerar vår position i förhållande till vår omgivning, och drar oss i riktning mot vissa personer, objekt, handlingar, och idéer, och driver oss bort från andra (Frijda, 1986). Denna grundläggande princip gäller för alla känslor, såväl de intensiva känslor som vi kan uppleva i en situation som hotar våra grundläggande behov av att överleva, som de subtila känslor som vi kan uppleva till följd av interaktion mellan människa och produkt. Trevliga känslor drar oss i riktning mot produkter som är (eller utger sig för att vara) gynnsamma, medan otrevliga känslor kommer att driva oss bort från de som är (eller utger sig för att vara) skadliga för vårt välbefinnande (Desmet, 2002).

14

2.3 Användbarhet och användarupplevelse När man talar om användbarhet talar man ofta om hur ett objekt eller tjänst fyller sitt syfte samt erbjuder användaren ett effektivt och problemfritt användande, vilket innebär att den produkt som används bör upplevas som begriplig, användbar och således så lättanvänd som möjligt. Detta är egenskaper som inom webbdesign ofta är direkt kopplade till en webbplats generella struktur, layout samt navigering, som korrekt utfört förhoppnings leder till ett för användaren friktionsfritt användande (Krug, 2014). Själva användarupplevelsen är däremot direkt kopplad till vad användaren känner och upplever under själva användandet, såsom att användandet av en produkt eller tjänst upplevs som trevlig, tillfredsställande eller direkt njutbar (Norman, 2013). Användarupplevelse som begrepp har blivit en central del inom interaktionsdesign. Detta syftar till hur en produkt beter sig och hur den således används och upplevs av människor. Användarupplevelse handlar om människors känslomässiga uppfattning av en produkt och till vilken grad de upplever tillfredsställelse när de använder den, tittar på den och håller i den. Det innefattar allt från användares helhetsintryck av hur bra produkten känns att använda till effekten de små detaljerna har på dem, exempelvis hur mjukt en kontroll kan regleras, eller ljudet av ett klick och känslan av en knapp när den trycks in (Sharp, Rogers & Preece, 2007). En användares upplevelse av en specifik produkt kan således definieras som den uppsättning effekter som interaktionen med en produkt framkallar hos användaren. Dessa effekter kan sammanfattas som estetisk upplevelse, vilket syftar till den grad av hur våra sinnen tillfredsställs, upplevd meningsfullhet vilket pekar på hur betydande vi uppfattar att produkten och upplevelsen är, samt den emotionella upplevelsen vilket syftar till de känslor som vår interaktion med en produkt framkallar (Hekkert, 2006). En användares upplevelse av en produkt eller tjänst behöver dock inte vara begränsad till själva användandet i sig. En användare kan exempelvis uppleva en webbplats under det faktiska användandet, men även under ett användande som inte är fysiskt (non­instrumental interaction) samt enbart tanken på att använda den (non­physical interaction). Ett användande som inte involverar en faktiskt interaktion kan exempelvis vara när en användare endast studerar en produkt eller tjänst och imponeras av dess estetik, utan att faktiskt använda de funktioner som produkten eller tjänsten erbjuder. Vidare kan själva tanken på att använda något beskrivas med de förväntningar vi har på exempelvis en webbplats före och under själva användandet. Användare gör exempelvis ofta antaganden om vad som kommer att ske när de trycker på en viss knapp eller besöker en viss sida, och beroende på om dessa förväntningar blir bekräftade eller ej blir vår upplevelse bra eller dålig (Desmet & Hekkert 2007).

15

Trots att betydelsen av trevlig, njutbar eller tillfredsställande (delightful) är svårdefinierad menar Krug (2014) att detta är en av de mest betydande egenskaperna i skapandet av gränssnitt. Användare kan exempelvis beskriva en applikation eller webbplats som rolig, förvånande, imponerande eller till och med förtrollande ­ alla vilka är egenskaper som kan beskrivas som just delightful. Vidare menar Krug att detta inte får förväxlas med användbar, men att designers bör tänka på att utveckla digitala tjänster som inte bara fungerar bra, men även känns bra under själva användandet. Upplevelsen av att något “känns trevligt” att använda är dock svår att ta på, och ett gränssnitt som av en användare upplevs som tillfredsställande är även starkt kopplat till den kontext som användaren befinner sig i, samt den avsikt med användandet som användaren har (Cooper, Reimann & Cronin, 2007). En pilot kan exempelvis uppleva ett estetiskt simpelt gränssnitt i cockpit som tillfredsställande, samtidigt som samma visuella stil och estetik troligtvis inte skulle tillfredsställa en användare som förväntar sig en modern webbplats. Tidigare studier inom e­handel har exempelvis visat att användare har olika typer av motivationer vid internetanvändande där vi som användare konsumerar/använder webbplatser antingen på ett utilitaristiskt sätt ­ det vill säga praktiskt och ändamålsmässigt, där vi besöker en webbplats för att uträtta något eller för att nå ett specifikt mål ­ eller ett mer hedonistiskt sätt där vi som användare nyttjar internet för att tillfredställa våra behov av spänning, visuell stimuli eller känsla av gratifikation (Close & Kukar­Kinney, 2009; Wang, Minor & Wei, 2011). Wang, Minor och Wei benämner den hedonistiska motivationen som aesthetic appeal, det vill säga graden av estetiskt tilltalande som refererar till rent hedonistiska kvalitéer där användare uppfattar en sida som exempelvis imponerande, kreativ, modern eller fascinerande. I sin studie kommer de fram till att kunder utan mål (så kallade slösurfare) uppskattar estetiskt tilltalande webbshopar, och i viss utsträckning känner sig lockade till att handla när de blir visuellt stimulerade, medan kunder med tydliga mål (purchase tasks) inte uppfattar de rent estetiska attributen i samma grad (ibid.). Hedonistisk motivation till internetanvändande har dock under 2000­talet visat sig mer effektivt inom exempelvis e­handel än utilitaristiskt motiverat internetanvändande (Benjamin Lowry, Gaskin, Twyman, Hammer, Roberts, 2013). För att användare över huvud taget ska vilja använda en webbplats måste webbplatsen dock upplevas som funktionell, tillförlitlig och användbar. Om en användare exempelvis besöker en sida i syftet att utföra en specifik uppgift eller hitta specifik information och inte lyckas med detta kommer hen tillslut att lämna webbplatsen. Detsamma gäller om webbplatsen upplevs som långsam, innehåller frekventa fel, eller om gränssnittet inte tillåter ett effektivt och friktionsfritt användande (Walter 2011; Nielsen 2011). Walter menar vidare att webbdesign behöver mer än användbarhet för att användare ska uppleva att de haft en bra och tillfredsställande upplevelse under användandet. I ett förtydligande jämför han design med ett riktigt gott mål mat ­ en sådan måltid som faktiskt sätter ett avtryck och skapar ett minne ­ och menar då att vi

16

sällan tänker på nutritionsvärde eller ingridienser i maten utan på smakerna, texturerna, miljön, sällskapet och upplevelsen som sådan. När vi beskriver en god middag beskriver vi oftast just hur det smakade, hur det kändes och hur vi upplevde atmosfären ­ inte vilka ingredienser maten innehöll. I denna liknelse är matens ingredienser komponenter för användbarhet ­ som är direkt nödvändiga för att maten över huvud taget ska smaka något ­ och måltiden som sådan själva användarupplevelsen. Hur vi upplever något är även i stor grad kopplat till våra egenskaper, exempelvis personlighet, motiv, kompetens, bakgrund, och mental inställning vid själva användandet, samt hur vi perceptuellt och kognitivt upplever användandet. Något som bland annat innefattar vår förståelse av det vi gör, hur lätt något är att använda och utforska, samt hur lätt vi har att minnas det (Desmet & Hekkert 2007). Emotionellt positiva upplevelser har även en stor inverkan på vårt långtidsminne, och vi tenderar att minnas produkter och upplevelser för att de fått oss att må bra och för att den totala upplevelsen har varit tillfredsställande, inte i förstahand för att de har varit användbara (Walter 2011). Därtill har användare en tendens att lättare förlåta tillkortakommanden i en produkt eller tjänst om den övergripande upplevelsen har uppfattats som tillfredsställande, och användare som känner ett emotionellt band till en produkt eller tjänst tenderar även att rekommendera denna. Att använda sig av en emotionell designstrategi har även visat sig effektiv när det kommer till konvertering av besökare, det vill säga hur många besökare som faktiskt registrerar sig som kunder efter att besökt en webbplats. Genom att förmedla ett företags, och/eller designers, personlighet och attityd genom den estitiska designen av en webbplats, till skillnad från en generisk och platt design, visar avsändaren även användaren att det står en person bakom webbplatsen och inte en maskin (ibid.). Aspekter av användarupplevelsen, så som hur något känns och ser ut, är ofrånkomligen kopplat till hur användbart något är. Att skilja på användarupplevelse och användbarhet kan hjälpa för att förtydliga deras roller men det är av stor vikt att hålla båda aspekter i beaktande vid design för en bra användarupplevelse. För att skilja dem åt kan de delas upp i användbarhetsmål och användarupplevelsemål. Användbarhetsmål handlar om att möta specifika användbarhetskriterier, som effektivitet, medan användarupplevelsemål till stor del handlar om att förtydliga det som är karakteristiskt för användarupplevelsen, exempelvis att vara estetiskt tilltalande. Det är dock viktigt att poängtera att distinktionen mellan de två typerna av mål inte är helt tydlig, eftersom användbarhet är en fundamental del av kvalitén på användarupplevelsen och omvänt (Sharp et al. 2007; Desmet & Hekkert, 2007). Desmet och Hekkert menar att både användbarhet och användarupplevelse syftar till att beskriva relationen mellan användare och produkt, samt användarens egenskaper, kunskaper och färdigheter. Detta med distinktionen att användbarhet, till skillnad från användarupplevelse, inte innehåller några affektiva (emotionella) komponenter. Användbarhet föranleder således användarupplevelsen men

17

är inte en del av den, samtidigt som användarupplevelsen kan påverka den upplevda användbarheten. Användbarhet Användbarhet handlar generellt om att säkerställa att en interaktiv produkt är lätt att lära sig, effektiv att använda, och trevlig att använda ur användarens perspektiv. Det involverar att optimera de interaktioner användare har med interaktiva produkter för att möjliggöra för dem att genomföra sina aktiviteter på arbete, skola och i deras dagliga liv. Mer specifikt är användbarhet nedbrutet till följande användbarhetsmål (Sharp et al. 2007):

Effektiv att använda (effectiveness) Hur väl något går att utföra (efficiency) Säker att använda (safety) Ge en bra användarnytta (utility) Lätt att lära sig (learnability) Lätt att komma ihåg hur den ska användas (memorability)

Effectiveness och efficiency kan upplevas som svåra att skilja på, men medan effektiveness syftar till hur effektivt själva användandet är syftar efficiency till hur väl något utförs. En bil kan exempelvis vara effektiv i sin roll som transportmedel, men mindre duglig (efficient) om den drar för mycket bensin under användandet. Användbarhetsmål brukar operationaliseras som frågor. Syftet med det är att skapa konkreta sätt att analysera olika aspekter av en interaktiv produkt och användarupplevelsen. Genom att besvara dessa frågor kan designers i ett tidigt stadie i designprocessen uppmärksammas om potentiella designproblem och motsättningar som de kanske inte har sett tidigare. Frågorna måste vara detaljerade och specifika för att vara till någon hjälp.

Effektiv att använda (effectiveness) Effektivitet är en generell målsättning och refererar till hur väl en produkt lever upp till vad den är tänkt att göra. Exempel på frågeställningar kan vara: Är produkten kapabel att tillåta människor att lära sig, fortsätta med deras arbete effektivt, komma åt informationen de behöver eller köpa vad de behöver?

Hur väl något går att använda (efficiency) Efficiency refererar till hur en produkt stödjer användare i att fortsätta med vad de gör. Fråga: När användaren väl har lärt sig hur en produkt ska användas för att genomföra deras uppgifter, kan de behålla en hög grad av produktivitet?

Säker att använda (safety)

18

Går ut på att skydda användaren från farliga eller oönskade situationer. Det kan till exempel handla om att hjälpa användare i en situation att undvika oönskade händelser. Det kan också handla om den upplevda rädsla användare kan ha för konsekvenser av att göra misstag och hur detta påverkar deras beteende. Interaktiva produkter kan göras säkrare i denna mån genom att förebygga att användaren gör allvarliga misstag. Det kan handla om att minimera risken att råka trycka på fel knapp, eller göra det möjligt för användaren att ångra ett eventuellt misstag. Exempelvis bör en delete­knapp inte placeras bredvid en spara­knapp. Frågeställning: Vilka misstag är möjliga att begå under användandet av produkten och vilka åtgärder finns det som tillåter användare att enkelt ångra dem?

Ge en bra användarnytta (utility) Refererar till den utsträckning en produkt tillhandahåller rätt typ av funktionalitet så att användare kan göra vad de vill eller behöver göra. Ett exempel på en produkt med hög grad av användarnytta är ett bokföringsprogram med hög kapacitet som revisorn kan använda för att göra beräkningar. Frågeställning: Tillhandahåller produkten lämpliga funktioner som möjliggör för användaren att utföra sina uppgifter på det sättet de vill utföra dem?

Lätt att lära sig (learnability) Refererar till hur enkelt ett system är att lära sig att använda. Människor vill inte spendera mycket tid för att lära sig hur ett system ska användas, utan de vill börja använda det direkt och lära sig hur de utför uppgifter utan för mycket ansträngning. Detta gäller speciellt interaktiva produkter som är avsedda att användas dagligen, till exempel e­post, och de som används mer sällan. Till en viss gräns är människor beredda att spendera mer tid att lära sig mer komplexa system som erbjuder en större bredd av funktionalitet. Frågeställning: Är det möjligt för en användare att räkna ut hur produkten kan användas genom att utforska gränssnittet och försöka göra olika åtgärder? Hur svårt kommer det vara att lära sig alla funktioner på detta sätt?

Lätt att komma ihåg hur den ska användas (memorability) Refererar till hur enkelt det är att minnas hur en produkt används, efter det att användaren har lärt sig hur den fungerar. Detta är speciellt viktigt för interaktiva produkter som sällan används. Om användare inte har använt en funktion under en period, bör de ändå ha möjlighet att minnas eller åtminstone snabbt bli påminda hur den ska användas. Frågeställning: Vad för typ av gränssnittssupport tillhandahålls för att hjälpa användare minnas hur de ska genomföra uppgifter, speciellt för produkter och åtgärder de använder mer sällan? Ett antal användarupplevelsemål börjar ta form inom interaktionsdesign. Dessa inkluderar både positiva och negativa mål, till exempel: tillfredsställande, engagerande, spännande, underhållande, hjälpsam, motiverande, estetiskt tilltalande, provocerande,

19

förvånande, emotionellt uppfyllande, utmanande, tråkig, frustrerande och irriterande. Många av dessa är subjektiva kvalitéer och berör hur ett systemkänns för en användare. De skiljer sig från de mer objektiva användbarhetsmålen på så sätt att de är kopplade till hur en användare upplever en interaktiv produkt ur användarens perspektiv, i stället för hur användbar en produktivt är ur sitt egna perspektiv. Medan användbarhetsmål kan beskrivas utifrån ett antal distinkta termer, behövs det betydligt fler termer för att beskriva den mångfacetterade användarupplevelsen. Detta på grund av att finns många olika sätt att uttrycka hur en upplevelse kan variera för samma typ av aktivitet, beroende på tid, teknologi och plats. Till exempel kan beskrivningen av upplevelsen att lyssna på musik skilja sig åt beroende på hur och var det sker. Upplevelsen att lyssna på musik i duschen kan beskrivas som högt njutbart medan att lyssna på musik i bilen kan beskrivas som trevligt. Processen att välja termer som bäst förklarar användarens känslor, tillstånd och förnimmelser när hen använder eller interagerar med en produkt vid en specifik tid och plats, kan hjälpa designers att förstå den mångfacetterade och föränderliga användarupplevelsen. Precis som med användbarhetsmål är användarupplevelsemål mest användbara när de görs om till konkreta frågor (Sharp et al. 2007). Cooper, Reimann och Cronin (2007) beskriver användarupplevelsemål (experience goals) som personliga mål kring hur vi som användare vill känna under användandet av en produkt eller hur vi upplever själva interaktionen med en produkt. Själva interaktionen kan då innefatta hur vi upplever animationer, övergångar och eventuella fördröjningar (beroende på hur snabbt exempelvis en webbplats laddar), vilka i sin tur påverkar användarens känslomässiga upplevelse av exempelvis ett gränssnitt. Detta medför att det är viktigt för designers att ställa sig frågan vad användaren av en produkt eller tjänst ska känna under själva användandet. Exempelvis om användaren ska känna att hen har roligt, är avslappnad, modern, säker, eller till och med smart (ibid.). Norman (2013) benämner detta somthevisceral level (den inre nivån) som är den första av de tre steg som han menar ingår i den kognitiva processen. Denna nivå i den kognitiva processen syftar till den initiala bedömning vi gör när vi ser ett gränssnitt för första gången, något som ofta förväxlas med att designa attraktiva gränssnitt. Att designa för den inre kognitiva processen handlar istället om att designa gränssnitt som passar användaren i det kontext hen befinner sig i samt det känslotillstånd som användaren befinner sig i för stunden. Desmet, Overbeeke och Tax (2001) menar att vi inför användande av en produkt eller tjänst har ett produktupplevelse mål, till exempel utilitaristiska eller sociala mål. En användare har exempelvis oftast ett utilitaristiskt mål med användandet av en sax, och om denna inte känns bra under användandet uppfattas den inte heller som tillfredsställande.

20

2.4 Visuell perception och rörelse Visuell perception syftar till hur vi tolkar visuell stimuli, det vill säga hur vi läser av och avkodar det vi ser runtomkring oss. Detta är en process som sker dels med hjälp av våra synorgan, det vill säga våra ögon, men även med vårt centrala nervsystem som tolkar alla våra synintryck (Ware 2013). Detta innefattar hur vi uppfattar former, färger, texturer och rörelser för att kunna avkoda samt skapa en bild av vad det är vi tittar på, vilket i den verkliga världen för det mesta rör fysiska objekt. Don Norman (2013) menar att vi uppfattar och avkodar objekt för att för att skapa oss en uppfattning om hur vi kan agera på vad vi ser, samt hur vi kan använda objektet i fråga. Vidare menar han att varje fysiskt objekt erbjuder användare möjligheter till interaktion (affordance), exempelvis att ett handtag erbjuder oss att dra i det, ett bord erbjuder oss att ställa saker på det, och att örat på en kopp erbjuder oss att hålla i det. Ware (2013) menar dock att digitala gränssnitt inte erbjuder (affords) några fysiska interaktioner utan att de objekt som vi interagerar med i den digitala värden först måste läras in, men framförallt designas på ett sådant sätt att grafiska element i den digitala världen tydligt visar hur användaren kan interagera med dem. Knappar i gränssnitt kan med fördel exempelvis designas på ett sådant sätt att användaren snabbt förstår att det är en knapp som hen kan trycka på genom att få den att stå ut från övriga grafiska element med hjälp av färg och skugga (Krug, 2014), något som blivit alltmer ovanligt i takt med att så kallad flat design har ökat i populäritet. Genom att designa element som tydligt bjuder in användaren till interaktion kan således det kognitiva arbetet med att avkoda och förstå ett gränssnitt underlättas, och användandet därmed effektiviseras ­ något som enligt Ware (2013) är det slutgiltiga målet med visualisering i design. Trots att rörelse i grafik inte är lika välutforskat som statisk grafik, och vår upplevelse av form och färg, har många studier visat att människor är känsliga för just rörelse. Ware (2013) menar att detta är en relativt outnyttjad metod för visualisering som skulle kunna utnyttjas på samma sätt som färg, form, storlek och position när det kommer till grafisk visualisering. Exempelvis är vår känslighet för rörelse tydlig när det handlar om rörelse i vår periferi, och samtidigt som exempelvis färg och form ofta används för att tydliggöra interaktiva ytor i gränssnitt uppfattas inte förändringar i exempelvis färgvärden lika tydligt som just rörelse. Samtidigt kan snabba rörelser i vår periferi uppfattas som störande, och rörliga föremål i kanten av ett gränssnitt kan avleda uppmärksamhet under tiden som användaren försöker att ta in annan, kanske viktigare, information i gränssnittet (ibid.). Animation

21

Animation har länge använts för underhållning och för att berätta en historia, men kan även användas för att förmedla känslor eller känslomässiga tillstånd (Baecker & Small, 1990). Genom tiderna har animatörer utvecklat och förfinat principer för tecknad animation. De kanske mest kända och mest använda principerna för animation togs fram av Disneyanimatörerna Thomas och Johnston (1981) vilka de skriver om i boken Disney Animation: The illusion of Life, där de beskriver den unika utmaning som animation innebär. En animation, oavsett den utförs på papper, film eller i ett gränssnitt, kan förklaras genom tre stycken olika komponenter ­ extremes, timing och spacing. Med extremes (extremer) menar man animationens start­ och slutpunkt, vilka är de bilder som påbörjar och avslutar en animation. Timing avser den tid som spelas upp mellan dessa bilder, exempelvis tre sekunder, och spacing (mellanrum) det antal bilder som läggs mellan de två extremerna (Williams, 2009). Baecker och Small (1990) beskriver animation som ett dynamiskt visuellt budskap, form och struktur som utvecklas genom rörelse över tid. Animation handlar dock inte enbart om rätt timing, spacing, eller en vältecknad karaktär, utan är en kombination och samspel mellan flera faktorer. Att förmedla en viss känsla är själva kärnan av kommunikation inom alla konstformer. Betraktaren reagerar känslomässigt och detta är en av de stora styrkorna med animation eftersom det ger en möjlighet att nå fram till människor på ett känslomässigt plan och kommunicera med alla oavsett språkbarriärer. Dessa komunikationsverktyg är något som alla människor kan förstå eftersom de sträcker sig tillbaka till en tid långt innan människan utvecklade förmågan att tala (Thomas & Johnston, 1981). Inom traditionell animation, det vill säga animationer tecknad på papper, skapades timing genom att rita extremer av en rörelse där rörelsens första och sista bild ritades. Antalet bilder däremellan, så kallad spacing, bestämde därefter rörelsens hastighet. Exempelvis kunde mellanrummet mellan två extremer fyllas med en enstaka bild för att visa på en snabb och kraftfull rörelse medan tio bilder resulterade i en långsam och betydligt lugnare rörelse (ibid.). I skapandet av digitala animationer, oavsett de utformas med hjälp av kod eller i program som After Effects, gäller samma princip men kallas då för easing och kan syfta till termerna linjear (ingen easing, det vill säga en linjär rörelse), ease­in­out (även kallad easy­ease), ease­in och ease­out (Head, 2013).

22

Figur X. T.v. Linjär Bezier­kurva. T.h. Ease­In. Tidigare har rika animationer på webben inte kunnat användas på grund av tekniska begränsningar, men animation i gränssnitt har nu blivit mer och mer populärt då man anser att god användargränssnittsdesign endast lägger en grund, medan animation i gränssnittsdesign står för det dekorativa och således ger en rikare upplevelse av en webbplats. En webbplats som inte tillhandahåller rörelse känns död i jämförelse med en som simulerar något levande, därmed blir användarupplevelsen rikare då en användare får känslan av att de använder något som faktiskt inte bara är ett dött och maskinärt ting. När användare exempelvis trycker på en icke­animerad knapp finns inget som skvallrar om att gränssnittet faktiskt uppfattat själva knapptryckningen. Detsamma gäller om en användare tryckt på en knapp och vi under laddtid (den tid det tar för webbplatsen att ladda nästkommande element) inte ser att något händer, i kontrast till att visa vad som händer genom en progressbar. Vad rörelse i gränssnitt då bidrar med är att få något som ser bra ut att faktiskt kännas bra att använda (Shapiro, 2015). Entusiasmen för animation i gränssnitt är stor och Bedford (2014) menar att rörelser i gränssnittsdesign har blivit en designtrend samtidigt som animation i gränssnitt ger webbplatser ett mer modernt intryck. Flera källor ger även prognosen att animation kommer att bli en standard inom gränssnittsdesign (Bladh, 2006; Petersen och Nielsen, 2002). Rörelse är en kraftfull signal som har förmågan att fånga vår uppmärksamhet (Petersen och Nielsen, 2002; Shapiro, 2015). Dess kommunikativa egenskaper kan användas effektivt för att förklara förändringar och processer som utspelar sig i tid och rum (Tversky och Morrison, 2002; Petersen och Nielsen, 2002). Animation i gränssnitt kan ge liv åt döda ting (Shapiro, 2015), det kan ge karaktär och personlighet (Baecker och Small, 1990; Shapiro, 2015) samt förmedla känsla och berika användarupplevelsen avsevärt (Petersen och Nielsen, 2002).

23

Visuella förändringar i gränssnitt är ofta omedelbara och oväntade, vilket leder till att användare inte kan se det kausala sambandet mellan det gamla och nya objektet. Få webbgränssnitt visar användaren vad som händer, vad som kommer att hända, och vad som nyss har hänt. Ofta klickar användaren på en ikon som i sin tur öppnar ett fönster, utan att någonting händer mellan interaktion och öppnandet av fönstret. Användaren presenteras då för två olika skärmar utan någon direkt visuell koppling mellan dessa, vilket man tror leder till en större kognitiv belastning då detta kräver att användaren måste utvärdera den nya situationen (Chang och Ungar, 1993). Transformationer och presentation av nya element i gränssnitt, utan övergångar, kan störa användares uppfattning om var de befinner sig i det digitala rummet. Tvära kast i navigeringen av ett gränssnitt kan även medföra att användaren efter varje ny interaktion måste utvärdera den nya layouten, vilka nya element som tillkommit eller tagits bort. Men när ändringar i digitala gränssnitt utförs med en visuell kontinuitet ger det användaren en chans att lättare uppfatta de förändringar som sker i gränssnittet (Tidwell, 2011). Tidwell menar därför att designers med fördel kan använda animation i gränssnitt som övergång (transitions) vid de tillfällen som ett grafiskt element går från ett tillstånd till ett annat, men att denna typ av övergångar inte bör vara längre än en sekund och med fördel kring 300 millisekunder. Till skillnad från förändringar som sker utan några animerade övergångar menar Chang & Ungar (1993) att tecknade figurer animeras från början till slut, där inget grafiskt element bara “dyker upp” från ingenstans. De transformeras i jämn takt och försöker i största möjliga mån att härma naturliga rörelser. En rörelse uppfattas dock annorlunda beroende på om den är linjär eller om den är utformad för att efterlikna naturliga rörelser och där den ger intryck av att den lever (Bedford, 2014; Chang & Ungar, 1993; Shapiro, 2015). Shapiro (ibid.) menar vidare att rörelser bör vara så icke­linjära som möjligt då användare är mer mottagliga för rörelser som härmar levande ting. Genom att anamma designprinciper från animerad film för användning i grafiska gränssnitt menar Chang och Ungar (1993) att den naturliga rörelsen inte bara underlättar kognitivt för användaren, men även affektivt. För att förstärka känslan av flöde och samhörighet mellan element kan man vid öppnandet av ett nytt fönster från en knapptryckning exempelvis låta fönstret öppnas från knappens position då detta skapar en tydlig brygga mellan orsak och verkan. Man menar att detta efterliknar den orsak/verkan­effekt som vi oftast upplever i det verkliga livet då ett objekt rör på sig för att vi rört något annat. Detta ger ett gränssnitt en fysisk känsla, och desto mer fysiskt ett digitalt gränssnitt känns desto mer intutivt, responsivt och känslosamt uppfattar vi att det är (Shapiro, 2015). Genom att underlätta för användaren i sitt spårande av olika grafiska element, och sina försök att förstå vad som händer på en skärm, avlastar animation den kognitiva börda som användaren utsätts för i tolkandet av gränssnittet. Genom att undvika plötsliga

24

öppnanden av fönster och kast mellan sidor gör animerade övergångar ett gränssnitt mindre uppseendeväckande och plötsligt, vilket i sin tur leder till en mer behaglig upplevelse för användaren. Man tror även att de mer realistiska rörelserna leder till en mer verkligt förankrad upplevelse av gränssnittet vilket fångar användarens intresse och därmed gör upplevelsen mer engagerande (Chang & Ungar, 1993). Vad som skiljer animation i användargränssnitt från animation i tecknade filmer är interaktiviteten samt användarnyttan/användbarheten (utility) (Bladh, 2006). Tecknade filmer är ett passivt medium medan gränssnitt är något som styrs aktivt, varför det är viktigt att användare känner att de har kontroll över gränssnittet då animation används. En annan stor skillnad är syftet med de olika medierna. Tecknad animation i film konsumeras för nöjes skull medan en webbplats ofta besöks med syfte att användaren ska uträtta en specifik uppgift. Eftersom användaren ofta har ett syfte och mål bör webbplatsen därför vara så snabb som möjligt, vilket också gäller för samtliga animationer på sidan (Chang & Ungar, 1993). Många studier misslyckas dock med att ta fram empiriska bevis för att animation i gränssnitt bidrar till större effektivitet för användaren (Thomas & Calder, 2001; Tversky & Morrison, 2002). Tversky och Morrison menar att animation i syfte att lära ut komplexa system inte nödvändigtvis fungerar bättre än statisk information, och föreslår att ett lämpligare användningsområde för animation kan vara i användargränssnitt där det kan användas för att förklara realtidsförändringar i tid och rum. Trots att animation i gränssnitt inte verkar leda till högre effektivitet föredras det av användare (Bladh, 2006; Thomas & Calder, 2001). I ett experiment av Thomas och Calder (ibid.) valde exempelvis användare att ha kvar animationen i gränssnitt när de hade möjlighet att stänga av det. Eftersom animation i gränssnitt verkar vara svårt att argumentera för endast ur effektivitetssynpunkt menar Bladh (2006) att det kan vara så att det finns en större mening i att mäta estetik och användares åsikter snarare än att bara mäta själva utförandet (performance). Bladh (2006) poängterar därför vikten av att skilja på objektiv och subjektiv effekt av animation. Under förutsättning att de visuella effekterna inte stör interaktiviteten och därmed också nyttan/användbarheten (utility) menar han att det är rimligt att ett användargränssnitt som utnyttjar estetiskt tilltalande animationstekniker kommer att uppskattas mer av användarna. Han hävdar att ett mindre effektivt gränssnitt, under vissa omständigheter, faktiskt kan föredras framför ett mer effektivt gränssnitt om användare upplever det som mer estetiskt tilltalande. Rörelse i gränssnitt är även en kraftfull förmedlare av känsla och uttryck, vilket bekräftades i ett experiment utförd av Rime, Boulanger, Laubin, Richir och Stroobants (1985) där användare kunde identifiera känslouttryck i animationer av enkla geometriska former. Under ett flertal experiment där enfärgade rektanglar rörde sig på olika sätt i förhållande till varandra kunde deltagare exempelvis identifiera känslor såsom avvaktande, aggression, uppmärksamhet och snällhet. Nämnvärt är dock att

25

experimenten som utfördes under studien använde två eller fler objekt, och inga test genomfördes för att visa känsloutryck hos enskilda, animerade element. Petersen och Nielsen (2002) menar att rörelse i gränssnittsdesign kan leda till smått kaotiska gränssnitt när designers använder animationer godtyckligt. Man understryker samtidigt möjligheterna med rörelse för att förmedla känsla och menar att animation som används korrekt kan berika användarupplevelsen avsevärt, samtidigt som rörelse kognitivt är en mycket kraftfull signal. Vidare menar man att rörelse i gränssnitt kan användas för att leda en användares uppmärksamhet, och på så sätt få användare att följa en viss väg eller påkalla användarens uppmärksamhet. Utifrån den terminologi som används inom film tog Petersen och Nielsen (ibid.) fram tre olika klasstyper för rörelse inom gränssnittsdesign: rörliga objekt, vilket innefattar roterande objekt, dynamisk typografi, interaktiva animationer, drop­down menyer, objekt som tonas in/ut, hover­effecter osv, skärmrörelser, vilket syftar till scroll, zoom och paralax, samt rörelse mellan sidor vilket syftar till den animation som används som övergång mellan olika fönster. Man gör även en distinkt skillnad mellan automatiska animationer och animationer som startas av användare, därautomatiska rörelser är inbyggda och bortom användarens kontroll och användarinitierade rörelser är sådana som startar vid exempelvis hover och klick. Som ett resultat av studier kring rörelse som emotionellt och estetisk element presenterar Petersen och Nielsen (2002) sex olika designprinciper för hur rörelse i gränssnitt bör användas:

Att använda subtila och harmoniska rörelser som kontrast till statiska element som form, storlek, färg, position och riktning. Man menar att små rörelser är mycket kraftfulla då gränssnitt i grunden är statiska.

Att påbörja en rörelse i en användares periferi för att påkalla uppmärksamhet då man menar att vi reagerar kraftigare på rörelser som sker utanför vårt fokusområde.

Att visa viktiga element (det man vill synliggöra) när användarens uppmärksamhet är som starkast, cirka en sekund efter att en animation påbörjats eller direkt efter att den avslutats. Man hänvisar till studier som visat att vår uppmärksamhet är som mest fokuserad i början av en rörelse och mot slutet av den.

Att undvika successiva rörelser då flera rörelser i följd kraftigt försämrar användarens uppmärksamhet.

Att endast använda korta rörelsesekvenser och använda dem sparsamt. Man motiverar detta med att göra skillnad på att fånga någons visuella uppmärksamhet och fånga någons blick. Man menar att vi kan titta på något som rör sig (vår blick fångas) men om vi vill ha användarens visuella uppmärksamhet måste användaren få en chans att uppfatta rörelsen och dess innehåll. Om vi exempelvis placerar ett roterande element på en webbplats

26

kommer vår blick att fångas av det under tiden som vi tittar på annat. För långa animationer kan även få oss att överge en interaktion för att animering helt enkelt tar för lång tid.

Att undvika flera olika rörelser på en och samma sida. Flera olika rörelser gör det svårt för en användare att fokusera på en av dem tillräckligt länge för att kunna processera vad som händer innan den andra rörelsen stjäl uppmärksamheten. Det vill säga en perceptuell störning där för många visuella stimuli tävlar om uppmärksamhet.

Bladh (2006) skiljer på indirekt och direkt manipulation i gränssnitt och menar att direkt manipulation är lättare för användaren att förstå eftersom användaren redan har uppmärksamhet på det berörda objektet och kan spåra förändringen under tiden den sker. Indirekt manipulation är svårare att förstå och kan vara förvirrande för användaren eftersom den har fokuserat sin uppmärksamhet någon annanstans när förändringen sker. De flesta animationerna i grafiska gränssnitt hamnar under paraplybegreppet direkta manipulationer ­ till exempel drag­and­drop, genie­effekten för att maximera och minimera fönster, att ändra storlek på fönster, menyexpandering, osv. Direkta manipulationer som initieras av användaren kan förslagsvis kategoriseras i två grupper, nämligen användarkontrollerade och systemkontrollerade. Drag­and­drop samt att ändra storlek på fönster är exempel på åtgärder som generellt är användarkontrollerade. Ikonexpansioner, fönsterminimeringar, menyexpansioner så väl som animerade pop ups är alla systemontrollerade efter att de först blivit initierade av användaren (Bladh, 2006). Chang och Ungar (1993) beskriver att cartoon animation i kontrast till statiska gränssnitt är ytterst framgångsrikt för att skapa engagemang och gör de mest märkliga händelser lätta att förstå. De tillämpar tekniker för cartoon animation i gränssnitt i syfte att göra gränssnittet lättare att förstå och trevligare att använda. Genom att använda sig av timing och detaljrika övergångar tillåts objekt att flyttas stabilt (solidly). Motion blur (oskärpa) tillåter objekt att röra sig snabbt men på ett fortsatt begripligt sätt. Objekt rör sig smidigt (smoothly) och dyker inte upp och försvinner plötsligt. Trots de stora skillnaderna mellan gränssnitt och tecknat menar de att det finns mycket för gränssnittsdesign att hämta i tecknat, ur både affektiva och kognitiva aspekter. Man menar att gränssnittsdesign kan använda sig av dessa “cartoon­like animations” för att tydligare visa orsak och verkan i gränssnitt genom ett visst överdrivande av rörelser, samtidigt som denna typ av rörelser engagerar användaren/betraktaren. Så länge rörelserna är tydliga behöver aldrig användaren tänka på vad det är som händer under en rörelse och kan därför behålla fokus på vad som händer istället för att behöva lägga kognitiv kraft på att försöka begripa vad något är (Chang & Ungar, 1993).

27

Nedan beskrivs kortfattat hur de 12 animationsprinciper framtagna av Thomas och Johnston (1981), som är standarden för animation än idag, kan tillämpas på användargränssnitt: 1. Dra ihop och sträck ut (Squash and stretch) Genom att låta objekt dras ihop eller sträckas ut när de flyttas skapas känslan av fysisk massa och responsivitet. Huruvida ett objekt flyttas som ett solitt objekt eller med flexibilitet går därmed att anpassas genom att låta objektet dras ihop eller sträckas ut till önskad effekt (Cao, Zieba & Ellis, 2015). 2. Förväntan (Anticipation) Utseendet på ett objekt antyder vad som kan ske härnäst. Det förbereder användaren på vad som ska ske och bidrar till att skapa en mer realistisk händelse (UXPin). En rörelse kan bygga förväntan genom att initiera en rörelse, eller ge en ledtråd om en kommande rörelse, för att förbereda betraktaren på vad som kommer att hända härnäst. När ett objekt är på väg att röra sig kan det exempelvis “ta sats” för att visa att objektet är på väg någonstans. Förväntan är ett sätt att visa för en användare av ett gränssnitt att en rörelse är på väg att initieras. (på sätt och vis är en hover­effekt på en knapp en slags förväntan) (Chang & Ungar, 1993). 3. Iscensättning (Staging) Presentera den åtgärd som ska illustreras så tydligt som möjligt. Använd färger, konstrast och komposition för att rikta uppmärksamheten på det viktigaste objektet (Cao et al. 2015). 4. Straight­Ahead and Pose­to­Pose Straight­Ahead animation innebär en mer dynamisk och komplex rörelse, medan pose­to­pose innebär en mer förutsägbar rörelse. (Förklara mer, pose­to­pose=linjär) (Cao et al. 2015). 5. Fullföljande och överlappande rörelser (Follow­Through and Overlapping Action) En viktig distinktion mellan realistisk och orealistisk animation är skillnaden av rörelse i olika områden på samma objekt. Precis som squash och stretch använder dessa två effekter fysikens lagar för att göra att animationen ser mer realistisk ut (Cao et al. 2015). Chang och Ungar (1993) beskriver denna effekt på så sätt att ingen naturlig rörelse stannar abrupt när den väl stannar, det finns alltid en rörelse som initieras efter att den primära rörelsen avslutas ­ exempelvis en bit tyg från kläderna som fladdrar trots att själva karaktären har stannat helt. 6. Sakta in sakta ut (Slow­In and Slow­Out) Objekt bör accelerera och sakta in precis som de gör i verkliga livet. Inom gränssnittsdesign används ofta så kallad ease­in­ease­out, vilket innebär att en rörelse

28

accelererar till toppfart och sedan saktar in innan den står helt stilla. Detta ger en känsla av att objektet som rör sig har en tyngd och soliditet. Denna effekt menar man även ger användaren en chans att förbereda sig på animationen då den successivt accelererar/retarderar. Utan denna effekt menar man även att rörelsen förlorar sin känsla av att vara levande då en linjär rörelse kopplas till ett dött ting (Chang & Ungar, 1993). 7. Kurvor (Arcs) Rörelser som följer en kurva känns mer naturliga, medan rörelser längs räta linjer känns mekaniska. Denna princip följer det grundläggande konceptet ”vad som går upp måste även komma ner” och inom tecknat kan det handla om att en boll som studsar upp och ner följer en kurva då den gör detta (Cao et al. 2015). 8. Sekundär rörelse/åtgärd (Secondary Action) I verkliga världen har rörelser många konsekvenser. Syftet med den sekundära rörelsen är att förstärka, och inte dra uppmärksamhet från den primära rörelsen (Thomas & Johnston, 1981). 9. Timing Antalet frames som används i en animation bestämmer hur lång tid animationen tar på skärmen. En korrekt timing gör att ett objekt verkar följa fysikens lagar. Timing är viktigt eftersom det hjälper till att definiera ett objekts fysiska karaktär, så som vikt och storlek. Till exempel kan något som rör sig snabbt representera lätthet och därför fungera bäst på en webbsida som ska vara rolig att använda. En långsam rörelse indikerar att något är tungt och kan fungera bättre för mer strukturerade och komplexa webbsidor. För att skapa illusionen av direkt användarkontroll måste animationen starta inom 0,1 sekunder efter interaktion (Cao et al. 2015). 10. Överdrift (Exaggeration) För att få fram realism i animerade objekt krävs ­ trots att det låter paradoxalt ­ ett visst mått överdrift. Chang och Ungar (1993) hänvisar till snövit och de sju dvärgarna, där snövit animeras med realistiska proportioner och naturliga rörelser medan dvärgarna animeras med både överdriva proportioner och rörelser. Trots att snövit är mer realistisk upplevs dvärgarna som mer levande. Överdrift används även i animation för att ge ett visst objekt mer karaktär, där en rörelse används för att ge det animerade objektet en specifik personlighet. Överdrivna rörelser kan även användas för att påkalla uppmärksamhet till händelser som nödvändigtvis inte skulle uppfattas av betraktaren. Cao et al. (2015) menar att realism kan vara bra men blir det för mycket kan det upphäva det kreativa med animation. Att överdriva något kan göra att en rörelse känns mer dynamisk, levande och rolig. Denna effekt bör dock användas sparsamt och enligt Thomas och Johnston (1981) rekommenderas det att basera animationer på realism, men överdriva rörelserna en aning för att på så sätt vara mer övertygande.

29

11. Soliditet (Solid Drawing) Chang och Ungar (1993) menar att animerade figurer inte endast är ifyllda områden, utan fysiska objekt som man faktiskt kan ta i. De har vikt, balans och densitet, och om de utsätts för en extern kraft rör de sig precis som ett fysiskt objekt. Genom att använda soliditet i gränssnittsdesign menar författarna att ett element skapas på ett sådant vis att det ger intrycket av att vara ett solitt objekt, snarare än en bild på en skärm, genom att behandla det som ett fysiskt objekt. Riktiga (fysiska) objekt skapas eller försvinner inte heller ur tunna luften utan kommer in/ut från skärmens kant eller zoomas in/ut från sin minsta/största form. Objekt bör även försvinna på samma sätt som de kom till ­ om ett objekt exempelvis skapas genom att zoomas in bör det försvinna genom att det zoomas ut. På detta sätt får objektets rörelse en kontinuitet och rörelsen blir därmed lättare för användaren att följa och uppfatta. 12. Tilltalande (Appeal) Att något är tilltalade och har en viss utstrålning har att göra med helhetsbedömningen av en karaktär eller ett objekt. Det handlar om att något ska kännas äkta och intressant. En missuppfattning är att det måste vara något som till exempel är fint eller gulligt att se på. Ögonen dras till sådant som är tilltalande och har utstrålning, oavsett det är något dramatiskt eller vackert. Dålig design, klumpiga former eller konstiga rörelser är exempel på sådant som saknar detta (Thomas & Johnston, 1981). I en sammanfattning av Anti­Pattern: Animation Gone Wild samt tidigare uttalanden av Google Android­utvecklarna Chet Haase och Romain Guy, menar Dan Saffer (2013) att animation i gränssnitt bör vara:

Snabba. Animationen får inte ta sådan tid att den medför att uppgiften uppfattas som längre, eller att animationen som sådan tidskrävande.

Jämna. Ojämna eller hackiga (exempelvis en animation som animerats med för få steg mellan startposition och slutposition) kan få en oönskad effekt hos användaren och användare kan till och med uppfatta animationen som trasig eller felaktig.

Naturliga. Animationen bör kännas naturlig och verklig i sitt sätt att röra sig. Detta innefattar att det objekt som animeras bör följa naturlagar såsom gravitation, realistisk acceleration och tröghet.

Enkla. Användaren bör uppfatta animationen som lättbegriplig och meningsfull utan större, kognitiv, ansträning.

Målinriktade. Animationen bör vara kommunikativ och funktionell och inte bara existera i ett estetiskt syfte.

Animation bör vidare användas för att (ibid.):

Bibehålla sammanhang. När användare exempelvis scrollar igenom ett bildspel kan animationen som visar övergången mellan bilder hjälpa användaren att

30

skapa en spatial förståelse för var respektive bild ligger och hamnar, före och efter interaktion med bildspelet.

Förklara vad som hänt. När ett litet rökmoln dyker fram när vi raderar ett objekt, eller när kundkorg­knappen blinkar till när vi adderat en vara, hjälper animationen användaren att visa vad som nyss hände.

Visa relationen mellan olika objekt. När vi dragit ett objekt (exempelvis en bild) till ett annat fönster kan en animation förtydliga förflyttningen mellan den ena positionen till den andra.

Påkalla uppmärksamhet. När ett objekt ändrar värde, eller när utvecklare vill påkalla användarens uppmärksamhet till en specifik instruktion, kan animation användas för att påkalla användarens uppmärksamhet.

Förstärka upplevd prestanda. En så kallad progress indicator (Tidwell, 2011), eller en symbol som antyder på att gränssnittet arbetar, gör inte att en laddning faktiskt går snabbare, men som användare upplever vi det så.

Skapa illusionen av ett spatialt utrymme. Genom att animera övergångar mellan fönster som glider in på skärmytan, och sedan låta dem glida tillbaka till sin ursprungsposition när användaren väljer att ta bort/förminska dem, hjälper användare att förstå var olika element befinner sig i gränssnittet. Detta är viktigt för att hjälpa användare att förstå var de befinner sig och var de kan navigera härnäst.

Uppmuntra till interaktion. Animerade element som användare upplever som intressanta upplevs som mer spännande att interagera med.

Novick, Rhodes & Wert (2011) anser att det råder brist på litteratur om gränssnittsdesign som stöd för designers som vill integrera animation som en naturlig del av användargränssnittet, snarare än i syfte att fånga uppmärksamhet. Författarna undersöker befintliga riktlinjer för animation men menar att dessa är bristfälliga på så sätt att de inte ger någon hjälp i beslutsfattande av animationstyp. Exempelvis kan förändring av information eller tillstånd (state) representeras på många olika sätt (till exempel förändring av plats, form, färg, skala) men frågan är vilket sätt som är mest lämpligt. Därmed genomför Novick et al. (2011) en explorativ studie för att undersöka användning av animation i ett stort antal olika typer av användargränssnitt. De analyserar användandet av animation i förhållande till animationstyp och dess kommunikativa funktioner. Utifrån detta utvecklar de en matris som de menar kan stödja designers i implementering av animation i gränssnitt med syfte att öka effektivitet och användbarhet. Sju olika typer av animation identifierades:

Förändring av plats Förändring av storlek

31

Förändring av färg Förändring av form Gest Rotation Oskärpa

Sju kommunikativa funktioner som animation bidrar till identifierades:

Signalera olika kontext Signalera olika värde Signalera olika status Signalera brådska Signalera olika funktioner Signalera referent (pekande?) Signalera framträdanden

Matrisen bygger på två axlar som representerar sju olika typer av animation som identifierats i undersökningen, respektive sju olika kommunikativa funktioner som animation bidrar till. Dessa har poängsatts för att visa på lämplighet för en specifik animation i förhållande till en specifik funktion. Lämplighet bedömdes baserat på hur utbrett användningen av en specifik animation var i de gränssnitt som studerades, samt den teoretiska rimlighet av relationen utifrån generellt accepterade modeller av affordance i användargränssnitt. Matrisen visar på att:

Det finns inte en specifik animationstyp som är lämplig för att uttrycka samtliga kommunikativa funktioner.

Vissa animationstyper (t.ex förändring av färg och förändring av plats) har generellt ett högre värde av lämplighet än andra (t.ex. oskärpa och gest).

Vissa kommunikativa funktioner (t.ex. funktion och referent (pekande?)) har en större risk för att användas på olämpliga sätt inom animation.

Vissa kommunikativa funktioner (t.ex. status) har ett tydligt mest lämpligt sätt att uttryckas genom animation.

Författarna menar att resultaten från modellen delvis verkar reflektera sunt förnuft och de mest vanligt förekommande sätten att använda animation på. Till exempel är det mest lämpliga sättet att uttrycka värde på genom storlek, men författarna förvånades av att upptäcka att det mest lämpliga sättet att uttrycka framträdanden är genom att använda oskärpa, vilket de menar inte är så vanligt förekommande i gränssnitt.

32

2.5 Teoretisk sammanfattning Under föregående rubriker har de teoretiska delar som anses aktuella inom det utforskade området beskrivits. Nedan följer en sammanfattning av dessa delar och hur de hör ihop med varandra, och sammanfattningsvis presenteras en utveckling av det teoretiska ramverk (Framework of product experience) som tidigare presenterats av Desmet och Hekkert (2007). Därefter förtydligas de olika beståndsdelar som kan beskrivas som funktionell och estetisk animation.

Figur X. Vidareutveckling av Framework of product experience (Desmet & Hekkert, 2007) med animationens plats i användarupplevelsen. Användare har innan användandet av en produkt eller tjänst med sig tidigare kunskaper, egenskaper och färdigheter som i sin tur formar användarens angelägenheter (concerns).

33

Figur X. Modell över funktionella samt estetiska komponenter av animation. Få ihop den viktiga subjektiva uppfattningen av animation i gränssnitt med användarupplevelsemål som är den subjektiva delen av interaktionsdesign. Användbarhet ­ Objektiv ­ Funktionell Användarupplevelse ­ Subjektiv ­ Estetisk / Emotionell När ni har förklarat användarupplevelse o animation etc. så ska ni titta på hur hänger det här ihop? Hur hänger modellen ihop med vår initiala teori? De tre begreppen tillfredsställelse, emotionell reaktion, meningsfullhet, passar ihop med den slutgiltiga modellen tycker Morgan. Hur hänger den modellen som ni själva tagit fram ihop med er teori? Det behöver inte vara så avancerat. Bild. Sen när ni samlat in datan, vad säger datan om det som är estetiskt och vad säger den om det som är funktionellt. Hur händer det ihop med den initiala modellen som vi hade. Tratta in det i modellen. eller snarare kategorisera. Vad visar det som är funktionellt, vad är det som är estetiskt? Största tipset från Morgan: flytta om i rapporten så ni får tratten. Släpp teorin och fokusera på datainsamlingen. Två veckor till resultat o diskussion, därefter två veckor till rapporten ska vara inlämnad.

34

Efter ni samlat in datan återkommer ni till teorin, då ser ni vad ni behöver förklara mer om osv. Vad ni eventuellt kan komprimera osv.

35

3 Metod I metodkapitlet beskriver man sitt vetenskapliga tillvägagångssätt. Det vill säga hur man har gjort sin undersökning och hur man har kommit fram till sina resultat. Ett metodkapitel kan delas in i olika avsnitt. Nedan ges ett förslag till indelning. Metodkapitlet kan också läggas som kapitel 2, före teorikapitlet. I en forskningsplan beskriver man kanske hur man planerar att gå tillväga i sinm undersökning, alltså i tempusformen futurum. Metodkapitlet skall däremot vara skriver i imperfekt. Man kan skriva en version av metodkapitlet före genomförandet och sedan uppdaterar man och ändrar denna efter genomförandet. Var dock noga med att denna uppdatering verkligen görs! I metodkapitlet är det viktigt att lägga fokus på den eller de metoder man har använt sig av. Man skall dock visa att man gjort ett medvetet och relevant val av metod. Man kan därför mycket kort nämna vilka metoder som finns som alternativ. Det skall finnas en tydlig motivering till det val av metod som man har gjort. Metodbegreppet kan vara lite förvirrande ibland. Ett annat begrepp som ligger näre metod är teknik. Ibland talar man om exempelvis datainsamlingstekniker (en del kallar också detta för metoder, vilket gör det lite förvirrande). En metod är dock oftast en samling av flera olika tekniker som föreskriver ett visst tillvägagångssätt för att både samla in och analysera data. Då är det som beskrivs i en bok en metod. Om det inte finns väljer man kanske själv att kombinera en eller flera datainsamlingstekniker och analystekniker till en metod. Även om man använder en metod så som den står i en bok, så gör man alltid en anpassning av den. En metod är också det specifika tillvägagångssätt som man har haft vid en viss undersökning. Metod kan alltså vara både typen och instansen. Metoder och tekniker beskrivs i litteratur. Det viktigaste är att i metodkapitlet beskriva hur man själv har gjort och sedan tar man stöd i litteraturen för att motivera detta. Man kan alltså mycket kort återge vad som står i litteraturen, men det är viktigt att metodkapitlet inte skall bli en metodlärobok.

Metodteori? Användartest Kontextuell intervju Core affect Pluppmetoden Metod Länk till användartest: https://invis.io/ZJ76YOGGC Presentera ett flödesschema över studiens metoder och tillvägagångssätt. Skriv om varför tester utformas som dom gjort. Exempelvis att vi tror att kontext kommer att påverka informantens upplevelse av den enskilda rörelsen. Skriv om hur varje informant uppmanades att applicera en känsla på hur rörelserna kändes, till skillnad från att sätta känslan på hur hen själv kände under respektiva test. Skriv mer ingående om de animationer som testats, exempelvis olika accelerationskurvor etc.

36

1. Page transition 2. Button­hover and click 3. Drop down­menu 4. Hamburger menu slides out 5. Search bar animates out 6. Add to cart 7. Carousel 8. Progress bar 9. Scroll animation 10. ”Back to top”­button 11. Video­window maximizing/minimizing 12. Attention­grabber 13. Rotation of card 14. Create/Delete object 15. Collapse/Expand window 16. Pop up window

3.1 Vetenskaplig ansats I detta avsnitt kan man inledningsvis beskriva om man valt en induktiv eller deduktiv ansats. Man kan också beskriva om man kommer att göra en kvalitatativ eller kvantitativ undersökning. Naturligtvis skall alla val motiveras.

För att besvara forskningsfrågan har en induktiv ansats valts och en kvalitativ datainsamlingsmetod använts för att undersöka respondenternas core affect, det vill säga deras underliggande motivation och angelägenheter samt deras känslomässiga reaktion gällande olika typer av animationer i webbgränssnitt. Core affect modellen användes tillsammans med pluppmetoden vilket innebar att varje respondent själv fick lägga ut lappar motsvarande varje rörelse som ingick i respektive test samtidigt som varje respondent uppmanades att tänka högt under tiden som hen genomförde testet. Som redan nämnts valdes en kvalitativ ansats då det utforskade området och den forskning som bedrivits syftar till att identifiera känslor, upplevelser och tankar i relation till olika typer av rörelser inom gränssnittsdesign. Då just emotionell respons kan vara svår att uttrycka ansågs den kvalitativa metoden, med genomförande av användartest tillsammans med semistrukturerade intervjuer och think aloud, lämpa sig bäst då denna metod gav informanterna en möjlighet att fritt uttrycka både känslor och tolkningar av de rörelser som visades under testet. Varje informant uppmanades även att fritt dela med sig av sina tankegångar och upplevelser under respektive test, och samtal kring olika rörelser och hur de uppfattades i förhållande till varandra fördes under testerna.

37

3.2 Datainsamling Här beskriver man vilka datainsamlingstekniker som man har använt sig av. Man bör kortfattat ta upp alternativ och diskutera varför dessa tekniker inte har valts. De vanligaste datainsamlingsteknikerna är:

Enkäter Intervjuer Dokumentstudier Observationer

Utifrån litteraturstudien samt en subjektiv generell bedömning av vilka animationer som är mest frekvent förekommande i webbgränssnitt idag har ett antal animationer tagits fram. Efter informella samtal med designers och utvecklare på Pixelant kunde även ungefärliga genomsnittstider för olika webb­animationer identifieras samt en kontroll av författarnas uppfattning av mest använda animationer i webbgränssnitt. Urvalet av animationer begränsades till att endast innefatta animationer som enligt studerad litteratur kan anses vara funktionella. Animationstyperna valdes ut och nya variationer av respektive animationstyp skapades. För varje animationstyp togs tre till fem olika variationer fram med grund i tidigare forskning. Ett interaktivt test skapades för att på så sätt möjliggöra för respondenterna att spela upp de olika alternativen i den ordning de själva föredrog. Nio stycken kontextuella intervjuer har (hittills) genomförts i samband med användartest av funktionella animationer för att undersöka respontenders upplevelser, underliggande angelägenheter och känslomässiga reaktioner. Utgångspunkten var nio typer av funktionella animationer och för varje animation presenterades tre till sex variationer som respondenten ombads svara på ett antal semistrukturerade intervjufrågor kring. Totalt testades därmed 36 stycken olika varianter av animationer. Respontenten ombads även placera in en plupp för varje variant i core­affect­hjulet och motivera sitt beslut (Se bilaga x). Varje test inleddes med en kortare förklaring av forskningsområdet samt en genomgång av core affect modellen. Under denna genomgång visades en utskrift av core affect modellen på papper samtidigt som testledaren förklarade betydelsen av modellens fyra axlar, samt gav exempel på var olika typer av upplevelser kunde placeras i modellens olika fält. Varje respondent uppmanades även att ta god tid på sig att genomföra testet genom att själv klicka sig igenom de olika alternativ/animationer som presenterades i respektive test. Respondenterna blev även upplysta om att testet varken skulle klassificeras som rätt eller fel, presenteras individuellt, eller att det var tvunget att utföras under någon utsatt tid, utan att det handlade om den enskilda individens upplevelse av olika rörelser.

38

Figur X. Core affect­hjulet (Russell 1980, 2003).

3.2.1 Urval När man samlar in data har man sällan möjlighet att göra det från alla inom det studerade området (populationen), vilket kallas att göra en totalundersökning. Oftast behöver man göra någon form av urval. Personer som tillfrågas i intervjuer och som observeras kallas informanter och personer som svarar på enkäter kallas respondenter. Det finns olika typer av urval som kan göras, exempelvis bekvämlighetsurval, strategiskt urval, kvoturval, representativt urval. Se i metodlitteraturen för närmare beskrivningar av dessa. I detta avsnitt beskriver man det urval som man har tillämpat och varför. Urvalet av respondenter har gjorts med hänsyn till att representera ett brett spektrum av människor i olika åldrar och med olika bakgrunder och erfarenheter. Ett bekvämlighetsurval har gjorts då majoriteten av respondenterna är personer i vår närhet i Malmö som har tillfrågats. Genom företaget Pixelant har vi kommit i kontakt med personer med varierande erfarenheter av animation och webbgränssnitt. x antal användartester genomfördes på respondenternas arbetsplats, x genomfördes i respondenternas hemmiljö, x genomfördes på ett café.

3.2.2 Genomförande I detta avsnitt beskriver man genomförandet av datainsamlingen. Man beskriver exempelvis hur man gått tillväga för att utforma frågor till intervjuer eller enkäter. Själva intervjufrågorna och enkätformulären kan man gärna lägga i en bilaga, som man hänvisar till härifrån. Man beskriver hur intervjuer gjorts eller när enkäter skickats ut och hur, hur intervjuer dokumenterats och hur enkäter samlats in. Oftast får man inte svar på alla enkäter som man skickat ut. Här kan man också ange och diskutera den svarsfrekvens man haft. Det är viktigt att vara tydlig med hur man gått tillväga, men inte gå till överdrift med detaljer. Det är också viktigt att vara ärlig och inte mörka exempelvis ett bortfall av respondenter. Avgränsningar som har gjorts är att endast testa animationerna som sådana med avsaknad av verklighetstrogen kontext, detta för att sätta själva rörelsen i centrum och

39

för att kontext inte ska färga testpersonens upplevelse av individuella rörelser. Av samma anledning skapades samtliga animationer i svart/vitt, med endast vit, svart och gråskalor däremellan, för att eliminera risken av att testpersoner skulle komma att föredra en viss animation på grund av exempelvis färgval. Även eventuell färgblindhet kan med uteslutande av färg räknas bort som en faktor som skulle kunna ha en eventuellt negativ påverkan på färgblinda. Då testet syftade till att undersöka om, och i så fall hur, olika rörelser kan förknippas med känslomässiga upplevelser genomfördes en analys av 44 stycken olika webbsidor innehållande olika typer av animationer. Dessa animationer analyserades därefter separat och ungefärlig längd och acceleration för vanligt förekommande animationer i webbgränssnitt kunde identifieras. För att skapa animationerna användes i Adobe After Effects CC vilket är ett program för videoredigering och animering. Programmet valdes på grund av dess förmåga att kunna kontrollera och konfigurera olika typer av rörelser i form av dess acceleration, tid och form. Varje animation sparades sedan som en gif.­fil i Adobe Photoshop CC för att kunna användas i nästa steg i skapandet av det interaktiva testet vilket gjordes i InVision, som är ett program som används för att skapa interaktiva wireframes och prototyper av digitala verktyg. Varje test­animation skapades i 60 bildrutor per sekund vilket i sin tur ger 60 stycken bilder i respektive .gif­fil och animation i InVision. Totalt skapades 40 individuella rörelser över nio stycken olika tester där varje test innehöll mellan tre till sex individuella animationer. Samtliga animationer varierade i både typ, tid, form och acceleration, med grund i tidigare studerad litteratur samt samtal med designers på Pixelant och studerade webbplatser innehållandes animationer. Samtliga animationer, trots variation, kunde dock kategoriseras som:

Statiska förändringar, vilket innebär att rörelsen är omedelbar utan övergång mellan den första och sista bildrutan.

Linjära rörelser. Detta är en rak rörelse där bildrutorna mellan start­ och slutbild är jämnt fördelade.

Cartoon­like, som syftar till den typ av rörelse som utnyttjar någon, eller några, av de animationsprinciper som används i skapandet av animerad film ­ exempelvis squash and stretch och anticipation.

Ease­In, vilket syftar till den typ av animation där rörlsen accelererar över tid, det vill säga startar långsamt för att successivt öka i hastighet.

Ease­Out. Denna typ av rörelse är motsatsen till Ease In och innebär att rörelsen har högst hastighet vid början av animationen för att sedan retardera mot slutet av animationen.

Easy­Ease, som syftar till den rörelse som accelererar i början av animationen och retarderar mot slutet ,och når sin högsta hastighet i mitten av rörelsen.

40

Vid x antal användartester var båda författarna närvarande, övriga genomfördes med närvaro av en författare. Användartesterna inleddes med en kort introduktion som beskrev undersökningens bakgrund samt disposition på användartestet och en kort förklaring av core affect­hjulet. Respondenterna informerades om att deras deltagande var anonymt och att deras uppgifter inte kommer att redovisas. Vidare informerades de om att deltagandet var frivilligt och att de hade möjlighet att när som helst avbryta. Respondenterna ombads att skriftligen godkänna deras medverkan (Se bilaga x). En semistrukturerad kontextuell intervjumetod användes för att möjliggöra direkt återkoppling till den animation som testades samt för att öppna upp för följdfrågor. Låsta och ledande frågor undveks och respondenterna uppmuntrades till att utveckla sina svar och vidare förklara vad de menade. Pluppmetoden och core affect­hjulet användes i samband med användartestet för att möjliggöra att respondenterna på ett snabbt och enkelt sätt kunde beskriva sin känslomässiga reaktion av en animation.

3.3 Analys Här beskriver man den eller de tekniker som man har använt för att analysera sitt resultat. Exempel på kvantitativa analyser är olika statistiska tester. Exempel på kvalitativa analyser är innehållsanalys och kodning. Teorin används i analysen för att beskriva och förklara. Exempelvis kan en teoretisk modell användas med vilken man beskriver det som man har studerat. Även om man inte använt någon särskild teknik är det viktigt att beskriva hur man har gått tillväga i analysen. Detta är något som både uppsatsskrivare och forskare missar.

I analysen av den insamlade datan genomfördes först en sammanställning och gruppering av resultaten från respektive plupptest. Då samtliga plupptest genomfördes fysiskt ­ det vill säga med hjälp av pappersutskrifter av core affect hjulet samt pluppar i form av papperslappar från A till F ­ fördes testen över till Photoshop där samtliga resultat från plupptesten kunde färgläggas och tydliggöras för vidare analys. På så sätt skapades en överblick av samtliga pluppar för att kunna jämföra dem med varandra samt för att kunna urskilja antydningar till eventuella kluster och grupperingar. Därefter gjordes en sammanställning av de intervjuer och noteringar som förts under respektive test, och dessa fördes sedan in i ett dokument där de färgkodades efter olika kategorier. Varje enskiljd sammanställning jämfördes även med de svar som respektive respondent lämnat genom pluppmetoden för att säkerställa att de muntliga svaren kring känslor och upplevelser stämde överens med hur respondenterna lagt ut sina pluppar i core affect hjulet. Denna analys genomfördes dels för att se hur respondenternas muntliga svar överensstämde med de faktiska markeringarna i core affect hjulet, men även för att vissa respondenter under tester uttryckte viss osäkerhet kring var deras känlslor och upplevelser för en viss animation kunde placeras i hjulet.

41

3.4 Tillförlitlighet En uppsats skall hålla god vetenskaplig kvalitet. Den kunskap som man producerar skall vara trovärdig och tillförlitlig. Två begrepp används för att diskutera den vetenskapliga kvaliteten – reliabilitet och validitet. I detta avsnitt kan man diskutera reliabiliteten och validiteten i den undersökning man har gjort. Denna diskussion kan också läggas i diskussionen.

Varje användartest tog x minuter att genomföra och dokumenterades genom ljudupptagning samt core affect­hjulet där respondenterna fått placera ut pluppar. Ljudmaterialet sammanställdes i text och skickades ut med e­mail till respektive respondent. Därmed fick de möjlighet att rätta eventuella transkriberingsfel och materialet kunde kvalitetssäkras i syfte att öka studiens validitet.

3.5 Etiska överväganden Detta avsnitt är inte obligatoriskt men kan vara lämpligt att lägga till vid vissa typer av undersökningar. Undersökningar där etiska överväganden bör beaktas är sådana som inkräktar på människors integritet. Exempel på undersökningar där etiska överväganden bör göras är deltagande observationer på arbetsplatser, djupa personliga intervjuer samt intervjuer och enkäter med frågor som berör människors privatliv. Undersökningar med koppling till patienter inom hälso­ och sjukvård skall alltid genomgå etisk prövning för att kunna genomföras. Hit räknas också undersökningar om IT­system och informationshantering i vård och omsorg. Prövning görs av Etikkommittén Sydost, (http://www.bth.se/hal/eksydost. nsf/sidor/etikkommitten­sydost), men först ska man göra deras självvärdering

Under de tester och intervjuer som genomförst har inga frågor ställts som eventuellt kan äventyra de olika respondenternas personliga integritet eller privatliv. Bortsett från ålder har inga demografiska frågor ställts som kan komma att användas för att indentifiera den enskilde individen. Samtliga informanter har även blivit upplysta om att de på begäran får ta del av sin egna data, både från plupptest samt intervjuer och noteringar, och att all individuell data presenteras som en del av den färdiga analysen och inte separat. Trots ovanstående försiktighetsåtgärder kan vissa respondenter uppleva ett visst obehag under tester som innefattar ingående beskrivningar och förklaringar av upplevelser, förnimmelser, och kanske framförallt känslor. Dels kan emotionella värden vara svåra att förklara vilket eventuellt kan medföra att respondenter känner sig otillräckliga i sin verbala förmåga, vilket i sin tur kan leda till ett visst obehag under utförande av tester vars syfte är att mäta just affektiva tillstånd. Stor hänsyn har därför tagits till varje respondents svar och inga påtryckningar har gjorts då en individ uttryckt att de inte ansett sig kapabla att formulera en känsla kopplad till en viss animation.

42

4 Resultat/Empiri Vad man beskriver i detta kapitel beror väldigt mycket på den studie som man har gjort. Indelningen i underrubriker bygger därmed också på det. I denna del skall det redovisas rena resultat, utan analyser och diskussioner. Det är en slags sammanfattning av de data som man har samlat in. Man skall göra en rak och mer eller mindre objektiv beskrivning. Bara relevant material skall tas med. Kapitlet skrivs företrädesvis i presens. Om man gjort en enkätundersökning presenterar man här svaren fråga för fråga gärna i tabeller och diagram med kommenterande text till. Man bör inte presentera samma data i både tabell och diagram, utan välj det som passar bäst. Man behöver inte återge hela innehållet i en tabell eller diagram i text, men man bör kommentera på något sätt. Alla tabeller och diagram skall också omnämnas i text. Om man gjort intervjuer kan man här återge någon slags sammanfattning eller sammanställning av dem. Man kan gärna ta med specifika citat från intervjuer, men man återger aldrig hela intervjuer, inte ens heller i bilagor. Om man gjort experiment återger man olika utfall här. Har man gjort fallstudier av verksamheter eller processer beskriver man dessa här.

43

5 Analys I detta kapitel beskriver man analysen. Hur detta görs beror helt på vilken typ av analys man gör. I en kvantitativ studie redovisas resultaten av olika statistiska analyser och jämförelser mellan olika frågor här. Det är också möjligt att lägga ihop resultat och analyskapitlet till ett kapitel. I en kvalitativ undersökning kan man redovisa de mönster man kan påvisa utifrån sitt material. Det kan också vara så att man applicerar någon teoretisk modell på sitt empiriska material eller på annat sätt gör kopplingar mellan teorin och empirin för att beskriva, förklara eller peka på samband. Analysen skall vara mer ren och hållas utan diskussion. I kvalitativa studier är det dock vanligt att man lägger ihop analys­ och diskussionskapitlet.

44

6 Diskussion I detta kapitel diskuterar man resultatet och genomförandet av undersökningen. Nedan följer ett förslag på avsnitt som kan användas i kapitlet, men uppdelningen i lämpliga underrubriker är valfri och bör väljas utifrån vad som passar den specifika undersökningen. Kapitlet skrivs företrädelsevis i presens.

Trots att gestaltlagarna ligger som grund för all design finns inte detta riktigt i animation. Exempelvis kontinuitet, relation, samhörighet etc (Ware sid 182­). När vi öppnar en modal panel i ett gränssnitt finns egentligen ingen koppling mer än att vi tryckt på en knapp ­ den visuella kopplingen är oftast obefintlig. Undersökning av känslor kopplade till rörelse använder två eller fler objekt. Frågan är om informanter då faktiskt gör en värdering till den enskilda rörelsen eller om det egentligen handlar om “dansen” mellan två eller fler objekt. Med flat design har fler och fler webbplatser blivit generiska då många följer samma mönster. Om vi föreställer oss en stad där alla bär samma kläder borde det mest logiska sättet att sticka ut vara att klä sig helt annorlunda. Precis som med design kommer inte detta att falla alla i smaken, men man kommer samtidigt att attrahera de människor som tror på samma sak som dig. Då det är omöjligt för oss att ta fram användarupplevelse mål för samtliga av Pixelants kunders kunder, är det viktigt att designers frågar vad kunden vill att webbplatsen ska förmedla för känsla och, kanske desto viktigare, vad de vill att sina kunder ska känna under användandet. Det kan möjligtvis vara så att desto kortare en animation är desto mer måste acceleration och rörelse överdrivas för att över huvud taget uppfattas. (?) Kan det vara så att en snabbare acceleration i början av en animation (med ease mot absoluta slutet) uppfattas som snabbare än andra kurvor? Samtliga respondenter talade om, och beskrev, nästan samtliga rörelser som att det var personer med personliga egenskaper. Detta var mycket mer vanligt på cartoon­like animationer dock vilket är väldigt intressant. Detta understryker att cartoon­like­animationer ger mer liv åt en rörelse och reaktionen verkar starkare destu mer överdriven den är. Det är möjligt att testerna inte hade fungerat såvida respondenterna inte hade kunna jämföra olika typer av animationer med varandra. En enskiljd rörelse per test hade möjligtvisgett ett annat resultat.

45

Testet laggade under vissa tester vilket kan ha påverkat respondentens upplevelse av en rörelse. Tester där uppspelningen av vissa animationer visade exempelvis att respondenter uppfattade hackiga animationer tydligare i linjära rörelser. Det kan varit förvirrande att core affect modellen inte visades med tydliga axlar för tilltalande, ej tilltalande, lugn och exaltrerad. Varje respondent blev dock upplysta om detta men lade stort fokus vid de ord som stod brevid varje tårtbit. Respondenten med mest teknisk kunskap kring animationer gjorde en mer teknisk reflektion medan respondenter med mindre kunskap personifierade rörelserna betydligt mer. Den tekniskt kunnige hänvisade mer till hur den eventuella bezier­kurvan såg ut snarare än vad hen kände och upplevde. Detta går i linje med de förkunskaper som vi bär med oss in i våra upplevelser. Det verkar som att mindre förkunskap ger en renare (mer neutral) bild av en estetisk och emotionell upplevelse till skillnad från den mer disikerande analys av en upplevelse som en person med mycket förkunskap gör.

6.1 Problemlösning/resultat Här kan man göra en återkoppling mellan det kunskapsbidrag som man har kommit fram till och det problem och kunskapslucka som man beskrev i introduktionen. Detta är det kapitel där man får komma med egna tankar och reflektioner. Beskriv vad resultaten kan användas till och hur de kan bidra, gärna till samhället i stort. Koppla tillbaka till det du skrivit i inledningen. Koppla också tillbaka till tidigare forskning och diskutera vad som gjorts bättre i denna undersökning eller bara jämför med vad andra har kommit fram till. Tänk dock på att inget nytt får tillföras i diskussionen, exempelvis får man inte här plötsligt ta in nya referenser.

6.2 Metodreflektion Här kan man diskutera om valet av metod och genomförandet varit lämpligt. Man kan också ta upp diskussionen om validitet och reliabilitet här om man inte har gjort det i inledningen.

Ord i core affect hjulet har olika betydelse för olika personer. Ett ord kan ha negativ betydelse för den ene informanten medan det har en positiv betydelse för en annan. Färre ord kunde möjligtvis ha använts i core affect modellen för att göra valet enklare för respektive respondent. Modellen kunde möjligtvis fungera bättre om den anpassats till mer personliga attribut, vilket möjligtvis hade varit enklare att relatera till i förhållande till rörelser… exempelvis “snabb”, “långsam”, “aggressiv” etc. Visst lagg förekom under vissa tester vilket kan ha påverkat respondentens uppfattning av vissa rörelser. En rörelse kan exempelvis uppfattas som “hackig” på grund av att testplatformen ibland hoppade till under testet.

46

Har inte testat animationer i kontext, vilket kan medföra att vissa rörelser kan upplevas som svåra att relatera till. Samtidigt är den enskilda, isolerade rörelsen det vi faktiskt ville undersöka.

7 Avslutning Uppsatsen avslutas med en slutsats och sist förslag på fortsatt forskning. Detta kan ligga i ett eget kapitel eller i slutet av diskussionen. Avslutningen skall kunna läsas fristående och man kan därmed lämpligen inleda med en mycket kort redogörelse för vad man har gjort och upprepa syftet och/eller frågeställningarna. Inget nytt tas upp i avslutningen och normalt behövs inga löpande referenser.

7.1 Slutsats Slutsatsen skall svara på frågeställningarna på ett mycket kortfattat sätt. Alternativt återger man kort om man kunnat verifiera eller falsifiera sin hypotes och vilka argument man har för det. Slutsatsen skall vara mycket kort och kärnfull, helst inte mer än ett stycke lång och skall inte innehålla några figurer.

7.2 Förslag till fortsatt forskning Här ges förslag till fortsatt forskning utifrån vad uppsatsen har handlat om. Det kan vara sådant som man inte hunnit med eller kunnat göra. Titta alltså tillbaka på avsnittet avgränsningar här. Möjligen kan detta avsnitt också uppdateras samtidigt som förslag till fortsatt forskning skrivs. Ett annat avsnitt att titta på är diskussionen om validitet. Det kanske behöver göras mer undersökningar för att verkligen bekräfta resultaten. Dessa förslag kan vara underlag för egen fortsatt forskning på nästa nivå eller för andra studenter som skall skriva uppsats. Vi ska ju inom forskningen sträva efter att arbeta kumulativt, det vill säga att jobba vidare och fördjupa och utveckla det som andra har gjort.

47

Referenser Alla böcker, rapporter, uppsatser, avhandlingar och artiklar som man har använt i uppsatsen skall återfinnas i en referenslista i slutet. Även webbsidor skall anges i referenslistan. Så fort man tar upp något från en referens i uppsatsens text skall detta anges i en så kallad källhänvisning eller referenser i löpande text. Om man så vill kan man dela upp referenslistan i en del med böcker, en med rapporter, en med artiklar och så vidare. Det finns olika system för hur en referenslista ser ut. Vi använder Harvardsystemet. I detta anges referenserna i en viss form och listan sorteras i bokstavsordning efter författarnas efternamn. Böcker: Efternamn, Initial (årtal) Titel, Förlag, Stad. Svensson, I (1945) Våra fina blommor, Floraförlaget, Blomstermåla. Artiklar: Efternamn, Initial (årtal) Titel, Tidskrift, volym, sidor. Svensson, I (1945) Our Nice Flowers, International journal of Flowers, 6:4, 45­78. Avhandling/uppsats: Efternamn, Initial (årtal) Titel, Nivå på avhandling/uppsats, Institution, Universitet/Högskola. Svensson, I (1945) Våra fina blommor, Doktorsavhandling, Botaniska Institutionen, Universitetet i Blomstermåla. Det finns speciella angivelser för hur man skriver vid flera författare. Det finns också angivelser för hur man skall skriva andra referenser som kapitel i antologier, webbsidor, artiklar i dagspress och forskningsrapporter. Se i metodlitteraturen hur dessa skall skrivas.

Böcker Baecker, R., Small, I. 1990. Animation at the Interface, In Laurel, B. (Ed.) The Art of Human­Computer Interface Design, Addison­Wesley, 251­267. Cao, J., Zieba, K., & Ellis, M. 2015. Interaction Design: Best Practices, UXPin. Cooper, A. Reimann, R. Cronin, D. 2007. About face 3: The essentials of interaction design. New York: John Wiley & Sons, Inc. Head, V. 2013. A pocket guide to CSS animations. Penarth: Five simple steps.

48

Norman, D. 2013. The design of everyday things. New York: Perseus Books Group. Krug, S. (2014) Don’t make me think, Revisited: A common sense approach to web usability. USA: New Riders. Saffer, D. (2013) Microinteractions. Sebastopol: O’Reilly Media, Inc. Scott, B. Neil, T. (2009) Designing Web Interfaces. Sebastopol: O’Reilly Media, Inc. Shapiro, J., 2015, Web Animation using JavaScript: Develop and Design, Peachpit Press, Stad? Sharp, H., Rogers, Y., Preece, J., 2007. Interaction Design Beyond Human­Computer Interaction. Andra upplagan. Chichester: John Wiley & Sons Ltd. Thomas, F., Johnston, O. 1981 Disney Animation ­ The Illusion of Life, Abbeville Press New York, USA. Tidwell, J. (2011) Designing interfaces, O’Reailly Media, Inc: Sebastopol. Walter, A. 2011. Designing for emotion. New York: A book apart. Ware, C. 2013. Information visualization: Perception for design. Waltham: Elsevier, Inc. Williams, R E. 2009. The Animator's Survival Kit. London: Faber & Faber. Artiklar Benjamin Lowry, P. Gaskin, J. Twyman, N. Hammer, B. Roberts, T, L. (2013) Proposing the hedonic­motivation system adoption model (HMSAM) to increase understanding of adoption of hedonically motivated systems, Journal of the Association for Information Systems, vol. 14(11), 617– 671. Chang, B­W., Ungar, D. (1993) Animation: From Cartoons to the User Interface, ACM, UIST’93: User Interface Software and Technology, Atlanta, GA, November 3­5, 1993. 45­55. Close, A. Kukar­Kinney, M. (2009) Beyond buying: Motivations behind consumers' online shopping cart use, Journal of Business Research, Volume 63, Issues 9–10, September–October 2010, Advances in Internet Consumer Behavior& Marketing Strategy, 986–992.

49

Desmet, P. Overbeeke, K. Tax, S. (2001) Designing Products with Added Emotional Value: Development and Appllcation of an Approach for Research through Design, The Design Journal, 4:1, 32­47 Desmet, P. Hekkert, P. (2007) Framework of product experience. International Journal of Design, 1(1), 13­23. Hekkert, P. (2006) Design aesthetics: principles of pleasure in design, Psychology Science, Volume 48 (2), 157­172. Novick, D., Rhodes, J., Wert, W., (2011), The Communicative Functions of Animation in User Interfaces, SIGDOC '11 Proceedings of the 29th ACM international conference on Design of communication, 1­8 Petersen, H., Nielsen, J., 2002, The eye of the user: the influence of movement on users’ visual attention, Digital Creativity, 13:2, 109­121 Thomas, B. H. och Calder, P. (2001) Applying cartoon animation techniques to graphical user interfaces, ACM Transactions Computer­Human Interaction, 8 (3), 198­222. Tversky, B., Morrison, J. (2002) Animation: can it facilitate?, Int. J. Human­Computer Studies 57, 247–262.

Wang, Y, J. Minor, M, S. Wei, J. (2011) Aesthetics and the online shopping environment: understanding consumer responses, Journal of Retailing, 87 (1) (2011), 46–58. Avhandling/uppsats Bladh, T. (2006) Towards an Understanding of Dynamics in Information Visualization, Luleå Tekniska Universitet Webbartiklar Bedford, A. 2014. Animation for Attention and Comprehension. https://www.nngroup.com/articles/animation­usability/ Hämtad: Nielsen, J. 2011. Usability 101: Introduction to Usability. Nielsen Norman Group.

50

https://www.nngroup.com/articles/usability101introductiontousability/ Hämtad:

51

Bilagor Sådant material som är för tungt att lägga i uppsatsens löpande text, men ändå är relevant för uppsatsen kan man lägga i bilagor. Dessa numreras 1, 2, 3 och så vidare eller a, b, c och så vidare. Varje bilaga skall ha en tydlig rubrik. Varje bilaga har sin egen sidnumrering och ligger alltså utanför uppsatsens sidnumrering. Alla bilagor skall också refereras från texten i uppsatsen, annars skall bilagan inte vara med. Exempel på sådant som kan läggas i bilagor är: intervjufrågor, enkätformulär, skärmdumpar på prototyper, processmodeller med mera.

52

Bilaga: Intervjufrågor Introduktion Detta användartest handlar om animationer. Just nu undersöker vi i samband med vårt examensarbete hur funktionella animationer i webbgränssnitt kan användas för att förbättra upplevelsen för användare som besöker webbsidor. För att göra detta genomför vi användartester där vi kommer att fokusera på dina upplevelser, åsikter och känslor gällande ett antal animationer. Användartestet kommer att gå till på så vis att du själv klickar runt och spelar upp animationerna och berättar vad du tänker och känner. Under tiden kommer vi ställa ett antal frågor. För varje animation kommer du att få placera in en plupp i det så kallade känslohjulet. Känslohjulet består av två axlar. Mittpunkten är neutral och känslans intensitet ökar utåt kanterna. Den horisontella axeln sträcker sig mellan upplevelserna ej tilltalande till tilltalande. Den vertikala axeln sträcker sig mellan upplevelserna lugn till exalterad. Användartestet består av olika delar med några variationer för varje del. Klicka flera gånger och se vad som händer. En plupp placeras ut för varje animation innan nästa del visas. Plupparna sätts efter hur animationen känns. Exempelvis animationen känns exalterad och tilltalande. Exempel på intervjufrågor

Hur gammal är du? Vad har du för sysselsättning/yrke? Vad har du för datorvana/internetvana? Hur tolkar du vad det är som händer? Vad tror du man skulle kunna applicera detta på?

Vilken funktion lämpar sig animationen till? (t.ex. progress bar för laddning)

Vilken av dessa varianter tycker du är bäst för att visa på funktionen (t.e.x laddning)?

Vilken tror du är snabbast? Vilken tilltalar dig mest, om du bortser från själva funktionen? Vad tycker du att de olika animationerna förmedlar för känslor? Vad är din upplevelse/känsla när du spelar upp animationerna?

Tack för din medverkan! (Be om mailadress för att möjliggöra utskick av transkribering)

53

Bilaga: Testspecifikationer

1, 20 frames A: Linjär kurva B: Easy Ease C: Cartoon­like

2, 50 frames A: Ease In B: Ease Out C: Linjär

3, 40 frames A: Linjär B: Easy Ease C: Cartoon­like, Ease Out

W, 30 frames A: Cartoon­like B: Linjär C: Easy Ease

Dropdown, 12 frames A: Linjär & Fade 0%­100% B: Ease Out C: Cartoon (Easey Ease) D: Statisk

Pop, 15 frames A: Statisk B: Linjär C: Cartoon­like D: Ease In E: Ease Out F: Easey Ease (Google­kurva)

Add/Remove, 15 frames A: Statisk B: Easy Ease C: Linjär & Fade 0%­100% D: Cartoon­like

54

Ball, 40 frames A: Linjär B: Cartoon­like C: Ease In D: Ease Out E: Easy Ease

Carousel, 40 frames A: Linjär B: Easy Ease C: Ease In D: Ease Out E: Cartoon­like

55

Bilaga: Core affect­hjul

56

57

58

59

60

61

62

63

64