Katja Kontio

Det är många som arbetar med att utveckla webbsidor. Att utveckla en bra webbsida är inte bara att göra det man själv tror är bra. Utan det finns en mängd olika faktorer som måste räknas in för att webbsida ska ha en bra design. Användarvänlighet en av de delar inom webbutvecklingen som måste ta hänsyn till. För att uppnå en användarvänlig webbsida så är begreppet ux-design centralt. Denna OER:en kommer därför att handla om vad UX-design betyder och vad ux-process innebär. OER:en tar även upp olika metoder som kan vara en hjälpande hand till att uppnå en användarvänlig webbsida.

Dessa delar kommer att tas upp:
– Vad innebär UX-design
– Metoder i UX-processen
– Value Proposition Canvas
– Proto Personas
– Wireframes
– Mockup
– Prototype
– En övning



Vad innebär ux-design?
UX-design (user experience) betyder användarupplevelse och innebär att man ska utveckla produkter och tjänster så att användarna ska få en bra upplevelse som möjligt. Det som är viktigt inom UX är att användarna ska få en positiv upplevelse när de använder produkten eller tjänsten samt att det ska vara lätt att använda (IBS, 2019).

Margareta Gajne Löfvenholm (1), ux-designer, framhävde under en workshop att inom UX-design brukar man oftast prata om Why-Who-What-Verify.

WHY: Varför skall vi göra denna produkten/tjänsten? Vad är själva syftet med den. Det är även viktigt att se både företagets och kundernas perspektiv när man kollar på vad själva syftet är. Ett exempel på metod som svarar på WHY är Value proposition canvas (Mer om det nedan).

WHO: Till vem ska vi göra denna produkten/tjänsten till? Vilka är kunderna/användarna. Detta är centralt eftersom att det är dem som ska använda produkten/tjänsten. Även här finns det olika metoder man kan utföra för att få fram vilka kunderna är. Proto Personas kommer att nämnas i denna OER:en.

WHAT: Hur ska produkten se ut? Det är vid detta steget man försöker framhäva hur produkten/tjänsten kommer se ut i det visuella. Detta gör man genom att bland annat skissa.

VERIFY: Verifiera själva produkten/tjänsten genom att göra användartester för att se om den funkar som det ska. Kunderna/användarna måste förstå hur den används och det ska inte vara några konstigheter eller funderingar.

Metoder i ux-processen
Inom UX-processen finns det flera olika typer av metoder som man kan förhålla sig till. Men i denna OER:en nämns några av de metoderna som man kan använda sig av för att utföra en ux-process. I vissa fall behöver man inte använda sig av alla metoder, utan det får man se utifrån behov. Ifall man aldrig har gjort en ux-process innan är det bra att börja med att använda de metoder som nämns här nedan, genom att göra dem i ordning.

Metod: 1 VPC – WHY?
Inom ux-design är det kunden som är i centrum och det är viktigt att förstå vad kunden vill ha. Med hjälp en metod som kallas för Value Proposition Canvas (VPC) så får man fram kundernas behov och vad det vill ha (Sellhed, 2016).

Här är en bild som visar hur VPC ut:

Kund
Customer Job: En lista som beskriver vad kunder vill få ut av tjänsten eller användningen av produkten.
Gains: En lista på fördelar som kunderna får av att använda tjänsten eller produkten
Pains: En lista på vad för besvär kunderna har innan de använder tjänsten eller produkten (Sellhed, 2016).

Företaget
Products & Services: Beskriver vad företaget har för produkt eller tjänst
Gain Creators: Beskriver vad företaget kan göra för att ge kunderna fördelar av användningen av tjänsten eller produkten.
Pain Relievers: Förklara vad företaget kan göra för att lösa kundernas “Pains” (Sellhed, 2016).

För att utföra metoden gäller det att skriva ner alla dessa delar för att få en förståelse vad företaget kan göra för att uppnå kundernas behov.

Metod 2: Proto personas – WHO?
Gajne Löfvenholm (1) nämnde en metod vid namn Proto personas. Hon berättade att Proto personas är en metod som hjälper att förstå vad för typer av det kunder det kan finnas. Metoden går ut på att man ska skissa olika typer personer som kan tänka sig vara potentiella kunder av tjänsten eller produkten.

Här är en mall som beskriver vad som bör stå i en Proto persona:

(Interaction & UX-design, Margareta Gajne Löfvenholm, 2017)

Name & Sketch: Namn på personen och en skissbild på hur den ser ut
Short description: En kort beskrivning om personen, tex. vad det gör, ålder, jobb, fritid osv.
Pain points & needs: Vad för behov och problem personen har
Potential solutions: Vad företaget kan göra för att lösa problemet.

Metod 3: Wireframe – WHAT
Efter man har gjort dessa metoder ovan så har man fått en stadig grund att stå på. Då är det dags att börja skissa på hur produkten/tjänsten kan tänka sig att se ut. Till exempel en webbsida, då kan man börja skissa på webbsidan. Man kan göra wireframes på papper eller med en dator, det beror på vad man själv föredrar. En wireframe brukar oftast vara svart vit, men man kan göra det mer avancerad om man vill. Wireframes är till för att man själv ska kunna bygga upp en struktur på hur allt ska vara (Yadav, 2019).

(Tubikstudio)

Mockup
När man har gjort wireframes kan man fortsätta att göra en så kallad mockup. Mockup innebär att man visualiserar produkten/tjänsten så som den kan tänkas se ut. Då lägger man in färg, ikoner mm. Men en mockup är inte klickbar utan man ser bara det visuella (Mkrtchyan, 2018). Ett program som man kan använda för att göra mockups är Adobe XD. Men det finns även andra program. Här är en video som visar hur Adobe XD fungerar. Klippet är ganska långt, men behärskar man Andra adobe program så är inte Adobe XD särskilt svårt.

