Ontwerpen delen. Het kan slimmer, eenvoudiger en overzichtelijker! Sebastian Conijn. Studentnr.: 500528694

Ontwerpen delen Het kan slimmer, eenvoudiger en overzichtelijker! Sebastian Conijn Studentnr.: 500528694 Hogeschool van Amsterdam Communication and Media Design Laura van der Vlies 14 March 2014

Versie 1.0 14 March 2014

Voorwoord Deze scriptie is het resultaat van mijn afstudeerperiode voor de studie Communication & Multimedia Design (voorheen Interactieve Media) in Amsterdam. In dit verslag presenteer ik het eindresultaat van de afstudeeropdracht; een tool waarmee visual designers ontwerpen voor verschillende apparaten eenvoudig kunnen delen met klanten. Deze afstudeeropdracht heeft me zoveel meer geleerd dan ik vooraf had gedacht. Het was zeer leerzaam om een ideation workshop op te zetten en te begeleiden. Ook het responsive maken van ontwerpen (het automatisch schalen van ontwerpen naar een apparaat) heeft me veel bijgebracht. Bekijk dit verslag digitaal: Bijna wekelijks worden er nieuwe tools gelanceerd die claimen een eenvoudige manier te bieden voor visual designers om ontwerpen te delen met klanten. Gezien het tempo van deze ontwikkelingen kan het zijn dat het product, zoals beschreven in dit verslag, niet gerealiseerd gaat worden. Toch geloof ik dat mijn eindproduct een tool is die het ontwerpproces van UNITiD kan verbeteren. http://www.sebastianconijn.nl/afstudeerscriptie - Sebastian Conijn 4 Afstudeerscriptie Sebastian Conijn

Voorwoord 5

Managementsamenvatting Het doel van dit onderzoek is de ontwikkeling van een tool om het delen van ontwerpen van een app of website, naar een smartphone of tablet makkelijk te maken voor de klant. Dit is een lang gekoesterde wens van de visual designers bij UNITiD. Probleem UNITiD ontwerpt apps voor onder andere smartphones en tablets, in opdracht van klanten. Tijdens het ontwerpproces moeten visual designers hun ontwerpen kunnen delen met de klant. Dit gebeurt nu vaak via een online projectmanagementsysteem. Het huidige systeem kan echter niet gebruikt worden vanaf een smartphone of tablet. De te ontwerpen tool om ontwerpen te delen naar een smarthone of tablet moet in de basis drie functionaliteiten bieden: het moet beschikbaar zijn op smartphones en tablets, de mogelijkheid bieden tot versiebeheer en informatie overzichtelijk presenteren. Het is tot op heden niet gelukt om een tool te vinden die voldoet aan deze drie criteria. Gevolg hiervan is dat het zowel de designer als de klant veel tijd en dus geld kost om een relatief simpele handeling te verrichten. Onderzoek Om meer inzicht te krijgen in het probleem zijn er interviews gehouden met visual designers en klanten van UNITiD. Hoe het delen van ontwerpen nu verloopt is door middel van een taakanalyse inzichtelijk gemaakt. Ook zijn mogelijkheden onderzocht van bestaande tools die het delen van ontwerpen kunnen faciliteren. Deze mogelijkheden zijn voorgelegd aan de visual designers van UNITiD om op die manier de functionaliteiten te prioriteren. Daarnaast is een ideation workshop georganiseerd om de belangrijke functionaliteiten inzichtelijk te maken. Het resultaat van deze workshop waren schetsen van de belangrijkste schermen van een nieuwe tool. Ontwerp Deze schetsen zijn vervolgens gebruikt voor een interactie-ontwerp van een nieuw te ontwikkelen tool. Omdat het hier een interactie-ontwerp betreft is er functioneel gekeken naar oplossingen en hierdoor minder naar de stijl, die de tool in een latere fase zal krijgen. In het ontwerpproces van de tool zijn er meerdere ontwerpen gemaakt van een scherm, die zijn geëvalueerd op functionaliteit. Er is gekozen voor een achterkant, die is gemaakt voor de visual designers, en een voorkant voor de klanten. Voor het ontwerpen van de achterkant is alleen een desktop versie uitgewerkt. Voor de voorkant zijn ontwerpen van de tool gemaakt voor smartphone, tablet en desktop. 6 Afstudeerscriptie Sebastian Conijn

Testen Na verschillende interne tests zijn de uiteindelijke interactieiontwerpen voorgelegd aan personen buiten UNITiD. Met hen zijn de schermen van de voorkant één voor één behandeld. Uit deze gebruikerstest bleek dat er nog kleine wijzigingen in de navigatie gedaan moesten worden. Op basis hiervan zijn herontwerpen gemaakt. Conclusie Er is met deze opdracht een slimme tool neergezet waarmee visual designers ontwerpen voor verschillende apparaten eenvoudig kunnen delen met hun klanten. De tool kan ontwerpen herkennen en tonen op het juiste apparaat. De eenvoud van de tool moet het delen van ontwerpen voor smartphone of tablet makkelijker maken. Door te werken zonder accounts, het minimale aan de designer te vragen bij het opzetten van een project en heldere navigatie aan te bieden wordt ervoor gezorgd dat het systeem simpel in de omgang is en begrijpelijk voor buitenstaanders. Dat is precies waar UNITiD naar op zoek is. Managementsamenvatting 7

Inhoudsopgave 1. Inleiding 10 1.1 Achtergrondinformatie 10 1.2 Probleemstelling 10 1.3 Hoofdvraag 11 1.4 Deelvragen 11 1.5 Randvoorwaarden 12 1.6 Begripsbepaling 12 1.7 Oplevering 12 2. Probleemsituatie 14 2.1 Smartphone 14 2.2 Overzicht 16 2.3 Versiebeheer 16 2.3 Conclusie 16 3. Onderzoek naar de doelgroep 18 3.1 Interviews 18 3.2 Persona 18 3.3 Conclusie 19 4. Taakanalyse 20 4.1 Keuzeproces 20 4.2 Conclusie 20 5. Concurrentie-analyse 22 5.1 Basecamp 23 5.2 TAP 24 5.3 E-mail 25 5.4 Conceptshare 25 5.5 Mockvault 26 5.6 Mailette 27 5.7 Prevue 27 5.8 QwikVu 28 5.9 Axure 28 5.10 ProofHQ 29 5.11 Dropbox 30 5.12 Red pen 30 5.13 Bounce 31 5.14 Conclusie 32 6. Functionaliteiten 34 7. Ideation workshop 37 7.1 Eerste ronde 38 7.2 Tweede ronde 40 7.3 Conclusie 41 8 Afstudeerscriptie Sebastian Conijn

8. Sketching & Wireframing 42 8.1 Beginscherm 42 8.2 Swipes 44 8.3 Flowchart 46 9. Het interactie-ontwerp 48 9.1 Achterkant 51 9.2 Voorkant 60 9.3 Tablet 67 9.4 Desktop 68 10. Testen 78 10.1 De achterkant 78 10.2 De voorkant 81 10.3 Verbeteringen 84 10.4 Conclusie 85 13. Dankwoord 90 14. Bibliografie 92 14.1 Boeken 92 14.2 Websites 92 15. Bijlage 95 A. Persona 96 B. Concurrentie-analyse 97 C. Quotes uit interviews 99 D. Notitie s van testen 101 11. Conclusie 86 12. Aanbevelingen 88 12.1 Feedback 88 12.2 Ontwikkeling 89 12.3 Uitbreidingen 89 Inhoudsopgave 9

