Från appidé till klickbar prototyp
Av CodexierPublicerad 6 min läsning
De flesta appidéer faller på något som hade kunnat ses på en vecka: kärnuppgiften kräver för många tryck, användarna förstår inte första vyn, eller funktionen alla bråkade om visar sig inte spela roll. En klickbar prototyp lyfter fram de problemen innan en utvecklare anlitas. Den här guiden tar dig från idén till en prototyp riktiga människor kan trycka sig igenom, och visar vad som ska testas innan en enda kodrad skrivs.
Skriv ner kärnuppgiften
Börja med en mening: när en användare är i den här situationen öppnar hen appen för att göra det här, och hen vet att det fungerade när det här händer. En bokningsapp för en klinik: en patient som behöver en tid öppnar appen, väljer en tid och ser en bekräftelse. Kan ni inte skriva meningen är idén inte redo för en prototyp. Har ni tre meningar har ni tre appar, och prototypen ska täcka bara den första. Skriv in vem användaren är i samma mening, eftersom testet i sista steget bygger på att hitta fem av dem.
Användarflöden före vyer
Ett flöde är stegen från att appen öppnas till att kärnuppgiften är klar. Att rita det som rutor och pilar innan någon vy ritas tvingar fram frågan som betyder mest: hur många steg, och vilka kan tas bort.
- Rita den lyckliga vägen först: kortaste vägen till ett slutfört jobb utan att något går fel.
- Räkna stegen. Varje steg är en vy eller ett beslut. Fråga för varje om användaren behöver det eller om appen ber om det för sin egen bekvämlighet.
- Lägg till de två eller tre grenar som faktiskt kommer att hända: ingen ledig tid, betalningen misslyckas, användaren är inte inloggad.
- Bestäm vad som händer vid första öppning utan konto och utan data. Det tomma läget är där de flesta appar tappar användaren.
- Markera vilka steg som kräver information ni inte har ännu, som en partners API eller en juridisk kontroll. Det är riskerna att undersöka parallellt.
Enkla skisser
Med flödet fastlagt skissar ni varje vy grovt: rutor för innehåll, streck för text, en rektangel för varje knapp. Papper eller whiteboard är snabbare än något verktyg i det här skedet, och grovheten är en fördel. Folk kommenterar idén när skissen är grov och färgerna när den är polerad.
| Skede | Vad ni tar fram | Vad ni lär er |
|---|---|---|
| Pappersskisser | En grov teckning per vy i huvudflödet | Om flödet alls får plats på vyer, och vad varje vy måste innehålla |
| Enkla wireframes | Grå rutor i Figma, riktig text, ingen färg | Om hierarkin på varje vy stämmer och texten går att förstå |
| Klickbar prototyp | Wireframes länkade så att tryck flyttar mellan vyer | Om folk kan slutföra jobbet utan hjälp |
| Färdig design | Varumärke, färg, riktiga bilder | Hur det känns. Först efter att flödet klarat testningen |
Att hoppa från skisser direkt till färdig design är det vanligaste misstaget. Det gör ändringar dyra precis när de behövs som mest.
En klickbar prototyp i Figma
Figmas prototypläge länkar ramar så att ett tryck på en knapp öppnar nästa vy på en mobil. Bygg bara huvudflödet och dess två eller tre grenar. Använd riktig text, eftersom platshållartext döljer förståelseproblem, och realistiska data: riktiga tjänstenamn, riktiga priser i kronor, en kalender som ser äkta ut. Fejka de delar ni inte kan bygga, som en BankID-inloggning, med en vy som ser ut som det riktiga steget och ett tryck som går vidare.
Omfattning
Åtta till femton vyer är typiskt för ett kärnflöde. Fler än så betyder att flödet är för långt eller att ni prototypar version två.
Detaljnivå
Grå wireframes med riktig text räcker för att testa flödet. Lägg på varumärkesstil bara för de vyer ni ska visa investerare eller partner.
Enhet
Testa på en riktig mobil med Figmas mobilapp, inte på en laptopskärm. Tumräckvidd och textstorlek syns bara på enheten.
Att få den gjord
Vår tjänst för appprototyp och UX-flöden levererar precis det här skedet till fast pris enligt prissidan. Det är också första steget i ett helt appbygge.
Testa med fem användare
Fem personer som matchar er användarbeskrivning, en i taget, var och en får kärnuppgiften som uppgift och ombeds tänka högt medan de trycker sig igenom. Förklara inte appen. Se var de tvekar, trycker fel eller ställer en fråga. Efter fem sessioner upprepas samma problem, vilket är signalen att sluta testa och rätta. Skriv ner varje tvekan, rangordna dem efter hur ofta de förekom och ändra prototypen före nästa omgång. Två omgångar räcker oftast för att veta om flödet fungerar och om idén håller intresset när folk ser den konkret.
När ni inte behöver en prototyp: en app som kopierar ett välkänt mönster för ett internt team, med användare ni kan prata med dagligen, kan gå direkt till ett första bygge och rättas i användning. När prototypen säger nej: kan fem användare inte slutföra kärnuppgiften eller bryr de sig inte, är rätt svar att ändra idén, inte att bygga och hoppas. Det utfallet sparar hela utvecklingsbudgeten, och vi säger det rakt ut om det är vad testet visar. För att planera prototypen för er idé, eller för att gå från en testad prototyp till ett plattformsoberoende MVP-bygge, boka ett kostnadsfritt 15-minuterssamtal.
Vanliga frågor
Hur lång tid tar det att få en klickbar prototyp?
För ett kärnflöde, från en tydlig enmeningsuppgift till testad prototyp, en till tre veckor beroende på hur snabbt ni kan rekrytera testanvändare. Själva designarbetet är dagar. Testkalendern är det som drar ut på tiden.
Kan vi hoppa över prototypen och bygga en MVP direkt?
Det går, och för ett enkelt internt verktyg är det rimligt. För en konsument- eller kundapp kostar prototypen en liten bråkdel av bygget och tar regelmässigt bort det dyraste missförståndet innan det kodas.
Behöver vi en designer, eller kan vi göra det själva?
Skisserna och flödet kan och bör ni göra själva. Figma-prototypen vinner på någon som kan mobilmönster, eftersom användarna bedömer flödet mot apparna de redan använder. Oavsett är testet med fem användare den del som inte ska hoppas över.
Om testanvändarna gillar den, betyder det att vi ska bygga?
Att gilla är svagt bevis. Att slutföra uppgiften utan hjälp, och säga att de skulle använda den i situationen ni beskrev, är starkare. Starkast är att någon frågar när de kan få den. Leta efter det andra och tredje innan ni binder en budget.
Har ni en appidé och en grov skiss?
Ta med enmeningsuppgiften och det ni ritat. På femton minuter säger vi vad prototypen ska täcka, vad den skulle kosta och vad som ska testas först.
Boka ett kostnadsfritt 15-minuterssamtal