När man arbetar med UX så finns flera olika metoder för att ta fram designskisser åt kunderna. Exempelvis vad är wireframes för något och hur skiljer sig det från mockups och prototyper? Här tydliggör vi vad olikheterna är och varför man bör använda dessa metoder när man utvecklar en tjänst eller produkt.
Ofta används begreppen wireframes, mockups och prototyper synonymt med varandra, men egentligen är de tre olika sätt att kommunicera design med användare, kund, utvecklare och designers.
Wireframes
Wireframes, eller trådskisser som det ibland kallas för på svenska, är enkla svartvita skisser av en sida. Genom att skapa wireframes konkretiserar man sidans tänkta struktur och hjälper intressenter att se helhetsbilden innan man börjat med utveckling. Fokus med wireframes ligger inte på sidans utseende utan dess struktur, navigation och funktionalitet. Wireframes kan antingen skapas med papper och penna eller helt digitalt med verktyg som Balsamiq Wireframes, där man kan använda färdiga komponenter som ser handritade ut för att bygga sina wireframes.
En stor fördel med wireframes är att de går väldigt snabbt att färdigställa då man inte lägger fokus på att finjustera skissernas utseende. Man får också ofta mer relevant feedback eftersom de har fokus på funktionaliteten istället för den visuella designen. Det möjliggör för snabb iterering och feedback tidigt i processen, innan man lägga ner tid på visuell design eller börjat skriva en enda rad kod. Kostnaden för att göra om en wireframe är väldigt liten i jämförelse med kostnaden för att skriva om kod.
Mockups
Ibland behövs en högre detaljnivå i skisserna för att exempelvis intyga kund eller ge en mer exakt bild av hur produkten kommer att se ut till utvecklarna. Då kan det vara en bra idé att ta fram mockups. Förutom det som ingår i en wireframe, innehåller en mockup även den visuella designen. En mockup ser med andra ut som den slutgiltiga produkten, men saknar interaktiviteten.
Eftersom mockups även innehåller de visuella elementen tar de mer tid att färdigställa än enkla wireframes. Det finns dock många bra verktyg som effektiviserar processen att skapa mockups, så som Sketch, InVision, Adobe XD, UXPin och Figma. Många av verktygen har även möjlighet att inspektera CSS-koden i en mockup och kan även konverteras till interaktiva prototyper vid behov.
En fördel med mockups jämfört med wireframes är att det ger både kunden och utvecklarna en tydligare bild av hur produkten kommer att se ut i verkligheten. Med mockups kan man alltså relativt lätt iterera och få feedback på den visuella designen utan att behöva utveckla en färdig produkt.
Prototyp
En prototyp är flera designskisser, men till skillnad från en mockup eller wireframe är den även interaktiv. En prototyp ska simulera användarinteraktion med hjälp av klickbara ytor, precis som i en slutgiltig produkt. Ofta är tanken att prototypen även ska se ut som den slutgiltiga produkten. Men det är heller inte ovanligt att göra en lo-fi variant tidigt i ett projekt, uppbyggd av exempelvis wireframes, där fokus ligger på att visa hur användarinteraktionen ska se ut.
Prototyper är ett utmärkt sätt att kommunicera användarflödet för både kund och utvecklare, men kanske är den största fördelen med prototyper att användare kan testa att interagera med gränssnittet innan man har utvecklat en färdig produkt. Att göra användartester på detta sätt brukar ofta generera väldigt insiktsfull feedback och leda till att många användbarhetsproblem upptäcks i ett tidigt skede. Oftast räcker det med att testa prototypen på ett fåtal personer för att upptäcka de flesta problem.
Slutsats
Slutligen kan man säga att den stora fördelen med alla tre metoder är att man tidigt kan upptäcka missar i designen innan en utvecklare behöver implementera något, vilket gör att man slipper skriva om kod i onödan. Det brukar löna sig att investera i designen så tidigt som möjligt och samla in feedback innan man börjar skriva en enda rad kod. Annars riskerar man behöva göra större och mer kostsamma ändringar om brister upptäcks senare i processen.
Kontakt
Är du intresserad av att veta mer kontakta gärna vårt erfarna UX-team.
Relaterade blogginlägg:
Vad innebär UX-design och varför är det viktigt?
