Så förvandlar du din idé till en mockup

Finns det något bättre sätt att sälja in en ny app eller hemsida än att bygga en mockup? Med följande enkla steg kan du visualisera din framtida produkts utseende och funktionalitet utan att behöva skriva en enda rad kod.

Vi utgår från att du har samlat kundinsikter och validerat din idé på ett eller annat sätt. Du vet vad dina kunder (användare) har för problem och hur man skulle kunna lösa det. Det du behöver nu är att paketera lösningen på ett vackert och användarvänligt sätt.

Du kan själv göra en första variant av din nya app eller sida med den här förenklade designprocessen:

1. Samla inspiration

2. Skapa wireframes

3. Ta fram en mockup

Vad är en mockup?

En mockup är förstadiet till en prototyp. Där ser du tydligt hur din framtida app eller hemsida kommer att se ut utan att integrera några faktiska funktioner. Till skillnad från en riktig prototyp så ser mockupen bara ut som den riktiga produkten, men den fungerar bara på ytan.

Du kan använda din mockup för att sälja in din idé till investerare, överlämna till ett utvecklingsteam för vidareutveckling eller bara leka runt med. Processen i den här artikeln kräver inga programmeringskunskaper och måttlig erfarenhet av UX-design. Du bör däremot ha tillgång till en referensgrupp bestående av kunder, kollegor eller andra som kan testa din design.

Genom hela processen bör du tänka på att göra din design:

Tydlig – Det ska vara lätt att förstå vad som går att göra på sidan eller i appen

Koncis – Försök få in så mycket information du kan på så lite plats som möjligt

Konsekvent – Ditt UI bör hålla samma struktur när man navigerar mellan olika sidor

Förlåtande – Dina användare bör kunna göra misstag (typ klicka fel) utan att det får ödesdigra konsekvenser

Steg 1: Samla inspiration

Om du är helt och hållet ny på UI-design kan det vara svårt att veta var du ska börja. På ui-patterns.com/patterns hittar du flera färdiga lösningar du kan inspireras av. Där finns exempel på menyer, dashboards och så vidare. Tryck på det mönster du är nyfiken på för att se exempel och en kort förklaring av hur det kan användas.

Du kan också ta en titt på dina favoritappar och reflektera kring vad det är som gör dem så bra ur ett designperspektiv. Är det den smarta strukturen, de smidiga övergångarna eller lättheten att hitta rätt? Självklart kan du också ta inspiration från appar du inte gillar, så du undviker att upprepa deras misstag.

Ett sätt att strukturera upp det är att skapa en mood board av saker du gillar och se om du hittar gemensamma nämnare, till exempel färger, menyupplägg eller knappar.

Steg 2: Ta fram wireframes

Till att börja med bör du skapa wireframes – enkla svartvita skisser över ditt UI. De ger en ungefärlig idé om uppbyggnaden, vart man kan navigera, vilken funktion som behövs samt vilken storlek med mera olika elementen bör ha. I det här steget utelämnar du färger, logotyper och fonter. Det handlar mer om hur produkten ska fungera än hur den ska se ut.

Förslag på verktyg som du kan använda för att göra dina wireframes:

• Sketch

• Balsamiq mockups

• UXPin

• Photoshop

• Papper och penna

Flera av dessa är webbaserade och både smidiga och enkla att använda. Om du däremot vill slippa sätta dig in i ett nytt program så räcker papper och penna långt. Huvudsaken är att du börjar inventera funktioner och får till en logisk struktur på ditt UI.

Kan jag hoppa över wireframing?

Det kan kännas lockande att skippa wireframingen och gå direkt på en mockup. Ibland är det okej, men ofta är det inte en bra idé.

När du ber om feedback på wireframes kommer du att få annan feedback än när du frågar om en färdig mockup. Med wireframes hamnar fokus på flöde och struktur. Med mockups å andra sidan kan användaren “distraheras” av färger, känsla, fonter och så vidare. Båda typerna av feedback är viktiga för ett riktigt bra design, men du hjälper din referensgrupp genom att ge dem ett moment att fokusera på i taget!

Att tänka på när du testar dina wireframes

Tänk på att wireframes kan vara svåra att förstå för den som är helt obekant med UX-design. Beroende på hur din referensgrupp ser ut så kan deltagarna ha olika förväntningar på vad de ska testa.

