• No results found

4. Utförande 

4.1 Inledande studier 

4.2.5 Inledning av designarbetet 1 Brainstorming 

4.2.5.2 Pugh-matriser 

Efter att brainstorming-sessionen avslutats gjorde författaren två Pugh-matriser. En för respektive gränssnitt. Samtliga kriterier för gränssnitten gavs olika vikter i form av poäng i enlighet med hur författaren prioriterar dem. Poängen var 1, 2 och 3 och angavs i parenteser efter varje kriterium. Dessa kriterier utsågs av författaren vara viktiga faktorer som skulle behöva uppfyllas av lösningar som skulle kunna effektivisera systemet. Detta gjordes av anledningen att ett ytterligare kriterium -

Förebygger nervositet kring integritet​ - endast var applicerbart på mobilgränssnittet. Eftersom detta kriterium inte är applicerbart på automatens gränssnitt hade det kunnat leda till missvisande resultat. Övriga sex kriterier var gemensamma för båda gränssnitten. Kriterierna var följande:

● Förebygger otydligheter​​(3)

Utifrån datainsamlingen ansågs faktumet att det inte framgår i Figur 2 att det är möjligt att skriva ut ett QR-kvitto vara den största bristen. En annan utmaning som den digitala utbetalningsmetoden står inför är att pantare upplever det som krångligt och kanske blir avskräckta från att använda funktionen. Av denna anledning fick detta kriterium 3 poängs vikt.

● Lätt att designa (1)

Hur invecklad är designen?

● Integrerbart​​(2)

Hur lätt skulle det vara att införa i gränssnitten? Vid detta kriterium utgick författaren ifrån beståndsdelar i automatens befintliga gränssnitt.

● Tidseffektivt för pantare​​(2)

Hade den här idén sparat ​tid för pantarna? Här spelar till exempel mängd text och annan information in.

● Minimerar ansträngning för pantare​​(2)

Hur många klick krävs för att pantarna ska kunna genomföra processen från början till slut? Kräver funktionen förkunskaper för att kunna användas?

● Håller över tid​​(2)

Är idéen bara en lösning som fungerar i nuläget, eller en som ser ut att kunna fortsätta vara relevant i en längre tid framöver.

För mobilgränssnittet fanns även:

● Förebygger nervositet kring integritet​​(2)

Detta är en viktig fråga för mobilgränssnittet. Hur påverkar tillämpning av idéerna integriteten?

När de båda matriserna (se Bilaga 6.1 och 6.2) kom författaren fram till att flera av de brainstormade idéerna var värda att gå vidare med, och att föra in i gränssnittet. Tolv poäng fick ​Knapp som ger

alternativ att skriva ut QR-kvitto​. En sådan knapp skulle motverka förvirring hos pantare som tidigare inte vetat att det var möjligt att skriva ut ett QR-kvitto. Att göra en layout som möjliggör denna lösning upplevdes inte som särskilt komplicerat. Inte heller är det något särskilt komplicerat att integrera; funktionen finns ju egentligen redan integrerad i annan skepnad. Knapplösningen sparar både tid och ansträngning för pantarna som då både slipper fundera över om och hur de kan få ett QR-kvitto utskrivet, och dessutom slipper trycka på ​“OK”​-knappen när QR-koden visas upp (se Figur 2) och sedan trycka på ​“OK”​ igen när de får felmeddelandet om att QR-koden inte skannats. Den bedömdes också hålla över tid då den underlättar för pantare som vill använda den digitala utbetalningsmetoden på ett lättare vis.

Tio poäng fick ​Tydligare förklaring av hur QR-kod skannas​. Författaren ansåg att det förebygger otydligheter inför gränssnittet då dess enda funktion är att förtydliga hur systemet fungerar och bör användas. Eftersom förklaringen är en text upplevdes det inte som varken svårt att designa eller att integrera. Författaren såg inte heller någon risk i att en sådan copy skulle påverka tidseffektiviteten negativt. Det skulle inte heller kräva något ytterligare klick men inte heller minimera antalet, vilket var kriteriet.

