User del 5, Metoder

Hej läsare!

För den som föredrar finns detta inlägg även att lyssna på via min Podcast. Om du uppskattar mitt arbete - som jag delar med mig av i sin helhet - kan du stötta det genom en Donation.

Falska ideal

Kognitiv design förbättrar inte försäljningssiffrorna på samma sätt som läkare inte botar patienter. Läkare botar sjukdomar. Kognitiv design råder bot på fel.

Att exempelvis en förenklad köpresa skulle leda till bättre försäljningssiffror är både ett rimligt antagande och en grundinställning hos många designers. Många gånger är det också så, men designvalet har mer med designerns, eller designteamets samtyckesstyrda filosofi att göra, än något annat. Frågan är alltid om det faktiskt är så? Ser du en gurka liggandes på hyllan bland konserverna i matbutiken, som om någon ångrat sig och bara lagt den där, kommer du sannolikt inte att köpa den. Även om du gått till affären just för att köpa en gurka, även om du är stressad och även om den ligger närmare till hands. Du kommer att ta den långa omvägen till grönsaksdisken där du var inställd på att den skulle ligga.

Att en lägligare placering av gurkan skulle vara bra för kunden är i detta sammanhang ett falsk ideal. Jag menar då inte ett falskt ideal som de vi ser skildras i sociala medier, utan att designen är kontextuell. Vi får här en konflikt mellan två praktiker; tillgänglighet kontra vår instinktiva kategorisering; vi grupperar gurka med tomater och isbergssallad och likaså säger vår erfarenhet oss att det inte är där gurkorna ska ligg. Det är fel, även om de gör det, allihop! Vår kategorisering slår hål på tumregeln att en enklare kundresa vore att föredra. Varje dag ser vi nonsens om bland annat självhjälp, politik, entreprenörs- och ledarskap som inte bara misstämmer, utan till och med motarbetar sin intension (en anti-sanning). Det kan inte understrykas nog hur viktigt det är att faktiskt mäta och ta reda på om dina filosofier producerar det resultat de är ämnade att göra.

Skillnaden på 20 års erfarenhet och 1 år 20 gånger

Som designers möts vi av nya utmaningar, problem, behov, attityder och trender i vårt dagliga arbete. Skulle inte problemen komma till oss, möter vi dem i andra änden; vi söker efter fel, brister och undantag kontinuerligt, gör små uppror, utmanar och driver utvecklingen framåt. Det ingår i rollen likväl som det är den vetenskapliga användningen av vår fantasi. Vi möter också dessa utmaningar som delvis nya personer, vilket är sant ur flera aspekter. Dels byts alla celler ut i våra kroppar inom en period om några år (ca. sju). När vi exponeras och lär oss nya saker utvecklas också vår hjärna vilket gör att ny potential realiseras inom oss, även det på ett fysiologisk plan (synapser). Våra kroppar förändras, likväl som våra tankar och idéer bör göra det. Varför bör de det? För att vara mottagliga för nya idéer måste vi också vara villiga att släppa taget om våra gamla, eller som Alfred North Whitehead formulerade det: ”The purpose of thinking is to let the ideas die instead of us dying”.

Den som vet något om vetenskap hänvisar aldrig till ”vetenskapen”, utan är mer specifik än så. Att vara gammal kvalificerar ingen att rådge. Att bli äldre är ett sätt att ackumulera kunskap på, men garanterar den inte. Lika gärna kan vi ha hamnat efter i utvecklingen, blivit mindre ambitiösa, mer bekväma, eller till och med blivit sämre på att lära oss nya saker. Vår vetenskap förändras och därför måste även vad vi kallar vår kunskap göra det. Det finns gamla sanningar, samtidigt som jag knappt hinner bygga klart en hemsida innan det finns nya sätt att bygga den på.