1. Inleiding Na een korte brainstorm met UNITiD is gekozen om voor het afstudeerproject een intern probleem aan te pakken. 1.1 Achtergrondinformatie UNITiD is een jong ontwerpbureau in Amsterdam. Ze werken met ongeveer vijfendertig interaction designers en visual designers. Het staat bekend als een van de UNITiD staat bekend als een van de beste ontwerpbureaus in Nederland omdat ze een goed ontwikkeld specialisme hebben op gebied van interactie-ontwerp. beste digitale ontwerpbureaus van Nederland omdat ze een goed ontwikkeld specialisme hebben op het gebied van interactie-ontwerp. Zo ontwikkelden ze voor bijvoorbeeld Ziggo, Rabobank en Philips websites en apps voor smartphone en tablets. Ook draaien ze hun hand niet voor interfaces voor televisie of andere snel groeiende technologieën zoals Google Glass. Nu zijn Ziggo, Rabobank en Philips grote beursgenoteerde bedrijven. Toch zitten er in het klantenbestand van UNITiD ook kleinere, minder bekende bedrijven. Wat deze klanten allemaal gemeen hebben is dat ze open staan voor vernieuwingen en zich graag laten adviseren door professionals op het gebied van interactie ontwerp en visual design. Tijdens de ontwikkeling van een (nieuw) product worden er vanzelfsprekend ook concepten en ontwerpen getoond door designers van UNITiD aan de klant. 1.2 Probleemstelling Vooral in het beginstadium van het ontwerpproces zullen de designers bij de klant langsgaan om de ontwerpen te presenteren. Naarmate het ontwerpproces vordert zullen de aanpassingen aan de ontwerpen kleiner worden. Doordat het kleine wijzigingen zijn wordt er vaak gekozen om de ontwerpen te delen via het internet. Vaak gaat dit met via een online projectmanagementsysteem. Het systeem moet in de basis drie fuctionaliteiten bieden: het moet beschikbaar zijn op smartphones en tablets, de mogelijkheid bieden tot versiebeheer en informatie overzichtelijk presenteren. Het is tot op heden niet gelukt om een tool te vinden die voldoet aan deze drie criteria. Dit is voor UNITiD de reden de opdracht te geven om een tool te ontwerpen die wel aan deze criteria voldoet. 10 Afstudeerscriptie Sebastian Conijn

1.3 Hoofdvraag De hoofdvraag die uit de probleemstelling volgt: Hoe kan een designer van UNITiD op een slimme en eenvoudige manier zijn ontwerpen delen met de klant? 1.4 Deelvragen Om de hoofdvraag goed te beantwoorden zijn de volgende deelvragen opgesteld: 1. Wat is de huidige situatie van het ontwerpproces? - Waarom kan er nu niet eenvoudig ontwerpen worden gedeeld? (zie hoofdstuk: 2. Probleemsituatie) - Wie is de klant? (zie hoofdstuk: 3. Onderzoek naar de doelgroep) - Wie is de designer? (zie hoofdstuk: 3. Onderzoek naar de doelgroep) 2. Welke tools worden er gebruikt? - Hoe verloopt het proces van delen op dit moment? (zie hoofdstuk: 4. Taakanalyse) - Welke tools worden er binnen UNITiD gebruikt? (zie hoofdstuk: 5. Concurrentie-analyse) - Welke tools zouden kunnen helpen bij het delen van ontwerpen? (zie hoofdstuk: 5. Concurrentie-analyse) 3. Wat voor product verwachten de designers? - Welke functionaliteiten worden er in het product verwacht? (zie hoofdstuk: 6. Functionaliteiten) - Wat verwacht de klant en designer hoe een tool zou werken? (zie hoofdstuk: 7. Ideation workshop) 4. Kunnen klanten omgaan met een nieuwe tool? - Is de interface voor de klant duidelijk om mee om te kunnen gaan? (zie hoofdstuk: 10. Testen) 5. Wat is slim en eenvoudig? - Hoe kan het delen van ontwerpen verbeterd worden? (zie hoofdstuk: 9. Het interactie-ontwerp) 1. Inleiding 11

1.5 Randvoorwaarden Door UNITiD zijn de volgende randvoorwaarden opgesteld voor het te ontwikkelen product. 1. Het product dient geïnstalleerd te worden op de servers van UNITiD. UNITiD houdt op deze manier de controle over de informatie die gedeeld wordt. 2. De mogelijkheid voor de klant tot het geven van feedback. 3. Uitbreidingsmogelijkheden voor de toekomst. 1.6 Begripsbepaling Ter verduidelijking zijn enkele woorden die vaak terug komen in het verslag hieronder gedefiniëerd: Achterkant = De applicatie/website die alleen beheerders te zien krijgen, te weten de visual designers. Interaction designer = Een designer die zich bezig houdt met interactie en functionaliteiten. Klant = Klant van UNITiD en dus van de visual designer. Ontwerp = De uitwerking van een scherm. Pagina = Een specifiek scherm van een applicatie of website. Versie = Een aantal ontwerpen die zijn voorzien van aanpassingen. Visual designer = Een designer die zich bezig houdt met stijl en vorm. Voorkant = De applicatie/website die in de basis iedereen te zien krijgt. Versies, pagina s en ontwerpen Een visual designer maakt verschillende versies van pagina s (zie ook afbeelding 1). Deze pagina s zijn ontwerpen van een applicaties of website. Hierbij kun je denken aan de homepage, over ons pagina of contact. Van deze pagina s kunnen verschillende ontwerpen gemaakt worden, bijvoorbeeld heeft het ene ontwerp de hoofdkleur blauw en de andere groen. Zo heb je in elke versie meestal van elke pagina een of meerdere ontwerpen. 1.7 Oplevering Voor de oplevering van de scriptie zijn verschillende pagina s van de tool uitgewerkt. Deze zullen geen huisstijl meekrijgen. De ontwerpen die uitgewerkt zijn zullen van verschillende pagina s en voor verschillende apparaten zijn. Omdat de tool een voorkant (voor de klant) en een achterkant (voor de designers) zal hebben, is in onderstaande tabel weergegeven waarvan er ontwerpen gemaakt zullen worden. Voorkant Achterkant Desktop Ja Ja Tablet Ja Nee Smartphone Ja Nee Voor de voorkant ligt de focus op de smartphone. Dit is naast het apparaat dat het kleinste beeldscherm heeft, ook het apparaat dat een speerpunt is van de oplossing. 12 Afstudeerscriptie Sebastian Conijn

Afbeelding 1, Definitie piramide, Sebastian Conijn 2014 1. Inleiding 13