Författaren beslutade även att ​Kompletterande affisch ​var en praktiskt idé att gå vidare med. Detta berodde delvis på att den har samma syfte som ​Tydligare förklaring​… men även har fördelen att kunna förbereda pantare för vad de ska göra redan innan de börjat använda automaten. En sådan affisch hade inte heller varit orimligt komplicerad att designa eller att integrera i samband med

automaten. Pantare sparar även tid av att veta hur de ska genomföra processen redan innan de kommer fram till automaten. Affischen troddes kunna bidra till att minimera ansträngningen (det vill säga antal klick som krävs för att genomföra processen) för pantaren, så länge denne antingen väljer att få ett kvitto utskrivet eller lyckas skanna av QR-koden på automatens skärm.

Om skanningen av QR-koden på skärmen skulle misslyckas uppnås det befintliga maxantalet steg. Det affischen däremot inte fick någon poäng för var kriteriet ​Håller över tid​ eftersom affischens relevans hade varit helt beroende på hur länge lösningen som den beskriver används. Författaren övervägde att kombinera den informativa affischen med ​Illustration som demonstrerar hur QR-koden

skannas ​och ​Trestegsinstruktion​ men beslutade emot detta. Motivationen var att författaren upplevde att det var viktigt att inte fastställa några designlösningar innan det blivit klart vilken typ av innehåll affischen skulle behöva kommunicera. Detta gjordes i detaljeringsfasen (se 4.4.2). Därutöver beslutade författaren att knappen ​“AVBRYT”​ bör bytas ut mot något lindrigare för att bättre framföra sitt budskap. Tillslut visade kom dock en illustration som demonstrerar hur QR-koden skannas att användas i den informativa affischen (se Figur 22)

Utifrån Pugh-matrisen för mobilgränssnittet kunde författaren tydligt se att den starkaste idéen var att låta QR-koden skannas direkt med Swish-appen. Den här idén stöds också av Tidwell (2011) som menar att mobilanvändares begränsade intresse gör att det är viktigt att processen kan genomföras enkelt. Detta skulle visserligen innebära att hela det befintliga mobilgränssnittet skulle avskaffas. Eftersom Swish är en välanvänd (svenskarnaochinternet.se, u.å, a) av många olika åldersgrupper misstänkte författaren inte att pantarna kommer påverkas negativt. Swish-lösningen förväntades också kunna förebygga otydligheter för pantarna; även pantare med den förutfattade meningen att den befintliga lösningen var krånglig var positiva till integrering av Swish i gränssnittet.

Ett skärmgränssnitt som inkluderade QR-koden samt en knapp som möjliggjorde utskrift av QR-kvitton antogs varken vara särskilt komplicerad att designa eller att integrera i gränssnittet. Eftersom att använda Swish-appen istället för det befintliga mobilgränssnittet hade minskat antalet steg skulle en integrering av den sparat både tid och ansträngning för pantarna. Att låta pantarna använda ett gränssnitt de redan är bekanta med besparar dem också tid i förhållande till det nuvarande gränssnittet. Dodd et al (2017) menar just att människors vana vid en produkt gör dem mer säkra i sitt användande av den. På grund av att många redan är bekanta med Swish som gränssnitt, och att Swish har blivit en allt vanligare betalmetod med åren, går det att med säkerhet anta att en sådan lösning skulle hålla över tid.

Författaren ansåg att det även var relevant att göra sin design enligt Pantameras grafiska profil (Lundberg & Co., 2019). såsom den framgick i mobilgränssnittet. Delvis för att vara konsekvent med varumärkesidentiteten och delvis för att den upplevdes som modern av medstudenterna.

4.3. Bearbetningsfasen 

Bearbetningsfasen börjas enligt Arvola (2014) när de resultat som genererades ur brainstormingen har valts ut och börjat arbetas med. Författaren valde att först skissa fram en storyboard (se Figur 12 nedan) som demonstrerar vilka delar det egna gränssnittet kommer bestå av. Medan Arvola menar att även webbkartor, som tillsammans med storyboarden ska bilda ett wireflow bör skapas i detta skede beslutade författaren emot detta. Detta beslut diskuteras i 5.3.3.2. 

