Prototype tools

Danielle Enzler
Danielle Enzler - 23 februari 2016

Bij Zicht gebruiken we prototype tools om een beeld te vormen over transities en animaties. In onze zoektocht naar de fijnste tool, zijn we er drie tegengekomen welke we hebben onderzocht.

UX

Transities en animaties worden voor de User Experience steeds belangrijker. Niet alleen voor de merkbeleving, ook zetten we animaties in om de gebruiker te helpen bij het begrijpen van de site. Klassieke wire-frame tools zijn er niet goed op uitgerust om een animatie-concept voor de UX te ontwikkelen en te testen. Proto-type tools kunnen dat beter.

Er zijn veel verschillende prototype tools en om geen keuzestress te krijgen, hebben we er drie uitgekozen.

  • Eén van de bekendste tools; InVision;
  • Een bestaande tool die in een totaal ander jasje gestoken is; Flinto for Mac; en
  • Een relatief nieuwe tool; Principle.

Let’s start with: InVision

InVision is een laagdrempelige prototype-tool die de gebruiker heel makkelijk een klikbaar prototype in elkaar laat klikken. Dit prototype kan weergegeven worden op desktop, tablet en mobiel. Wanneer je het prototype hebt bekeken kun je binnen het prototype feedback geven.

Sterke punten

  • Laagdrempelig;
  • Prototype kan via Windows en Apple worden gemaakt;
  • Klant kan in het prototype feedback geven op bepaalde design elementen/interacties;
  • Je kan je designs aanpassen en opnieuw opslaan, je prototype pakt altijd de meest recente designs; en
  • Geen kennis van code nodig.

Zwakke punten

  • Ondersteund (nu nog) geen animaties. (wordt aan gewerkt); en
  • Je kunt er niet snel een wireframe in maken.

Next: Flinto for Mac

Flinto for mac is een prototype tool waarmee je op een laagdrempelige manier een prototype in elkaar kunt zetten. Omdat Flinto For Mac ook een Sketch import heeft kun je je designs ook gemakkelijk animeren. Wanneer je geen gebruik maakt van Sketch, kun je ook jpgs, png’s, et cetera uploaden en hier een klikbaar prototype van maken.

Sterke punten

  • Laagdrempelig;
  • Ondersteund animaties;
  • Geen kennis van code nodig; en
  • Sketch import.

Zwakke punten

  • Prototype is alleen via Mac te bouwen.

Last but not least: Principle

Principle is een prototype tool waarmee je op een laagdrempelige manier kunt animeren. Je kunt uiteraard ook je screens erin zetten en een klikbaar prototype van maken. Losse elementen die je wilt animeren, kun je in Principle maken en via een tijdlijn heel precies animeren.

Sterke punten

  • Laagdrempelig;
  • Ondersteund animaties;
  • Geen kennis voor code nodig;
  • Precies je animatie maken door middel van een tijdlijn; en
  • Snelle manier om je prototype te ‘filmen’ en op te slaan als gif of mov.

Zwakke punten

  • Prototype is alleen via Mac te bouwen; en
  • Animaties kunnen alleen ontstaan tussen verschillende ‘artboards’ en niet op een pagina zelf.

En nu?

En welke heeft Zicht gekozen? Komende tijd gaan we verschillende prototype tools in de praktijk gebruiken. Om te beginnen met Principle om nieuwe transitie-ideeën voor een navigatie bij een nieuwe project te onderzoeken. We houden je op de hoogte.