Notes 2. Probleemsituatie Iedereen kent e-mail als manier om digitaal tekst of bestanden te versturen. Iedereen weet hoe dit werkt, iedereen heeft een e-mailaccount en iedereen heeft de mogelijkheid om te e-mailen. Toch heeft UNITiD dit liever niet omdat de berichten zich beperken tot de inboxen van de medewerkers. Personen die er later Een ontwerp bekijken op een smartphone is omslachtig omdat Basecamp hiervoor geen mogelijkheden biedt. bijkomen of projectmanagers die de voortgang willen inzien lopen in het geval van e-mail meteen al tegen een muur op. Een veel gebruikte tool binnen UNITiD is Basecamp 1. Dit online projectmanagement- systeem zorgt ervoor dat alle berichten, to-do s en bestanden online binnen één project voor iedereen met een account beschikbaar zijn. Dat klinkt in eerste instantie als dé oplossing voor bedrijven. De designers van UNITiD lopen echter tegen de limitaties van het systeem aan. Eén van de limitaties is bijvoorbeeld dat Basecamp niet beschikbaar is voor een smartphone. Een ontwerp op je smartphone bekijken is wel mogelijk, maar ontzettend omslachtig. 2.1 Smartphone Een ontwerp bekijken op een smartphone is omslachtig (zie afbeelding 2) omdat Basecamp hiervoor geen mogelijkheden biedt. Het is dus aan de gebruiker om een aantal stappen te doorlopen het ontwerp dat op Basecamp staat toch op zijn smartphone te krijgen. Om inzicht te krijgen in deze stappen is er een diagram gemaakt. Afbeelding 2 beschrijft de zeventien stappen die een klant zou moeten doorlopen om een ontwerp te bekijken op een smartphone. Afhankelijk van de hoeveelheid ontwerpen kan het dus voorkomen dat er vijf of meer stappen terug gegaan moet worden om ook meerdere ontwerpen naar de smartphone te krijgen. Doordat dit zo omslachtig werkt bekijken vele klanten het ontwerp daarom ook niet op hun smartphone, terwijl het ontwerp daar wél voor gemaakt is. 1. Basecamp, http://www.basecamp.com, geraadpleegd op 16 oktober 2013. 14 Afstudeerscriptie Sebastian Conijn

Afbeelding 2, Proces Basecamp, Sebastian Conijn 2014 2. Probleemsituatie 15

2.2 Overzicht Een ander probleem waar vooral visual designers tegenaan lopen heeft te maken met overzicht. Het gaat dan vooral over het gebrek aan overzicht bij het uploaden van verschillende versies. 2.3 Versiebeheer Er is nog een ander probleem, namelijk versiebeheer. Aangezien Basecamp veel functionaliteiten biedt worden discussies erg onoverzichtelijk. Ook verdwijnen nieuwe versies van ontwerpen tussen alle discussie, of raken ze uit het zicht doordat ze automatisch als nieuw bericht onder oudere berichten worden geplaatst. 2.3 Conclusie Tijdens gesprekken met designers komen er drie duidelijke problemen aan het licht bij het online delen van ontwerpen. Het eerste probleem is dat het voor een klant teveel werk is om ontwerpen op een smartphone te bekijken. Het tweede probleem is het gebrek aan overzicht voor de visual designer bij het beheren van zijn ontwerpen. Het derde en laatste probleem is het opslaan en weergeven van versies. Zowel designers als klanten klagen over dit overzicht, of eigenlijk het gebrek hieraan. Versiebeheer in Basecamp is misschien voor de klant te moeilijk om te begrijpen. Anke, kun jij een nieuw overzicht maken van wat final is? Er staat weer genoeg discussie in deze thread om onduidelijkheid te hebben welke ontwerpen wel en niet goed zijn. 16 Afstudeerscriptie Sebastian Conijn

2. Probleemsituatie 17

3. Onderzoek naar de doelgroep De doelgroep van dit project bestaat eigenlijk uit twee groepen. Allereerst natuurlijk de visual designers van UNITiD. Zij maken tenslotte het ontwerp voor de klant. Wat ons brengt bij de tweede doelgroep: de klant van de designer. 3.1 Interviews Met beide doelgroepen zijn interviews gehouden om inzichten te krijgen in de huidige werkwijze, waar ze Eigenlijk wil je het laten zien op hetgene waarop je het straks gaat bekijken. tegenaan lopen en hoe ze daarvoor de ideale oplossing voor zich zien. Opmerkelijk was dat zowel designer als klant, Basecamp (zie hoofdstuk: 5.1 Basecamp) beschouwen als de ideale tool voor communicatie. Het delen van ontwerpen waren de meningen echter verschillend, ook per designer. Waar de designers het wel allemaal over eens waren was het feit dat het ontwerp bekeken moet worden op het apparaat waarvoor het ontworpen is. Echter werd tijdens de interviews duidelijk dat het op dit moment nog te weinig voorkomt. De klanten had weer een heel ander probleem. Zo hadden zij vooral moeite met het juiste ontwerp te vinden. De juiste versie vinden op Basecamp of een Versiebeheer is echt een hel! ander systeem is volgens Sandra Karis van NU.nl een hel. Het overzicht gaat al snel verloren. Door alle verschillende tools (zie hoofdstuk: 5. Concurrentie-analyse) is versiebeheer erg lastig geworden. Als er via de visual designer een ontwerp wordt gedeeld via de ene tool is het ontwerp op de andere tool alweer oud en zal deze handmatig vervangen moeten worden. 3.2 Persona Op basis van de interviews is een persona 2 gecreëerd. Een persona is een fictief persoon die een representatie van (een deel van) de doelgroep is. Door het opstellen van persona s kan men zich tijdens het ontwerpproces beter inleven in de beoogde gebruiker en ontstaat er meer begrip voor bepaalde ontwerpkeuzes. De persona die staat voor de doelgroep van visual designers is Jelte Luth 3 (zie bijlage: A. Persona). Jelte is 28 jaar en werkt al 2 jaar bij UNITiD als visual 18 Afstudeerscriptie Sebastian Conijn

Notes designer. Websites die hij vaak bezoek zijn froot.nl en smashingmagazine.com en hij heeft vroeger gestudeerd aan de Hogeschool voor de Kunsten in Utrecht. Voor de klant is geen persona gemaakt. Hiervoor is gekozen doordat de voorkant voor algemeen gebruik is en geen specifieke doelgroep (marketeer, vormgever programmeur of projectmanager) heeft en toegankelijk moet zijn voor alle partij en. Beide doelgroepen, visual designers en klant, zullen later in het project nog vaak bij dit project betrokken worden. Zo word er scope-sessie met hen gehouden (zie hoofdstuk: 6. Functionaliteiten) en waren ze betrokken bij de ideation workshop (zie hoofdstuk: 7. Ideation workshop). Tegen het einde van het project hebben beide groepen ook de applicatie uitgebreid getest (zie hoofdstuk: 10. Testen) en zijn er met die bevindingen de laatste aanpassingen op het ontwerp gemaakt. 3.3 Conclusie De problemen om een ontwerp op een smartphone te laten zien aan de klant, is tijdens interviews bevestigd. Ook is er onoverzichtelijkheid zodra er meerdere versies zijn, een grote irritatie bij zowel de designers als hun klanten. 2. Usability.gov (2013), Personas, http://www.usability.gov/how-toand-tools/methods/personas.html, geraadpleegd op 6 januari 2014 3. Onderzoek naar de doelgroep 19

