prototyp

2 posts

Digitala prototyper för att visualisera och testa

Digitala prototyper kan skapas för många olika syften. Ett syfte kan vara för att kunna testa igenom er produkt. Detta innan du eller ditt företag utvecklar och lanserar en ny hemsida, digital tjänst eller app. I mitt förra inlägg skrev jag om snabba enkla prototyper som är ett superbra sätt att snabbt testa olika idéer och flöden osv (länk). Med digitala prototyper kan du testa mer djupgående. Du kan skapa något som ser ut som och fungerar som din tänkta produkt. Ibland vill man se och “känna” på en produkt eller tjänst innan man lägger ner resurser på att producera. Prototyper är ett bra sätt att visualisera och kommunicera idéer och krav.

Vad vill du testa?

Fundera på vad det är du vill undersöka eller testa:

  • en specifik funktion
  • navigering
  • layout
  • grafisk utformning
  • dina call to action
  • varumärket
  • din story
  • användbarhet

Du kan göra flera digitala prototyper med olika grad av “fidelity”. Dvs att den är olika mycket utvecklad beroende på vad du vill testa.

När du skapar digitala prototyper kan du labba mycket och det tar inte alltför lång tid.

Du har möjlighet att testa olika features, din brand story, varumärket, dina call to actions osv. Allt utan att du behöver offentliggöra en hel site innan du känner dig redo.

Om du arbetar i ett företag och flera personer behöver involveras så är det också kostnadseffektivt att testa er fram med prototyper innan tid och pengar för utveckling börjar ticka. Med en digital prototyp finns även fördelen att ni kan skapa en gemensam bild av det som sedan ska utvecklas. Det blir enklare att kommunicera era krav till utvecklarna, om ni har en prototyp att visa eller utgå ifrån. Alla som sedan ska använda siten eller tjänsten får också en känsla för hur den kommer att se ut och fungera.

Exempel på digitala prototyper

De första bilderna visar prototyper där jag ville testa flödet i två olika applikationer, endast enkla symboler och gränssnitt. Jag har inte prioriterat att lägga tid på grafisk utformning.

Bilderna nedan visar en prototyp där vi önskade testa storyn och hur vi skulle utforma Call to action knapparna. Vad skulle det stå på dem? Vi ville även testa layouten och placering av objekt på sidorna. Detta är en första digital prototyp för en hemsida till en konstnär.

Program för att skapa prototyper

Det finns en mängd program för att skapa digitala prototyper. Det handlar mycket om tycke och smak. Samtliga har oftast en gratis version med begränsningar och sedan olika nivåer av betal versioner. Testa gratisversionerna för att se om det är något som passar dig och dina behov.

Jag själv föredrar följande olika program:

Justinmind

Adobe XD

Sketch och Invision

Sammanfattning

Syftet med att skapa prototyper är att bland annat att kunna:

  • kommunicera en idé på ett visuellt sätt
  • jämföra olika lösningars för- och nackdelar
  • testa olika sätt att lösa ett problem
  • testa funktionalitet
  • visa upp och presentera en produkt eller tjänst

Inom digital design och UX (user experience) arbetar vi mycket med prototyper som verktyg. Det finns flera skäl:

  • Billigt sätt att snabbt testa en idé
  • Enklare att framställa än en färdig hemsida eller app
  • Viktigt verktyg för att verifiera den funktionalitet som önskas
  • Bra sätt att kunna testa om användare förstår hur de navigerar
  • Att undersöka om målgruppen gör det vi förväntat oss att de ska göra (t ex köpa något av oss)
Facebooktwittergoogle_plusredditpinterestlinkedinmail

Visualisera och testa dina lösningar

Undersök lösningarna genom att visualisera och testa

Nu är det dags för er att visualisera och testa de lösningar som ni genererat (fortsättning från min förra bloggpost). Genom att tillämpa Design Thinking har du och dina kollegor troligen ett antal olika lösningar som behöver undersökas mer.

Visualisera och testa med prototyper

Visualisera

Ett första steg i att visualisera idéerna är att ni skapar ett flödesschema över den föreslagna lösningen. Då får ni även möjlighet att fundera igenom vad som ska hända vid varje interaktion. Detta skapar samtidigt möjlighet att se om det saknas något. För att kunna visualisera och testa lösningsförslag är det bra att göra prototyper. Dessa går oftast snabbt att göra. Fördelen är att man håller ner kostnaden jämfört med att programmera för att testa. Samtidigt kan ni testa och utvärdera lösningarna samt skapa en gemensam bild av vad det är ni vill göra.

I sin enklaste form kan en prototyp bestå av ett antal pappersskisser där ni “bläddrar” bild när någon interagerar med en funktion. Detta är ett bra sätt att testa enstaka funktioner. Vill man ha en mer utvecklad visuell bild för att diskutera funktionalitet, layout osv kan ni göra digitala prototyper. Dessa är klickbara men oftast utan kod ”bakom”. Det ni gör då är att ni simulerar funktionalitet.

Exempel på sådant som kan vara bra att testa innan du färdigställer din hemsida är om besökare gör det du vill att de ska göra. Klickar de på ditt erbjudande? Är din hemsida tydlig, förstår besökaren vad man kan göra eller köpa och hur?

Olika detaljeringsnivå

En prototyp kan som sagt vara detaljrik. Den kan visuellt se ut som den färdiga applikationen. Alternativt kan en prototyp innehålla endast relevant funktionalitet för det ni vill testa. Era behov avgör vad som ska testas med hjälp prototypen.

Det är en fördel i att göra förbättringar i prototyperna efter varje test Syftet är att eliminera uppenbara fel eller att justera det som inte uppfyller era krav. Det är bra om ni har möjlighet att testa flera av era lösningsförslag. Då får ni överblick över för- och nackdelar med olika lösningar samt hjälp att ringa in den lösning som bäst matchar behov och användningsområde.

Exempel

Klicka här för att se ett exempel på en digital prototyp. Just denna har jag skapat i ett program som heter Adobe XD men det finns ett stort antal andra program också som man kan använda. I sin enklaste form är som jag nämnde även skisser på papper ett sätt att utvärdera olika lösningar. Fördelen med Adobe XD är att det är relativt låg inlärningströskel samt att man snabbt kan publicera sina prototyper. Jag trivs även med att arbeta i det gränssnittet.

Tester

Visualisera och testa

Det finns många typer av tester att genomföra:

  • Användningstester
  • Funktionalitetstest
  • Användbarhetstest
  • Måluppfyllnadstest

Testerna ska baseras på de mål som ni har satt med digitaliseringen (exempelvis att spara X minuter på en funktion). För att genomföra testet bestämmer ni ett antal aktiviteter som ska genomföras i en viss ordning. Det är bra att utgå från prototyper eller skisser i testerna för att minimera kostnaden för tester och de behov av justeringar som uppstår efter.

Om ni vill exempelvis vill testa användbarheten på en hemsida kan ni skapa olika uppgifter för testpersonerna som går ut på att förstå och hitta olika objekt/funktioner. Då sitter du med under testet och dokumentera det som sker för att kunna identifiera sådant som inte är intuitivt eller rent av svårt.
Viktigt att tänka på är att dokumentera under testet, efteråt kommer man oftast inte ihåg alla detaljer.
Det som egentligen är bäst är om man har möjlighet att filma (vilket man inte alltid har), men att anteckna fungerar också bra.

Läs mer om tester här.

Facebooktwittergoogle_plusredditpinterestlinkedinmail