InVision, een snellere manier naar zekerheid

Lindy van der Meer | CMD4X | 0867559 | 0867559@student.hr.nl

Samenvatting
In dit artikel wordt gesproken over InVision. InVision is een online prototyping tool waarmee je lo-fi en hi-fi prototypes kan maken. Deze prototypes kan je laten testen zodat je weet wat er aangepast moet worden aan je ontwerp. Een goed prototype moet voor veel nuttige informatie zorgen.

Keywords
InVision, lo-fi prototypen, hi-fi prototypen, usertests, design keuzes

Introductie
InVision is een online tool waarmee je gemakkelijk je ontwerp naar een high-fidelity clickable prototype kan transformeren. InVision is in 2011 gelanceerd als een relatief kale prototyping tool, maar is uitgegroeid tot een uitgebreide tool die al meer dan een miljoen keer gebruikt is (Crook, 2015). Je prototype maak je door je designs in de tool te slepen en de verschillende schermen te koppelen aan elkaar. Niet alleen kan je hier mee hi-fi protypes mee maken, maar ook lo-fi prototypes. Bijvoorbeeld wanneer je foto’s van schetsen maakt en deze aan elkaar koppelt. Deze prototypes kan je gebruiken tijdens je product presentatie om je product duidelijk en professioneel over te laten brengen, maar het grootste voordeel van InVision is dat je heel gemakkelijk effectieve usertests kan uitvoeren. Dit is dan ook de reden waarom designers deze tool zouden moeten beheersen.

InVision

Waarom
‘There are many reasons to skip wireframing and lo-fi prototyping. None of them are valid’ (Gremillion, 2015). Een prototype maken van je product is van cruciaal belang op je eindproduct. Zonder prototype kan je namelijk geen user tests uitvoeren, en zonder user tests uit te voeren ontwijk je hele belangrijke inzichten. Niets is vervelender voor een developer om er achteraf achter te komen dat ze het verkeerde product gebouwd hebben en door user tests uit te voeren voorkom je dit probleem.

De belangrijkste reden voor ontwerpers om deze tool toe te passen is dus om snel en gemakkelijk prototypes te maken, deze kunnen gebruikt worden om usertests uit te voeren en hun product te optimaliseren.

‘Sometimes a little prototype … is all that it takes to turn us from a uh-oh moment to a ta-da moment’, -Tom Wujec, 2010

Vroeger werkte de designers en de codeurs samen een om prototypes te bouwen, maar dit nam veel tijd in beslag en koste veel geld. InVision heeft ervoor gezorgd dat designers een stap vooruit kunnen doen en iets kunnen maken wat net zo voelt als, en lijkt op een echte applicatie of product zonder te wachten op de back-end technologie. Hierdoor zijn ze veel eerder in staat om een prototype te hebben en hier feedback op te ontvangen.

De rol van deze methode is het product testen om erachter te komen wat nog veranderd moet worden aan het product voordat het eindproduct gebouwd wordt. Prototyping is een cruciale stap in het ontwerp proces. Eindproducten zijn ingewikkeld en daardoor moeilijk om aan te passen. Prototypes, daarentegen, zijn relatief goedkoop om te bouwen en aan te passen. Door middel van InVision kan je een design taal ontwikkelen die voor iedereen te begrijpen is. Hierdoor kunnen designers zoeken naar problemen, terwijl de mensen van de content kunnen zien hoe hun werk in het project past. Tegelijkertijd kunnen de developers de interactions begrijpen en de klanten kunnen goedkeuring geven of aanpassingen voorstellen. (Gremillion, 2015)

Video waarin InVsion uitgelegd wordt

Aan de slag met InVision 
Met InVision kan je jouw designs omzetten in prachtige, interactieve prototypes voor zowel web en mobiel, maar hiervoor moeten er wel de juiste stappen gezet worden.

Ten eerste is het belangrijk om te weten dat je jouw design al klaar moet hebben voordat je met InVision aan de slag kunt gaan. Er zitten namelijk geen features in de tool waarmee je elementen in je designs kan creëren of aanpassen. Hiervoor kan je bijvoorbeeld Photoshop gebruiken, maar je kunt vrijwel elk programma gebruiken zolang deze je bestanden kan opslaan als een image file format. Wanneer je designs af zijn kun je deze in InVision slepen en kun je aan de slag gaan met jouw prototype.

Door middel van hotspots te creëren kan je de verschillende schermen aan elkaar koppelen, dit doe je door makkelijke drag & drop bewegingen. Om je prototype zo echt mogelijk aan te laten voelen kan je animaties, gestures en transities toevoegen. Al deze functies zorgen ervoor dat je schermen op een realistische manier gelinkt worden aan elkaar.

Zodra je prototype helemaal af is kan je aan de slag gaan met testen en feedback krijgen. Dit is waar het nog interessanter wordt dan dat het al is. InVision maakt het mogelijk voor teamgenoten, klanten en stakeholders om direct onder designs feedback te geven. Daarnaast geeft InVision je een duidelijk overzicht waar je al jouw projecten kan beheren. Hier kan je snel en gemakkelijk ongelezen berichten zien, alle schermen bekijken en je team genoten notificeren van aanpassingen.

“[InVision] really gets all of our best work in one place for the entire company to see. It has let us concentrate on the real work, and not on the plumbing.”- Mike Davidson, VP of Design at Twitter

Dit zorgt voor een makkelijke en snelle communicatie tussen teamgenoten, maar ook tussen de klant en de stakeholders. Daarnaast heeft InVision sinds kort ook ‘LiveShare’, hiermee kan je in real-time samenwerken. Iedereen heeft zijn eigen muis, waarmee je gemakkelijk punten kan aanwijzen en kan zien waar andere het over hebben. Daarnaast kan je schetsen én chatten in de LiveShare interface.

