prototyping

Prototyping tools voor Interactie Ontwerpers

,

Door toenemende mogelijkheden in de ontwikkeling van het web worden interacties op web en app steeds dynamischer. Hoe verfijnder de interacties, hoe lastiger deze vast te leggen zijn in statische schermen. Daarom is het belangrijk om als interactie ontwerper prototypes te maken waarmee je de werking van het product kunt laten zien.

Wat is een prototype?

Een prototype is een model van een product waarmee de werking van het product kan worden getoond, getest en vervolgens kan worden verbeterd. Een prototype kan variëren van ruwe schetsen, waarbij de simulatie van het product wordt nagebootst, tot een product dat niet van echt is te onderscheiden. Met een prototype wordt het een stuk duidelijker hoe de website of app werkt in vergelijking tot een statisch ontwerp op papier. Door al in een vroeg stadium van het ontwerpproces gebruik te maken van prototypes kun je eenvoudig testen of het ontwerp aansluit bij de wensen van je eindgebruiker en de opdrachtgever.

Wij hebben een lijst verzameld van handige prototyping tools voor Interactie Ontwerpers. Deze prototyping tools bestaan uit tools waarmee je een klikbaar prototype kunt maken, zodat je de structuur en user flow van de website kunt na bootsen tot tools waarmee je animaties kunt simuleren. Om bijvoorbeeld bepaalde transities te prototypen. De lijst is gerangschikt op orde van complexiteit. Te beginnen met de eenvoudigste.

1. POP

De eerste ideeën voor een website of mobiele applicatie schetsen we vaak op papier. Wanneer het concept uit meerdere schermen bestaat kun je daar eenvoudig een klikbaar prototype van maken, bijvoorbeeld met de app POP (prototyping on paper). Doordat je met schetsen werkt hoef je nog niet na te denken over alle details. Dit prototype staat nog ver van het uiteindelijke product af. En meer mogelijkheden dan linken van scherm naar scherm biedt deze app niet. Zodra er wel over details nagedacht gaat worden kun je beter een meer waarheidsgetrouw prototype maken.

Ook met pen, papier, schaar en post-its kun je eenvoudig een aantal prototypes maken. Het schuiven en interacteren met deze prototypes kan je interessante inzichten brengen. In dit filmpje zie je hoe gemakkelijk je met een beetje knip en plak werk toch de werking van een product inzichtelijk kunt maken.

Gebruikerstest met een paper protoype

  • Wat: Klikbaar prototype, op basis van schetsen
  • Wanneer: In de conceptfase, om je eerste ideeën te valideren en om de interactie te testen en optimaliseren
  • Pro's: Makkelijk en snel, gratis te gebruiken
  • Con's: Beperkte mogelijkheden, alleen voor mobiele prototypes

2. InVision

Wij tekenen onze wireframes graag in Sketch. n Sketch kan je geen prototypes maken, maar het werkt wel erg goed samen met InVision in. Op dit prototyping platform kun je heel eenvoudig schermen importeren en een interactief prototype maken met een aantal leuke effecten en animaties. Zo kun je bijvoorbeeld een sticky header en footer toevoegen en is er voor mobiele prototypes de keuze uit een lijstje met schermtransities en gestures. Wanneer je een eigen animatie in je prototype wil laten zien kan je deze als een GIF toevoegen. InVision brengt regelmatig nieuwe features uit, dus binnenkort zullen er vast weer nieuwe mogelijkheden bij komen. Een alternatief voor InVision is Marvel app.

InVision

Een prototype maken in InVision.

  • Wat: Klikbaar prototype, op basis van wireframes
  • Wanneer: Gedurende het hele ontwerptraject, voor het uitvoeren van user testen en presentaties aan de opdrachtgever
  • Pro's: Gebruiksvriendelijk, koppeling met Sketch, schermen kunnen eenvoudig ingesleept en geüpdatet worden, gratis te gebruiken
  • Con's: Beperkt aantal animaties mogelijk

3. Keynote

Keynote is vooral bekend voor het maken van presentaties. Daarbij is het effect ‘Magic move’, waarbij je in een vloeiende beweging van de ene op de andere dia overgaat onze favoriet. Hiermee kun je bijvoorbeeld een natuurlijke scroll-beweging op een website nabootsen. Handig voor het tonen van je ontwerp tijdens een presentatie.

Maar met de effecten van Keynote is natuurlijk nog veel meer mogelijk. We gebruiken Keynote dan ook steeds vaker om animaties uit te denken en te testen.Door de effecten op de juiste manier te combineren kun je dynamische interacties goed visualiseren. De effecten zijn toe te passen op de transities tussen de dia’s maar ook op losse objecten. Zo kun je bijvoorbeeld een object langs een pad verplaatsen, van grootte doen veranderen en laten draaien of transparant maken. De mogelijkheden zijn eindeloos. In dit artikel van InVision lees je een duidelijk stappenplan voor animeren in Keynote