(Awwwards)

Prototyp
Prototyp innebär ett ytterligare steg från wireframe. Det innebär att man även visar hur användarna navigerar med hjälpa produkten eller tjänsten (Mkrtchyan, 2018). I programmet Adobe XD kan man göra en prototyp genom att koppla ihop de olika sidorna med varandra. Här är en youtube-klipp som visar hur man gör:

Användartester – VERIFY
Användartester innebär att man ska låta användarna få testa produkten/tjänsten för att eventuellt kunna förbättra den. Man kan göra användartester på olika sätt men huvudsaken är att användarna ska testa produkten för att se hur de navigerar sig och var de har problem med. Det är bra att göra användartester där användarna använder produkten/tjänsten i den miljö som användarna kommer att vara när den används, för att uppnå bästa resultatet (Inuse).

Ett sätt att göra användartester på är att låta en användare testa produkten medans man observerar i samma rum. Detta gör att ux-designern lätt kan se hur användaren navigerar och vart det uppstår funderingar eller problem. Ux-designern kan lätt skriva ner vad som händer för att sedan åtgärda problemet. På så sätt förbättras produkten/tjänsten efter användartester (Inuse).

Övning
Övningen går att på att du är en ux-designer/Webbdesigner som ska utveckla en app åt ett företag. Företaget är ett taxibolag som har självkörande bilar. Övningen går ut på att du ska komma fram till en prototyp av appen. Prototypen kan göras i Adobe XD programmet för att göra det enklare.

Men för att lyckas att göra en bra prototyp så måste man ha en bra grund att stå på. Då kan man utföra det metoder som har presenterats här ovan.

Förslagsvis är att börja i följande ordning:

  1.  VPC: Vad är syftet med appen? Ta fram VPC mallen och börja skriva in de olika delar.
  2. Proto Personas: Vilka är kunderna/användarna. Börja skissa fram olika typer av kunder för att få en förståelse vilka person som kan tänkas behöva appen.
  3. Wireframe: Hur ska appen se ut. Använd penna och papper, eller ett annat program på datorn för att börja skissa fram förslag på hur appen kan se ut. Skissen behöver inte vara avancerad.
  4. Mockup: Efter har kommit fram till en bra Wireframe, börja göra en mer noggrann skiss på hur appen kan tänkas se ut. Använd färger, ikoner, typsnitt osv för att göra det så noga som möjligt. Förslagsvis är att använda Adobe XD programmet.
  5. Prototyp: När du har framställt en Mockup är det dags att göra en prototyp av den. Använd prototype-funktionen i Adobe XD programmet.
  6.  Användartester: Be några personer att testa din prototyp för att se om användarna förstår hur appen fungerar. Skriv ner eventuella problemen som uppstår och försök åtgärda dom i efterhand.

Referenser
Adobe Creative Cloud (2016). How to Create Prototypes (wires) in Adobe XD (Preview) | Adobe Creative Cloud [Video online] Tillgänglig: https://www.youtube.com/watch?v=EBQ4ZRsie9U   [2020-01-10]

Awwwards (2020). New Features in Adobe XD Revealed at Awwwards New York [Fotografi]. Tillgänglig: https://www.awwwards.com/new-features-in-adobe-xd-revealed-at-awwwards-new-york.html  [2020-01-14]

ForrestKnight (2019). How to Design & Prototype a Mobile App – Adobe Xd Tutorial  [Video online] Tillgänglig: https://www.youtube.com/watch?v=Yt2troF-Eyc [2020-01-10]

Inuse (2019). ANVÄNDBARHETSTEST [Elektroniskt] Tillgänglig: https://www.inuse.se/hur/anvandbarhetstest/
[2020-01-15] 

LBS (2019). UX-design [Elektroniskt] 2019-11-06. Tillgänglig: https://www.lbs.se/storys/ux-design/
[2020-01-10] 

Mkrtchyan, R (2018). Wireframe, Mockup, Prototype: What is What [Elektroniskt] 2018-06-27. Tillgänglig: https://uxplanet.org/wireframe-mockup-prototype-what-is-what-8cf2966e5a8b
[2020-01-14] 

Sellhed, O (2016). Value Proposition Canvas – där kundbehov och kunderbjudande möts, [Elektroniskt] 2016-12-06. Tillgänglig: https://www.invativa.se/digitalisten/metoder/value-proposition-canvas/ [2020-01-07] 

Strategyzer. The Value Proposition Canvas [Fotografi]. Tillgänglig: https://www.strategyzer.com/canvas/value-proposition-canvas  [2020-01-14]

Tubikstudio. UX Wireframing: Bedrock of Interface Usability [Fotografi]. Tillgänglig: https://tubikstudio.com/ux-wireframing-bedrock-of-interface-usability/ [2020-01-14]

UX Mastery (2016). What the #$%@ is UX Design? [Video online] Tillgänglig: https://www.youtube.com/watch?v=Ovj4hFxko7c  [2020-01-10]

Yadav, P (2019). Wireframes in UX Design — What, Why, When and How? [Blogg] 2019-05-19. Tillgänglig: https://blog.prototypr.io/wireframes-in-ux-design-what-why-when-and-how-ff07bb513c89 [2020-01-10]

Fotnot
(1) Margareta Gajne Löfvenholm UX-designer, Föreläsning 14 november 2017