4. Taakanalyse Om inzicht te krijgen in het huidige ontwerpproces zijn er interviews en observaties gehouden met collega s, klanten en de opdrachtgever van dit project. Met die informatie is een model opgezet (zie afbeelding 3). Dit model geeft weer hoe er gehandeld wordt en welke beslissingen er genomen moeten worden. Het toont het moment dat de designer beslist dat hij/zij zijn ontwerpen wil delen tot het moment dat het verstuurd of opgeslagen is. Zodra de designer tot de conclusie komt dat de ontwerpen verstuurd kunnen worden, komt er bewust dan wel onbewust een analysemoment. Op dit moment worden vragen gesteld die in een fractie van een seconden beantwoord kunnen worden. 4.1 Keuzeproces Zodra de meeste van deze vragen (zie afbeelding 3) zijn beantwoord kan de designer verder met het bepalen van de tool die gebruikt kan worden voor het delen. Ook dit gebeurt meestal in fracties van een seconde. Als de juiste tool is bepaald zal deze ingesteld moeten worden, of dit nu e-mail, Basecamp of een andere tool is. Er zullen ontvangers ingesteld moeten worden, wellicht ook het apparaat en de versie van het ontwerp; dit alles vermeld onder het juiste project. Direct daarna komt de controle: het moment voordat je op verzenden drukt en nog even een blik werpt op het zogenoemde aan-veld. Tijdens dit controlepunt controleert de designer voor de laatste keer of alles juist is ingevuld. Zo niet kan hij weer een stap terug. Ook kan het voorkomen dat er andere factoren zijn, zoals dat er voor dit project andere tools gebruikt worden, zodat er opnieuw moet worden begonnen. De laatste uitvalsmogelijkheid is het punt dat de designer zich nog een wijziging herinnert die nog niet uitgevoerd is. In dit geval wordt de volledige procedure geannuleerd. Als dit alles niet het geval is, gaat de designer naar de laatste stap, het versturen van de ontwerpen. Zodra dat is gebeurd heeft de designer relatief weinig invloed meer op de volgende stappen, wat meestal inhoudt dat de klant de ontwerpen bekijkt. 4.2 Conclusie Het wordt duidelijk dat er twee belangrijke keuzemomenten zijn voor een designer om zijn ontwerpen de delen. Het eerste is een analyse waarin er wordt gekeken naar bijvoorbeeld de hoeveelheid ontwerpen. Het tweede keuzemoment is bij het invullen van de tool. Zo is inzichtelijk geworden waar een designer aan denkt om zijn ontwerpen in te vullen en de keuzemomenten makkelijker te maken. 20 Afstudeerscriptie Sebastian Conijn

Afbeelding 3, Taakanalyse, Sebastian Conijn 2014 4. Taakanalyse 21

Notes 5. Concurrentie-analyse Er zijn op internet al tientallen tools te vinden die de service aanbieden om een ontwerp te delen met de klant. Om meer inzicht te krijgen in de mogelijkheden hiervan en waarom er tientallen bestaan, is er een analyse van al deze tools uitgevoerd (zie bijlage: B. Concurrentie-analyse). Verder in dit hoofdstuk staan tien tools uitlegd. Dit lijstje van tools kwam naar voren tijdens interviews of hebben veel goede vermeldingen op design-blogs. Wat deze tools gemeen hebben is dat ze je in staat stellen ontwerpen te delen, met je klanten, met programmeurs of misschien met vrienden. Toch gebruikt UNITiD op dit moment geen van deze tools. Dit heeft verschillende redenen, zoals de hoge kosten, het gebrek aan de mogelijkheid, te werken in teams of omdat de tool er niet professioneel uitziet. Daarnaast is de tool TAP 3 meegenomen omdat deze is ontwikkeld voor UNITiD zelf. TAP is in de basis ontwikkeld voor interaction designers die met deze tool op een gemakkelijke manier een prototype kunnen maken. Met TAP kan je op de ontwerpen zogenoemde hotspots plaatsen. Hotspots zijn doorzichtige vlakken die je over een ontwerp kan plaatsen. Aan zo n hotspot kan je een code toevoegen waardoor, als je er op klikt, je naar een ander ontwerp gaat. Met TAP wordt het gemakkelijk om de ontwerpen met hotspots aan elkaar te linken en op een smartphone of tablet te tonen. Ook is e-mail in deze concurrentie-analyze meegenomen. E-mail is ontzettend laagdrempelig en bijna iedereen heeft een e-mailadres en gebruikt het dagelijks. Per tool is gekeken naar vijf punten. Eerst de vooren nadelen voor UNITiD. Het derde punt is de mogelijkheden. Natuurlijk moet er een goede set aan mogelijkheden zijn zodat de designer zijn vrijheden kan houden en het ontwerp op zijn manier kan tonen. Deze mogelijkheden mogen daarom niet te beperkt zijn. Aan de andere kant, als er veel functionaliteiten zijn kan de leercurve die gemaakt moet worden te groot zijn, waardoor een eventuele overstap erg moeilijk gemaakt kan worden. De prijs is natuurlijk altijd iets om rekening mee te houden; deze moet in verhouding zijn met de mogelijkheden en de oplossing. Dan nog de strategie. Niet alle tools zullen specifiek voor het delen ontwikkeld zijn. Wellicht werken ze aan een oplossing maar komt die nog niet goed naar voren. Wat zijn hun speerpunten en wat kan je dan misschien nog meer verwachten. 3. Collard, M. (2011), TAP- Fireworks touch prototype tool for iphone, ipad, geraadpleegd op 16 oktober 2013 22 Afstudeerscriptie Sebastian Conijn

5.1 Basecamp Voordelen Basecamp is in de basis een communicatietool voor projecten. Je kan verschillende mensen uitnodigen voor een project. Alle punten die besproken moeten worden, kunnen door iedereen gedeeld worden. Ook kan je bestanden, zoals bijvoorbeeld ontwerpen, delen via dit systeem. Nadelen Belangrijke functionaliteiten zijn soms goed verstopt, en sommige discussies raken ondergesneeuwd als een team groot is en er veel activiteiten plaatsvinden. Toch wordt Basecamp op dit moment vaak gebruikt door de mensen van UNITiD. Daarbij komen twee scenario s naar voren voor het delen van ontwerpen (zie afbeelding 4). In het eerste scenario wordt er door de visual designer een bericht geplaatst met in dit geval zes ontwerpen. Verschillende partijen van de klant reageren hierop met aanpassingen of wijzigingen die zij graag zien in het ontwerp. Vervolgens plaatst de visual designer de nieuwe, aangepaste (in dit geval vier) ontwerpen in hetzelfde bericht. Opnieuw zijn verschillende mensen aan zet om commentaar te geven waarmee uiteindelijk nog drie ontwerpen worden aangepast. Afbeelding 4, Delen via Basecamp, Sebastian Conijn 2014 5. Concurrentie-analyse 23