Den informativa affischen ritades inte upp under bearbetningsfasen. Detta då författaren under

prototyptesterna ville undersöka vilken information som den skulle behöva innehålla. Det motiverades av Dodd et al (2017), som menade att ovana användare kan bruka ett gränssnitt med större säkerhet om de på förhand givits information om vad varje steg innebär. I Dodd et al:s artikel hittade också författaren stöd i att affischen skulle kunna kunna vara viktig för äldre med bristande arbets- och långtidsminne, då den påminner dem om hur utbetalningsmetoden fungerar.

4.3.1. Pappersprototypen 

I denna första, grova prototyp är den största skillnaden från det befintliga gränssnittet knappen som ger pantaren möjlighet att direkt skriva ut ett QR-kvitto. Andra förändringar är:

● Digitaluret är borttaget då det upplevdes som överflödigt (Tidwell (2011) och Arvola (2014) menar att den således bör tas bort).

● Timglaset återvänder under de laddningstillfället då cirklarna och texten ​“Snart klar”​ nu visas.

● Texten ​“Fortsätt panta eller tryck på klar”​ dyker inte upp förrän även ​“KLAR!”​-knappen gör det.

● I pappersprototypens ​“Pantvärde”​-låda hade ​“KR”​ och summan som pantaren pantat för bytt plats. Ordet ​utbetalningsmetod​ hade dessutom av misstag byts ut mot ​utbetalningsfunktion​. Dessa förändringar genomfördes av misstag och då det inte fanns något som tydde på att det var nödvändiga förändringar togs de ursprungliga lösningarna tillbaka i detaljeringsfasen (se 4.4.1).

Större förändringar behövde göras i storyboardens sjätte skärmbild, där pantaren ska ges möjlighet att skanna QR-koden eller skriva ut ett QR-kvitto. Av denna anledning togs Bilaga 8 fram. I Bilaga 8 ser läsaren att vardera bild har fått sitt eget namn (8.1 - 8.6). För enkelhetens skull kommer de hänvisas till som Bilaga 8.1 - 8.7 i texten. Detta för att göra resonemanget mer överskådligt för läsare.

Samtliga skisser utgick från det Tidwell (2011) kallar Hub and spoke-struktur och Dodd et al (2017), som menade att människor med nedsatt haptik kan ha svårt att använda ett gränssnitt om elementen sitter för nära varandra. Detta stöddes även av medstudenterna.

Bilaga 8.2 och 8.4 använde även de thumbnail grids som Tidwell rekommenderade. I Bilaga 8 syns de sju olika möjliga designval som författaren funderat över. Skillnaderna dem emellan är inte särskilt drastiska. De mest markanta skillnaderna är hur illustrationen av ett kvitto med QR-kod på endast återfinns på två av skisserna. Knappen ​“Tillbaka”​ har ersatt den tidigare ​“AVBRYT”​-knappen. Författaren ansåg att ordet ​tillbaka​ var mer representativt för knappens funktion som starkt rekommenderas av Maguire (1999).

Bilaga 8.1 och 8.2 togs bort av skälet att automatens skärm bedömdes vara för liten (cirka 17 tum) för att kunna inkludera både QR-koden och en illustration av ett kvitto med en QR-kod i rimlig storlek utan att upplevas som plottrig och oöverskådlig. Bilaga 8.4 bedömdes också vara riskabelt

kontraprodukiv då QR-koden hade behövt göras mindre än vad den är i det befintliga gränssnittet. Detta hade kunnat göra den svårt för pantare att skanna den. Författaren ansåg också att ordningen på elementen i Bilaga 8.3 skulle kunna upplevas som otymplig och förvirrande. En risk som författaren såg var också att pantaren inte läser hela texten och på grund av det ändå missar att hen har möjlighet att skriva ut ett QR-kvitto.

Figur 13/Bilaga 8.7 (återfinns i Bilaga 8) 

