Testlabbet: Nio prototypverktyg du inte får missa

Anders Thid

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

Lämna en kommentar

9 kommentarer

  • Rickard Östberg

    Jätteintressant, jag uppskattar dessa summeringar av olika verktyg jag kan ha nytta av. Själv är jag inte intresserad av att leta efter alternativ, därför är dessa sammanfattningar perfekt, tack :-) Något som skulle göra de bättre är om priset på verktygen fanns med, eller är alla gratis?

  • Anders Thid

    Hej, kul att du gillar artikeln :) Tyvärr är ju inget gratis, de flesta kostar mellan 10-25$ i månaden om man skall ha många projekt. Du kan däremot köra 1-2 projekt (med full funktionalitet rent UI mässigt, men kanske inte ha delning till grupper osv, utan att betala). Lite mer specifikt per verktyg är det såhär:

    Pop är gratis för upp till 2 projekt, vill du ha upp till 10 projekt kostar det 10$ per månad. och 25$ för obegränsat.

    Flinto har en prövotid då du kan prova runt lite, sen kostar det 20$ per månad. Finns inget gratisläge.

    Invision låter dig köra 1 projekt gratis, sedan har de olika stegar uppåt, 3 projekt kostar 15$ i månaden. Obegränsat antal projekt ligger på 25$ i månaden.

    Mvh Anders

  • Simon Bohm

    Tips på gratis verktyg: https://marvelapp.com/. Webbaserat, låg inlärningströskel och stöd för flera inputs (swipes, pinchar etc). Nackdelen är att det är lite svårare att få en överblick över flödet än i exempelvis Flinto.

  • Dan

    Kan tipsa om dessa verktyg. Ni kanske har testat dem med? Vore kul och se vad ni tycker om dem.

    https://marvelapp.com/ http://www.pixate.com/ http://bohemiancoding.com/sketch/

  • Mathias Ericsson

    Vi kör invision idag, men jag är på jakt efter ett bra prototyp-verktyg där man kan skriva kod så jag ser fram emot uppföljningen av denna artikel :-)

  • Anders Thid

    Dan: Pixate kommer i nästa del, (som är uppe nu) då det är mer komplext (men väldigt bra). Marvelapp har vi inte kikat på ett tag, minns att vi testade det när det var nytt, men kommer inte riktigt ihåg varför det föll bort, har för mig det var ganska likt pop/invision, men utan att tillföra något nytt.

    Sketch är ju mer en ersättare till fireworks/illustrator för att rita, än ett verktyg att bygga något interaktivt i. Men det är ett kompetent ritverktyg, till en billig peng. Vi kör det i flera projekt. 

    Jag får ta en koll på marvel igen, kanske hänt något sedan sist ;)

  • Anders Thid

    Mathias: Det kommer ;) jag såg däremot att pixate som gås igenom i nästa del fick stöd för lite javascriptande i veckan. Har inte provat ännu men det kan ju vara värt att kika lite på om du provar pixate.

  • Thomas Lundin

    Tumult Hype. Ganska oslagbart för den som vill göra mer visuella och interaktiva prototyper snabbt. Kommer i ny version snart.

    http://tumult.com/hype/

  • Elisabeth

    Jag själv använder Axure som jag tycker är ett fantastiskt verktyg för prototyper. Du har inte med det i din lista. Blir därför lite nyfiken på om du utvärderat Axure och skillnaden mellan detta program och de du listar. Axure kan man testa gratis i 30 dagar.