Naast dat de discussie erg versnipperd raakt, blijven de oudere versies altijd bovenaan staan in de discussie en raken de nieuwe versies ondergesneeuwd in de discussies. In het tweede scenario is het geval dat er meerdere berichten worden geplaatst. Waar in het eerste scenario alle versies in één en hetzelfde bericht werden geplaatst, krijgt hier elke versie een nieuw bericht. Een gevolg hiervan kan zijn dat klanten deze nieuwe versie niet doorhebben en blijven discussiëren over een oud ontwerp. Of de berichten met nieuwe versies vallen niet genoeg op bij andere berichten over bijvoorbeeld techniek en interaction design. Mogelijkheden Basecamp is in de basis een communicatietool voor projecten. Je kan er to-do s aanmaken, vragen stellen en beantwoorden, discussies starten en bestanden delen. Prijs De prijs is vanaf $20,- voor 10 projecten. Strategie Basecamp is een algemeen communicatiemiddel dat zou werken voor bijna elk project. In de basis hebben bijna alle projecten hetzelfde nodig: ruimte voor discussies en to-do-lijstjes. Doordat de tool zo algemeen is, raakt het delen van ontwerpen achterop en mist het bepaalde belangrijke functionaliteiten. Conclusie Basecamp is een goede start vooral op het gebied van communicatie tijdens projecten. Toch zijn er in het huidige proces ook grote problemen als het gaat om het delen van ontwerpen. Bijvoorbeeld het bekijken van de op een smartphone. 5.2 TAP Voordelen Een van de grootste voordelen van TAP, en waar de andere tools nog vrij ver achter blijven, is het tonen op het apparaat waarvoor het ontwerp bedoeld is. Met TAP is het mogelijk om van je ontwerpen een kleine website te maken en deze te bekijken op smartphone of tablet. Nadelen Deze tool heeft ook zijn beperkingen omdat het geen overzichtspagina heeft, tenzij die door de designer zelf wordt gemaakt. Ook heeft geen functionaliteiten om verschillende versies online te zetten. Mogelijkheden TAP kan geïnstalleerd worden op een eigen server en daardoor zou je met wat technische kennis het uit kunnen breiden. Echter is de basis erg beperkt voor het delen van ontwerpen. 24 Afstudeerscriptie Sebastian Conijn

Prijs Het product is gratis in de markt gezet en het lijkt er ook niet op dat daar snel verandering in komt. Strategie De strategie van TAP is dat het specifiek is ontwikkeld voor interaction designers die hun ontwerpen willen testen op een mobiel apparaat zoals een smartphone of tablet. Conclusie TAP is een erg sterke tool voor presentatie op andere apparaten dan een laptop of pc. Toch is het instellen van deze tool zeer tijdrovend. 5.3 E-mail Voordelen E-mail biedt gemakkelijk een overzicht van alle ontwerpen en het stelt je in staat om meerdere ontwerpen te versturen. Nadelen Het is lastig om de ontwerpen juist te tonen op een smartphone of tablet en er zijn geen mogelijkheden tot versiebeheer. Mogelijkheden Het voordeel van e-mail is dat je het volledig vorm kan geven naar bijna alle wensen. Lettertypes, logo s, titeltjes per ontwerp, het is allemaal mogelijk met e-mail. Echter zodra het meer technisch wordt, worden de beperkingen zichtbaar. Zo kunnen de ontwerpen niet wachtwoord beveiligd worden en zijn ze niet te zien op een URL doordat het zich beperkt tot de e-mailboxen van de ontvangers. Prijs In de meeste gevallen gratis. Strategie Het is oorspronkelijk ontwikkeld voor het versturen van berichten naar elkaar en niet om ontwerpen te delen. Conclusie Iedereen weet hoe e-mail werkt en het is daarom voor alle partijen een ideale tool. Toch beperkt het delen zich tot de e-mailboxen van de geadresseerden en wordt het al snel onoverzichtelijk doordat er ook andere e-mail binnenkomt. 5.4 Conceptshare Voordelen Conceptshare 4 is specifiek gemaakt om ontwerpen te delen en daar feedback op te verkrijgen. De tool heeft zeer veel mogelijkheden en functionaliteiten die de designer zouden kunnen helpen. 5. Concurrentie-analyse 25

Nadelen Juist door deze functionaliteiten wordt de tool erg onoverzichtelijk. Ook is het niet mogelijk om een ontwerp te tonen op een smartphone of tablet. Mogelijkheden Er zijn veel mogelijkheden om accounts aan te maken, feedback te geven en ontwerpen goed te keuren. Ook is er een lineaal om pixels te meten en een pipetje om kleuren te controleren. Het wordt door meerdere mensen vergeleken met de online versie van Photoshop. Toch beperkt Conceptshare zich in de presentatie van de ontwerpen. Prijs De prijs is $25,- per gebruiker, per maand. Strategie Door vele functionaliteiten aan te bieden kan er bijna online een ontwerp gemaakt worden. Dit zal goed werken binnen een ontwerpteam maar minder goed voor het delen van het ontwerp met klanten. Conclusie Bij de eerste indrukken van de tool, leek het een online versie van Adobe Photoshop 3. Het biedt erg veel opties en daardoor raakt zelfs de designer de draad kwijt. 5.5 Mockvault Voordelen Deze tool richt zich meer op de klant dan op de designer. Op die manier moeten designers eerst een klant toevoegen en worden daar de ontwerpen onder gehangen. Daarbij moeten de ontwerpen één voor één worden geüpload. Het is wel mogelijk om meerdere ontwerpen te delen. Nadelen Alle ontwerpen moeten handmatig stuk voor stuk worden geüpload. Dit is omslachtig en tijdrovend. Mogelijkheden Qua presentatie biedt Mockvault 5 meer dan genoeg mogelijkheden om bijvoorbeeld de achtergrond aan te passen of het ontwerp uit te lijnen. Echter beperken de mogelijkheden zich weer in de techniek zoals wachtwoordbeveiliging en het downloaden van het ontwerp. Prijs De prijs is $49,- per gebruiker per maand. Strategie De strategie is dat je ontwerpen aan een klant hangt. Ze gaan er hier vanuit dat er meestal één ontwerp per keer wordt verstuurd. Vandaar ook dat ze verdienen aan de hoeveelheid ontwerpen die worden geüpload. 26 Afstudeerscriptie Sebastian Conijn

Conclusie Mockvault is gericht op de klant van de designer, wat een groot verschil is in vergelijking met de andere tools in het lijstje. Toch heeft deze tool ook een groot nadeel: het delen van ontwerpen gaat per ontwerp en is niet beschikbaar op een smartphone of tablet. 5.6 Mailette Voordelen Waar e-mail zich beperkt tot de e-mailboxen gaat Mailette 6 net even wat verder. Ze sturen een link via de e-mail en de designer krijgt notificaties via de e-mail, maar de ontwerpen staan online doormiddel van een unieke URL. Nadelen Er is geen vorm van versiebeheer en zijn de ontwerpen niet goed te bekijken op een mobiel apparaat. Mogelijkheden Omdat het werkt via een URL is het niet mogelijk om deze te beveiligen met behulp van accounts of wachtwoorden. Ook de pagina waar de ontwerpen opstaan is zeer beperkt. Zo is er maar één pagina met alle ontwerpen onder elkaar en kunnen de ontwerpen niet individueel bekeken worden. Prijs De prijs is $9,- per drie gebruikers per maand. Strategie Het enige wat er gebeurt is dat de ontwerpen online gezet worden op een URL die zich weer alleen beperkt tot de e-mailboxen van de ontvangers. Het is erg goedkoop maar niet handig te gebruiken in teamverband. Conclusie Bij Mailette staan de ontwerpen online maar gaat een groot deel van de communicatie nog steeds via e-mail. 5.7 Prevue Voordelen Misschien wel een van de simpelste interfaces in dit rijtje. Aangezien de functionaliteiten geminimaliseerd zijn werkt de tool goed en prettig. Nadelen Het is door die simpele interface mogelijk om maar één ontwerp per keer toe te voegen aan een project. Ook hebben ze geen mogelijkheid voor versiebeheer of het tonen op mobiele apparaten. 5. Concurrentie-analyse 27

Mogelijkheden Prevue 7 biedt zeer veel mogelijkheden om de ontwerpen goed te presenteren door achtergrondkleuren aan te passen en titels toe te voegen. Prijs De prijs is $75,- per 15 gebruikers per maand. Strategie De gratis variant biedt de mogelijk om 50 ontwerpen te uploaden. Bij de meest uitgebreide variant is dat onbeperkt. Ook al is het erg basic, in geval van meerdere ontwerpen kan het een lange tijd duren voordat alles juist is ingesteld. Conclusie De kracht van Prevue, in vergelijking met andere tools, zit hem in het feit dat ze de tool erg hebben uitgekleed. De functionaliteiten zijn minimaal en dit zou een bedrijf kunnen tegen houden om de tool te gebruiken. 5.8 QwikVu Voordelen Zodra je de ontwerpen wilt delen gaat QwikVu 8 uit van verzamelingen. Je kan een nieuwe verzameling starten en daar alle ontwerpen die je wilt delen naar uploaden. Nadelen Ook ondersteunt QwikVu niet de mogelijkheid om de ontwerpen te delen op een mobiel apparaat en heeft het geen overzichtspagina voor de klant. Mogelijkheden QwikVu heeft een sterke en aanwezige vormgeving. Veel van de functionaliteiten zien we ook terug bij de concurrenten. Prijs De prijs is $40,- per gebruiker per maand. Strategie Van QwikVu gaan er dertien in een dozijn. De vormgeving is erg aanwezig en biedt niets meer of minder dan z n concurrenten. Dit zou de oplossing kunnen zijn voor de freelancer want het geeft geen tot weinig ondersteuning aan teams. Conclusie Het is een sterke tool met alle basisfunctionaliteiten. Echter beperkt de tool zicht tot freelancers waardoor er niet in teams gewerkt kan worden. 5.9 Axure Voordelen Axure 9 is de enige tool met offline ontwerpsoftware. 28 Afstudeerscriptie Sebastian Conijn

Het is een totaalpakket. Vanaf het ontwerp tot aan een prototype biedt Axure mogelijkheden. Nadelen Een groot nadeel hiervan is dat iedereen moet kunnen werken met Axure. Programma s als Photoshop kunnen niet overweg met Axure-bestanden. Dit zou dus betekenen dat de designers van UNITiD allemaal moeten gaan werken met Axure, iets wat ze nu niet doen. Mogelijkheden Aangezien Axure in de basis meer een ontwerptool is dan een tool om ontwerpen mee te delen zijn er erg veel functionaliteiten aanwezig. Echter voor het delen ben je wel verplicht je ontwerp te maken in Axure. Prijs De prijs is $289,- per gebruiker per maand. Strategie Axure is een tool die het ontwerpproces ervoor ook faciliteert. Hierdoor kunnen ze meer geld vragen en kan je uiteindelijk natuurlijk ook meer. De beperking zit vooral in de mogelijkheden om ontwerpen te importeren en te exporteren naar andere ontwerptools. Dit beperkt de designer zeker. Conclusie Axure biedt vanalles, van ontwerpen tot feedback. Daarvoor moet dan ook wel betaald worden. Een ander nadeel is ook dat de designer vastzit aan de tool van Axure. 5.10 ProofHQ Voordelen Deze tool biedt veel functionaliteiten voor het online opslaan en delen van ontwerpen. Nadelen Deze tool heeft de minst gebruiksvriendelijke interface. Er zijn ontzettend veel opties die bij de instellingen ook allemaal getoond worden. Aan de achterkant staat de overzichtspagina vol met onduidelijke icoontjes. Het biedt, net zo als vele andere tools, geen mogelijkheid om de ontwerpen te delen via mobiele apparaten en er is ook geen mogelijkheid om nieuwe versies te uploaden. Mogelijkheden ProofHQ 10 heeft ontzettend veel opties om ontwerpen te tonen en instellingen voor het delen. Toch maakt de waslijst aan mogelijkheden en de slechte vormgeving het lastig om overzicht te houden. Prijs De prijs is $40,- per gebruiker per maand. 5. Concurrentie-analyse 29

Strategie Bij ProofHQ gaat het vooral om projecten, ze bieden ontzettend veel en hopen daarmee een grote doelgroep te bereiken. Technisch zit het goed in elkaar en daarom zou het goed mogelijk zijn dat ProofHQ is ontwikkeld door mensen uit de technische sector. Conclusie ProofHQ heeft erg veel mogelijkheden, maar door al die functionaliteiten tegelijkertijd aan te bieden verliest het overzicht bij het delen van meerdere ontwerpen. 5.11 Dropbox Voordelen Dropbox 11 is een tool waarmee je bestanden uploadt naar een server en deze synchroniseert met een andere computer van teamleden of klanten. Het is ook mogelijk om een bestand of mapje in je Dropbox te delen met iemand die geen directe toegang heeft tot jouw mappen. Door de link te openen op een mobiel apparaat is het mogelijk het ontwerp te bekijken. Nadelen Er zit om de ontwerpen een dikke Dropbox -rand, er is geen duidelijke overzichtspagina en het werkt niet met versiebeheer. Mogelijkheden zozeer om ontwerpen goed naar de klant te presenteren of projectmanagement bij te houden. Er kan niets ingesteld worden om de presentatie naar de klant toe te verbeteren. Prijs De prijs is $99,- per gebruiker per jaar. Strategie Enkel voor het delen van bestanden werkt Dropbox prima. Echter zodra er ontwerpen gedeeld moeten die bekeken moeten worden loop je tegen vele beperkingen aan. Conclusie Voor het onderling delen werkt Dropbox prima, maar het delen van ontwerpen heeft erg veel maren. Dit komt voor een groot gedeelte doordat Dropbox in de basis niets te maken wil hebben met een specifieke branche; ze willen hun interface niet puur op designers toespitsen. 5.12 Red pen Voordelen Red pen 12 is erg simpel in het gebruik. Je sleept je ontwerp naar de website, je krijgt een link en klaar is kees. Dropbox is gemaakt om bestanden te delen maar niet 30 Afstudeerscriptie Sebastian Conijn