Voorbeeld van LiveShare

Om zo veel mogelijk feedback uit de testen te halen heeft InVision verschillende features voor usability testing ontworpen. De gebruiker kan rechtstreeks vanaf zijn iPhone het prototype testen, en terwijl hij hiermee bezig is worden zijn interacties gefilmd, kun je zijn gezichtsuitdrukkingen zien en kun je zijn stem horen. Dit heeft vrijwel geen invloed op het verloop van de test zelf, maar heeft een onwijs grote invloed op de informatie die je uit de test kunt halen.

Wanneer heb je het goed gedaan
Met alleen goede designs redt je het niet om tot goede inzichten te komen met InVision. Het is belangrijk dat je prototype zo echt mogelijk aanvoelt, hierdoor gaat de testpersoon zo natuurlijk mogelijk door het prototype heen. Dit zorgt er weer voor dat je relevante feedback ontvangt. Wanneer je alleen feedback ontvangt op de fouten in het prototype zelf, in plaats van op het design of de werking van de app, heb je het niet goed gedaan. Zodra je alleen feedback ontvangt op het design en de werking van de app betekend het dat je het goed gedaan heb. Het is namelijk de bedoeling om zo veel mogelijk nuttige feedback te verzamelen.

Er zijn veel partijen die van deze tool gebruik kunnen maken. Zo kunnen interaction designers deze tool gebruiken om feedback te krijgen op de wireframes, designers kunnen de tool gebruiken om feedback te ontvangen op hun designs en kunnen programmeurs deze tool gebruiken om feedback te ontvangen over verschillende animaties, gestures en transities. 
InVision kan ook gebruikt worden om het product aan de klant te presenteren. Deze tool kan dus voor meerdere doeleinden gebruikt worden.

Het enige wat nodig is om met InVision aan de slag te gaan is om een account aan te maken op www.invisionapp.com, wat overigens geheel gratis is.

Discussie
InVision heeft het voordeel dat het speciaal gemaakt is prototypes mee te maken. Dit zorgt er namelijk voor dat het, zodra je de basis functies geleerd hebt, een hele snelle en makkelijke manier is om prototypes te maken (Cao, 2015). Daarnaast bevat de tool allerlei functies waarmee je jouw prototype zo echt mogelijk aan kan laten voelen en de testen zo soepel mogelijk kan laten verlopen.

“It’s helped us to rapidly iterate and rapidly prototype in ways that were much more time-consuming in the past.” — Dantley Davis, Design Director at Netflix

Dat deze tool makkelijke te gebruiken is was al naar voren gekomen tijdens de workshop die ik gegeven had. Hierin liet ik een aantal mensen kennis maken met InVision door ze een prototype te maken met designs die ik hun aangereikt had. Voordat zij aan de slag gingen met het maken van het prototype had ik ze een hele korte uitleg gegeven over hoe de tool werkt, daarna moesten zij gelijk aan de slag gaan. Dit ging hun zo gemakkelijk af dat ik geen verdere uitleg meer hoefde te geven.

Ondanks dat er ontzettend veel voordelen aan InVision zitten zoals dat het makkelijk is om te leren, snel om te gebruiken, er de mogelijkheid is om gestures en transities toe te voegen en er ruimte is voor feedback, zitten er ook een aantal nadelen aan. Zo werkt InVision alleen met bestaande designs, er zijn geen functies om elementen te maken of aan te passen in de tool zelf. Daarnaast flattens InVision de bestanden die je in de tool sleept, zo verlies je de layers van je design. Doordat InVision voornamelijk gebruikt wordt voor snelle clickable prototypes is het gelimiteerd tot maar twee interacties, hover en click, hierdoor krijg je een prototype die er wel high-fidelity uitziet maar niet high-fidelity werkt.

Conclusie
Al met al is InVision een hele goede en multifunctionele tool, zo maakt de tool het niet alleen makkelijker om een prototype te maken, maar ook om dit prototype te testen én te presenteren. InVision bespaard je niet alleen heel veel tijd, maar zorgt ook voor het makkelijk verkrijgen van veel en nuttige feedback. Iedereen die InVision al eens gebruikt heeft weet waar ik het over heb. Iedereen die InVision nog nooit gebruikt heeft, probeer dat zo snel mogelijk te doen en maak ook kennis met alle voordelen.

Referenties
Wells, J. (2014, 14 februari). 7 Reasons Why I Use InVision for Rapid Prototyping. Geraadpleegd van https://medium.com/@mrjeremywells/7-reasons-why-i-use-invision-for-rapid-prototyping-ed1c33d5b86#.yu69ecx55

Crook, J (14 Juli 2015). Invision Prototyping Tool lands $45 million in series C led by Accel. Retrieved from http://techcrunch.com/2015/07/14/invision-prototyping-tool-lands-45-million-in-series-c-led-by-accel/

Schwartzman, E (2 March 2015) Designer’s Toolkit: Prototyping Tools. Retrieved from http://www.cooper.com/prototyping-tools/InVision

Cao, J. (2015, 26 februari). 3 top ways to build a website prototype. Geraadpleegd van http://www.creativebloq.com/netmag/3-top-ways-build-website-prototype-21514247

Wujec, T. (2010, februari). Build a tower, build a team [Video]. Geraadpleegd van https://www.ted.com/talks/tom_wujec_build_a_tower

Cao, J. (2015, 26 februari). 3 top ways to build a website prototype. Geraadpleegd van http://www.creativebloq.com/netmag/3-top-ways-build-website-prototype-21514247

Gremillion, B. (2015, 6 oktober). Why designers should never skip prototyping [Blogpost]. Geraadpleegd van http://www.creativebloq.com/web-design/why-web-designers-should-never-skip-prototyping-91516933

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.