Vi förstår och hanterar utmaningar utifrån vem vi är; med andra ord på olika sätt; beroende på vilken erfarenhet, situation, sammanhang, temperamentmässiga attribut, kunskaper eller värderingar vi har lagt oss till med. Det är ett förlopp för vilken processen kan vara högst opålitlig, full av fel, brister och undantag. För att inte ändra på fakta för att passa våra ambitioner, utan tvärtom, lägga fram teorier som är underbyggda av evidens, använder vi oss av metodik för att korrigera våra tankar och idéer. Det är en ständig kalibrering och vi kan se på vetenskapen lite som ett tredjepersonsperspektiv att se på världen, i motsatts till det omedelbara förstapersons-fenomenologiska.

Den vetenskapliga metoden

Utan att dra en gräns, hur vet du var du står? Om jag skriver [10, 39, 26] är det då minuter, en temperatur, eller slumpvisa maträtter i en sushimeny jag menar? För att ens kunna börja tänka behöver vi först utgå från ett antal gemensamma grundantaganden om vårt studieobjekt, det vill säga Hur vi ska se på det. Vårt data behöver en kontext för att bli till information, som i sin tur behöver en kontext för att bli till kunskap. Utan det ställs vi inför problemet med identitet över tid, likt med Theseusskeppet. Genom att sedan låta ett flertal personer separat observera huruvida en abstraktion kan förutsäga eller kontrollera ett särskilt utfall, för att därefter analysera vad dessa observationer har gemensamt, börjar vi komma fram till något som liknar vetenskaplig konsensus. För att en vetenskaplig hypotes ska vara hållbar måste det även vara möjligt att säkerställa ett förväntat utfall av ett experiment, eller observation som hamnar i konflikt med vad hypotesens slutsats föreslår. För tydligheten och viktighetens skull punkar jag ned den generella vetenskapliga metoden:

definiera en referensram
noggrann observation
ifrågasätt vad som observeras givet att detta kan påverkas av kognitiva antaganden
formulera en induktiv hypotes baserad på vad som observerats
förfina (eller eliminera) slutsatser dragna utifrån denna hypotes genom experimentella och mätbara tester

Designprocessen

Det finns en allmänt god uppfattning kring hur ett gränssnitt både bör se ut och byggas idag, även om den inte alltid är lika medveten. Låt mig ge dig ett exempel på vad jag menar: det tar i genomsnitt 7 sekunder att ladda innehållet som ryms inom mobilens skärm före en interaktion såsom scroll eller klick på hela 70% av alla hemsidor idag (Källa: Think with Google). Detta i sin tur höjer sannolikheten att besökaren ger upp och lämnar webbsidan med hela 113% jämfört med om det istället bara tagit 1 sekund att ladda den (Källa: International data corporation). Detta är bara ett exempel på hur en undermedveten uppfattning styr vad som är godtagbart för oss som användare, eller inte. Vi har en känsla för hur saker bör se ut och fungera på webben, inte bara för att vi ska kunna förstå dem, utan också för att gilla dem eller att ens ge dem en chans.

Till vardags nöjer vi oss ofta med att saker fungerar, men för att faktisk göra saker bättre och annorlunda måste vi ha en desto djupare förståelse kring Hur de också fungerar. Många av våra projekt färdigställs tyvärr enbart genom feedback på en prototyp från dess intressenter. Med prototyp menar jag i sin enklaste definition en plan för hur utseendet och funktionaliteten av en applikation, före det att den byggs. Men bakom varje prototyp finns det, eller bör det finnas, en designprocess. Det finns olika modeller för en sådan process, som dessutom kan variera mellan företag och företag. För en lite mer generell beskrivning skulle vi kunna dela in den i tresteg: inledningsvis vill förstå våra användare, eller tilltänkta användare, lite bättre—samt definiera vår produkt eller tjänst. I nästa steg tillkommer moodboards (teman) och wireframes (trådskisser) som ligger till grund för det fortsatta arbetet. Dessa förfinas och kristalliseras genom iterationer med test- och analysresultat som matas tillbaka som underlag inför nästa iteration (feedback-loop).