Nadelen Het ondersteunt geen mobiele ontwerpen en ook beperkt het delen zich op één ontwerp per keer. Mogelijkheden Deze eenvoud brengt ook limitatie met zich mee. Dat is in dit geval bij het aantal ontwerpen dat gedeeld kan worden. Dat is er namelijk maar één. Prijs Gratis, totdat je de smartphone app wilt gebruiken. In dat geval is het $6. Strategie Om geld te verdienen heeft Red Pen een app ontwikkeld voor de Apple Mac. Met deze app kan je vanuit het ontwerpprogramma Photoshop direct je ontwerp delen op de website. Dit is wel maar één ontwerp per keer. Conclusie De eenvoud die Red Pen heeft, hebben we ook bij andere tools gezien. Dit limiteert een middelgroot ontwerpbureau wel weer meteen en zal dus waarschijnlijk gemaakt zijn voor de freelancer. 5.13 Bounce Voordelen Bounce 13 is ook een tool die net zoals bijvoorbeeld Red Pen, met één ontwerp per keer de eenvoud probeert te behouden. Naast het tonen van één ontwerp kan je ook screenshots maken van een website en deze met mensen delen. Nadelen De reclame op de website is wel een groot nadeel als je dit als bedrijf wilt inzetten voor het delen van de ontwerpen. Mogelijkheden Het is erg basic, zo kan je maar één ontwerp per keer uploaden of een screenshot maken van een website. Prijs Gratis Strategie De tool zit vol met reclame van het bedrijf of van andere aanbieders. Verder lijkt het zich meer te richten op het maken van screenshots van websites dan op het delen van ontwerpen. Conclusie De tool is erg basic en vol met reclame. Het zou wellicht goed kunnen werken voor het maken van een screenshot van een lange webpagina en minder voor het delen van ontwerpen. 5. Concurrentie-analyse 31

a 5.14 Conclusie Er zijn tientallen online tools voor het delen van ontwerpen naar de klant, collega s of andere bekenden. Bijna wekelijks komt er een nieuwe tool bij. Er lijkt hierdoor veel vraag te zijn naar oplossingen voor het delen van ontwerpen. Elke tool is geanalyseerd op vijf punten. Opvallend is dat bijna alle tools, behalve TAP, nog geen ondersteuning hebben voor het tonen van ontwerpen op smartphone en tablets. 3. Conceptshare, http://www.conceptshare.com, geraadpleegd op 16 oktober 2013 4. Adobe Photoshop, www.adobe.com/photoshop, geraadpleegd op 3 januari 2014 5. Mockvault, http://www.mockvault.com/, geraadpleegd op 16 oktober 2013 6. Mailette, http://mailette.com, geraadpleegd op 16 oktober 2013 7. Prevue, http://prevue.it, geraadpleegd op 16 oktober 2013 8. Qwik.vu, http://qwik.vu, geraadpleegd op 16 oktober 2013 9. Axure, http://www.axure.com, geraadpleegd op 16 oktober 2013 10. ProofHQ, http://www.proofhq.com, geraadpleegd op 16 oktober 2013 11. Dropbox, http://dropbox.com, geraadpleegd op 16 oktober 2013 12. RedPen, http://redpen.io, geraadpleegd op 16 oktober 2013 13. Bounce, http://bounceapp.com, geraadpleegd op 16 oktober 2013 Bij tien veelgenoemde tools op het internet is er per tool gekeken naar vijf punten. 32 Afstudeerscriptie Sebastian Conijn

5. Concurrentie-analyse 33

6. Functionaliteiten Tijdens de interviews met de opdrachtgever, de visual designers en de klant kwamen ook regelmatig functionaliteiten aan bod die handig kunnen zijn of in een ideaal scenario gerealiseerd moeten worden. De functionaliteiten zijn verzameld en één voor één voorgelegd aan een vijftal designers. Het vijftal legde onafhankelijk van elkaar de functionaliteiten van Uiteindelijk staan alle belangrijke en goed haalbare functies in de rechterbovenhoek van de as. heel belangrijk naar minder/ niet belangrijk op een rij. De resultaten ziet u hiernaast in afbeelding 5. Nu de mate van het belang is ingevuld kon het in een assenstelsel gezet worden samen met haalbaarheid. Met haalbaarheid wordt bedoeld of de functionaliteit ingewikkeld is of veel tijd zal kosten om te ontwerpen en te bouwen. Uiteindelijk staan alle belangrijke en haalbare functies in de rechterbovenhoek van het assenstelsel. Aan het eind van deze sessie is duidelijk geworden welke functionaliteiten er niet mogen ontbreken en goed zijn te ontwikkelen. Uiteindelijk kwamen de meest belangrijke en haalbare functionaliteiten naar voren. De vier belangrijkste functionaliteiten: 1. Simpel in gebruik 2. Ontwerp tonen op juiste manier 3. Responsive 4. Ontwerp op ware grootte 34 Afstudeerscriptie Sebastian Conijn

Afbeelding 5, Functionaliteitenscope, Sebastian Conijn 2014 6. Functionaliteiten 35

36 Afstudeerscriptie Sebastian Conijn

Notes 7. Ideation workshop Voor dit afstudeerproject heeft er op woensdagavond 27 november 2013 bij UNITiD een ideation workshop plaatsgevonden. Zo n workshop kan in vele verschillende varianten gegeven worden maar het ging in dit geval om zoveel mogelijk ideeën te verkijgen voor de tool. De deelnemers kregen de opdracht om de belangrijke schermen van de applicatie of website te schetsen. is er een A3 gebruikt met vijftien figuurtjes in de vorm van cirkels, vierkantjes, driehoeken, etc. In slechts twee minuten moesten de aanwezigen proberen om bij elk figuurtje een tekeningetje te maken. Zo werd er bijvoorbeeld van een cirkel een wereldbol gemaakt en van een driehoek een zeilboot. Bij deze warming-up zijn de aanwezigen onbewust verplicht creatief te denken en worden de hersenen losser 14. Wat hield de workshop in? Voor de workshop waren verschillende types mensen uitgenodigd. Zo waren er drie interaction designers, één visual designer en drie personen die weinig of niets met digital design te maken hadden. Deze drie personen waren geen klanten van UNITiD maar zorgden ervoor dat de zogenoemde voorkant van de website of app ook begrijpbaar zou worden voor mensen die minder vaak met nieuwe media omgaan. Na een korte voorstelronde over wie ze waren en wat ze voor beroep en/of functie beoefenden werd er een introductie gegeven over het project. Hierbij werd ook de probleemsituatie uitgelegd. Voordat er nog maar één schets op papier werd gezet is er een een warmingup gehouden. Voor een brainstorm is het van belang dat men vrij gaat denken en de drempel om mooi te schetsen wordt weggenomen. Voor deze warming-up De volgende stap was de uitleg van de opdracht. De aanwezigen kregen allen een stift en papier om in vijftien minuten schetsen te maken voor een smartphone-interface die designs voor een smartphone goed kon tonen. Natuurlijk moest deze interface simpel en overzichtelijk zijn en ruimte bieden om van verschillende schermen versies aan te bieden. Er is gekozen voor een smartphone-interface (mobile first approach) omdat er beter nagedacht moet worden over hoe je informatie toont op een klein scherm. Het dwingt je te focussen op de basis en innovatief na te denken. In deze uitleg is bewust gekozen om geen voorbeelden voor te leggen. Op die manier raken zowel de designers als de niet-designers niet vooringenomen en zouden ze geen van de voorbeelden overnemen. 14. Vos, K. de (2013), Brainstormen (2e editie), Amsterdam: Pearson Benelux 7. Ideation workshop 37

Na deze vijftien minuten werden de aanwezigen gevraagd hun ontwerp op te hangen aan een magnetisch whiteboard en één voor één uit te leggen wat ze hadden ontworpen. Zo werd duidelijk waarom bepaalde keuzes waren gemaakt en hoe ze zich de interface voorstellen. Ook functionaliteiten die tijdens een interview niet aan bod komen, worden vaak tijdens zo n workshop zichtbaar. 7.1 Eerste ronde Een van de aspecten die dit project lastig maakte is hoe je het overzicht kunt bewaren in alle verschillende ontwerpen en versies. In versies kunnen bijvoorbeeld kleuren zijn veranderd, elementen verplaatst of tekst herschreven. Er werd gaandeweg een groot verschil bij de schetsen duidelijk. Er zijn twee soorten ingangen om een ontwerp te bekijken (zie ook afbeelding 6). Er kan namelijk gestart worden met een pagina of met een versie. In geval van een pagina heb je daar verschillende versies van waaruit je een keuze moet maken voordat je de door jouw gekozen pagina en de juiste versie voor je hebt. De andere ingang is dat je begint met het kiezen van een versie en daar vervolgens een pagina selecteert om het gewenste ontwerp te bekijken. Omdat er werd gevraagd een interface te schetsen voor een smartphone was er een duidelijk patroon te herkennen in de schetsen. Zo kwamen er meerdere keren functionaliteiten naar voren voor navigatie door middel van zogenoemde swipes. Bij swipen veeg of sleep je met een vinger over het scherm en kun je zo bijvoorbeeld bladeren door de verschillende berichten, foto s en of dagen van de week. In dit geval waren er swipes bedacht waarmee je door verschillende pagina s of versies kunt navigeren. Ook werden er veel schetsen gemaakt voor het vergelijken van pagina s met verschillende versies. Daarbij was het idee dat je de laatste versie makkelijk kon vergelijken met een versie daarvoor. Tijdens het schetsen werd onder andere bedacht dit te doen door het scherm lang ingedrukt te houden. Om de aanwezigen voor de tweede opdracht scherp te houden, werd er een pauze ingelast waarin mensen wat konden drinken en pizza konden eten. Na dit kleine intermezzo kon er verder gegaan worden met de tweede schetsopdracht. In deze opdracht werd er gevraagd om de achterkant te bedenken. De achterkant zou een desktop interface zijn waarin de designer de ontwerpen kan uploaden naar de tool. Ook dit systeem moet natuurlijk overzichtelijk en handig zijn. De aanwezigen bij de workshop moesten zich daarvoor inleven in een designer en niet in de klant zoals in de vorige opdracht. Ook voor deze opdracht kregen de aanwezigen vijftien minuten. 38 Afstudeerscriptie Sebastian Conijn

Afbeelding 6, Verschillende ingangen, Sebastian Conijn 2014 7. Ideation workshop 39

7.2 Tweede ronde Opmerkelijk is dat bij alle schetsen voor de achterkant een grote toevoegindicator werd geschetst. Wat hiermee bedoeld wordt, is dat er voor het aanmaken van bijvoorbeeld een project, pagina of versie er een Een ander opvallend verschijnsel is dat op één na iedereen als basis de versie had geschetst. leeg vakje staat met een plusje (zie ook afbeelding 7). Een ander opvallend verschijnsel is dat op één na iedereen als basis de versie had geschetst. Waar er bij de vorige schetsopdracht nog mogelijkheden waren om vanuit een versie te werken of op pagina te zoeken naar versies, is bij het invoeren een duidelijke voorkeur om vanuit versies te werken. Afbeelding 7, Toevoegindicator, Typeform.com 2014 Het laatste opvallende item is dat veel van de aanwezigen ook een overzichtspagina van lopenden projecten hebben ontworpen. In zo n overzichtspagina van lopende projecten staan alle klanten die bezig zijn met een project binnen het bedrijf. 40 Afstudeerscriptie Sebastian Conijn

7.3 Conclusie Tijdens de ideation workshop zijn er voor de twee belangrijkste schermen schetsen gemaakt door mensen uit verschillende disciplines. Uit de eerste ronde met schetsen kwam naar voren dat er verschillende Uit de eerste ronde met schetsen kwam naar voren dat er verschillende ingangen zijn om een project te benaderen. ingangen zijn om een project te benaderen. Vanuit een pagina (bijvoorbeeld Home ) of vanuit een versie (bijvoorbeeld 3.0 ). Bij de paginavariant is de pagina te zien in de verschillende versies. Vanuit de versie gezien krijg je alle pagina s die zijn gewijzigd of aangepast. Uit de tweede reeks schetsen, gemaakt voor de achterkant van het systeem viel op dat iedereen daar alleen dacht vanuit versies. Ook werd er vaak een overzichtspagina gemaakt van alle andere lopende projecten en niet alleen het project waar je mee bezig bent. 7. Ideation workshop 41

8. Sketching & Wireframing Met de schetsen uit de workshop was er een duidelijk beeld over de verwachting van de gebruikers en hoe ze de belangrijkste schermen voor zich zien. Uit de grote berg aan schetsen zijn eerst de belangrijkste functionaliteiten inzichtelijk gemaakt door middel van interactie ontwerpen. Met een interactie ontwerp is gekeken naar de interactie tussen gebruiker en in dit geval de tool. Hierbij dient nog niet gelet te worden op het ontwerp. 8.1 Beginscherm Deze interactie ontwerpen zijn vooral van het eerste scherm als de klant is ingelogd. Dit is de zogenoemde home pagina. Het probleem was dat je vanuit hier versies of vanuit pagina s kan werken. In het interactie De naam van het ontwerp zegt weinig en maakt het scherm druk. ontwerp begint de gebruiker met de laatste versie. Door van rechts naar links te swipen verschijnen de oudere versies. Na het allereerste ontwerp voor de smartphone (zie afbeelding 8) bekeken en voorgelegd te hebben aan collega interaction designers, waren er verschillende vragen. Een van die vragen ging over het selecteren van een pagina op het homescreen. Zou het selecteren van zo n pagina genoeg bieden om het scherm ingewikkelder, drukker en onoverzichtelijk te maken? De naam van de pagina zegt weinig en maakt het scherm druk. Daarom is er een alternatief ontworpen zonder de pagina s op het eerste scherm te tonen en is het sfeerbeeld van het eerste ontwerp in de versie vergoot om het geheel meer stijl en identiteit te geven (zie afbeelding 9). Omdat de versie het belangrijkste onderdeel is in dit scherm is het verstandig deze prominent op het scherm te tonen. Als er van rechts naar links geswiped wordt en de duim over het scherm veegt is het versienummer niet te zien. Door het versienummer en het aantal pagina s boven het ontwerp te zetten is dat opgelost (zie afbeelding 10). Door deze aanpassing is het mogelijk om nog voor dat je duim van het scherm is gehaald de versie te zien. Doordat een directe link naar de pagina s is weggehaald, is die opening verdwenen en zijn gebruikers verplicht op deze manier met versies te werken. Terwijl in de ideation workshop veel gevraagd werd om een ingang via pagina s is er gekeken om dit op een andere manier op te lossen. Deze werd gevonden door het aantal pagina s op de homepage te gebruiken als verwijzing naar een speciaal scherm met alle ontwerpen. 42 Afstudeerscriptie Sebastian Conijn