Många som användartestar förväntar sig att få en halvfärdig produkt framför sig, inte en svartvit skiss. När du då testar dina wireframes på dina “vanliga” användare kan de ha svårt att förstå poängen och ge dig konstruktiv feedback. Försök då fokusera på de problem produkten ska lösa och be användarna reflektera över om funktionaliteten, som skisserna representerar, löser dessa problem på ett tillfredsställande sätt. Det är alltid lättare att förstå syftet med en produkt om du förankrar den i verkliga scenarion och kontexter.

Ifall du misstänker att det blir svårt att testa på en standardanvändare kan du istället be dina kollegor att testa din design först. Förklara i så fall vad wireframes är bra för och vad du skulle behöva få feedback på. På detta sätt kan du få bättre koll på vilka eventuella tveksamheter som kan komma upp när du testar på slutanvändare.

Steg 3: Bygg din mockup

När du har det grundläggande flödet klart för dig är nästa steg att bygga din mockup. Det kommer möjligen att ta längre tid än wireframing, men du kan fortfarande få till något bra med relativt enkla medel.

När du gör din mockup behöver du ta hänsyn till storleken på olika element, kontraster, färgval, fonter och så vidare. Tänk på att följa ledorden vi nämnde ovan: tydligt, koncist, konsekvent och förlåtande. Genom att till exempel hålla dig till en färgpalett och en grundläggande struktur blir din mockup både snygg och enkel att navigera.

En mockup ska i större grad representera slutprodukten än vad wireframes gör. Det blir därmed större fokus på detaljer och utseende än i tidigare steg. Även här finns det många mallar och UI-ramverk att använda sig av för att skapa designen. Se till att din mockup matchar dina wireframes funktionalitet och navigation eftersom det är dessa du tidigare testat på dina användare.

Program du kan använda för att skapa din mockup:

• Mockplus

• InVision

• Sketch

• UXPin

• Figma

• Photoshop

Vanliga misstag

När du tar fram din mockup, försök undvika följande fallgropar:

Otydliga Call to Actions

Dina CTA:s (Calls to Action) är de länkar eller knappar som ska leda användaren till att utföra de saker du (och de) vill. Ska de köpa något, ladda hem något, läsa mer eller utföra en transaktion? Fundera på vad användaren vill göra med appen för att identifiera dina CTA:s och placera dem där de syns tydligt. Se till att de sticker ut genom placering, form, färg och text.

För många eller fel färger

För många olika färger eller färger som inte matchar gör det både svårt för användaren att fokusera på rätt saker. Fel färgval kan även göra text svårläslig eller i värsta fall oläslig. Färgerna måste stå i stark kontrast till varandra för att verkligen synas. Du kan testa kontrasten i dina färgval här.

Krånglig struktur

Har dina användare svårt att förstå vad som går att göra på sidan? Har de svårt att navigera från en sida till en annan? Samla feedback från din referensgrupp och skala bort eventuellt överflöd.

Icke-responsivt UI

Hemsidor och appar kan nås via en mängd olika skärmar – datorer, tablets, mobiler, smart-TV och så vidare. Fundera på om din design håller måttet när den överförs till alla olika format.

Få hjälp av ett proffs

De olika stegen ovan är grunden för smart UI-design. Lyckas du ta dig igenom dessa så har du gjort mycket att det viktigaste arbetet.

Kanske är du redo att ta din design till nästa nivå eller så var processen krångligare än du tänkt dig. I så fall finns hjälp att få! Bilderna, finliret, den slutliga designen och tricksen som hjälper dig att undvika misstagen kan alltid överlåtas åt ett proffs.

Hos en erfaren designer sitter saker som färgval, paletter, flöden och mönster i ryggraden. De vet även hur en användares ögon brukar röra sig över skärmen och hur man omvandlar deras feedback till förbättringar.

Nyckeln till ett vackert UI är dock inte färgerna, det är tänket. Det kan du förmodligen bäst för din produkt. Om du bidrar med tänket och en duktig UX-designer gör resten så har du skapat bästa möjliga förutsättningar för att sälja in en ny app eller hemsida!

Behöver du hjälp med att ta dig vidare i någon av stegen eller söker du kanske någon som kan sköta hela processen åt dig? Låt våra erfarna UX:are guida dig – hör av dig!