Vi skaffar oss mer belägg och bättre förståelse genom användarintervjuer och fokusgrupper, enkäter, fältstudier eller observationer, såsom att framarbeta flöden för hur en kundresa skulle kunna se ut, eller en empatikarta:

Med vår utredning vill vi kunna beskriva en situation eller uppsättning av händelser (X inträffar), identifiera relationer mellan multipla variabler (X är beroende av Y) samt orsakerna bakom en situation eller händelseförlopp (X ledde till Y). Även datainsamling är en viktig komponent för att vidare underbygga prototypens utformning, vilket vi kommer gå in på lite mer i detalj alldeles snart. På en mer övergripande nivå skulle vi kunna dela in användbarhetstestningen i fyra olika typer:

Utforskande

Ibland även kallad formativ testning, där enkelt uttryckt formativ är när kocken smakar på soppan, medan summativ är när gästen smakar på den. Den utforskande användbarhetstestningen är som mest effektiv när den utförs i början av en produkts utvecklingscykel. Detta beror på att den underliggande metodiken gör det möjligt att avgöra vad som fungerar eller inte i en design, koncept eller erbjudande innan det är helt utformat. Med detta minskar risken för ekonomiska och resursmässiga konsekvenser om något skulle vara fel. Metoderna som används för denna typ av test uppvisar uppgiftsbaserade scenarier, ofta så kallade use case, samt öppna frågeställningar (kom ihåg vår FBI-agent).

Bedömande

Som istället är ett summativt test, vilka även de kan utföras tidigt i utvecklingscykeln. Den grundläggande processen som är involverad i denna metod är att observera användare som interagerar med en design genom ett uppgiftsbaserat manuskript. Insikterna kommer belysa eventuella problem i designen som kan leda till att användare inte kan slutföra uppgifter eller misslyckas med att nå sitt mål.

Jämförande

Vid denna typ av testning jämförs två, eller ibland flera varianter av en exempelvis en funktion, element eller koncept. Flera typer av resultat kan hämtas från denna metod, inklusive preferens, effektivitet och tillfredsställelse. Förutom att samla in kvantitativa rön genom jämförande tester är det också möjligt att kvantifiera om den ena varianten överträffar den andra, samt varför.

Validerande

Som genomförs mot slutet av en produkts utveckling. Till skillnad från de andra typerna fokuserar man här enbart på kvantitativa resultat, där genomförandegrad och den tid det tar för att slutföra en given uppgift är vanliga mått. Den viktigaste fördelen med att förstå dessa element är möjligheten att jämföra en design över tid (kom ihåg skeppet) och kontrollera om nya iterationer är mer framgångsrika än sina föregångare.

Knappens färg

Det kanske vanligaste exemplet (eller reduceringen) jag som designer och frontend-utvecklare möts av till vardags, är att det är min uppgift är att bestämma färgen på köpknappen. En absolut klyscha såklart, men kanske också en kliché av en god anledning: det är ett ganska enkelt och konkret exempel på något som de flesta kan relatera till.

För några år sedan arbetade jag med en väletablerad e-handelsbutik där just bytet av den primära köpknappens accentfärg höjde försäljningen (inte bara konverteringen) med hela 15%. Vi bytte då från blått till svart, en förändring som kunde antas inte heller orsaka alltför stor skada. (Rent psykologiskt är vi villiga att arbeta väldigt mycket hårdare för att inte bli av med 15%, än att tjäna 15% extra, så det är en viktig aspekt att ha med sig.) Detta kan låta som ett helt trivialt beslut, men för att sätta det lite i perspektiv innebar en förbättring på 15% nu också att jag indirekt var självfinansierad i min roll som konsult hos kunden.

Hade köpknappen inledningsvis varit röd, eller haft samma färg som bakgrunden (med andra ord sett ut som en länk) hade det varit mer rimligt att prova en annan knappfärg direkt. Röd är som vi vet en varningsfärg vi tenderar att intuitivt dra oss ifrån att trycka på. Men knappen var blå, en lugnande och förtroendeingivande färg vi bland annat ser på våra polisers uniform, inom vård och omsorg, tandläkare, banker och sociala medieplattformar (Vem vet, kanske är det en av anledningarna till att vi känner oss bekväma i att lägga upp hela våra liv på internet?).