Av de resterande skisserna, Bilaga 8.5, 8.6 och 8.7 valdes slutligen 8.7 (se Figur 13 ovan) till att vara den starkaste layouten. I Figur 13 tilläts QR-koden vara så stor som i det befintliga gränssnittet och vara det dominerande elementet i layouten. Därefter följer texten som i tidigare skisser fungerat mer som en rubrik i och med att den placerats ovanför QR-koden. Eftersom texten däremot är instruerande bedömdes det mer rimligt att ha den placerad under QR-koden. Detta skulle även innebära en mindre förändring för de pantare som vant sig vid utbetalningsmetoden med Mobilt BankID; vilket är talande för rapportens syfte. Att den ordning på knapparna i 8.6 och 8.7 valdes framför den i 8.5 var att knappen ​“OK”​ hänger ihop med den första metod som nämns i texten. Det andra alternativet som nämndes var kvittoutskrift. Därför ansåg författaren att det var logiskt att placera knappen ​“Skriv ut

kvitto”​ till höger om ​“OK”​-knappen.

Genom skisserna varierade texten en aning. Efter revidering beslutade författaren att gå vidare med den texten som fanns återgiven i Bilaga 8.1 - 8.4, eftersom den förklarar att koden ska skannas med Swish-appen. Att texten noga beskriver vad som krävs av användaren, utan att vara för lång var viktigt eftersom Dodd et al (2017) skrivit att tydliga instruktioner gör användare säkrare i sitt

brukande. Detta bedömer inte författaren vara överflödig information då Swish-appen ändå skulle vara nödvändig att ha för pantare som skulle vilja använda tjänsten. Detta hörde ihop med brainstorm-idén:

Tydligare förklaring av hur QR-koden skannas​.

En annan förändring i prototypen var instant feedback-lådan som genom processen innehåller orden

“RÄKNAR”​, ​“VÄNTA”​ och ​“BETALNING”​ behölls men expanderades till att även innehålla orden

“SKRIVER UT”​ vid det tillfälle som kvittot skrivs ut (se Figur 14, följande sida). Detta motiveras av att Maguire (1999) skriver att det är lämpligt att ett gränssnitt kan signalera till användaren att det på ett eller annat sätt är responsivt. ​“Pantvärdet”​, ​“KLAR”​-knappen och Pantameras logotyp behöll sina ursprungliga platser även i skisserna. Detta ansågs särskilt motiverat för pantvärdet, då Tidwell (2011)

skriver hur nödvändig information bör synas i fönstret utan att användaren behöver göra något. Eftersom pantvärdet inte kan påverkas genom interaktion med skärmen ansågs det att dess placering i vänster sektion var rimlig. I Bilaga 9 (9.1 och 9.2) syns de illustrationer som gjordes för att

representera animationerna i testgränssnittet.

Figur 14 (återfinns i Bilaga 9) 

Även skärmbilden i vilken pantare väljer utbetalningsmetod förblev i mångt och mycket som i originalgränssnittet (se Figur 15, följande sida). Författaren beslutade att det var klokt då den bygger på den Hub and spoke-struktur som Tidwell (2011) beskrev, där alla viktiga beståndsdelar visas upp samtidigt. Den kan också sägas använda den thumbnail grid-struktur som Tidwell beskriver, där alternativen presenteras hierarkiskt likvärdiga. Författaren beslutade att helt och hållet ersätta den befintliga utbetalningsmetoden med Mobilt BankID med Swish. Detta av anledning att

Swish-utbetalningen hade samma funktion och att äldre, enligt Dodd et al (2017), lätt kan känna sig överväldigade av gränssnitt med för många valmöjligheter. För många alternativ hade lätt till att knapparna dessutom behövt sitta nära varandra, vilket Dodd et al menar kan påverka äldre med nedsatt haptik negativt.

En av skillnaderna från det befintliga gränssnittet var att det i författarens prototyp står ​“...eller

donera​ ​pantpengarna till”​ istället för ​“... eller skänk panten till”​. Denna ändring genomfördes för att vara extra tydlig med att det är pengarna som doneras. Ordet donera valdes över skänka för att vara mer konsekvent med de delar av gränssnittet ännu inte utvecklats - donationsfunktionen som omnämns i Figur 7.

Figur 15 (återfinns i Bilaga 9) 

Related documents