En vän hade en bra app-idé och skulle träffa några investerare för att försöka få loss lite kapital för att bygga appen. För att kunna förklara hur mobilapplikationen skulle fungera behövde hon något sätt att demonstrera den på. Eftersom jag har ganska lång bakgrund inom programmering frågade hon mig.
Men alla har ju inte en programmerare eller designer att fråga. Och hur svårt är det egentligen att göra det hela själv? Inte alls svårt nuförtiden. Här visar jag steg för steg hur du själv kan göra. Stora delar löser du med din mobiltelefon och papper och penna.
Steg 1 – Visa flödet
För att du själv ska förstå att hela appen hänger ihop och har ett naturligt flöde brukar jag rekommendera att du skissar upp flödet på ett helt vanligt papper. Antingen som en punktlista om det är ett enkelt och rakt flöde, eller mer som ett diagram med pilar kring vad som händer i varje steg.
Säg att vi skulle bygga en enkel prototyp av Instagram-appen. Då skulle vårt grundflöde för att ladda upp ett foto se ut så här.
- Klicka på kameraikonen.
- Välj från biblioteket.
- Lägg på ett filter.
- Skriv en beskrivning
- Publicera fotot
Varje app har vanligtvis flera flöden, men nu väljer vi att fokusera på ett enda för att göra det hela tydligt.
Nästa del är att skissa upp varje vy på helt vanligt papper.
2. Skissa
Observera att du inte behöver vara någon konstnär. Det här får bli hur fult som helst. Den fula ankungen kan vara snygg i jämförelse med din teckning. Grundpoängen är att det ska gå att förstå vad man ska göra i varje ruta. Skala hellre bort en del detaljer än att ha för många grejer. Fundera på vad som är viktigt för att din app ska kännas bra – och snöa inte in på design i det här läget.
Jag rekommenderar att plocka fram ett vanligt A4-papper och en blyertspenna.
Om du vill lyxa till det lite extra kan du använda en mall.
Skriv ut denna PDF på vanligt papper, så får du en uppfattning kring hur mycket du får plats för på varje skärmvy.
3. Fota
Nu är det dags att plocka fram din mobiltelefon. Starta appen Fotografera varje vy i ordning. Det blir bäst om du har hyggligt bra ljus, gärna dagsljus. Försök hålla kameran så still som möjligt och bara få med det som är inom själva skärmen på mobilen. Det vill säga – om du använder mallen ovan så ska inte mobiltelefonen i sig komma med på bilderna, utan bara det som syns på skärmen.
4. Lägg upp bilderna
Registrera ett konto på Pop – Prototyping on Paper. Det är gratis – och går snabbt om du registrerar dig med Facebook.
Klicka på ”Create a new project”. Välj iPhone eller Android, beroende på vilken telefon du tänkte dema på sen. Jag brukar även låta Websharing vara påslaget så jag kan skicka demo-länkar till vänner.
Nu får du ladda upp bilder från din dator. Om du tycker det är bökigt att få över bilderna till din dator går det även bra att hämta bilder från Dropbox. Eller så installerar du helt enkelt Prototyping on Paper-appen på din mobil – då synkar de direkt mot webben också.
5. Länka ihop vyerna
Oftast har man en eller ett par knappar i varje vy som leder till nästa steg, eller tillbaka.
Vi går in i POP-webbapplikationen igen. Det vi vill göra nu är att få knapparna klickbara så att det går att hoppa framåt och bakåt. Klicka och dra för att få fram en liten grön ruta på din vy.
Välj sedan ’Link to ...’ och peka på det du vill länka till. Oftast är det en av de andra vyerna som du nyss laddade upp. Gå igenom varje vy och länka knapparna till nästa steg.
Som en extra bonus kan vi lägga till en liten animering när man går mellan skärmarna. Det får appen att kännas lite mer riktig, även om det är en skiss. Välj ”transition” och använd ”Next” eller ”Back” så får du en bra app-ig känsla i övergångarna mellan vyerna.
6. Dela med världen!
Det finns ett par olika sätt att dela din app-demo på. Det enklaste är att klicka på ”Share” och klicka på den andra fliken, Web link. Kopiera adressen och skicka till de som ska ha demonstrationen.
Det går också att skicka den till andra som också har POP-appen installerad. Det gör du i första Share-fliken. Observera att de då kan ändra i appen också.
Länken du skickar ovan kommer fungera både på mobila enheter och datorer. Det ger mer effekt att demonstrera i en riktig mobil, men även på en dator blir det väldigt tydligt hur din app är tänkt att fungera när du klickar fram och tillbaka.
Lycka till!