Varför en svart knapp antogs fungera bättre i detta sammanhang var för att mycket annat på sidan också var blått, vilket gjorde knappen svårare att se. Den svarta färgen fick knappen att sticka ut ifrån resten av innehållet, både bakgrunden som var vit och andra element runt omkring varav flera var blå. Som användare ser vi inte knappen (objektet), vi ser något vi kan klicka på (meningen), det vet vi nu.

En teknik jag ofta använder i mitt fotografi är att framhäva med hjälp av motsattsfärgen. Föreställ dig ett stormigt hav och en djupblå himmel: motsatsen till blått är gult, så bland vågorna vaggar en gul sydväst. Ögat har också en tendens att se de ljusaste partierna i en bild först och eftersom gult i regel är en ljusare färg än blått, fångar den också ytterligare vår uppmärksamhet i bilden. Vi skulle kunna använda denna teknik vidare genom att låta en vit våglinje leda ögat från sydvästen till båten. Det ger oss en sekvens, ett händelseförlopp, även om berättelsen i bilden snabbt uppenbarar sig.

För att återkomma till knappfärgsvalet var gult i detta fall en alltför ljus färg att använda mot en vit bakgrund, vilket inte gav den inte tillräckligt med kontrast. Det finns verktyg inbyggda i webbläsare som kan hjälpa oss med denna gränsdragning.

Ett annat experiment jag också genomförde på knappen gällde istället dess storlek: vad det visade på var att ju större vi gjorde knappen, desto fler var också benägna att trycka på den. Det kan kanske antas fullt rimligt, men det verkade inte heller finnas något övre tak för korrelationen: desto större knapp, desto fler klick. Ändamålet var såklart inte att få besökarna att klicka på en knapp; så samtidigt kunde vi nu också börja argumentera för att knappen istället var meningslös. Vissa händelser i en webbläsare kräver en interaktion för att vara möjliga. Det går exempelvis inte att automatiskt klicka på en länk till en annan sida (domän) i koden åt en användare, eftersom detta skulle kunna leda till oönskad navigering (nätfiske). Webbläsare har ett gediget regelverk för att måna vår integritet och säkerhet. Vi har också andra, rent legala skyldigheter att ta hänsyn till som utvecklare, såsom att ett medgivande på webben måste innefatta vissa manuella steg och inte får automatiseras, även om det är en teknisk bagatell.

I just detta fall var dock det primära önskemålet att personer skulle ta sig till en annan sida inom samma domän, så en nästa hypotes var att ta bort knappen och istället ta besökaren till den andra sidan direkt, utan behov av navigering. Det visade sig också vara framgångsrikt, men jag har arbetat hos andra kunder efter detta, där det genomförts exakt samma experiment och där vi istället såg att om kunden inte informerades om produkten tillräckligt mycket före sitt köp, inte heller blev särskilt långvarig i sin prenumeration. Kunden tappade då löpande fler kunder än de registrerade (högre kundbortfall).

En knapp kan ha olika knapptext, olika budskap och tonalitet, den kan placeras på olika ställen, ligga stilla eller följa med innehållet, utföra olika saker, vara fysisk eller digital, kräva att särskilda villkor uppfylls innan den blir klickbar, vara primär eller sekundär, animeras och ge besökaren olika känslointryck och så vidare. När vi lyfter lite på locket inser vi snart att ett beslut kring knappfärg inte alls är ett särskilt trivialt beslut att fatta ur ett rent tekniskt perspektiv. Så hur gör vi?

Fortsätt läsa

Här fortsätter boken med att gå igenom en serie tester för experimentell design. Eftersom denna serie redan finns publicerad här på min hemsida, något mer fyllig dessutom, då den kompletterats med kodexempel (som inte var passade för bokformatet) hänvisar jag dig istället till serien om Experimentell design.