Jonas Millgård, DIM-15, ALM 400, 2018-01-09

Inledning

Tänk dig att du har fått i uppdrag att vara idéskaparen till ett företags eller en organisations webbdesign för en produkt eller tjänst. Uppdragsgivaren har förstått att de behöver bygga sin webbplatsnärvaro på användarupplevelse, för att maximera sina chanser till dialog och kommunikation med sin målgrupp. Vad de saknar är kunskapen för att bygga för användarupplevelse, där berättandet är stoftet som fångar användarens uppmärksamt. Eller det som Emma Stenström, forskare i företagsekonomi vid Handelshögskolan i Stockholm, kallar för berättelseekonomi. Alltså när företag eller organisationer skapar berättelser kring sig och sina produkter och laddar dem med ett estetiskt och kulturellt värde, i ett försök att skapa emotionella band till konsumenterna (UR Skola, 2015).

Webbdesign har över tid och genom teknologiutvecklingen genomgått en stor förändring, från att ha gjort information tillgänglig till att idag vara en faktor i att få publiken att knyta an emotionellt till produkter eller tjänster. En utveckling där webben har anpassat sig till teknologin och dess nya utmaningar. Exempelvis behöver webbdesigners idag hitta vägar för att fånga användarens (målgruppens) uppmärksamhet. Generellt attraheras användare av intressanta och kreativa webbplatser, som erbjuder upplevelse snarare än fakta (ref uppsats). För dig som designer är detta inget nytt, däremot att berättelsen är ett viktigt element i användarupplevelsen kanske inte alla tänker på.

