Det finns en uppsjö av verktyg för att göra prototyper. Vi har prövat de flesta på marknaden och bjuder på en topplista med våra nio favoriter.
Jag inleder med att ställa den konkreta frågan: Varför ska man prototypa? Genom åren när jag haft presentationer av interaktionsdesign för kund eller beslutsfattare har mötena alltid blivit mer effektiva och konstruktiva då jag haft med mig en prototyp. Mötet blir genast mycket roligare. Deltagarna förstår intuitivt så mycket bättre vad man pratar om då de diskuterar kring något man kan ta på, klicka runt i, och själv uppleva.
När det kommer till mobilappar är responstider, grafiska objekts tillstånd och inte minst animationer viktiga aspekter som kan göra att ett gränsnitt, som på papper ser helt oanvändbart ut, både blir intuitivt och enkelt. Animationerna hjälper till att förtydliga det som användaren behöver veta för att utföra sin uppgift.
Många val
Det finns en mängd av verktyg för olika ändamål och kunskapsnivåer. För min del med en bakgrund som mjukvaruingenjör, är givetvis de verktyg som erbjuder kod ett lockande val. Men det finns ett par riktigt bra verktyg som inte kräver kodande, vilka jag ofta använder då jag behöver snickra ihop något lite snabbt.
Mitt fokus i arbetet är på telefoner eller annan hårdvara med touch (bilar, flygledartorn och terminaler i butik etc). Men flera av verktygen funkar fint på dator med mus för den som är lagd åt webbhållet.
Jag har under de senaste åren slukat de mesta som kommit ut på marknaden och testat runt en hel del, och det är väl dags att lista ett par av verktygen som jag tycker håller måttet.
3 kategorier
Jag har delat upp verktygen i tre olika fack, vilka jag kommer att gå igenom i ett par artiklar. I första delen startar vi med hotspot-verktygen. De som bara stöder hela vyer och byten där emellan med såkallade “hotspots” (klickbara områden). De är fantastiskt bra för att snabbt bygga upp en navigation och testa runt i den utan allt för stor ansträngning. Helt klart ett bättre alternativ än wireframes. Klassiska verktyg som liknar dessa är Keynote och Powerpoint, vilka inte heller är dåliga alternativ, och i vissa fall fullt så goda som dessa. Men här kommer min topp tre-lista.
1. Pop
Prototyping on paper var initialt en iOSapp som tog foton på dina papperskisser för att sedan kunna länka ihop dem via hotspots som du själv satte ut i telefonen. Under senare år har verktyget växt och har nu även en webb-app, där du kan ladda upp skärmdumpar (antingen via drag n drop eller dropbox). I senaste versionen har gestures, såsom swipe och pinch lagts till och du kan också animera mellan vyer med till exempel slide, fade.
Animationerna är väl sådär i kvaliteten. Det som jag verkligen gillar är att webbgränsnittet har en smart listfunktion som hjälper dig att få en bra överblick över många skärmar. Det hjälper till då du bygger lite större flöden. Att testköra prototyper på telefonen gör man via deras app och då du är inloggad ser du alla dina prototyper. Fokus är bara på telefoner och tablets och det är endast dessa du kan skapa prototyper för.
2. Flinto
Är ungefär som POP men har enormt mycket snyggare transitioner och känns mer lättarbetat. Flinto stöder dock bara “tap” som touchinput. Men för att snabbt slänga ihop något är det ett fantastiskt bra verktyg. Testkör prototypen gör du i en webbläsare och Flinto kan maila eller smsa länkarna till dina enheter. Flinto är helt klart en favorit eftersom det är så sjukt snabbt och enkelt. Funkar lika bra på webben som i mobilen.
3. Invision
Sist ut blir ytterligare ett verktyg för att bygga en klickbar prototyp med en bild per skärm: Invision. Det liknar alltså Pop och Flinto. Det stödjer tap och swipe och i animationsväg så har det samma funkationer som Flinto och några till. Kvaliteten på animationerna är lika bra som i Flinto. Det är dock svårt att hålla koll på en komplex prototyp på samma sätt som i Pop, eftersom man inte har en överblicksvy, utan jobbar inne i varje enskild skärm.
Invision har dessutom stöd för en fix header som du kan behålla mellan vyerna, samt att bygga scrollbara vyer genom att lägga in en bild som är större än den valda skärmstorleken på din prototyp. Det ger en lite mer levande känsla än att bara kunna byta skärmar.
Men det som skiljer Invision är att du kan arbeta i team på samma prototyp och dela med dig av prototyper till deltagare. De kan sedan kommentera direkt inne på varje enskild vy. På så sätt är det enklare att arbeta med i större grupper eller på distans.
Det var min topp 3 i facket hotspot-verktyg. Inom kort kommer jag även att lista mina favoriter i de övriga kategorierna: Verktyg med states och animationer samt Kodverktyg.