Animatie voor het kiezen van een andere dag

Wil je zien wat er allemaal mogelijk is met animeren in Keynote? Bekijk dan de remake van Google’s Material Design Video door Andrew Haskin.

  • Wat: Animatie prototype
  • Wanneer: Tijdens de detaillering, om verschillende dynamische interacties te testen en presenteren
  • Pro's: Redelijk snel en eenvoudig, (waarschijnlijk) geen nieuwe software nodig (anders wel betaald)
  • Con's: Wanneer je complexe animaties wilt maken is het veel trial and error, niet op verschillende applicaties te testen

4. Pixate

Pixate is speciaal ontwikkeld om animaties voor mobiele applicaties te prototypen. Deze online tool gebruik je samen met de Pixate app, zodat je het prototype wat je online maakt direct live kunt bekijken en gebruiken op je smartphone.

Het prototype bestaat uit verschillende objecten waar een interactie en animatie ingesleept kan worden. De interactie bepaalt welke gesture de eindgebruiker moet toepassen en welke animatie daarop volgt. Wanneer je bijvoorbeeld een object de interactie ‘pinch’ geeft en de animatie ‘scale’, kun je het object op je smartphone ‘pinchen’ waardoor het vergoot en verkleind kan worden. Op deze manier kun je zelf interacties creëren zonder dat er code bij komt kijken.

De objecten die je kunt toevoegen zijn rechthoekig en enkel van elkaar te onderscheiden met kleur. Op zich best handig om snel een animatie te testen. Voor een gedetailleerder prototype kun je zelf assets uit je ontwerp toevoegen. Helaas kun je deze assets er niet direct vanuit Sketch inslepen. Alle assets moeten één voor één als losse afbeelding worden opgeslagen.

We zijn zelf ook even gaan experimenteren wat voor animaties je kunt maken met Pixate. zie hier het resultaat.

Animatie in Pixate

  • Wat: Animatie prototype
  • Wanneer: Tijdens de detaillering, om verschillende dynamische interacties te testen en presenteren
  • Pro's: Handig om basic animaties te maken, gratis te gebruiken
  • Con's: Alleen voor mobiele prototypes, lastig om mee te beginnen, beperkt aantal mogelijkheden

5. After Effects

After Effects is een programma van Adobe speciaal voor het maken van animaties. Hierdoor wordt het veel gebruikt in de game- en filmindustrie. Met After Effects kan je complexe animaties maken op basis van een timeline. Zoals met andere Adobe programma’s duurt het wel even voordat je weet welke functies handig zijn om te gebruiken en waar deze te vinden zijn. Maar zodra je je weg hebt gevonden kan je alle mogelijke interactiepatronen animeren.

Op de designers community Dribbble staan genoeg voorbeelden van animaties gemaakt in After Effects.

  • Wat: Animatie prototype
  • Wanneer: Tijdens de detaillering om aan ontwikkelaars en stakeholders te laten zien hoe een interactie moet animeren
  • Pro's: Geavanceerde animaties mogelijk
  • Con's: Moeilijk in het gebruik, betaald via Adobe

6. Framerjs

Wanneer je als ontwerper ervaring hebt met het schrijven in Javascript is Framerjs mogelijk een interessante tool. De tool werkt samen met Photoshop en Sketch waaruit je verschillende lagen kunt importeren waarna je animaties en interacties toevoegt door middel van code. Zo krijg jedirect visuele feedback op datgene wat je hebt ontworpen.

Framerjs

Direct feedback op wat je maakt

Bij Soda studio werken we bij veel projecten in multidisciplinaire (scrum)teams. Wanneer je samenwerkt met een front-end developer heb je het geluk dat de bedachte interactiepatronen direct gebouwd en getest kunnen worden.

  • Wat: Animatie prototype
  • Wanneer: Tijdens de detaillering om aan ontwikkelaars en stakeholders te laten zien hoe een interactie moet animeren
  • Pro's: Geavanceerde animaties mogelijk, direct visuele feedback
  • Con's: Kennis van Javascript (Coffeescript) vereist, betaald (gratis trial)

Prototypes toepassen in je workflow

Een prototype maken kost tijd. Je moet eerst goed bedenken wat je precies wilt laten zien, welke tool je gaat gebruiken, hoe je het gaat maken en hoe je het gaat testen met de eindgebruiker. Daar tegenover staat dat het een hoop documentatiewerk of overleg met teamleden en opdrachtgevers scheelt. Dus prototypen loont de moeite!

“A prototype is worth a thousand meetings”

Mike Davidson

Waar de consument steeds meer om gebruiksgemak en ervaring geeft, hoort het maken van prototypes in de workflow van een ontwerper thuis.

Volg ons voor een Soda refill: