Vad hände med bilden?
En studie i hur responsiv webbdesign påverkar dramaturgi,
berättargrepp och bildkomposition
Jenny Wilhelmsson
För avläggande av filosofie kandidatexamen i Informationsdesign
med inriktningen Informativ Illustration
Ett examensarbete på grundnivå, 15 hp Examinator Yvonne Eriksson
Handledare Mattias Meldert
Akademin för Innovation, design och teknik Mälardalens högskola
Sammanfattning
Responsiv webbdesign har blivit en konvention på Internet i takt med att allt fler besöker webbsidor från sina mobiltelefoner. Men det flytande formatet orsakar svårigheter gällande bildgestaltning anpassade för responsiva webbformat, vilket försämrar bildernas funktionalitet. I denna iterativa studie har en featuregrafiks förutsättningar i responsiva format undersökts på en konceptnivå, för att kunna bilda en uppfattning om hur olika designprinciper och riktlinjer kan användas för att påverka berättargrepp, dramaturgi och bildkomposition.
Metoderna som har använts för att resonera kring frågeformuleringarna är följande;
Artefaktanalys av befintliga trender på Internet idag, Prototyping där en fördjupad
skissprocess presenteras och diskuteras, Utprovning med en Virtuell testgrupp och påföljande Dataanalys och slutligen High-Fidelity Prototyping på en
webbutvecklingsplattform.
Studien resulterade i tre olika exemplifierande layoutlösningar, som redogör för hur en responsiv featuregrafik skulle kunna gestaltas för att korrelera en associativ med en linjär läsordning, medan konsekvenserna för bildkompositionen i responsiva format kunde beskrivas med tre tydliga exempel; 1. Töjning, 2. En helt ny komposition och 3. Beskärning. Avslutningsvis förs en diskussion kring dessa slutsatser.
Abstract
Responsive web design has become a convention on the Internet as more and more people visit web pages from their mobile phones. But the floating format causes difficulties when designing images for responsive web formats, which impairs the functionality of the images. In this iterative study, the conditions of a feature graphic in responsive formats have been examined at a concept level, to be able to form an idea of how different design principles and guidelines can be used to influence narrative grip, dramaturgy and image composition.
The methods used to reason around the questionnaires are as follows; Artefact analysis of existing trends on the Internet today, Prototyping where an in-depth sketch process is presented and discussed, Testing with a Virtual test group and subsequent Data analysis and finally High-Fidelity Prototyping on a web development platform.
The study resulted in three different exemplifying layout solutions, which describe how a responsive feature graphic could be designed to correlate an associative with a linear reading order, while the consequences for the image composition in responsive formats could be described with three clear examples; 1. Stretching, 2. A whole new composition and 3. Cropping. Finally, a discussion is held about these conclusions.
Förord
Det är svårt att tacka utan att låta högtravande, samtidigt som det ibland är svårt att få orden att räcka till.
Men till min handledare, Mattias Meldert, som har en exceptionell förmåga att få det oöverstigliga att kännas rimligt; tack för ditt sorglösa engagemang samt alla tänkvärda dialoger och all inspiration. Det har varit otroligt kul och lärorikt!
Ett enormt tack till Allan, Melker och Alma, för alla timmar ni gett mig och er ständiga uppmuntran! Utan er hade jag antagligen slutat fungera.
Innehållsförteckning
Sammanfattning Abstract Förord Innehållsförteckning 1. Inledning ... 6 1.1 Bakgrund ... 61.2 Syfte och frågeställningar... 6
1.3 Avgränsningar ... 7
2. Teori ... 8
2.1 Multimodla medier ... 8
2.1.1 Navigering i multimodala medier ... 9
2.2 Ögonrörelser och läsordning ... 10
2.3 Webbaserad interaktion och navigering ... 11
2.4 Bildkomposition och detaljnivå ... 12
3. Metod ... 13
3.1 Artefaktanalys ... 13
3.1.1 Resultat från artefaktanalys ... 14
3.2 Prototyping ... 15
3.2.1 Skissarbete ... 15
3.3 Utprovning och virtuell testgrupp ... 18
3.3.1 Analysera data ... 19
3.3.2 Resultat från utprovning, virtuell testgrupp och heatmap ... 20
3.4 High-Fidelity Prototyping ... 22 3.5 Metodkritik ... 25 4. Resultat ... 26 4.1 Layoutlösning för 8 kolumner ... 27 4.2 Layoutlösning för 6 kolumner ... 29 4.3 Layoutlösning för 1 kolumn ... 30
5. Slutsats och diskussion ... 33
5.1 Vidare forskning ... 34
6. Källförteckning ... 35
6.1 Tryckta källor ... 35
6.2 Elektroniska källor ... 35
7.1 Bilaga 1 – Skärmdumpar från artefaktanalys... 37 7.2 Bilaga 2 – Ögonrörelsetester ... 43 7.3 Bilaga 3 – Layoutlösningar ... 45
6
1. Inledning
1.1 Bakgrund
I dagens läge använder en stor andel människor i Sverige sina mobila enheter för att navigera sig runt på webben och responsiva webbsidor tycks ha blivit en konventionell lösning (Internetstiftelsen 2019, IDG 2012). Men konsekvensen av de responsiva formaten blir att bildinnehållet ständigt utsätts för skalningar och beskärningar, vilket påverkar både komposition och utformning (Lindwall 2020, Bernskiöld 2016). Möjligheten att kunna planera gestaltningens narrativ är ofta helt avgörande för dess funktionalitet (Cairo 2013:174), vilket sannolikt innebär besvärliga påföljder när slutformatet inte är statiskt. Colin Ware (2013) menar att människan tar in mer information rent visuellt än vad alla de övriga sinnesintrycken gör tillsammans och belyser även datavisualiseringars överlägsenhet i att förmedla stora mängder information. Men för att lyckas med detta måste visualiseringar framställas med fokus på tydlighet; estetiska faktorer bör komma i andra hand eftersom människor i allmänhet tycks föredra det som upplevs som familjärt (Quispel et al. 2018, 2016). Annan forskning bekräftar att de som lär sig med hjälp av bild och text i samverkan bättre minns den information som de tagit del av och får en djupare förståelse för innehållet (Ayres 2015), vilket
argumenterar för det finns en stor relevans i att använda multimodala medier som kommunikationsmedel.
Det har föranlett denna studie som undersöker hur utformningen av en featuregrafik påverkas av ett responsivt webbformat, för att ta reda på hur olika designprinciper och teorier kan påverka berättargrepp, komposition och gestaltning.
Studien syftar till att undersöka gångbara riktlinjer på en konceptnivå, vilket innebär att det inte finns en tydlig målgrupp att förhålla sig till; även om målgruppen definierades så är det osannolikt att det skulle ha någon påverkan på slutresultatet, eftersom behovet i den här frågan kan antas vara detsamma för samtliga användare av responsiva webbsidor. Genom att utreda vilka förutsättningar olika plattformar erbjuder, kan potentiella riktlinjer konkretiseras och, i ett nästa steg, anpassas för en framtida målgrupp. Detta steg har alltså inte inkluderats i denna studie, vilket betyder att målgruppsformuleringen överlämnas till vidare forskning och designutövning.
1.2 Syfte och frågeställningar
Utgångspunkten för studien har varit att en större featuregrafik blir allt för komprimerad på en mobilskärm, förutsatt att layouten är statisk och anpassad efter en stationär
datorskärm, vilket påverkar användarvänligheten negativt och gör att en responsiv lösning blir nödvändig. Om featuregrafikens layout därtill är associativ, som föranleder att ögat rör sig i sackader över visningsytan på jakt efter de intressantaste delarna, så kan det finnas ett särskilt stort intresse av att undersöka hur betraktaren kan navigeras i en responsiv featuregrafik (Cairo 2013:103). Syftet har även varit att undersöka
förutsättningarna för att en användare ska kunna guidas genom ett multimodalt narrativ med hjälp av visuella riktlinjer, utan att perceptuell och kognitiv belastning hämmar informationsintaget.
7
Förhoppningen har varit att kunna bidra med insikter som kan appliceras på framtida gestaltningar av webbaserad featuregrafik, vilket skulle kunna få betydelse för exempelvis för dagstidningar och undervisningsmaterial.
Frågeställningar:
•
Vilken innebörd får det responsiva formatet för dramaturgi och berättargrepp, avseende en featuregrafik, och innebär det någon inverkan på den avsiktliga läsningen?•
På vilket sätt påverkas bildkomposition av responsivitet?1.3 Avgränsningar
Denna studie har inte inkluderat de gestaltningsmässiga möjligheter som olika teckensnitt kan erbjuda – istället har Adobe Illustrators standardteckensnitt “Myriad Pro” använts undantagslöst i hela layoutlösningen. Texten har främst använts för att på olika sätt komplettera sektionerna med informationsinnehåll snarare än att eftersträva kongenialitet. Dock har storlekar, tjocklekar och färg nyttjats för att skapa varierad visuell hierarki. Även bildernas detaljnivå har begränsats; för att kunna fokusera på frågeställningarna har abstraktionsnivån anpassats till en utformning som på teoretisk grund kan antas fungera för både mobila skärmar och större fullskärmsformat.
Pinch in/out, det vill säga att den zoom-funktion som möjliggör för användaren att få en mer detaljerad bild av specifika ytor i mobila enheter, har också avgränsats i arbetet. Funktionen är vanligt förekommande på exempelvis kartor och skulle sannolikt öppna upp för ett flertal intressanta möjligheter för responsiv bildutformning och associativ läsning. Men med anledning av dess komplexitet gjordes den istället till en avgränsning, då den förmodade arbetsinsatsen inte stod i proportion till tidsramen för denna studie. Med anledning av att olika webbläsares gränssnitt skiljer sig åt, har studien utgått från ett helskärmsläge för Mac Book Pro’s och Mac Book Air’s 13 tums skärmar, samt Iphone 11’s 6,1 tums skärm för det mobila porträttformatet, där komponenter som exempelvis webbläsares adressfält och menysystem har exkluderats helt. Ett ytterligare skäl är att de riktlinjer som uppmärksammas i studien bör kunna tillämpas av flera andra
verksamhetsområden som jobbar med design och layout i förhållande till responsivitet – således är inte en specifik webbläsares proportioner relevanta för potentiella riktlinjer, då dessa villkor påverkas av det enskilda gränssnitt som en artefakt är designad för.
Metoderna har påverkats av den rådande Covid-19 pandemin som bröt ut en kort tid innan denna studie påbörjades och som omöjliggjorde användning av mer tillförlitliga metoder för ögonrörelser.
8
2. Teori
Bild 1 – Teoriöversikt.
2.1 Multimodla medier
Bild och text i samverkan, det multimodala, kommunicerar till människan på ett sätt som kan jämföras med hur vi upplever vår kringmiljö, dvs. det spatiala. Bilder kan förklara sådant som är svårt att överblicka, exempelvis geografiska områden, och de hjälper även till att bekräfta läsarens tolkning av information – vilket har inverkan på den grad av förståelse som läsaren erhåller (Eriksson 2017:37–40).
Bilder hjälper betraktaren att få en omedelbar förståelse för vad som utgör narrativets röda tråd. Text kan klargöra för villkoren och tydliggöra mer abstrakt information. Tillsammans kan de verka för att bibehålla intresset hos publiken, vilket är avgörande för att kunna förmedla en berättelse (Ware 2008:145). Också ordval som används i samband med bilder påverkar hur människor tolkar informationen och ibland kan det till och med vara bättre lämpat att använda sig av abstrakta bildelement för att utesluta möjligheten att läsaren blir vilseledd av bildens eventuella brister (Eriksson 2017:39–40). Mats Ekström (2008:23) skriver om Roland Barthes (1977) som brukar benämnas som semiotikens grundare och enligt Ekström menade att bilder saknar en given innebörd, de är polysema, vilket erbjuder betraktaren att bilda sin egen tolkning av vad bilden kommunicerar. För att reglera detta kan funktionen ankare (ancrage) användas för att tydliggöra den avsiktliga läsningen, vilken innebär att tolkningen av bilden styrs av ordet (Holsanova 2010:53). Ordet fungerar som en pekpinne för att precisera bildens budskap. Relä (relais) kallas den funktion där bild och text varvas och samverkar på en jämställd nivå för att bygga ett narrativ eller få fram ett budskap, den ena kompletterar den andra och
tillsammans bildar en bättre förståelse för budskapet. En explicit relation mellan bild och text resulterar i att läsaren ögnar mellan bild och text i en högre utsträckning och därmed får en mer utvecklad förståelse för informationsinnehållet (Holsanova 2010:53,98).
9
2.1.1 Navigering i multimodala medier
Bilder ersätter i regel inte den textinformation som hör till dessa, vilket också gör att bilder sällan kan ersätta det skrivna ordet. Läsaren letar ofta efter information på ett irreguljärt sätt, särskilt när det kommer till webben, vilket innebär att det som först skannas av är det som syns tydligast (Eriksson 2017:91). En annan aspekt att ta hänsyn till är att en featuregrafik ofta är multisekventiell, vilket innebär att läsordningen inte är förutbestämd, utan istället finns det ett flertal alternativa ingångar för användaren att välja mellan för att komma in i läsningen (Holsanova 2010:19).
Företeelsen, då betraktaren medvetet tolkar narrativet på det sätt som avsändaren ämnat, kallas för avsiktlig läsning. Men ett narrativ erbjuder sällan bara den avsiktliga läsningen, utan påverkas även av kulturella värderingar och denotationer vilka ligger bortom
avsändarens kontroll, och benämns med symptomatisk läsning. Läsaren kan också, genom sin fantasi och kreativitet, skapa egna mönster för att inrätta en individuell tolkning, vilket innebär en adaptiv läsning (Abbott 2008:102). För att säkerställa att den avsiktliga läsningen dominerar narrativet kan visuella hierarkier vara ett effektivt verktyg.
Hierarkier styrs av faktorer som exempelvis färger, former, positioner, typografi och storlekar (Cooper, Reimann, Cronin och Noessel 2014:154–155).
För att betraktaren ska kunna uppfatta (förnimma) avsedd information så krävs något som påkallar uppmärksamheten och gör att det går att tolka (varseblivning) budskapet.
Bildmässigt kan det lösas med hjälp av symboler eller färger (Eriksson 2017:35–36).
Grafiska element tenderar att dra till sig betraktarens uppmärksamhet i ett tidigt skede och
ge en överblick på olika ingångar i informationen, detsamma gäller för stora rubriker och andra tydligt framträdande element (Holsanova 2010:36). Detta brukar gå under
begreppet pop-out effect, som främst styrs av kontrasten mellan olika faktorer som färg, orientering, storlek, rörelse och stereoskopiskt djup och ter sig tydligast då kontrasterna är som störst och kan då urskiljas från omgivningen under loppet av en tiondels sekund (Ware 2008:29). Det påverkar även kompositionens visual interference, som innebär att kontrasten mellan olika objekt måste vara tillräckligt påtaglig för att de ska kunna urskiljas; konsekvensen av objekt som är allt för lika varandra blir en visuell likvidering (Ware 2008:51). Samtidigt innebär biased competition att det som betraktaren aktivt söker efter är det som upplevs som mest framträdande (Ware 2008:26–27).
Lågprocessnivåerna i ögat fäster sig gärna vid de områden i vyn som innehåller säregna
element, vilket kan handla om just former, färger och visuella riktningar. Först när dessa områden har noterats och betraktaren har fått en överblick kan de olika sektionerna undersökas mer detaljerat. Läsordningen styrs även av högprocessnivåer, som utgörs av betraktarens förkunskaper, intressen och förväntningar (Holsanova 2010:70–72). För att underlätta den avsiktliga läsningen kan inramningar (framing) användas; det är en viktig semiotisk princip som gör att betraktaren kan särskilja och strukturera visuella element och göra nödvändiga grupperingar för att lättare förstå budskapet. Visuella gränser, även känt som konturlagen, kan göras med både synliga tonplattor eller linjer, men också med hjälp av layoutmässiga linjeringar och tomrum. I anknytning till detta kan
”den goda kurvans lag” omnämnas, vilken innebär att rundade former och riktningar är
mer framträdande än vertikala och horisontella (Ekström 2008:28, Holsanova 2010:95, Eriksson 2017:64). Föremål som liknar varandra kategoriseras ofta in i samma grupp, enligt likhetslagen, trots att likheten inte behöver vara särskilt stor. Men upplevelsen av likhet blir större om den står i kontrast till andra föremål som inte alls liknar de element som har grupperats (Eriksson 2017:64). Vidare finns närhetslagen som innebär att föremål som är fysiskt nära varandra kan antas höra samman, men dessa kan också brytas om betraktarens förkunskaper innebär en motsättning till objektens samhörighet; Yvonne Eriksson (2017:64) anger kroppsspråk som ett tydligt exempel, där gester och miner kan
10
förmedla något annat än det verbala budskapet. Närhetslagen hjälper till att koppla ihop olika element i multimodala medier, vilket innebär en minskad kognitiv belastning för läsaren (Holsanova 2010:94).
Jana Holsanova (2010:51–52) refererar till sociosemiotikerna Gunther Kress och Teo van Leeuwen (u.å.) som har tagit fram en teoretisk modell som presenterar
informationsvärden i förhållande till komposition:
“… den generella informationen återfinns överst och den mest specifika informationen underst, den givna informationen till vänster och den nya till höger, samt den viktigaste informationen i centrum och den mindre viktiga informationen i periferin.”
Holsanova (2010:51–52) belyser dock problematiken för dessa riktlinjer när det kommer till webbaserad läsning, då användaren inte får samma möjlighet till överblick och därför tvingas scrolla sig genom informationen. Vidare skriver Holsanova att Kress & van Leeuwen betonar vikten av att använda färger, kontraster och relativa storlekar för att uppnå visuellt framträdande element, samt att linjerna utgör en viktig del i att bilda semiotiska rum och hjälpa läsaren att koppla ihop olika element.
2.2 Ögonrörelser och läsordning
Människan läser information styckvis, det är en “selektiv sekventiell aktivitet”
(Holsanova 2010:136). Först krävs en överblick av den befintliga informationen, sedan kan betraktaren fördjupa sig och även i själva fördjupningen sker ett urval som är beroende av individuella preferenser.
Fragmenterad läsning blir ibland ett problem, användaren hittar inte alltid det den söker
eftersom ingångarna är för många. Att läsningen har utformats mer fragmenterad än linjär har ökat successivt under de senaste århundradena, i ett försök att försöka attrahera en så bred målgrupp som möjligt, men det har inte skett utan konsekvenser; ansvaret för hur narrativet ska tolkas har i en allt högre utsträckning har lagts på betraktaren och kan därför lätt orsaka svårigheter att påverka läsningen (Holsanova 2010:88–89). Ett sätt att lugna ner ögonrörelsemönstret är att begränsa användningen av klara kulörer genom att tona ner områden som är mindre viktiga och istället endast använda de starkare färgerna då något ska framhävas extra tydligt. Människan är programmerad att snabbt kunna läsa av en vy för att upptäcka föremål som kan vara av intresse; en medfödd vaksamhet för att bland annat kunna upptäcka faror i tid. Om kulörer används allt för frekvent så är det betydligt svårare för hjärnan att avskriva mindre intresseväckande delar i vyn, vilket bidrar till ett mer oroligt ögonrörelsemönster, då blicken inte kan fästas på flera punkter samtidigt (Cairo 2013:104–105).
Kompositionen i en bild är beroende av hur de olika bildelementen är fördelade. Det är vanligt att diagonala riktningar upplevs som mer dynamiska, än de som följer en horisontell eller vertikal riktning, eftersom de utgör en spänning i förhållande till ramen på ytan (Eriksson 2017:66).
11
2.3 Webbaserad interaktion och navigering
När det kommer till webbaserade gränssnitt så handlar det ofta om att användaren vill få reda på information så friktionsfritt som möjligt och väljer därför alltid de enklaste och tydligaste vägarna för att navigera sig vidare i informationen. Det kan tänkas ha kopplingar till att webbaserad läsning ofta sker “i farten” och att användaren känner sig därför mer otålig än när det kommer till ett analogt format som exempelvis en
papperstidning. Därtill finns det en problematik med alla valmöjligheter som användaren står inför och det är svårt att få en överblick av strukturen på webbsidan, vilket gör att användaren ofta hellre återvänder till startsidan än att fördjupa sig ytterligare (Holsanova 2010:137).
För att underlätta för användaren ska en produkt alltid präglas av excise, vilket innebär att minimera den kognitiva, visuella och fysiska beskattning som användaren utsätts för och således ska designen, i mesta möjliga mån, vara intuitiv (Cooper m.fl. 2014:271–272). Det kan antas att principen "less is more" är den givna lösningen för att göra en webbaserad layout lättnavigerad och uppmuntra till interaktion, vilket Cooper m.fl. (2014:251) nämner i en punktlista för “Harmonious Interactions”. Vidare betonas vikten av att hålla nere antalet olika vyer för att underlätta den interaktiva navigationen, en riktlinje är att aldrig addera fler vyer än absolut nödvändigt och därtill undvika scrollfunktioner i mesta möjliga mån, vilket även inkluderar panoreringar och zoomningar. Istället bör den visningsyta som finns tillgänglig nyttjas så långt det är möjligt eftersom ett överflöd av funktioner snarast upplevs som en kognitiv belastning (Cooper m.fl. 2014:286). Det finns verktyg att ta till för att komma runt problemet med bristen på översikt, ett exempel är indikatorer som visar användaren hur många vyer som återstår, var denne för närvarande befinner sig och hur mycket som har avverkats (Cooper et al. 2014:289–290). Förväntningarna på produkten kan också underlättas av dess
posture, vilket innebär presentationen av ett gränssnitt, som utgör den grund som
användarvänligheten baseras på. Utseendet påverkar användarens inställning till produkten och får en avgörande betydelse för funktionaliteten och innebär att
framgångsrika konventioner och riktlinjer bör följas för att inte orsaka onödig förvirring (Cooper m.fl. 2014:206–207). Detta kan relateras till affordance, som handlar om relationen mellan individen och produkten, vilket bidrar till att möjliga
användningsområden av en produkt kan uppstå och att användaren därigenom kan agera på dessa (Norman 2013:11, Holsanova 2010:90). Men vad ett föremål har att erbjuda (affordance) är inte alltid påtagligt, vilket också påverkar formgivningen av en produkt. Genom att synliggöra ett användningsområde har formgivaren skapat en signifier som uppmuntrar en viss typ av interaktion (Norman 2013:13). Att nyttja visuella ledtrådar kan hjälpa betraktaren att orientera sig i multimodal information och således bidra till en djupare förståelse och inlärning (Holsanova 2010:91).
Co-referens är ett begrepp som handlar om kontinuitet och det ökar chanserna för att
informationen tolkas på avsett vis; genom eftertanke och noggrannhet avseende placeringar, färgkoder och eventuella värden i exempelvis x- och y-axlar för olika diagram (Eriksson 2017:113–114). Det kan kopplas till rekommendationen kring provide
signposts från Cooper m.fl. (2014:286–289) som menar att beständiga referenspunkter i
form av en bibehållen grundlayout gör att den kognitiva belastningen blir mindre och navigationen underlättas, även om designen i övrigt bör ha variationer för att bibehålla användarens intresse.
12
2.4 Bildkomposition och detaljnivå
Tema och motiv är två termer som samspelar i ett narrativ för att skapa dramaturgi, där
temat står för det abstrakta och motivet för det mer konkreta (Abbot 2008:95). Det kan tolkas som att berättelsens syfte är temat, medan motivet utgörs av de bilder som styr läsordningen och således bekräftar temat.
När det kommer till igenkänning av olika komponenter i en bild så sker detta utifrån formen på olika element, snarare än färger och texturer. Former uppfattas på grund av att människan upplever osynliga konturlinjer precis i brytpunkten mellan olika
kontrasterande ytor (Eriksson 2017:28). Ytor i abstrakta bilder, exempelvis tvåfärgade piktogram, resulterar i att ögat antingen fokuserar på förgrund eller bakgrund och påverkar betraktarens tolkning av bilden (Eriksson 2017:65). Perceptionen styrs med hjälp av gestaltpsykologiska principer som gör att ögat och hjärnan uppfattar bilder i förhållande till den kontext som de befinner sig i (Wærn, Pettersson och Svensson 2004:20). Utifrån detta kan det antagas att färger och texturer inte spelar en lika viktig roll för perceptionen som form och kontext gör. Bilder kan produceras med hög eller låg
ikonicitet, det vill säga i vilken grad som bilden efterliknar det verkliga föremålet, där låg
ikonicitet gäller mer abstrakta bilder. Betraktare som har goda förkunskaper gällande det föremål som ikonen ska representera har större förutsättningar att tolka dess innebörd, vilket innebär att en lågikonisk bild ändå bör ha en tillräcklig god detaljnivå för att den ska vara möjlig att tolka på avsett vis. Ett bra exempel som oftast fungerar är människans ansikte, där en mun och två ögon räcker för att kunna förmedla olika känslolägen
(Eriksson 2017:29–30). Å andra sidan erbjuder abstraktion en bättre möjlighet till fokusering, eftersom det finns mindre visuellt brus som stör läsningen (Holsanova 2010:74). Symboler fungera ofta som indikatorer för en direkt handling, exempelvis i fallet med trafikskyltar. Men dessa behöver läras in, likt det verbala språket för att användaren ska kunna göra den direkta kopplingen till budskapet (Holsanova 2010:46).
13
3. Metod
Den huvudsakliga metoden för att försöka besvara frågeställningen har varit en iterativ designprocess, vilket är ett utforskande tillvägagångssätt där artefakten successivt optimeras med hjälp av olika metoder (Nielsen 1993). För denna designprocess har det inneburit ett flertal tillvägagångssätt som presenteras i detta avsnitt.
Bild 2 – Metodöversikt.
3.1 Artefaktanalys
Artefaktanalys är en metod som kan användas för att systematiskt utvärdera egenskaperna hos en produkt (Martin & Hanington 2012:14). Det finns flera olika aspekter att
undersöka med denna metod, men för det här fallet hade en estetisk och interaktiv analys av artefakten högst relevans. Artefakterna i den här analysen åsyftar ett flertal responsiva webbsidor med exemplifierande utformningar; för att öka tillförlitligheten användes enbart förmodat välkända webbsidor. Dessa hittades med hjälp av en Google-sökning, den 31 mars 2020, som bland annat gav en träff på IDG:s (Insights, Intent and
Engagement) topplista från år 2019, där olika kategorier av framgångsrika webbsidor presenterades. Vissa av webbsidorna valdes ut slumpartat och andra subjektivt utifrån igenkänning, det enda kriteriet var att merparten kunde tänkas innehålla mycket bilder. Urvalet av webbsidor från IDG:s topplista bestod av följande:
• Aftonbladet • Expressen • SVT Nyheter • Omni • ICA • Försäkringskassan
De kompletterades sedan med en samling webbsidor som valdes efter personliga preferenser och vanor:
• Dagens Nyheter • Coop
• CSN • Google
14
Slutligen adderades två sidor som kunde tänkas innehålla visuellt material som påminde om en featuregrafik:
• National Geographic • Illustrerad Vetenskap
Samtliga sidor besöktes parallellt från både en fullskärm och en mobil enhet för att säkerställa att de olika formatens innehåll överensstämde. Skärmvyerna dokumenterades med hjälp av skärmdumps-funktionen på respektive enhet. Därefter fördes materialet in i Adobe Illustrator för att kunna skapa en överblick och jämföra hur layouterna tedde sig i de olika formaten. Materialet kategoriserades i tre olika grupper; liten skillnad, medelstor skillnad och stor skillnad. Det gjordes även en uppskattad beräkning av antalet celler i det underliggande rutnät som höll webbsidornas innehåll på plats, genom att rita upp
symmetriska rutnät direkt på skrämdumparna i Adobe Illustrator.
3.1.1 Resultat från artefaktanalys
Utifrån de olika kategorierna, som redogjorde för de layoutmässiga skillnaderna mellan fullskärmsformat och mobilt porträttformat, valdes tre exemplifierande bilder ut; ICA, Dagens Nyheter och CSN.
Bild 3 – Skärmdumpar för artefaktanalys (hämtade 31 mars 2020).
Layoutlösningen för ICA:s webbsida innehöll stora skillnader där mycket av innehållet hade fått en helt ny ordning i det mindre formatet. Utseendet hölls ihop med hjälp av färger och symboler, men den mer associativa läsningen på fyra kolumner som syns i fullskärmsformatet hade omvandlats till ett linjärt berättande i det mobila
porträttformatet, där bilden längst till vänster istället placerats högst upp i den sektionen. Dagens Nyheter utgjorde en medelstor skillnad mellan formaten, där en layoutlösning tycktes bestå av tre kolumner i fullskärmsformatet jämfört med en kolumn i det mobila porträttformatet. I det större formatet var bilden placerad över två av kolumnerna och den tillhörande texten hade placerats strax under – även om det inte framgår i skärmdumpen då annonsen för Porsche tog upp en del av skärmytan och orsakade en viss förskjutning. Den tredje kolumnen innehöll notiser för andra nyheter. I det mobila porträttformatet var bild och text placerade i samma ordning, men utan den utrymmeskrävande annonsen. CSN:s webbsida utgjorde ingen påtaglig skillnad mellan de olika formaten,
layoutlösningen bestod av ett linjärt berättande i båda fallen.
Efter att ha jämfört olika layoutversioner uppskattades en fullskärmsvy bestå av ett rutnät på 9 x 5 cellermedan den rådande standarden tycktes bestå av ca 6 x 5 celler. I den mindre layoutversionen centrerades innehållet och lämnade mycket tomrum på både vänster och höger sida, vilka med stor sannolikhet skulle kunna nyttjas på ett mer effektivt sätt och erbjuda helt andra förutsättningar gällande bildkomposition och läsordningar.
15
Bild 4 – Rutnät på skärmdumpar (hämtade 31 mars 2020).
3.2 Prototyping
Prototyper kan användas för att studera olika hypoteser kring funktionalitet och
gestaltning. De kan skapas i olika skeden under designprocessen och bidra med värdefulla insikter som kan påverka utformningen av den slutgiltiga artefakten (Martin & Hanington 2012:138). Upplägget har i detta fall varit att utforma en prototyp, exponera den för en virtuell testgrupp och slutligen har insamlad data utvärderats för att undersöka olika aspekter kring hur en responsiv featuregrafik kan gestaltas.
3.2.1 Skissarbete
Det första skissutkastet baserades på en hypotes om att en responsiv lösning skulle kunna innebära att designen byggs upp med hjälp av responsiva bilder, vilket i sin tur skulle innebära att layoutlösningen blir responsiv i två led. Dels att olika element förflyttas och anpassas efter olika format, det vill säga användarens enhet, dels att också bildernas detaljnivå styrs av dessa; ju mindre skärm, desto högre abstraktionsnivå på bilderna. Tanken var att det skulle kunna bidra med en överblick som kan korrelera bättre med en layout som är anpassad för fullskärmsformat, genom att färger och komposition i mesta möjliga mån bibehölls. Det skulle även öppna upp för olika interaktionsmöjligheter som skulle kunna bidra med nya informationslager avseende det mindre formatet.
16
Bild 5 – Den första idén.
För den större layoutlösningen skulle de olika sektionerna alltså kunna anpassas efter samma riktlinjer och principer som gäller för en konventionell utskriven featuregrafik och de mindre formaten skulle då, i så stor utsträckning som möjligt, styras av samma
principer – fast med hänsyn till fysiska och perceptuella begränsningar. Vid ett tillräckligt litet format skulle bilderna omvandlas till symboler och även fungera som knappar, vilka kunde leda läsaren vidare till mer fördjupad information. Knapparna avsågs bli placerade så nära användarens tumme som möjligt för att inte orsaka onödig fysisk beskattning, då webbaserad interaktion alltid ska eftersträva minimalt arbete för användaren (Cooper m.fl. 2014:271–272). Problemet med detta första designförslag visade sig främst vara att porträttformatet för en mobil i regel utgörs av ett rutnätssystem med endast en kolumn (se
3.1.1 Resultat från artefaktanalys), vilket gör att det blir svårt att skapa en allt för
komplex layoutlösning och då i princip tvingar läsordningen att bli linjär. Det är dock högst väsentligt att förhålla sig till ett mobilt porträttformat i designprocessen eftersom det, i dagens läge, är ett av de vanligaste formaten och enheterna som används för att besöka och interagera med olika webbplatser (Cooper m.fl. 2014:225). Porträttformatet torde vara det minst optimala formatet om grunddesignen är anpassad för en horisontell fullskärm och det skulle innebära att layouten måste planeras efter hur den kommer att se ut i mobilt porträttläge, trots att det kan antas att en designer i regel jobbar vid en
horisontell och fullstor skärm.
Bild 6 – Skissprocess för fullskärmsformat.
Den första, mer fokuserade, skissen på själva innehållet i layoutlösningen utformades efter noggrann research i det valda ämnet, i det här fallet småskalig odling.
17
Visualiseringarnas individuella gestaltningar och kompositioner skulle komma att påverka det grundläggande layoutarbetet, då utformningen av de olika sektionerna avgjordes beroende av mängden information som varje enskild sektion skulle förmedla. I det här skedet fick färgerna stå tillbaka, istället användes huvudsakligen enkla svarta linjeteckningar för att försöka bygga upp ett narrativ som dels skulle följa ett tema samt rent storleksmässigt skulle kunna fungera i de olika formaten. Skissen anpassades för ett fullskärmsläge på 9 x 5 celler, eftersom de proportionerna ansågs som det mest optimala sättet att utnyttja ytan (se 3.1.1 Resultat från artefaktanalys). Med anledning av att Webflow, som är den webbutvecklingsplattform som avsågs att användas längre fram i projektet (se 3.4 High-Fidelity Prototyping), bygger på ett rutnät för att sortera in olika sektioner i layouten, så applicerades samma struktur i skissen. Det förenklade arbetet med att kunna hålla isär de olika sektionerna och samtidigt planera för hur en potentiell layoutlösning skulle te sig. Nackdelen var att bildkompositionen begränsades av proportionerna; men för att de olika sektionerna skulle kunna fungera för ett responsivt format så tycktes det ofrånkomligt att göra en förhållandevis stram layoutlösning. Placeringen av de olika sektionerna anpassades i mångt och mycket efter odlingsårets cykel medan dynamik och informationslager i bilderna prioriterades med hänsyn till det uppskattade värdet i informationen. Detta värde gestaltades med hjälp av
storlekshierarkier. Det blev tydligt att det första utkastet krävde mer storlekskontraster för att förstärka problematiken i att översätta läsordningen till ett linjärt berättande, genom att våga ta ut svängarna ytterligare antogs det att stridigheterna mellan de olika formaten skulle visa sig tydligare.
Nästa steg i skissarbetet var att påbörja en layoutlösning för ett mobilt porträttformat, för att undersöka vilka skillnader som skulle bli mest framträdande i förhållande till den horisontella layouten. Eftersom odlingsåret är linjärt föll det sig naturligt att nyttja dess följd för att erbjuda betraktaren en mer intuitiv förståelse för narrativets handling. Här föddes en idé om en rullgardinsfunktion för varje månad, för att erbjuda betraktaren en översikt på odlingsåret och samtidigt valmöjligheten att kunna ta till sig mer utförlig information genom interaktion – en tanke som hängt kvar sedan den första idén
formulerades i början på detta avsnitt. Att kunna ge en enkel och komprimerad överblick är särskilt viktig för en mobil enhet, som kan användas i alla möjliga situationer. Därför måste kognitiv, visuell och fysisk beskattning minimeras för att underlätta användarens möjligheter att kunna orientera sig i materialet; i det här fallet skulle årets månader kunna fungera som ändamålsenliga indikatorer (Holsanova 2010:137, Cooper m.fl. 2014:271– 272, 289–290). Att omvandla odlingsåret till en enkel rullgardinsmeny, enligt principen “less is more”, och använda denna som en bas torde uppfylla dessa riktlinjer eftersom det är vedertaget att ett år består av 12 månader och när menyn är hopfälld minimeras användarens fysiska arbete gällande onödig scrollning (Cooper m.fl. 2014:251, 286).
18
Rullgardinsfunktionen är en vanlig navigationslösning för mobila enheter, men kan ofta vara dold i en menysymbol med låg ikonicitet, utformad med hjälp av tre horisontella streck (även kallad ”The hamburger menu”), vilken fungerar som en signifier och afforderar interaktion förutsatt att användaren har rätt förkunskaper och kan tolka dess betydelse (Cooper et al. 2014:535, Norman 2013:11, 13, Holsanova 2010:90, Eriksson 2017:29). Det är inte omöjligt att en sådan lösning också skulle kunna vara ett bra alternativ, då symbolen tycks vara relativt frekvent använd och gränssnittets posture bör stämma med de förväntningar som användaren har när denne navigerar sig i en mobil enhet (Cooper et al. 2014:206–207).
Till sist skapades även en layoutskiss för ett ytterligare fullskärmsformat, men då användes istället proportionerna 6 x 5, för att undersöka om detta format skulle visa sig ha några intressanta fördelar och som då hade förbisetts under artefaktanalysen.
Under skissarbetet uppstod även frågetecken kring varför den associativa featuregrafiken har så många ingångar, när Jana Holsanova (2010:102–103) dessutom belyser det faktum att läsupplevelsen blir mer tydlig och koncentrerad för användaren när berättandet är seriellt. Å andra sidan medför detta att läsaren tvingas till en kronologisk läsordning, vilket kan antas tröttande på grund av att människor ofta föredrar att läsa information i en ordning baserad på personliga preferenser, särskilt då det handlar om mycket information (Holsanova 2010:136). Därav kan det antas att det är mer gynnsamt att använda ett seriellt berättande för mer komplexa områden, vilka måste bearbetas i en kronologisk ordning, men det kan också tänkas att det är ett mer effektivt berättargrepp för mobila enheter där det blir betydligt svårare att förutsäga användarens kringmiljö. Det blir då logiskt att designa en layoutlösning efter hypotesen om att denne befinner sig i en vardaglig situation där relativt mycket socialt brus påverkar kognition och perception.
3.3 Utprovning och virtuell testgrupp
Trots ett relativt omfattande teoretiskt underlag för projektet så uppstod det en viss obeslutsamhet angående vilka teorier som bäst kunde nyttjas för gestaltningen av en responsiv featuregrafik. För att försöka bilda en bättre förståelse för hur den avsiktliga läsningen skulle kunna framhävas, användes en kraftigt förenklad ögonrörelsemätning där sju testpersoner fick titta på de två större layoutskisserna. Denna delmetod baserades löst på usability testing som används för att testa prototypens användbarhet i en testgrupp i syfte att därefter kunna utvärdera prototypens styrkor och svagheter (Martin & Hanington 2012:194). Testpersonerna informerades på förhand om undersökningens syfte och att deras svar skulle utgöra data för denna studie, men också att de till följd av
forskningsetiska skäl skulle förbli anonyma; rekommendationerna är att insamlad data från deltagare ska behandlas konfidentiellt (Denscombe 2018:441).
19
Innan testgruppen involverades ritades en egen uppfattning av läsordningen upp på ett separat dokument, i huvudsak baserad på storleks- och färghierarkier, för att kunna jämföra testpersonernas resultat med den förmodade läsordningen. Testgruppen valdes ut slumpmässigt, krasst baserat på de personer som fanns närmast till hands. För två av personerna skedde testet på dator i fullskärmsläge och för resterande fem skedde testet i deras mobiltelefoner och hölls då i horisontalläge. Avsikten med metoden var att utröna i vilken ordning testpersonerna själva upplevde att de läste av layouten. Testpersonerna instruerades på förhand att försöka titta på prototypen så förutsättningslöst som möjligt, men att också observera var blicken först fick fäste för att därefter dra en linje över ytan i den ordning som de upplevde att de tittade på respektive layout. De insamlade
testresultaten kalkerades av i Adobe Illustrator och de olika sektionerna i layoutskisserna, som var berörda av linjedragningarna, numrerades i turordning.
Bild 9 – Testpersonernas upplevda läsordning.
3.3.1 Analysera data
För att analysera insamlade data från utprovningen skapades en heatmap som redogjorde för antalet överensstämmande sektioner i läsordningen och gav en möjlighet att studera olika trender. En heatmap är ett visuellt verktyg som används för att strukturera upp större mängder data. Genom att färgkoda cellerna i ett rutnät kan betraktaren få en snabbare och mer intuitiv överblick avseende olika trender. Det är vanligt att använda olika nyanser av samma kulör för att kunna utmärka trenderna, där höga värden ofta representeras med de skarpaste kulörerna (Mollerup 2015:108). Sektionernas namn fick kortas ner i heatmapen av praktiska skäl. De sektioner som fick en tydlig majoritet av sammanfallande nummer i läsordningen utgjorde sedan underlaget för en sannolik läsordning; ett exempel på detta är sektionen “Vad blir det till middag?” som fyra av de sju testpersonerna upplevde som sektion nummer två i läsordningen, gällande layoutlösningen med nio kolumner.
20
Det sammanställda resultatet i heatmapen kunde sedan användas för att rita upp den sannolika läsordningen i layoutskisserna och därefter jämföras med den egna
uppfattningen av läsordningen. Genom att lista uppgifterna blev det tydligt vilka element i de olika formaten som matchade, både avseende den sannolika läsordningen kontra den egna uppfattningen samt mellan de olika formaten. När alla trender hade räknats samman visade det sig att en del av sektionerna hade två eller fler olika numreringar av samma antal, vilket löstes med närhetsprincipen för att kunna göra en rimlig uppskattning av hur den sannolika läsordningen tedde sig; det vill säga det visuella element som rent fysiskt låg närmast i förhållande till det element som läsordningen stannat vid dessförinnan. Med anledning av detta markerades också en alternativ läsordning i heatmapen.
Bild 10 – Heatmap baserad på användarnas upplevda läsordning.
3.3.2 Resultat från utprovning, virtuell testgrupp och heatmap
Resultatet från utprovningen visade att de olika formaten hade en tillräckligt likvärdig layoutlösning för att betraktaren intuitivt skulle tolka rubrik- och ingressdelen samt odlingsåret som huvudsakliga ingångar till informationen, med andra ord upplevdes layoutlösningarna som multisekventiella redan i skisstadiet då de erbjöd flera ingångar till läsning (Holsanova 2010:19). Det kan antas bero på hierarkiska faktorer i form av
storlekskontrast gällande odlingsåret, som rimligtvis lär ha varit den första fixeringspunkten oavsett om testpersonerna var medvetna om det eller inte, och färgkontrast gällande ingressdelen, eftersom dessa, i enlighet med pop-out effect, drar uppmärksamheten till sig (Ware 2008:29). Men den resterande läsordningen av de olika formaten överensstämde inte med den förmodade läsordningen och testresultaten gav dessutom intryck av att testpersonerna upplevde det som svårare att hitta en naturlig
21
läsordning i layoutlösningen med sex kolumner. Det kan tänkas bero på fragmenterad läsning; eftersom den mindre layoutlösningen var mer kompakt är det sannolikt att det försvårade navigationen och möjligheten att hitta givna ingångar till de olika sektionerna, vilket kan ha föranlett ett inkonsekvent ögonrörelsemönster (Holsanova 2010:88–89). En ytterligare förklaring skulle kunna vara en form av visual interference, då de flesta sektionerna i det här skedet fortfarande utgjordes av linjeskisser och var relativt svåra att särskilja från varandra med hjälp av andra hierarkier än dess storlekar. Olika objekt har en tendens att flyta samman om kontrasten mellan dem är för svag (Ware 2008:51).
Bild 11 – Sannolik läsordning.
Bild 12 – Jämförelse mellan olika läsordningar.
Däremot fick den sannolika läsordningen av featuregrafiken en relativt god
överensstämmelse mellan de olika formaten, där läsordningen i båda fallen började med ingressen, i mitten rörde sektionerna “Bär”, “Lagra grönsakerna” och “Svenskarnas favoritgrönsaker” samt framåt slutet av läsningen tangera sektionen “Drivbänkar”. Anledningen till detta kan antas bero på den fysiska närheten mellan sektionerna, där relationerna underlättar läsningen, men också på grund av hierarkiska faktorer som färgsättning och densitet, som drar till sig läsarens uppmärksamhet och medför en effektivare tolkning av informationen (Holsanova 2010:94, Eriksson 2017:35–36).
22
Resultatet tycktes också stämma relativt väl med Nielsens (2006) teori om att betraktaren läser av skärmen likt formen på bokstaven F och därför fick den sannolika läsningen bli ett, om än blygsamt, hjälpmedel i gestaltningsprocessen.
3.4 High-Fidelity Prototyping
Efter resultatsammanställningen från utprovningen delades de olika layoutskisserna upp i lösa sektioner och exporterades som enskilda PNG-filer, för att kunna undersöka hur de skulle bete sig i Webflow. Genom att testa en prototyp under reella förhållanden kan fokus också läggas på att utvärdera dess funktionalitet i det avsedda gränssnittet (Pernice 2016). Webflow är en av många webutvecklingsplattformar som erbjuder möjlighet att arbeta med responsivitet. Det har varit ett användbart verktyg för att plattformen inte ställer krav på programmeringskunskaper, istället kan visuella element appliceras rakt på duken i editeringsläget där olika rutnätssystem håller materialet på plats (Webflow 2020). Sektionerna för de båda större layoutskisserna, med nio respektive sex kolumner,
placerades i varsitt rutnät och skärmformat i Webflow i enlighet med den planerade ordningen. Under testet uppstod dock ett problem med visningsvyn som medförde att antalet celler behövde övervägas på nytt. Det visade sig att nederdelen av layouten inte fick plats utan skulle medföra att användaren blev tvungen att scrolla sig nedåt för att se dessa sektioner till fullo. Eftersom det skulle innebära en nästintill löjligt blygsam insats från användaren och därtill inte ens generera en helt ny vy, så var det ett tydligt exempel på en situation där användaren utsätts för fysisk och kognitiv beskattning helt i onödan (Cooper et al. 2014:271–272). Därför blev det nödvändigt att avgränsa vilken
skärmstorlek som de större layouterna skulle vara anpassade för.
23
Webflow erbjöd en fullskärmsstandard som utgick från Mac Book Pro’s samt Mac Book Air’s 13 tums skärmar, vilket utgör 1440 x 900 px. Genom att studera en skärmdump, av Google Chrome från en Mac Book Pro, visade det sig att det även på den skärmen
försvinner en stor del av den femte raden i ett symmetriskt rutnät med 9 x 5 celler; således borde layouten göras mer horisontellt avlång än de prototyper som dittills hade testats. Genom att rita upp ett nytt rutnät direkt på skärmdumpen i Adobe Illustrator var det möjligt att räkna ut att det optimala rutnätet borde bestå av 23 x 12 stycken celler, förutsatt att layoutlösningen skulle kunna synas i sin helhet direkt i webbläsaren. Men eftersom utformningen av olika webbläsare kan skilja sig åt, både beroende på val av webbläsare och även av användarens personliga inställningar i webbläsaren, så fanns det till syvende och sist bara två tydliga alternativ att välja mellan; antingen att fortsätta arbeta med 9 x 5 stycken celler eller göra en lösning för just Mac-datorernas helskärmsläge, utan att ta hänsyn till webbläsaren eventuella meny och andra kringliggande element, vilket då skulle innebära en layout för 8 x 5 stycken celler.
Bild 14 – Skrämdump från Mac Book Pro.
Valet föll tillsvidare på det senare alternativet eftersom skisserna på layoutlösningarna hade innehållit relativt många sektioner och layouten antagligen skulle få en relativt hög densitet när själva bilderna skulle bearbetas med färg, detaljnivå och vidare komposition. Genom att minimera antalet celler blev det även lättare att lägga in de olika sektionerna i en strukturerad ordning och anpassa dess storlekar efter informationsvärdet; därtill gav det utrymme för mer fördjupad information i den större layoutlösningen på åtta kolumner, vilket argumenterar för att en större vy erbjuder fler möjligheter till visuellt berättande än layouten med sex kolumner. Även om det senare alternativet kan antas vara en
konventionell standard utifrån resultatet från artefaktanalysen, så har det fortsatta designarbetet baserats på uppfattningen om att en fullskärmslayout är det optimala alternativet för att skapa en webbaserad featuregrafik. Informationsinnehållet måste reduceras i layoutlösningen med sex kolumner om hela featuregrafiken ska synas på samma gång, vilket tyder på att en designer redan på förhand måste besluta sig för om
24
featuregrafiken ska visas i en full vy på åtta–nio kolumner eller om den ska vara anpassad för sex kolumner, för att därefter kunna planera informationsinnehåll och gestaltning. Det fanns också skäl att tänka om gällande storleksvariationer på de olika sektionerna, då bilderna ändå var begränsade till så pass små ytor så fanns det ingen uppenbar anledning att hämma möjligheten till rimliga bildkompositioner ännu mer. Detta föranledde att sektionerna delades upp i fyra olika storlekar, där majoriteten utgjordes av ett 2 x 1 format.
Bild 15 – Före och efter visuella avgränsningar.
Ett ytterligare test i Webflow gjordes när det var dags att färdigställa det mobila porträttformatet vilket, förutom anledning till en hel del finjusteringar gällande
teckenstorlekar och linjeringar, gav en del intressanta insikter. Bland annat visade det sig att några sektioner flöt samman med varandra och gav ett rörigt intryck, vilket skulle kunna avhjälpas med exempelvis färgade tonplattor eller visuella avgränsningar. Vissa element tycktes försvinna helt med anledning av den diskreta färgsättningen, som i det nya formatet hade fått en ny placering och inte längre var verkade enligt samma teorier som de gjort i den fullstora layoutlösningen. Odlingsårets nya utformning lämnade luckor i gestaltningen, vilket erbjöd en ytterligare möjlighet till att utforma mer visuellt material som skulle kunna bidra med associationer till odlingsåret; med anledning av att det inte längre gick att få en cirkulär överblick. Slutligen gjordes en notering kring hur många skärmvyer som kunde passeras genom att dra med tummen i en vertikal rörelse över skärmytan, vilket visade sig bero på vilken hastighet som rörelsen utfördes med. En snabbare rörelse genererade en snabbare scrollning och resulterade i en uppskattning av att den längsta scroll-sträckan var två skärmvyer i ett svep.
25
3.5 Metodkritik
Artefaktanalysen avgränsades till att bara visa den första vyn på respektive webbsida, det är möjligt att skillnaderna ter sig annorlunda när användaren navigerar sig vidare på webbsidan.
Utprovningen innehöll ett flertal brister. Både metoden samt urvalet av deltagarna skedde utifrån tillgänglighet med hänsyn till den rådande Covid19-pandemin. Ett mer tillförlitligt ögonrörelsetest hade av många anledningar varit optimalt, men på grund av
forskningsetiska skäl tillika samhällsansvar har testpersonerna inte ombetts att utsätta sig själva och andra för den exponering som det skulle ha medfört. Till följd av detta utförde majoriteten av deltagarna testet på en mobilskärm, då de inte hade tillgång till den fullstora datorskärm som de två layoutlösningarna var anpassade för. En användarens upplevda läsordning ska heller inte förväxlas med den faktiska läsningen och därför bör resultatet enbart tolkas som en fingervisning. Det finns dock forskning kring testpersoners förutsättningar att bidra med pålitliga självrapporteringar som lett till positiva resultat, även om mätningarna inte handlar om samma metod som gjordes för den här rapporten så kan det ändå vara en intressant aspekt att väga in i metodkritiken (Albert & Tedesco 2010). Metoden borde också kombineras med en mer kvalitativ metod för att säkerställa orsakerna bakom testpersonernas upplevelser, exempelvis genom strukturerade eller semistrukturerade intervjuer. Ett frågeformulär skulle ha kunnat fungera som ett
komplement till användartesterna, eftersom det kan vara svårt att virtuellt observera hur testpersoner interagerar med prototypen. Ett frågeformulär kan göras kvalitativt, med utrymme för testpersonernas egna ord, eller vara förkodade och således bidra med kvantitativa data (Denscombe 2018:257). Att på egen hand analysera testresultaten har därmed sina påtagliga brister, då det inte går att redogöra för hur testpersonerna har tänkt medan de utfört uppgiften.
26
4. Resultat
För att kunna designa en mer färdigställd layoutlösning, som följer en likartad läsordning i de olika formaten, användes testresultaten från den sannolika läsordningen som ett stöd; där den fick verka som en grund för att kunna formge den avsiktliga läsningen på ett skäligt vis. Dessa resultat antydde trots allt att testpersonerna hade läst av de olika sektionerna relativt lika till en början; vilket kan antas ha sin förklaring i någon kollaboration mellan storlekshierarkier, färghierarkier och västerländsk läsordning. De sektioner som tycktes skapa mer oreda än vad de bibehöll narrativets röda tråd
eliminerades, vilket resulterade i att det blev en del utrymme över i layoutlösningen med åtta kolumner. Sektionerna anpassades också till mer regelbundna proportioner, där majoriteten utgjordes av ett 2 x 1 format, eftersom det skulle kräva mindre justeringar gällande bildkomposition när de olika sektionerna översattes till ett mindre format.
Bild 16 – Jämförelse mellan 3 x 1 format samt 2 x 1 format.
För att öka sannolikheten för att bilderna ska kunna fungera i ett mindre format har de illustrerats relativt abstrakt. Bilder som är abstrakta kan förvisso hämma tolkningen då den står i relation till betraktarens förkunskaper, men gestaltpsykologisk teori menar att förståelsen för abstrakta bilder är beroende av den kontext de befinner sig i (Eriksson 2017:29–30, Wærn et al. 2004:20). Detta antyder att om temat för en featuregrafik är tillräckligt tydligt eller allmänt vedertagen så kan målgruppen relatera till innehållet vilket gör att abstrakta bilder blir mer gångbara. Då igenkänning av ett objekt är beroende av dess form har majoriteten av illustrationerna influerats av flatdesign, som är ett manér anpassat för responsiva format och handlar om att framställa bilder på ett så enkelt vis som möjligt genom att reducera upplevelsen av volym (Interaction Design Foundation 2019). Bakgrunden har fått en ljus ton för att kontrastera mot illustrationerna och på så vis underlätta läsningen perceptuellt (Eriksson 2017:65). Tema och motiv samverkar i ett narrativ och i den här grafiken är det allmänna temat “odling av grönsaker” som verkar tillsammans med olika motiv, det vill säga illustrationerna, och bidrar till att användaren lättare förstår förutsättningarna för mer abstrakta bilder; exempelvis symbolerna i sektionen “Lagra grönsakerna” som informerar om vilken hantering grönsakerna kräver inför lagring (Abbott 2008:95). Själva sektionen i sig har också ett tema, lagring av grönsaker, som bör göra symbolerna ännu lättare att förstå då villkoren har begränsats. I denna featuregrafik är temat stundvis helt beroende av texten, som fungerar som ankare och styr tolkningen av informationen (Holsanova 2010:53,98). Nyttan med att gestalta bilder med en hög abstraktionsnivå kan ifrågasättas, eftersom bilderna i viss mån måste förklaras, men detta var en nödvändig åtgärd för att kunna skapa bilder med en reducerad detaljnivå och som sannolikt skulle fungera i ett betydligt mindre format.
27
Bild 17 – Abstraktionsnivå på symboler samt ett förtydligande av tema och motiv.
4.1 Layoutlösning för 8 kolumner
Det frigjorda utrymmet som blev till när några sektioner hade plockats bort, gav
möjlighet till att addera ytterligare information till ett par kvarvarande sektioner; “Lagra grönsakerna” fick sällskap av “Alternativ förvaring” och “Växtskydd” broderades ut med exemplifierande situationer där de olika bekämpningsmedlen kan användas. Större delen av den ordning som de resterande sektionerna hade i utkastet bibehölls för att den dels stämde med odlingsårets följd och dels för att den åtminstone delvis hade fyllt sin funktion att leda läsaren under utprovningen (se 3.3.2 Resultat från utprovning, virutell
testgrupp och heatmap), även om det verkade ha skett baklänges.
28
För att lösa den bakvända läsordningen applicerades förstärkta kulörer för de sektioner som skulle fånga betraktarens intresse, medan resterande sektioner tonades ned för att läsningen inte skulle bli för fragmenterad (Cairo 2013:104–105). Detta föranleder
förvisso att grafiken blir visuellt belastad till höger och det kan upplevas som att layouten tippar, men med anledning av att betraktaren tenderar att läsa av enklare grafik först i ordningen så borde det bidra till att upprätthålla en viss balans (Holsanova 2010:36). Resultatet från den sannolika läsningen, avseende den största layoutlösningen, antydde att testpersonerna hade föredragit att läsa sektionerna till vänster i en kronologisk ordning. Därför flyttades sektionen “Hur mycket är 500g grönsaker” till den cell som tidigare innehållit “Sveriges populäraste frukt”, eftersom den senare inte längre var aktuell. “Nyttigast & populärast” ersatte kartan, som också hade eliminerats, och sektionen “Lagra grönsakerna” placerades längst ner i vänster hörn. Tillsammans med
huvudrubriken och ingressen till layouten bildades nu en rektangulär form som fyllde upp vänstersidan av layouten. Innehållet på vänstersidan hade också anpassats till den
teoretiska modellen angående informationsvärdet i förhållande till komposition, som menar att given information ska placeras till vänster i vyn (Kress & van Leeuwen u.å. återgiven i Holsanova 2010:51–52). Den givna informationen kan i detta fall anses vara dessa snabba-faktarutor som summerar relativt vedertagen information. Om det visar sig att den sannolika läsordningen skulle stämma överens med den faktiska läsordningen så kan dessa tjänstgöra som en bildburen introduktion till resterande innehåll i layouten. Här får den sannolika läsordningen hjälp av teorin som styrker att grafiska och mer abstrakta element tenderar att stå ut från mängden och fånga betraktarens intresse (Holsanova 2010:36).
Bild 19 – Sektioner som utgör featuregrafikens introduktion.
Den teoretiska modellen för informationsvärde i förhållande till komposition menar också att ny information bör placeras till höger; det skulle kunna tolkas som den information som inte är vedertagen samt innehåller flera informationslager och erbjuder betraktaren en fördjupad läsning (Holsanova 2010:51–52). Tillsammans med hierarkiska teorier som storlek och färgdensitet, baserade på pop-out effect, samt sektionernas individuellt diagonala riktningar som skapar dynamik, kan högersidan tänkas utgöra nästa del i layouten som drar till sig betraktarens uppmärksamhet (Ware 2008:29, Eriksson
2017:66). Därefter är det tänkt att den röda tråden i narrativet ska affordera en inneboende vilja hos betraktaren att ta del av den delvis kronologiska läsordning som den centrala tidslinjen bidrar till. Blir det tillräckligt tydligt att sektionerna är placerade efter årets olika månader bör begreppet biased competition, som innebär att det som betraktaren letar efter framträder tydligast, kunna hjälpa till att locka användaren att läsa
29
featuregrafiken mer linjärt (Ware 2008:26–27). För att guida läsaren ytterligare har likhetslagen nyttjats med hjälp av en brun kulör som går från det övre högra hörnet och leder blicken nedåt och in under tidslinjen (se Bild 18). Detta verktyg gör att sektionerna mentalt kan grupperas trots att de är så olika; den bruna färgen kontrasterar mot både bakgrund och kringliggande element vilket bidrar till att den kan antas fylla sitt syfte att synas (Eriksson 2017:64).
I utkastet hade den stora tidslinjen i mitten av layouten, det vill säga odlingsåret som redogör för de olika grönsakernas säsong, gestaltats som en cirkel trots att alla sektioner anpassats till ett rutnät. Konsekvensen av den runda formen blev dels att den inte gav utrymme för alla grönsaker som presenterades i featuregrafiken och dels bildade tomrum i de celler som utgjorde de angränsande hörnen till övriga sektioner. För att utnyttja ytan mer effektivt och samtidigt få plats med alla de grönsaker som omnämns i featuregrafiken så designades tidslinjen om till ett kvadratiskt format. Följaktligen blev linjerna för tunna för att kunna hysa funktionsdugliga miniatyrbilder av grönsakerna, så därför ersattes dessa istället med text. Det är möjligt att detta medför större svårigheter med att tolka informationen, eftersom det handlar om ett cirkulärt skeende som förklaras med en kvadrat och hämmar formigenkänningen och därmed förståelsen för informationen (Eriksson 2017:28). Bland annat hörnens vinklar gjorde att det betydligt svårare att se gränserna mellan de olika månaderna.
Bild 20 – Cirkel i jämförelse med kvadrat.
4.2 Layoutlösning för 6 kolumner
För den mindre layoutlösningen arrangerades sektionerna i mesta möjliga mån på samma sätt som i layoutlösningen med 8 kolumner (Se 7.3 Bilaga 3 – Layoutlösningar). Men på grund av att ytan inte var lika vidsträckt blev det naturligtvis ofrånkomligt att göra en del justeringar. Det första steget var att plocka bort den adderade informationen som hörde samman med “Lagra grönsakerna” samt “Växtskydd”, dessa sektioner hade gestaltats för att kunna användas som enskilda delar och var därför inte beroende av den fördjupade informationen. De sektioner som inte kunde matchas med layoutlösningen med 8
kolumner placerades i den ordning som resultatet från den sannolika läsningen hade pekat på avseende den mindre layoutlösningen, vilket innebar att “Vad blir det till middag?” och “Nyttigast & populärast” flyttades upp till toppen av sidan. Den gula färgen på “Nyttigast & Populärast” avsågs att verka med hjälp av pop-out effect och dra blicken till sig, för att därefter via likhetslagen dras nedåt till botten av layouten, svepa över “Lagra grönsakerna” och landa på den lugnare sektionen “500g grönt om dagen” (Ware 2008:29, Eriksson 2017:64).
30
Bild 21 – Adderad information kunde prioriteras bort.
I den här layoutlösningen var årets cykel tvingad till en betydligt mindre storlek, medan rubriken och ingressen till featuregrafiken kunde bibehålla sina proportioner. Detta i samverkan med rubrikens kontrasterande färg och dess position bör den vara den punkt som blicken först landar på, vilket reducerar antalet ingångar till läsning av
featuregrafiken (Ware 2008:29, Holsanova 2010:36). Högersidan är den del i den layoutlösningen som bäst överensstämmer med layoutlösningen med åtta kolumner; därför är den avsedd att fungera på samma sätt och leda läsningen runt årets månader. Den här layoutlösningen lyckades alltså inte uppnå samma resultat avseende den teoretiska modellen för informationsvärde i förhållande till komposition (Kress & van Leeuwen u.å. återgiven i Holsanova 2010:51–52), men Holsanova påpekar också att det är betydligt svårare att lyckas med den teoretiska modellen i ett webbgränssnitt eftersom det ofta handlar om ett format som inte är lika tillåtande som för exempelvis en utskrift.
4.3 Layoutlösning för 1 kolumn
Med anledning av sitt lodräta format gestaltades denna layoutlösning med en kolumn och därmed som ett linjärt berättande, med den nya avsiktliga läsningen som grund. Under skissfasen hade reflektioner kring seriellt berättande, i anknytning till en oförutsebar kringmiljö, lett fram till en förmodan om att ett linjärt narrativ bör vara den bäst lämpade layoutlösningen för formatet eftersom det torde minska risken för fragmenterad läsning. Konsekvensen av det linjära berättandet blir att det inte går att praktisera den teoretiska modellen för informationsvärde i förhållande till komposition (Kress & van Leeuwen u.å. återgiven i Holsanova 2010:51–52), med undantag för att den viktigaste informationen företrädesvis placeras högst upp. I den första skärmvyn syns featuregrafikens rubrik och ingress som följs av de tre sektionerna, “Vad blir det till middag”, “500g grönt om dagen” och “Nyttigast & populärast”, som även utgör den inledande delen i den större
layoutlösningen. Därefter visas “Svenskarnas topplista” eftersom den sektionen tar upp en väsentlig del av den större layoutlösningen och, som helhet, inte kunde anpassas till en specifik årstid. Den var även nära placerad odlingsårets i den större layoutlösningen och därför kändes det rimligt att placera den så nära denna sektion som möjligt också i denna layoutlösning, dock fick själva utformningen gällande odlingsåret bli en helt annan. Redan under skissfasen hade idén om en rullgardinsmeny tagit form och den kunde nu utforskas vidare, då alla de bild-burna sektionerna hade fått ett mer färdigställt utseende i takt med gestaltningsprocessen för de två större layoutlösningarna. Rullgardinsmenyn valdes framför ”The hamburger menu” eftersom det då var möjligt att arbeta med de olika sektionerna något mer associativt, med anledning av att en direkt överblick förmodades generera en mer intuitiv uppfattning kring dess relevans. High-Fidelity Prototypen (se
3.4) hade dessutom visat att en enkel scrollning kan ta användaren flera skrämvyer nedåt
med hjälp av en enda rörelse med tummen, så avståndet borde inte utgöra ett större problem.
31
Bild 22 – Rullgardinsmenys placering i layoutlösningen.
Bild 23 – En översikt som visar den extraherade rullgardinsmenyn, med varierande mått av informationsinnehåll.
Rullgardinsmenyn ställde nya villkor för layouten; bland annat tilldelades januari och februari månad inga bildbärande sektioner, då vinterhalvåret i regel inte innebär särskilt mycket trädgårdsarbete för en samtida odlare. Därmed försågs dessa månader enbart med listor över de 12 grönsaker som grafiken innehöll, vilka färgkodades med samma kulörer som för de större layoutlösningarna, för att förtydliga den aktuella åtgärden för respektive grönsak. Samma sorts listor adderades till alla månader på tidslinjen, men mars till och med juli månad kompletterades även med de bild-burna sektioner som kunde anknytas till respektive månad.
32
De betydande skillnaderna, i jämförelse med layoutlösningen med 8 kolumner, var att sektionerna var tvungna att omvandlas från horisontella till vertikala kompositioner. Det innebar en hel del arbete med att försöka få en likartad dramaturgi i bilderna, där det mesta baserades på tidigare placeringar; det vill säga att element som låg över andra element fortfarande låg kvar i samma ordning, men proportionerna tvingades bli mer extrema. Det uppstod även några situationer där elementen pressades till att byta ordning, för att den berörda sektionen överhuvudtaget skulle kunna passas in i layoutlösningen. I dessa fall var det elementens specifika former som avgjorde hur kompositionen skulle uppträda i det nya formatet, en åtgärd som kunde liknas vid att lägga ett pussel. En tredje komplikation var en bild som blev tvungen att beskäras, i just detta fall handlade det om att originalbilden inte tjänade något uppenbart syfte genom att göras vertikal istället för horisontell. En kvalificerad gissning är att det är just så många webbdesigners resonerar när de layoutar webbsidor, att bilder inte är ett betydande stöd för textinformation, utan enbart fyller ett dekorativt syfte och det därför spelar en mindre roll om bilden beskärs. För denna bild blev lösningen att helt enkelt tränga ihop den i en kolumn istället för två. Detta var möjligt eftersom den illustrerats som en relativt luftig bild redan från början, den enda tydliga konsekvensen som noterades var att det nu blev relativt kompakt.
Bild 24 – Konsekvenser för bildkomposition i ett responsivt format.
I den fullstora layoutlösningen var det nödvändigt att tona ner vissa element för att grafiken skulle harmonisera som helhet, samt underlätta läsordning och perception, men samma delar krävde nu istället färg för att inte te sig livlösa och råka förbises.
Åtgärdslistorna som hade fördelats under årets alla månader var i behov av ett
förtydligande för de olika färgkoderna och dessutom fanns det onödigt mycket överbliven yta till höger om dem. Detta åtgärdades med en stansad cirkel som delats upp i fem symmetriska bitar, där varje bit tilldelades en förklarande text och överensstämmande kulör (se Bild 23). Formen av en cirkel valdes för att den skulle kunna fungera som en metafor för det cirkulära odlingsåret som åtgärdslistan kretsar kring. Dessutom är kontinuitet viktigt för att användaren ska kunna orientera sig lättare i gränssnittet, vilket kan göras genom en bibehållen grundlayout (Eriksson 2017:113–114, Cooper et al. 2014:286–289).