Storytelling är nog ett av de mest överutnyttjade ord inom marknadsföring och kommunikation. Berättande har funnits sedan urminnes tider som ett sätt att föra information och kunskap vidare. Styrkan hos berättelser är de viktiga kognitiva händelser, som skapar och paketerar information, kunskap, sammanhang och känslor till en helhet (Smashing Book #3 1/3, 2012). En helhet som kan användas för att inkludera användaren i berättelsen, samt lyfta fram den positiva påverkan produkten, tjänsten eller företaget har på mottagarens liv. Och det är precis åt detta håll som uppdragsgivaren vill försöka gå med sin webbplats.

Berättande kan göras på många sätt, och jag vill med den här fördjupningsrapporten lyfta på locket och inspirera till att tänka bortom den vanliga ”scrolly-telling”. En populär berättarteknik för webb och mobil idag, som effektivt och ändamålsenligt breder ut berättelsen allteftersom användaren skrollar nedåt (Kosara, 2016). Kan dock ibland upplevas enkelriktat i berättandet, kanske för att den har en början och ett slut, samt i stort bara har två vägar för besökaren att gå – framåt eller bakåt. Aristoteles hävdade att en berättelse måste ha en början, mitt och slut, men är det nödvändigt att berätta det fyrkantigt kronologiskt?

Snickra berättelser för webben

Webben och dess teknologier ger med sin visuella och interaktiva karaktär en designer enorm frihet i berättandet, men det finns ett antal utmaningar som skiljer sig från den skrivna och verbala historieberättandet. En av dessa utmaningar att ha i åtanke är att webben är icke-linjär. Alltså att användare skapar sin berättelse baserat på den information som finns tillgänglig på sidan hen landar på och att de själva styr navigationen genom berättandet på webbplatsen. Om man nu vill ge sig i kast med att utforma berättelser som går bortom ”scrolly-telling”, kan det vara bra att ta en närmare titt på vad icke-linjärt berättade är/gör.

På sätt och viss går det att säga att en webbplats berättande kommuniceras i sin helhet genom hela webbplatsen, genom struktureringen av innehållet i berättandet, det visuella och genom upplevelsen att ta sig runt på webbplatsen (Smashing Book #3 1/3, 2012). Icke-linjärt berättande är samlingar av relaterat innehåll organiserade runt en berättelse. Dessa samlingar kan bestå av olika element såsom video, text, länkar, audio, bilder, kartor och diagram. Dessa bitar erbjuder en stor flexibilitet i användandet, som är perfekta grundbulten i hur vi utforskar online, där vi hoppar från ena biten av information till den andra (Akpem, 2015).

 

Icke-linjärt berättande

Att icke-linjärt berättande har blivit så populärt inom webb, marknadsföring, design och tech community, är att dagens konsumenter har andra behov än att bara leta efter information. Många vill bli inspirerade och överraskade och icke linjärt berättande kräver deltagande av besökaren. För den fragmenterade strukturen behöver en publik för att komma till sin rätt och att berättandet utnyttjar webbens flytande egenskaper, en visuell design som sätter samman element på en yta av okänd i storlek till läsbar helhet (Chimero, 2015).

Det Frank Chimero menar är att vi behöver tänka på att design för skärmar, för till skillnad från papper så är de oändliga där webben kan visas och det går att scrolla i alla riktningar. Om du nu skall börja skissa på webbprojektet, hur skulle du börja? Kanske genom att rita en ruta.

Box av Frank Chimero

Sedan fylla den rutan med nya rutor för sidans innehåll.

Box av Frank Chimero

Ett sätt att designa för skärmar med oändlig yta som Frank Chimero lyfter fram, är att först utforma arrangemanget av innehållet och sedan bestämma storleken. Alltså först börja rita och sedan boxa in det, något som danska designer Kasper Laigaard skisser för Hello Monday visar väl.

 

Hello Monday av Kasper Laigaard

Låt oss säga att du har en idé för uppdraget ovan. Hur länkas elementen ihop, så att de bildar ett sammanhängande berättelse gärna med flera Story lines? En väg att gå som Senogo Akpem nämner är att utgå ifrån några element, som formas till block som utgör kärna i den digitala berättelsen. Till de här blocket adderas webbens visuella språk, såsom färg, typsnitt, struktur, bilder och text etc., för att skapa samspelet mellan användaren och webbplatsen berättelse (Smashing Book #3 1/3, 2012). Genom att kombinera byggblocken och webbens visuella språk, går det att skapa innehåll av olika storlekar som kan vara en delmängd av en sida, rubrik eller en knapp som kan visas varsomhelst och närsomhelst.

Generellt är storytelling på webben linjär med fokus på många sidor, sökfunktion, navigering och att bygga på bredden istället för på djupet (Lennarth, 2016), och utanför webben finns det gott om exempel på icke-linjärt berättande, såsom exempelvis tusen och en natts sätt att väva samma flera Storylines eller filmen Mementos fragmenterade berättarstruktur. Nu när vi skall titta närmare på några exempel av berättande webbplatser, har jag några saker jag vill göra dig uppmärksam på utöver användarvänlighet och visuellt tilltalande innehåll. Dessa aspekterna är också viktiga användarupplevelsen, men de saker jag vill lyfta fram är berättelsens struktur, hur elementen är sammankopplade och hur de fångar din uppmärksamhet. Ber webbplatsen besökaren att aktivt gör något eller passivt be om deras uppmärksamhet? Alltså om upplevelsen är aktiv eller passiv och om interaktionen med webbplatsens innehåll skapar en rytm som känns ”naturlig”.

 

Serengeti Lejon av National Geographic – extra berättande

Här finns en central berättelse med temat ”Serengeti lejonen – Vumbis stolthet”, som med video, bilder, ljud och voice over berikar besökare om livet på savannen när hen aktivt utforskar webbplatsen. Navigation och möjligheten till att själv styr över utforskandet realiseras med länkknappar på sidorna och index ikonen.

 

Lagos Wide & Close – fragmentariskt berättande

Det fragmentariska berättande om livet i Lagos känns som smart och lämplig design för att uppleva storstaden genom en webbplats. Med variation av berättelsens byggstenar har flera perspektiv av staden skapas, som besökaren kan utforska i dokumentärliknande film, intervjuer och miljöljud från olika platser. Berättelsens byggblock är mycket mer löst sammankopplad än byggblocken för Serengeti lejonen, men för mer komplexa platser som Lagos passar den här typ av berättande väldigt bra. För webbplatsen ger besökaren upplevelsen om än lite dammig och mycket livfull metropol både nära och långt ifrån. Även här har besökaren själv kontroll över utforskandet och har möjlighet styra över vilken riktning den egna berättelsen tar, även de blir guidade igenom historien.

Förändra verkligheten av Profil – parallellt berättande

Här används fiffig storytelling med hjälp teknik i videon på webbplatsen för att fånga in och engagera besökaren. I de två parallella berättelser som video innehåller kan besökaren styra över vilken del av berättelsen hen vill ta del av. Det parallella berättandet lämpar sig väldigt väl för skapa kontraster och nå ut med budskapet. att tydliggöra budskapet med hjälp av med bestämma vilken berättelse de vill se.

 

Räntekarta av SvD – Databas drivet berättande

Ett elegant sätt att visualisera stora mängder data och få besökaren intresserad av att ta del av räntesituationen i Sverige. Via en karta över Sverige kan besökaren navigera sig fram till sin adress och ta del av vilken ränta människor har i ens närhet. Ett berättande där meningen ofta kommer från sammanställning av datan för den inramning som besökaren valt.

 

Uppmuntra till utforskande

Sedan är verkligheten den att vi uppfattar aldrig berättelsen exakt så som skaparen har tänkt, utan vi fyller in, drar ifrån och filtrerar utifrån våra egna tankar och erfarenheter (McGuane och Snare, 2011). Att det är så finns det många orsaker till, men kanske började besökaren läsa efter ett tag, eller kanske de lite snabbt skummade igenom vad som berättades eller så kontextualiserade de på ett annat sätt än vi tänkt oss.

Att uppmuntra till utforskande är en styrkorna med icke-linjärt berättande, för det ger designers möjlighet att bygga på och förändra berättelsen över tid och baserat på återkoppling från målgruppen (Smashing Book #3 1/3, 2012). Genom att skapa ett ramverk med flertalet förgreningar, ges besökaren friheten att själv välja vad som intresserar dem mest. Nyckeln i användarupplevelserna är synlighet och att ge besökaren tillräckligt med guidning så att de vet vad de skall göra.

Exempelvis om du säger att “Jennifer köpte en bikini” tolkar de flesta av oss att Jennifer är en kvinna för det är inte så vanligt att män bär bikini, eller att “jag tappade min telefon i Seine” kommer många fram till att du är eller varit i Paris. Nu kommer inte alla att samstämmigt komma fram till samma slutsats, för vi som besökare ger berättelsen liv utifrån hur vi tolkar och rör oss igenom webbplatsen, och som designer skall du försöka skapa ett ramverk som guidar dem igenom historien (Collier, 2014). Något som Jessica Collier benämner som att designa med ord, är när en produkt eller tjänst har en röst som kommunicera med besökaren på ett språk så att en stil skapas.

Ett exempel hon lyfter fram som gör detta bra är tjänsten MailChimp, för att deras genomgående arbete med tonaliteten som tillsammans med övriga bitar bildar en helhet som dynamiskt och samtidigt konsekvent guidar användaren igenom användandet.

 

Narrativa målpunkter i berättelsen

Säg nu att du har designat innehåll för ovanstående uppdrag och satt ihop det till en berättelse med innehåll som du vill att besökarna skall interagera med. Spelar berättelsen någon roll? Att exempelvis en skönhetsprodukt är sprungen ur en karg plats där sanden piskar in och man blir nästan blästrad, eller att man får ta del av backstoryn om företaget och hur den coola tjänsten skapades i en av entreprenörernas mammas garage? 

 Ja det är klart att det gör det. Varför då? Jo, för att genom interaktion och berättande kan information sättas i ett sammanhang där också känslor kan blandas in, för att underlätta för oss människor förstå och göra informationen till vår egen (UR Skola, 2015). Nu är det bara det att besökaren kan vandra in och ur berättelsen lite som de vill, men genom att definiera narrativa mål kan besökarens guidas genom historien till punkter där de bli uppmanade att stanna, utforska och interagera med kärnelementen i berättelsen (Akpem, 2015). Senongo Akpem nämner att dessa narrativa mål kan vara spännande händelser i berättande, fascinerade videos eller bilder som får besökaren att stanna upp ta del av innehållet.

Nu innehåller alla ovan nämnda exempel på icke-linjärt berättande dessa narrativa mål i berättandet , men för att nämna några så är exempelvis videon för Förändra verkligheten ett mycket bra sådan punkt som suger in besökaren att själv utforska berättandet och ta del av budskapet. Likaså har räntekartan bra och tydliga mål, som manar besökaren att saktar ner och ta del av informationen från sitt egna grannskap eller från ett område de känner till

 

Avslutning

En övertygande digital berättelse behöver inte var komplex eller detaljerad. Utan det handlar mer om förståelse om uppfattning hur vi människor tar till oss berättelser.  Din roll som designer och storyteller är att skapa ramverket för berättelse som guidar besökarna genom historien, och faller det väl ut skapas sammanhang och besökarna fyller i luckorna när de emotionellt knyter an till budskapet. Addera inte interaktiva element till berättelsen bara för sakens skull, utan försäkra dig om att det ger mervärde för besökaren och inte bara fångar deras uppmärksamhet. Genom den har fördjupningsrapporten har jag försökt lyfta fram tankar och idéer kring ett berättande som går bortom den vanliga “scrolly-telling”, något som du förhoppningsvis kan använda framöver i ditt arbete. Där du underhåller, överraskar men framförallt engagerar din publik när de navigerar runt i den värld du skapat.

 

Referenser

Akpem, S. (5 maj 2015). Building Nonlinear Narratives for the Web. [Elektronisk] Tillgänglig: https://alistapart.com/article/building-nonlinear-narratives-for-the-web [2017-10-28]

Lennarth Bernhardsson, Universitetsadjunkt Högskolan Väst, föreläsning BET 100 – Interaktivt berättande,13 September 2016

Chimero, F. (2015). The Web’s Grain. [Elektronisk] Tillgänglig: https://www.frankchimero.com/writing/the-webs-grain/ [2017-12-11]

Collier, J. (11 september 2014). What is Narrative UX?. [Elektronisk]
Tillgänglig: https://medium.com/re-form/what-is-narrative-ux-9400664660af [2017-12-09]

Kosara, R. (25 maj 2016). The Scrollytelling Scourge. [Elektronisk] Tillgänglig: https://eagereyes.org/blog/2016/the-scrollytelling-scourge [2017-10-28]

McGuane, E., Snare, R. (23 Augusti 2011). Making up Stories: Perception, Language, and the Web. [Elektronisk] Tillgänglig: https://alistapart.com/article/making-up-stories-perception-language-and-the-web [2017-10-28] 

Stocks, Elliot Jay., Friedman, Vitaly. & Lennartz, Sven. (2012). The smashing book #3: redesign the web. Frieburg, Germany: Smashing Media GmbH

UR Skola (2015). Berättelsers värde i affärsvärlden. [Video online]. https://urskola.se/Produkter/188883-Be rattelsers-varde-i-affarsvarlden [2017-10-05]