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

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. 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.

Bekijk dit verslag digitaal:

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

6

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.


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 1.1 Achtergrondinformatie 1.2 Probleemstelling 1.3 Hoofdvraag 1.4 Deelvragen 1.5 Randvoorwaarden 1.6 Begripsbepaling 1.7 Oplevering

• 2. Probleemsituatie 2.1 Smartphone 2.2 Overzicht 2.3 Versiebeheer 2.3 Conclusie

• 3. Onderzoek naar de doelgroep

10 10 10 11 11 12 12 12

14 14 16 16 16

18

3.1 Interviews 3.2 Persona 3.3 Conclusie

18 18 19

• 4. Taakanalyse

20

4.1 Keuzeproces 4.2 Conclusie

20 20

8

• 5. Concurrentie-analyse

22

5.1 Basecamp 5.2 TAP 5.3 E-mail 5.4 Conceptshare 5.5 Mockvault 5.6 Mailette 5.7 Prevue 5.8 QwikVu 5.9 Axure 5.10 ProofHQ 5.11 Dropbox 5.12 Red pen 5.13 Bounce 5.14 Conclusie

23 24 25 25 26 27 27 28 28 29 30 30 31 32

• 6. Functionaliteiten

34

• 7. Ideation workshop

37

7.1 Eerste ronde 7.2 Tweede ronde 7.3 Conclusie

38 40 41


• 8. Sketching & Wireframing 8.1 Beginscherm 8.2 Swipes 8.3 Flowchart

• 9. Het interactie-ontwerp 9.1 Achterkant 9.2 Voorkant 9.3 Tablet 9.4 Desktop

• 10. Testen 10.1 De achterkant 10.2 De voorkant 10.3 Verbeteringen 10.4 Conclusie

42 42 44 46

48 51 60 67 68

90

• 14. Bibliografie

92

14.1 Boeken 14.2 Websites

92 92

• 15. Bijlage A. Persona B. Concurrentie-analyse C. Quotes uit interviews D. Notitie’s van testen

95 96 97 99 101

78 78 81 84 85

• 11. Conclusie

86

• 12. Aanbevelingen

88

12.1 Feedback 12.2 Ontwikkeling 12.3 Uitbreidingen

88 89 89

Inhoudsopgave

• 13. Dankwoord

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 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.

“UNITiD staat bekend als een van de beste ontwerpbureaus in Nederland omdat ze een goed ontwikkeld specialisme hebben op gebied van interactie-ontwerp.”

Nu zijn Ziggo, Rabobank en Philips grote beursgenoteerde bedrijven. Toch zitten er in het klantenbestand van UNITiD ook kleinere, minder

10

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.


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.

12

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.


Afbeelding 1, Definitie piramide, Sebastian Conijn 2014

1. Inleiding

13

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 bijkomen of projectmanagers die de voortgang willen inzien lopen in het geval van e-mail meteen al tegen een muur op.

2.1 Smartphone

Een veel gebruikte tool binnen UNITiD is Basecamp1. Dit online projectmanagementsysteem 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.

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.

“Een ontwerp bekijken op een smartphone is omslachtig omdat Basecamp hiervoor geen mogelijkheden biedt.”

14

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.

Notes

1. Basecamp, http://www.basecamp.com, geraadpleegd op 16 oktober 2013.


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.

16

“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.”


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 tegenaan lopen en hoe ze daarvoor de ideale oplossing voor zich zien.

“Eigenlijk wil je het laten zien op hetgene waarop je het straks gaat bekijken.”

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.

18

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 ander systeem is volgens Sandra Karis van NU.nl een “hel”. Het overzicht gaat al snel verloren.

“Versiebeheer is echt een hel!”

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 persona2 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 Luth3 (zie bijlage: A. Persona) . Jelte is 28 jaar en werkt al 2 jaar bij UNITiD als visual


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. Notes

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.

20

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.


Afbeelding 3, Taakanalyse, Sebastian Conijn 2014

4. Taakanalyse

21

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 TAP3 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.

22

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. Notes

3. Collard, M. (2011), TAP- Fireworks touch prototype tool for iPhone, iPad, geraadpleegd op 16 oktober 2013


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.

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

De prijs is vanaf $20,- voor 10 projecten.

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.

Strategie

Mogelijkheden

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.

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.

Prijs

24


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

5. Concurrentie-analyse

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 Conceptshare4 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.

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 Photoshop3. Het biedt erg veel opties en daardoor raakt zelfs de designer de draad kwijt.

26

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 Mockvault5 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.


Conclusie

Prijs

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.

De prijs is $9,- per drie gebruikers per maand.

5.6 Mailette Voordelen

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.

Waar e-mail zich beperkt tot de e-mailboxen gaat Mailette6 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.

Conclusie

Nadelen

Voordelen

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.


Bij Mailette staan de ontwerpen online maar gaat een groot deel van de communicatie nog steeds via e-mail.

5.7 Prevue 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.

27

Mogelijkheden

Nadelen

Prevue7 biedt zeer veel mogelijkheden om de ontwerpen goed te presenteren door achtergrondkleuren aan te passen en titels toe te voegen.

Ook ondersteunt QwikVu niet de mogelijkheid om de ontwerpen te delen op een mobiel apparaat en heeft het geen overzichtspagina voor de klant.

Prijs

Mogelijkheden

De prijs is $75,- per 15 gebruikers per maand.

QwikVu heeft een sterke en aanwezige vormgeving. Veel van de functionaliteiten zien we ook terug bij de concurrenten.

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 QwikVu8 uit van verzamelingen. Je kan een nieuwe verzameling starten en daar alle ontwerpen die je wilt delen naar uploaden.


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 Axure9 is de enige tool met offline ontwerpsoftware.

28


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.


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 ProofHQ10 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.



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

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.

Voordelen

Conclusie

Dropbox11 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.

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.

Nadelen Er zit om de ontwerpen een dikke ‘Dropbox’-rand, er is geen duidelijke overzichtspagina en het werkt niet met versiebeheer.

Mogelijkheden

5.12 Red pen Voordelen Red pen12 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


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

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.

Bounce13 is ook een tool die net zoals bijvoorbeeld Red


31

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. a

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

32

“Bij tien veelgenoemde tools op het internet is er per tool gekeken naar vijf punten.”



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 ‘heel belangrijk’ naar ‘minder/ niet belangrijk’ op een rij. De resultaten ziet u hiernaast in afbeelding 5.

“Uiteindelijk staan alle belangrijke en goed haalbare functies in de rechterbovenhoek van de as.”

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

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.

34


Afbeelding 5, Functionaliteitenscope, Sebastian Conijn 2014

6. Functionaliteiten

35

36


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 losser14.

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.

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.

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

7. Ideation workshop

Notes

14. Vos, K. de (2013), Brainstormen (2e editie), Amsterdam: Pearson Benelux

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.

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.

7.1 Eerste ronde

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.

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

38

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.


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 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.”

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

40

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.


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 ingangen zijn om een project te benaderen. Vanuit een pagina (bijvoorbeeld “Home”) of vanuit een versie (bijvoorbeeld “3.0”).

“Uit de eerste ronde met schetsen kwam naar voren dat er verschillende ingangen zijn om een project te benaderen.”

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 ontwerp begint de gebruiker met de laatste versie. Door van rechts naar links te swipen verschijnen de oudere versies.

“De naam van het ontwerp zegt weinig en maakt het scherm ‘druk’.”

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.

42

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.


Afbeelding 8, Eerste ontwerp, Sebastian Conijn 2014

8. Sketching & Wireframing

Afbeelding 9, Tweede ontwerp, Sebastian Conijn 2014

Afbeelding 10, Derde ontwerp, Sebastian Conijn 2014

43

8.2 Swipes Het tweede aspect dat naar voren kwam in de eerste ronde van de ideation workshop was dat er goed werd nagedacht over ‘swipen’. Het navigeren in een scherm met het ontwerp naar de volgende of vorige pagina of versie is een knelpunt. Daarom zijn alle ideeën die naar voren kwamen tijdens de workshop weer uitgetekend om te kijken of de ideeën ook echt haalbaar zijn (zie afbeelding 11). Bij binnenkomst op een ontwerp is het mogelijk om links en rechts te swipen, dit zorgt ervoor dat je door gaat naar het volgende of vorige ontwerp. Hetzelfde principe is niet doorgevoerd voor swipen naar boven of beneden omdat het vaak voorkomt dat een ontwerp langer is dan het beeldscherm. Het komt minder vaak of nooit voor dat een ontwerp breder is dan het beeldscherm. Als er dubbel wordt getapt op het scherm zo0m je in op het ontwerp. Een percentage staat nog niet vast maar 150 tot 200% zou ideaal zijn. Swipen in deze status betekent dat je kan navigeren op het ontwerp. Door naar het volgende of vorige ontwerp is hier dan ook niet van toepassing. Terug naar het begin in de normale status van ontwerp kan je ook het scherm ingedrukt houden. In dat geval zou in een langzame transitie een oudere versie (als die beschikbaar is) opkomen. Zodra je loslaat zal de oudere versie weer langzaam verdwijnen.

44

Om het navigeren nog gemakkelijker te maken voor de gebruiker is er ook gekeken naar het swipen door de versies. Bijvoorbeeld swipen naar boven is naar een oudere versie en naar beneden swipen is nieuwere versie. In een ideale situatie waarin er bij elk ontwerp evenveel versies zouden zijn zou dit goed kunnen werken (zie afbeelding 12: ideaal scenario). Realistisch gezien kan het voorkomen dat er ontwerpen missen omdat ze niet gemaakt hoeven te worden of niet aangepast zijn. Waar verwacht de gebruiker in dat geval uit te komen? Die vraag is aan verschillende mensen gesteld en daaruit kwamen uiteenlopende antwoorden voort. Omdat geen ruimte is voor uitleg aan de gebruiker en het de toevoegde waarde niet opweegt tegen de verwarring die kan optreden is er uiteindelijke voor gekozen deze navigatie-optie te laten varen.

Afbeelding 12, Swipe scenario’s, Sebastian Conijn 2014


Afbeelding 11, Swipes, Sebastian Conijn 2014 8. Sketching & Wireframing

45

8.3 Flowchart Een flowchart15 is een schematische voorstelling van een proces of website. Met behulp van een flowchart is het mogelijk ingewikkelde procedures in inzichtelijke vorm weer te geven. In afbeelding 13 is de tool in een flowchart weergegeven. Hierbij is gekeken vanuit het perspectief van de klant. Deze start met een login om het project van UNITiD te beschermen tegen kwaadwillenden. Na de inlog kom je op “home” waar alle versies van het project staan. Vanuit daar kan je naar de instellingen van het project of naar oudere versies. Vanuit een oudere versie kan je er ook voor kiezen om alle pagina’s binnen één versie te bekijken. Vanuit home en het pagina-overzicht kan je een ontwerp bekijken. Vanuit home start je op het eerste ontwerp. Vanuit het pagina-overzicht is het vanzelfsprekend om te beginnen bij de pagina die je hebt gekozen. Je kan tussen de ontwerpen navigeren door te swipen en mede hierdoor is er gekozen voor een zogenoemd ‘Pyramid’ model (zie afbeelding 14). Het Pyramid model stelt je in staat tussen items en altijd terug naar ‘hoofdpagina’ te navigeren. Tindwill beschrijft in het boek Designing Interfaces dat het op deze manier minder tijd kost om te navigeren. In het geval dat je 20 ontwerpen hebt, hoef je niet van ontwerp 1 via ontwerp 2 en 3 naar ontwerp 4 maar kan je via een ‘hoofdpagina’

46

naar ontwerp 4. Een ander voordeel van dit principe is dat het eenvoudig is om een ‘escape hatch’16 toe te passen. Waar je ook bent kan je met de ‘escape hatch’ altijd terug naar de hoofdpagina. Je kan je goed voorstellen dat als je bij ontwerp 12 bent, de browser terug button je brengt bij ontwerp 11, daarna ontwerp 10 enzovoorts. Door een link of button aan te bieden kan de gebruiker te allen tijde terug naar de hoofdpagina. Notes

15. Woorden-boek.nl, http://www.woorden-boek.nl/woord/flowchart, geraadpleegd op 16 december 2013 16. Tidwill, J. (2006), Designing Interfaces, Verenigde Staten: O’Reilly Media

Afbeelding 14, Navigatie piramide, Sebastian Conijn 2014


Afbeelding 13, Flowchart van de tool, Sebastian Conijn 2014 8. Sketching & Wireframing

47

9. Het interactie-ontwerp In dit hoofdstuk zullen de belangrijkste digitale schetsen van de tool besproken worden. De digitale versie van een schets noemt men ook wel een wireframe. “Wireframes zijn een visueel hulpmiddel bij het ontwikkelen van een website of applicatie. Ze kunnen gezien worden als de bouwtekening van een website, waarin een overzicht wordt gegeven van de verschillende onderdelen die op een website aanwezig de wireframes zullen zijn.

“In worden zaken vastgelegd als navigatie, indeling en inhoud, zonder gebruik te maken van een grafisch ontwerp.”

In de wireframes worden zaken vastgelegd als navigatie, indeling en inhoud, zonder gebruik te maken van een grafisch ontwerp. Het grote voordeel is dat alleen op de inhoud gefocust wordt en niet op het grafische aspect (en of het dus ‘mooi‘ is of niet).17”

Kort gezegd is er bij het interactie ontwerpen nog niet zozeer nagedacht over de kleuren of lettertypes. Zo neemt het de minste tijd in beslag om meerdere versies van een oplossing te maken. Om geen verwarring tussen een wireframe en visual design te veroorzaken is er in

48

dit project geen kleur gebruikt en zijn de ontwerpen dus in grijstinten uitgewerkt. Ook is er gekozen, omdat het schetsen/ideeën zijn, voor een lettertype dat een handschrift moet voorstellen. Bij UNITiD is het gebruikelijk om een handschriftlettertype voor wireframes te gebruiken. Dit voorkomt dat de klant bedenkt dat het wireframe een echt ontwerp voor de app is. Het ontwerpen van een de tool gebeurt echter in een later stadium (die niet in deze scriptie wordt behandeld). Bij het visual design worden de schermen uitgewerkt in kleur en met mooie bijpassende en leesbare lettertypes. Om te voorkomen dat in deze fase de ontwerpen te veel een oplossing bieden voor één specifieke medewerker van UNITiD is de persona (zie bijlage: A. Persona) gebruikt die bij de het onderzoek naar probleem is opgesteld (zie hoofdstuk: 3. Onderzoek naar de doelgroep) . a

17. Maltha, H. (2009), Wireframes, de bouwtekening van een website, http://www.frankwatching.com/archive/2009/11/23/wireframes-debouwtekening-van-een-website/, geraadpleegd op 6 januari 2014


9. Het interactie-ontwerp

49

Afbeelding 14, Designer - login, Sebastian Conijn 2014

50


9.1 Achterkant Een visual designer kan een project aanmaken en beheren in een zogenoemde ‘achterkant’. Deze ‘achterkant’ is alleen beschikbaar voor visual designers van UNITiD. Een visual designer zit vaker achter een desktop dan achter zijn smartphone, hier is rekening mee gehouden door de ‘achterkant’ alleen aan te bieden voor desktop. Om te voorkomen dat het ontwerp zich zou focussen op één specifieke medewerker van UNITiD is hiervoor gebruik gemaakt van een persona (zie bijlage: A. Persona) . Daarnaast zijn handige functionaliteiten die bij de concurrentie-analyse naar voor kwamen verwerkt in de oplossing.

“Het inloggen is misschien wel het meest vervelende scherm in de flow.”

Een andere oplossingen om de snelheid te verhogen is om het wachtwoord niet te maskeren bij het intypen als het IP-adres van de computer overeenkomt met het UNITiD hoofdkwartier. Dit betekent dat de tekens standaard verborgen worden zodra er niet ingelogd wordt vanaf het UNITiD hoofdkwartier19. Maar zodra een medewerker binnen het kantoor werkt worden de tekens weergegeven. Toch is het mogelijk, onafhankelijk van de locatie om de leestekens te verbergen of te tonen door een checkbox aan te vinken.

“Zodra een medewerker buiten het kantoor werkt worden de tekens weergegeven.”

9.1.1 Login Het inlogscherm is misschien wel het meest vervelende scherm in de flow. Je bent verplicht dit formulier in te vullen voordat je kan beginnen. Met die reden is er extra goed gekeken naar de snelste maar toch ook de veiligste manier om voorbij dit scherm te komen. Uit een onderzoek18 naar de positie van labels op formulieren is gebleken dat het het snelst werkt om de labels boven het invoerveld te zetten (zie tabel 1).


Positie label

Snelheid

Boven

Snelst

Rechts

Gemiddeld

Links

Langzaamst

Tabel 1, positie label en snelheid, Sebatian Conijn 2014 Notes

18. Mifsud, J. (2011), An Extensive Guide To Web Form Usability, http://uxdesign.smashingmagazine.com/2011/11/08/extensive-guideweb-form-usability/, geraadpleegd op 17 januari 2014 19. Wroblewski, L. (2008), Web Form Design, Verenigde Staten: Rosenfeld

51

9.1.2 Dashboard Als het inloggen succesvol is afgerond, komt men op het dashboard terecht. Op dit dashboard kan de designer een nieuw project aanmaken en ziet hij/zij zijn/haar laatste vier projecten waaraan is gewerkt. Ter inspiratie is gekeken naar de oplossing die Mockvault20 heeft gebruikt voor het geven van overzicht op een dashboard. Hierin laten zij alle informatie zien die volgens hen nodig is voor de designer. Hierbij kun je natuurlijk denken aan projectnaam, aantal ontwerpen en opties zoals verwijderen en bewerken. Toch voelt deze pagina ook bij meerdere projecten overzichtelijk en zijn de taken die vaak voorkomen gemakkelijk uit te voeren. Afbeelding 15, Mockvault, Mockvault.com 2014

Uit de ideation workshop kwam naar voren dat designers graag willen weten met welke projecten hun collega’s bezig zijn. Om tegemoet te komen aan deze wens is er op het dashboard ook ruimte voor de (lopende) projecten van collega’s, gesorteerd op datum van de laatste versie-upload. Bij elk project, zowel de eigen als de projecten van collega’s21, staan icoontjes van apparaten. Deze moeten duidelijk maken voor welke apparaten ontwerpen in de tool staan. Notes

20. Mockvault, http://www.mockvault.com, geraadpleegd op 16 oktober 2013. 21. Wilson, G. (2012), Designing and Building Great Dashboards - 6 Golden Rules to Successful Dashboard Design, http://www.geckoboard. com/blog/building-great-dashboards-6-golden-rules-to-successfuldashboard-design, geraadpleegd op 21 januari 2014

52


Afbeelding 16, Designer - dashboard, Sebastian Conijn 2014


53

9.1.3 Indeling

Afbeelding 17, Conceptshare, iconceptshare.com 2014

Voor schermen na het dashboard worden de functionaliteiten verdeeld op basis van functie. Door de functionaliteiten te groeperen ontstaat er rust en zijn opties en navigatie gemakkelijker (zie hoofdstuk: 7. Ideation workshop) terug te vinden voor de gebruiker, in dit geval de designer22. Zo zijn alle zaken die te maken hebben met het systeem en niet zozeer met één project bovenaan te vinden (zie afbeelding 18). Op deze plaats komt het logo, links ‘naar het dashboard’, profiel en uitloggen. Informatie over de pagina of het project komt onder systeeminfo. Hier kan je bijvoorbeeld denken aan de paginatitel “Project aanmaken” of “Project wijzigen”. In dit geval komt ernaast ‘navigatie van het project’. Hierbij kun je denken aan de link naar het project die de klant bekijkt. Onder deze balk komt de content van een project: titel, afbeeldingen en ontwerpen die nodig zijn om het project werkend te krijgen voor de klant. Naast de content zijn de projectinstellingen te vinden, bijvoorbeeld het aantal versies en het wachtwoord voor de klant. Andere opties, bijvoorbeeld om de content op te slaan, zijn hier ook terug te vinden. Deze indeling komt ook vaker voor in andere vergelijkbare tools, zoals Conceptshare 3. Notes

22. Tidwill, J. (2006), Designing Interfaces, Verenigde Staten: O’Reilly Media 23. Conceptshare, http://www.iconceptshare.com, geraadpleegd op 16 oktober 2013.

54


Afbeelding 18, Indeling vervolgpagina’s, Sebastian Conijn 2014


55

9.1.4 Project aanmaken De indeling is uitgewerkt op de pagina “Project toevoegen”. Hier komt de designer zodra hij een nieuw project wil beginnen voor een nieuwe klant of product. Om het project aan te maken zijn naast de ontwerpen nog twee zaken belangrijk. Ten eerste de naam van het project of de klant. Deze is nodig om de url van het project te maken. Ook wordt de designer gevraagd om een klant logo. Deze is nodig om betrouwbaarheid uit te stralen naar de klant toe bij het inloggen en het gebruiken van het systeem, maar daarover later meer. Om ontwerpen toe te voegen aan het project kan de designer zijn/haar ontwerpen in het venster slepen of op een knop ‘bestanden selecteren’ drukken om de bestanden op de computer op te zoeken. Zodra de ontwerpen online staan kan hij/zij de serie bepalen door ze op de gewenste volgorde te slepen.

“Om ontwerpen toe te voegen aan het project kan de designer zijn ontwerpen in het venster slepen of op een knop ‘bestanden selecteren’ drukken.”

Aan de rechterkant zijn de instellingen te vinden voor dit project. Hier zijn de beschikbare versies te vinden. Hiervoor is gekozen omdat het ‘contentscherm’ lang kan worden bij meerdere versies. Onafhankelijk van

56

de lengte van de content kan de designer door deze ‘samenvatting’ sneller navigeren naar de juiste versie of informatie krijgen over een versie, bijvoorbeeld hoeveel ontwerpen er in een versie zitten en wanneer deze is geüpload. Bij het aanmaken van een project wordt standaard een wachtwoord ingesteld. Dit wachtwoord heeft de klant aan de ‘voorkant’ nodig om in te loggen op het project. Er is slechts één wachtwoord voor alle gebruikers van dit project. Dit voorkomt dat een visual designer accounts moet aanmaken voor elke gebruiker. Deze handeling kan veel tijd kosten. Uit het onderzoek naar TAP kwam naar voren dat er vrij weinig inspiratie is voor het instellen van een veilig wachtwoord. Je kan hierbij denken dat voor een project voor Ziggo de gebruikersnaam “Zig” en het wachtwoord “go” is. Om mogelijke problemen in de toekomst te vermijden wordt er standaard een wachtwoord ingesteld van minimaal 12 tekens24. Doordat het automatisch wordt gegenereerd, is de kans klein dat het ook enige relatie heeft met het project. Voor het gegenereerde wachtwoord is gekozen voor één woord. Dit zorgt ervoor dat het makkelijker is te onthouden dan een volledig willekeurige tekenreeks. Natuurlijk is het wachtwoord altijd te wijzigen mocht dit nodig zijn. Notes

24. Sutter, J.D. (2010), How to create a ‘super password’, http:// edition.cnn.com/2010/TECH/innovation/08/20/super.passwords/, geraadpleegd op 22 januari 2014


Afbeelding 19, Designer - aanmaken van project, Sebastian Conijn 2014


57

Afbeelding 20, Designer - project wijzigen, Sebastian Conijn 2014

58


9.1.5 Project wijzigen Het wijzigen van een project is in veel opzichten hetzelfde als het aanmaken van een scherm. Er zijn echter wel wat verschillen. Omdat er bij het aanmaken op ‘opslaan’ is gedrukt is de unieke URL zichtbaar en kan deze ge-e-maild worden naar klanten. Als er met de muis over een ontwerp gaat komt er een laag overheen met een icoon. Het systeem heeft berekend aan de hand van het formaat van het ontwerp voor welk apparaat het ontwerp moet zijn. Het icoontje van het apparaat is dan vervolgens te zien. Standaard wordt de naam van het ontwerp gehaald uit de bestandsnaam. Zo zal “Dashboard.jpg”, Dashboard heten. Mocht de designer na het uploaden toch de naam willen wijzigen, dan kan dit door met de muis over het ontwerp te gaan en op wijzigen te klikken25. (Zie afbeelding 21) Notes

25. Jovanovic, J. (2009), 10 UI Design Patterns You Should Be Paying Attention To, http://uxdesign.smashingmagazine.com/2009/06/23/10ui-design-patterns-you-should-be-paying-attention-to/, geraadpleegd op 22 januari 2014


Afbeelding 21, Titel van ontwerp wijzigen, Sebastian Conijn 2014

59

9.2 Voorkant Als een visual designer een project heeft aangemaakt, kan de klant inloggen om zijn/haar ontwerpen te bekijken. Vanuit het systeem van de visual designer kan een e-mailtje gestuurd worden naar één of meerdere personen. Als de klant zijn/haar e-mail opent (op zijn smartphone) vindt hij/zij daar een link naar de online tool.

“Om klanten na de inlog niet meteen het bos in te sturen is er nog vóór het inloggen een melding te vinden als er geen ontwerpen voor smartphone te vinden zijn.”

9.2.1 Login In de flowchart (zie hoofdstuk: 8.3 Flowchart) is de start voor de klant bij het inlogscherm. Projecten van de klanten moeten natuurlijk goed beschermd worden tegen gebruikers met minder goede intenties.

Om klanten na de inlog niet meteen het bos in te sturen is er, in sommige gevallen, nog vóór het inloggen een melding te vinden. Deze melding wordt getoond als er geen ontwerpen voor smartphone te vinden zijn. Door deze melding nog voor het inloggen aan te bieden wekt het minder irritatie dan wanneer de klant er later achter zou komen. Een ander hulpmiddel op de loginpagina is de informatie wanneer de laatste veranderingen zijn gedaan, hoeveel pagina’s er beschikbaar zijn en hoeveel versies er online staan. Ook dit is om te voorkomen dat een klant of designer ‘veel moeite’ gaat doen om in te loggen en er dan vervolgens achter te komt dat er niets is veranderd. Notes

26. Jarret, C. en Gaffney, G. (2008), Forms that Work, Verenigde Staten: Morgan Kaufmann

Zoals in het boek “Forms that Work” staat beschreven, is het goed om de klant op de eerste pagina het vertrouwen te geven dat ze de juiste tool gebruiken van een professioneel bedrijf. Het boek beschrijft dat je vertrouwen op verschillende manieren kan bevorderen. Vertaald naar het ontwerp van dit project is er daarom een logo van de klant toegevoegd en onderop de pagina een link naar de website van UNITiD. 26

60


Afbeelding 22, Klanten inlog, Sebastian Conijn 2014 9. Het interactie-ontwerp

61

9.2.2 Startscherm Na het inloggen komt de gebruiker terecht in het zogenoemde ‘home’ scherm. Vanuit hier kan de gebruiker navigeren naar ontwerpen, versies of overzichten. Net zoals op de loginpagina is de projectnaam meegenomen om dat stukje betrouwbaarheid naar de klant te geven27. In het beginscherm staat altijd de laatste en recentste versie van een ontwerp samen met alle informatie die bij het ontwerp hoort 8. Notes

27. Kirmani, S. (2011), Building Trust on Ecommerce Home Pages, http://www.uxmatters.com/mt/archives/2011/07/building-trust-onecommerce-home-pages.php, geraadpleegd op 22 januari 2014 28. Choudhury, S. (2013), The Psychology behind information Dashboards, http://uxmag.com/articles/the-psychology-behindinformation-dashboards, geraadpleegd op 22 januari 2014

62


Afbeelding 23, Klantendashboard, Sebastian Conijn 2014 9. Het interactie-ontwerp

63

9.2.3 Ontwerp met menu Zodra er een ontwerp is geselecteerd zie je natuurlijk meteen dit ontwerp. Zodra de gebruiker één maal op het scherm tapt, komen er extra functionaliteiten in beeld. Deze functionaliteiten zijn onderverdeeld in twee type balken en gegroepeerd op functie zoals in het boek “Designing Interfaces”29 wordt geadviseerd. Zo zijn alle navigatiemogelijkheden te vinden in de bovenste balk. In deze balk bevindt zich een terug button naar het hoofdscherm, de versies die beschikbaar zijn van deze pagina en een button voor een pagina-overzicht. De terug-button en de pagina-overzichtsbutton spreken voor zich. Met de versiebutton kan de gebruiker, bij het drukken op deze knop, de andere beschikbare versies vinden en daar naartoe navigeren. De onderste balk is voor ontwerpgerelateerde informatie. Hier is de naam van de pagina te vinden en is er een mogelijk om te annoteren. Bij het annoteren op een pagina kan de gebruiker aandachtspunten met een kort stukje tekst plaatsen op het ontwerp. Als de gebruiker eenmaal op het ontwerp ‘tapt’ verdwijnen de balken weer en is het ontwerp op 100% te zien. Notes

29. Tidwill, J. (2006), Designing Interfaces, Verenigde Staten: O’Reilly Media

64

Afbeelding 24, Klantenontwerp, Sebastian Conijn 2014


9.2.4 Pagina-overzicht Tijdens de ideation workshop (zie hoofdstuk: 7. Ideation workshop) werd duidelijk dat gebruikers twee soorten ingangen verwachten. Eén waar je de ontwerpen per versie kunt bekijken en de ander met een overzicht per pagina. Standaard komt een gebruiker van de applicatie binnen via de versie, maar voor degene die het willen zien op paginaniveau is er ook een mogelijkheid. Op deze overzichtspagina zijn alle pagina’s met een kleine thumbnail te zien. Omdat een thumbnail weinig zegt is ook de naam van het bestand te zien. De extensie van het bestand (bijvoorbeeld “.jpg” of “.png”) is weggelaten omdat de gebruiker van de applicatie het weinig zal uitmaken of het ontwerp dat hij ziet een “.jpg” of een “.png” bestand is. Een andere belangrijke functionaliteit op deze pagina is de sortering. Standaard zijn de pagina’s gesorteerd op alfabet (oplopend), daarnaast kan er ook nog gekozen worden om te sorteren op datum, apparaat en versie. De laatste functionaliteit is de mogelijkheid om een oudere versie te kiezen van een gekozen pagina. Als er op de button met het aantal versies wordt gedrukt klappen de versies uit. Dit zijn, voor smartphone, speciale grote buttons met voldoende tussenruimte om ‘aanraakfouten’ op een touch device te minimaliseren30. Notes

Afbeelding 25, Pagina-overzicht, Sebastian Conijn 2014


30. Wroblewski, L. (2011), Mobile first, Verenigde staten: Jeffrey Zeldman

65

Afbeelding 26, Klanten pagina-overzicht op tablet, Sebastian Conijn 2014

66


9.3 Tablet Voor tablet zijn de functionaliteiten niet veel anders dan voor de smartphone. Toch zijn er ook enkele verschillen, omdat er meer ruimte is, zijn thumbnails, buttons en teksten groter31. Dit is vooral te zien op de startpagina die na het inloggen verschijnt. Een andere pagina waar een groot verschil te zien is, is de overzichtspagina (zie afbeelding 26). Omdat er meer ruimte beschikbaar is, kunnen er op die manier meer gegevens getoond worden. Zo is er bijvoorbeeld bij het pagina-overzicht ruimte om alle oudere versies weer te geven. In het geval dat er maar één versie beschikbaar is, zal alleen die getoond worden. Notes

31. Terril, B. (2013), A Couple of Best Practices for Tablet-Friendly Design, http://css-tricks.com/a-couple-of-best-practices-for-tabletfriendly-design/, geraadpleegd op 22 januari 2014


67

9.4 Desktop Voor desktop is gekozen om opnieuw te kijken naar de functionaliteiten die aangeboden moeten worden. De reden hiervoor is simpel: desktop zal vaak gebruikt worden omdat zowel de designer als de klant hier het grootste deel van zijn/haar tijd achter zit32. Waarom zou je bijvoorbeeld een e-mail typen op je smartphone als je voor je een volledig toetsenbord en groot beeldscherm hebt staan? Verder mist een desktopcomputer natuurlijk het swipen waardoor de startpagina van de smartphone en tablet al moeilijk uitvoerbaar zou worden. Notes

32. Cronk, P. (2013), Desktop, tablet and mobile use by time of day, https://insidegovuk.blog.gov.uk/2013/11/14/desktop-tablet-and-mobileuse-by-time-of-day/, geraadpleegd op 22 januari 2014

68


Afbeelding 27, Klanten pagina overzicht op desktop, Sebastian Conijn 2014


69

Afbeelding 28, Klanten homepage op desktop, Sebastian Conijn 2014

70


9.4.1 Startpagina Iets wat hetzelfde blijft ten opzichte van de smartphoneen tabletversie is de bovenste balk met de projectnaam en instellingen. Daarnaast is het in vele opzichten verschillend. Zo is er voor de desktopversie voor een tijdlijn gekozen. De nieuwste/laatste versie staat bovenaan een direct in beeld. Ook hiervoor is de reden simpel: zowel de klant als de designer zijn het meeste geïnteresseerd in de meest recente versie. Binnen zo’n versie kunnen, afhankelijk van de hoeveelheid ontwerpen tot maximaal acht miniatuurafbeeldingen van de ontwerpen getoond worden. Hiervoor is gekozen zodat het te allen tijde overzichtelijk blijft, ook als er bijvoorbeeld dertig ontwerpen in de versie staan.

“Bij oudere versies zouden de miniatuurafbeeldingen veel ruimte innemen zonder dat het een duidelijk doel zou hebben.”

beschikbaar zijn zal er een melding getoond worden waarin kenbaar wordt gemaakt dat de gebruiker er goed aan doet om de ontwerpen te bekijken op een ander apparaat. Toch blijven alle ontwerpen beschikbaar, ookal zijn deze niet voor desktop bestemd. Een laatste functionaliteit die ontworpen is, is de “toon alle ontwerpen” button. Deze staat altijd onder de miniatuurafbeeldingen. Deze is aanzienlijk groter bij de laatste versie dan bij oudere versies. De keuze hiervoor is gevallen om bij binnenkomst een duidelijke zogenoemde ‘call-to-action’ te geven33. Bij oudere versies zou het veel ruimte innemen zonder dat het een duidelijk doel zou hebben. Je kan tenslotte ook via een miniatuur afbeelding starten of door simpelweg op de titel of de korte URL te klikken. Om toch de iets minder ervaren gebruiker te helpen, is de button evengoed geplaatst, alleen in een kleiner formaat. Notes

33. Jarrett, C. (2012), 7 Basic Best Practices for Buttons, http://www. uxmatters.com/mt/archives/2012/05/7-basic-best-practices-forbuttons.php, geraadpleegd op 22 januari 2014

Per versie is ook te vinden hoeveel ontwerpen er zich in bevinden, wat de korte url is en voor welke apparaten er ontwerpen zijn. Per apparaat staat hoeveel ontwerpen er beschikbaar zijn. Als er geen ontwerpen voor desktop


71

9.4.2 Het ontwerp op de desktop Het ontwerp bekijken op desktop verschilt ook in vele manieren van de smartphoneen tabletversie. Als er met de muis wordt bewogen verschijnen de twee balken die ook terug te vinden zijn in de smartphoneen tabletversie. Op de bovenste balk, met navigatie, is er meer ruimte en kunnen daardoor labels groter worden geplaatst. Zo wordt het label van de smartphone-variant “Terug” op desktop “Terug naar home” en krijgt het icoontje voor het pagina-overzicht een label met “Bekijk pagina’s”.

In het geval dat er een smartphone- of tabetontwerp wordt bekeken op de desktop, verschijnt er een melding over het ontwerp heen. Als de melding wordt geaccepteerd klapt deze met een animatie in, maar blijven de onderste paar pixels ‘kleven’ aan de onderkant van de bovenste balk. Hiervoor is gekozen om de gebruiker duidelijk te blijven maken dat het een ontwerp is voor een ander apparaat.

De onderste balk, met informatie of acties op het geselecteerde ontwerp, krijgt ook iets meer functionaliteiten. Zo kan het ontwerp gedeeld worden, niet via Facebook of Twitter maar via een e-mail. De gedachte hierachter is dat er een e-mailtje gestuurd kan worden naar de smartphone of tablet en niet zozeer naar andere mensen, alhoewel dit natuurlijk wel mogelijk is. De tweede optie is de downloadfunctionaliteit, ook deze functionaliteit bevindt zich niet in de smartphone- of tabletversie. Eén van de redenen daarvoor is dat het technisch lastig te ontwikkelen is. Een tweede reden is dat gebruikers het kunnen downloaden om bijvoorbeeld in een presentatie te zetten. Dit zal niet of zelden gebeuren op een tablet of smartphone.

72


Afbeelding 29, Klanten ontwerp op desktop, Sebastian Conijn 2014


73

9.4.3 Navigeren Swipen zoals op een tablet of smartphone is op een desktop natuurlijk praktisch onmogelijk. Er zal hiervoor dus ook een andere oplossing gezocht moeten worden. Om consistent te blijven met de versie voor tablet en smartphone is er gekozen om ook horizontaal te navigeren voor ontwerpen in dezelfde versie. Vooral omdat de gebruiker dit zal verwachten. Andere grote bekende websites die dit ook hebben doorgevoerd zijn bijvoorbeeld TheVerge.com34 en Facebook35. Afbeelding 30, Facebook gallerij, Facebook.com 2014

Om andere functionaliteiten van de pagina niet in de weg te zitten komt er een ‘laag’ over het ontwerp heen met onzichtbare buttons om te navigeren naar het vorige of volgende ontwerp. Aangenomen dat klanten vaker het volgende ontwerp willen zien dan het vorige ontwerp is er nagedacht om de button ‘volgend ontwerp’ te vergroten. Dat in combinatie met het feit dat één van de grootste interaction design irritaties de kleine gebieden die aanklikbaar zijn 6. Daarom is er gekozen om de volgende button in onzichtbare laag groter te maken (zie afbeelding 31). Notes

Afbeelding 31, Navigeren op desktop, Sebastian Conijn 2014

74

34. The Verge, http://www.theverge.com, geraadpleegd op 14 januari 2014 35. Facebook, http://www.facebook.com, geraadpleegd op 14 januari 2014 36. Fadeyev, D. (2009), 9 Common Usability Mistakes In Web Design, http://uxdesign.smashingmagazine.com/2009/02/18/9-commonusability-blunders/, geraadpleegd op 14 januari 2014


9.4.4 URL-opbouw De URL is opgebouwd uit het domein (zie afbeelding 32), in dit geval unitid.nl. Na de schuine streep komen de eerste twee of drie letters van de projectnaam. Afhankelijk of de projectnaam al bestaat word er standaard gewerkt met de eerste twee letters. Ziggo wordt in dit geval dus “zi”. Opnieuw een schuine streep waar vervolgens het versienummer komt om na de laatste schuine streep af te sluiten met het nummer van het ontwerp in de volgorde van een versie.

Afbeelding 32, URL opbouw, Sebastian Conijn 2014


75

9.4.5 Pagina-overzicht desktop Het overzicht per pagina verschilt ook op vele punten van de smartphone- of tabletversie. Ook hiervoor geldt dat er meer ruimte beschikbaar is om functionaliteiten beter aan te bieden. De grootste verschillen zitten in de navigatie en de indeling. De navigatie op deze pagina bestaat uit een lijst. Deze lijst wordt gevuld met opties, afhankelijk van wat er gekozen is als sorteeroptie37. In afbeelding 33 staan de vier sorteeropties. In geval van het alfabet komt hier “A” tot “Z” in te staan (aan de linkerkant van de ontwerpen). Mochten er geen pagina’s zijn met een letter worden deze inactief maar nog wel zichtbaar.

“Als de gebruiker een optie selecteert verandert de content.”

Er kan ook geselecteerd worden op type apparaat. Hiervoor zijn drie keuzes: desktop, tablet en smartphone. Mochten er geen ontwerpen zijn voor bijvoorbeeld desktop verdwijnt deze optie als selectiemogelijkheid. De sorteertoptie datum is lastiger in vergelijking met de vorige twee. De datum is variabel en kan in grote projecten zelfs meerdere keren voorkomen. In het geval dat een project over meerdere jaren verspreid wordt, word het jaartal erbij vermeld. Als het project binnen hetzelfde jaar blijft (bijvoorbeeld van januari tot

76

september). Dan vervalt het jaartal. Maanden waarin niets gebeurt zijn niet zichtbaar. De laatste vorm is sorteren op versie. Dit is gelijk ook de meest simpele vorm omdat er vanuit het startscherm standaard op versie wordt geselecteerd. Net zoals bij de andere sorteeropties staat de meest recente versie bovenaan. De navigatie staat op de pagina aan de linkerkant. Als de gebruiker daar een optie selecteert, verandert de rechterkant. Deze rechterkant bevat alle belangrijke informatie van een ontwerp. Een voorbeeld hiervan is de titel, deze bestaat uit de bestandsnaam zonder extensie, hoeveel versies er daarvan zijn en wat de directe link is. Deze link is aanklikbaar en kan meteen ge-e-maild worden (bijvoorbeeld naar de smartphone of tablet). Deze links moeten kort maar duidelijk zijn zodat, mocht de klant het apparaat niet kunnen e-mailen, het makkelijk moet zijn om het over te typen38. Notes

37. Nudelman, G. (2009), Best practices for Designing Faceted Search Filters, http://www.uxmatters.com/mt/archives/2009/09/bestpractices-for-designing-faceted-search-filters.php, geraadpleegd op 22 januari 2014 38. Hambly, C. (2013), Why use short urls?, http://audana.com/shorturls/, geraadpleegd op 22 januari 2014


Afbeelding 33, Sorteeropties, Sebastian Conijn 2014 9. Het interactie-ontwerp

77

10. Testen Om te controleren of het ontwerp werkt zoals het bedacht is, zijn de wireframes aan verschillende personen voorgelegd. De ‘achterkant’ is getest met visual designers. Deze zullen het meeste met de aanmaak- en beheer-kant moeten werken. Ook de ‘voorkant’ voor de klanten van de visual designer is uitgebreid getest. Om de schermen te testen op begrip zijn ze één voor één getoond aan de testpersonen. Per object op het scherm dient de persoon dan een beschrijving te geven wat hij of zij ziet en wat het zou doen of betekent. De zes personen die de ‘voorkant’ hebben getest hadden nog niet of weinig met dit afstudeerproject te maken gehad, waardoor ze ideaal waren om de schermen te testen. De ‘voorkant’ is op alle apparaten, desktop, tablet en smartphone voorgelegd.

10.1 De achterkant De achterkant is getest met drie visual designers en twee interaction designers. Voor alle duidelijkheid: de achterkant is een onderdeel van de tool waar alleen de medewerkers van UNITiD op in kunnen loggen. Klanten van UNITiD bekijken de zogenoemde ‘voorkant’. De eerste pagina die is voorgelegd aan de visual designers was de inlogpagina. Doordat het een relatief simpele en kleine pagina is, begreep iedereen hoe het zou moeten werken.

78

Afbeelding 34, Dashboard, Sebastian Conijn 2014


10.1.1 Dashboard Na de inlogpagina zou de visual designer uitkomen op het dashboard (zie afbeelding 34). Ook hier was duidelijk hoe een project aangemaakt kan worden. De projecten die zichtbaar zijn, naast de grote aanmaakknop, brachten iets meer verwarring. Het was voor iedereen duidelijk dat dit recent aangemaakte projecten waren, maar sommige personen bedachten dat het ook projecten kunnen zijn waar bijvoorbeeld als laatste een versie is geüpload. In dat geval zou de sortering dus “laatste gewijzigd” zijn. De sortering van de projecten van collega’s was ook niet duidelijk. De proefpersonen waren er in elk geval over uit dat het niet alfabetisch was. Ook hier was het idee dat de sortering “laatst gewijzigd” zou zijn. Door een kleurverloop zouden de meest recent gewijzigde projecten boven (van links naar rechts) staan en de oudere meer naar onderen.

“Die icoontjes vind ik heel handig, dat hebben andere tools niet.”

De icoontjes van apparaten die bij projecten staan vond iedere designer een zeer fijne toevoeging. Deze icoontjes geven weer wat voor ontwerpen er in een project zitten. Zo zal er bij een project voor een smartphone-app een icoontje worden getoond van een smartphone. Hetzelfde gebeurt voor tabletapps en websites voor desktop. Als een project meerdere apparaten heeft, zullen deze apparaten weergegeven worden doormiddel van zo’n icoontje.

10. Testen

79

10.1.2 Project aanmaken Over het aanmaken van een project waren ook enkele opmerkingen. Dit waren niet zozeer onduidelijkheden maar dingen die de designers zelf graag anders zouden zien. Ze verwachtten dat de het invoeren van de naam en het logo van de klant een aparte stap zou zijn. Op dit moment staat alles wat te maken heeft met het project op één pagina. Juist omdat er weinig informatie nodig is, is het maken van een extra stap overbodig. Ook stelden sommige deelnemers de vraag waarom het klantlogo nodig zou zijn. Dit konden ze niet zo snel bedenken. Ook omdat nergens aan de ‘achterkant’ het klantlogo wordt getoond was dit een rare ‘extra’ stap de gedaan moet worden. Een kleine uitleg of het logo meenemen op het dashboard zou volgens hen de oplossing kunnen zijn.

Afbeelding 35, Dashboard, Sebastian Conijn 2014

80


10.2 De voorkant De ‘voorkant’ van de tool is voorgelegd aan testpersonen die niets of weinig met het project te maken hebben gehad. Hiervoor is gekozen omdat nieuwe gebruikers net zoveel weten als de testpersonen.

10.2.1 Inlogscherm Het eerste scherm dat de testpersonen voor zich kregen was het inlogscherm. De personen reageerden positief over de informatie die je krijgt. Vooral de balk met de tekst dat er geen ontwerpen beschikbaar waren voor smartphone werd positief ontvangen. Door de melding werd de informatie over de laatste uploaddatum en het aantal ontwerpen onduidelijker. De vraag kwam naar voren hoe er tegelijkertijd wel en geen ontwerpen konden zijn, er staat tenslotte een melding dat er geen ontwerpen voor smartphone beschikbaar zijn. Een simpele oplossing hiervoor zou zijn door het tekstueel op te lossen. Dit kan door de melding te verbeteren en toe te voegen voor welke apparaten er wel ontwerpen voor zijn.

Afbeelding 36, Inloggen, Sebastian Conijn 2014

10. Testen

81

10.2.2 Startscherm Voor de proefpersonen was het startscherm meteen duidelijk. Men begreep meteen dat je de laatste versie in je scherm kreeg. Dit is een belangrijk gegeven omdat één van de pijlers van dit project rust op het tonen van de laatste versie. Er was nog wel verwarring welke kant je op dient te ‘swipen’ om bij een oudere versie te komen. Oudere versies hebben qua datum een gevoel van ‘vorige’ en bij vorige verwachten mensen het aan de linkerkant. Als je het bekijkt vanuit objecten die je moet swipen verwachten ze een ‘volgende’. Wat vaak aan de rechterkant zit. Alle eerste handelingen en gedachten, gingen vrijwel naar ‘volgende’ en verwachtte dus een oudere versie aan de rechterkant. Afbeelding 37, Verwachting oudere versie, Sebastian Conijn 2014

Afbeelding 38, Titel van ontwerp, Sebastian Conijn 2014

82

10.2.3 Het ontwerp Bij de balken die zichtbaar worden bij het ‘tappen’ op het ontwerp was veel begrip. Van de terugbutton in de bovenbalk was meteen duidelijk dat deze je terugstuurde een start- of overzichtspagina. De grootste problemen waren met name bij de titel van het ontwerp. Deze staat linksonder in de balk die zichtbaar wordt als je ‘tapt’. Bij veel testpersonen was het niet duidelijk dat dit de naam van het ontwerp zou kunnen zijn. Kleine kanttekening bij deze gegevens moet er wel gezet worden. De testpersonen waren niet betrokken bij project en waren dus niet op de hoogte van de schermen die ontworpen zouden worden.


10.2.4 Pagina-overzicht Omdat de testpersonen een ontwerp voor zich hadden en geen werkende applicatie kon de vraag gesteld worden waarop er nog meer gesorteerd kon worden (standaard staat deze op alfabet). Geen van de personen kon een goed alternatief bedenken.

“Bij het ontwerpen van dit scherm waren er vraagtekens of gebruikers van een specifieke pagina snel konden navigeren naar een oudere versie.”

Bij het ontwerpen van dit scherm waren er vraagtekens of gebruikers van een specifieke pagina snel konden navigeren naar een oudere versie. Deze opties is geplaatst achter de button met de versies. Bij alle testpersonen was de verwachting dat je op “versies” kon drukken om oudere versies te bekijken. Er ontstond nog wel kleine verwarring bij het verkrijgen van een oudere versie. Als er een ontwerp niet in een versie zit, omdat deze bijvoorbeeld niet meer nodig is. Dan kan er verwarring ontstaan. In geval dat er vier versies zijn geüpload en maar drie ontwerpen van een scherm zijn, is het punt dat er verwarring kan ontstaan. Er komt in dat geval “3 versies” te staan terwijl het ontwerp in versie vier aanwezig is. Afbeelding 39, Pagina-overzicht, Sebastian Conijn 2014

10. Testen

83

10.3 Verbeteringen De grootste problemen die bij de test naar voren kwamen waren op het hoofdscherm. Het idee waar een oudere versie zou zitten verschilde per persoon. Met elke persoon heb ik overlegd hoe dit opgelost zou kunnen worden. Het tonen van een deel van de oudere versie aan de rechterkant zou het wellicht kunnen oplossen. Echter, als je een tijdje bezig bent in oudere versies kan de verwarring nog steeds optreden. Om voor eens en voor altijd dit probleem op te lossen is gekozen voor een andere manier die meer lijkt op de desktop. Het horizontaal swipen door de versies brengt verwarring wanneer gebruikers denken aan een datum of ‘volgende’. Als het swipen veranderde naar verticaal swipen was die verwarring er niet. Een eerdere datum zit gevoelsmatig altijd lager. Ook als je vraagt waar de ‘volgende’ zou zitten op een verticale lijn zou zich eronder bevinden. Op andere pagina’s zijn er ook nog enkele kleine aanpassingen aangebracht. Op het uiteindelijke paginaoverzicht scherm heeft de knop om oudere versies te bekijken een andere tekst gekregen. In plaats van “3 versies” staat er nu “3 varianten”. Zodat verwarring wordt vermeden tussen een ontwerp in versie vier en vier versies van een ontwerp.

Afbeelding 40, Herziene homepage, Sebastian Conijn 2014

84


10.4 Conclusie Met elf testpersonen zijn zowel de voorkant als de achterkant uitgebreid getest. Doordat de tool klein en simpel is gehouden zijn de functionaliteiten door de gebruikers goed te begrijpen. Natuurlijk blijven er grotere en kleine vraagstukken en hebben de testpersonen ook vaak hun eigen inzicht op het uitwerken van een schermen. Veel van de kleine vraagstukken, zoals de informatievoorziening op het begin kunnen opgelost worden met een goed visual design.

“Doordat de tool klein en simpel is gehouden zijn de functionaliteiten door de gebruikers goed te begrijpen.”

Op de ‘home’ van de tool ontstond er veel verwarring waar een oudere versie zich bevond. Dit scherm is opnieuw onder handen genomen en er zijn verschillende oplossingen geprobeerd. De oplossing die het meest simpel en krachtig was is gekozen: door verticaal te swipen naar een oudere versie zullen er naar verwachting geen problemen meer ontstaan voor de navigatie.

10. Testen

85

11. Conclusie Het doel van dit project was om met een oplossing te komen waarmee designers van UNITiD op een relatief slimme en eenvoudige manier hun ontwerpen kunnen delen met de klant. Na interviews met alle betrokken partijen is er een probleemsituatie geschetst die opgelost diende te worden. De drie partijen UNITiD, de visual designers van UNITiD en de klanten hadden alle drie een eigen ‘probleem’ (zie hoofdstuk: 3. Onderzoek naar de doelgroep) . Na een duidelijke probleemschets is er inzicht verkregen in het huidige proces van UNITiD doormiddel van een taakanalyse (zie hoofdstuk: 4. Taakanalyse) . Hierin werd duidelijk dat er twee belangrijke momenten zijn voor de beslissing welke tool er gebruikt diende te worden en wanneer er ontwerpen worden verstuurd. Aan de hand van die informatie is er gekeken naar tools die al worden gebruikt of die worden aangeraden door andere bedrijven in dit beroepsveld om te zien of er een tool is die de problemen kan oplossen (zie hoofdstuk: 5. Concurrentie-analyse) . Geen van de onderzochte tools voldeed hier echter aan. Met de functionaliteiten die naar voren kwamen tijdens het onderzoek is er een scope opgesteld (zie hoofdstuk: 6. Functionaliteiten) . De scope zorgde ervoor dat de belangrijkste functionaliteiten naar voren komen zodat

“De eenvoud van het systeem zit in de basisfunctionaliteit.”

86

deze bij de ontwikkeling van een nieuwe tool deze extra aandacht zouden krijgen. Uiteindelijk is het onderzoeksgedeelte afgesloten met een zogenoemde ‘Ideation workshop’ (zie hoofdstuk: 7. Ideation workshop) . In deze workshop deden verschillende partijen mee om de belangrijkste schermen van een nieuwe tool te schetsen. Deze schetsen geven een duidelijk verwachtingspatroon voor de ontwikkeling van een tool. Er is met dit project een slimme tool neergezet. Zo kan de tool ontwerpen herkennen en daarmee sorteren en tonen op het juiste apparaat en het geeft meldingen als er geprobeerd wordt in te loggen op een apparaat waar geen ontwerpen voor zijn. De eenvoud van het systeem zit in de basisfunctionaliteit, de basis die het makkelijk moet maken om ontwerpen naar een smartphone of tablet te sturen. Deze eenvoud kan door slim te handelen met minimale instellingen de tool goed werkend houden. Er is geen pagina met instellingen die ingevuld moeten worden voordat het project naar de klant gestuurd kan worden, of accounts die aangemaakt moeten worden voor de verschillende personen die betrokken zijn bij het project. Deze eenvoud zorgt ervoor dat de tool simpel is in de omgang en begrijpelijk voor buitenstaanders. Dat is precies waar UNITiD naar op zoek is.


11. Conclusie

87

12. Aanbevelingen Uit dit onderzoek blijkt dat bijna alle bestaande tools achterlopen op de realiteit en geen ondersteuning bieden op actuele zaken op ontwerpgebied. Hierbij kan bijvoorbeeld gedacht worden aan het tonen van ontwerpen op een smartphone. De tool die tijdens dit project werd ontwikkeld, heeft dat als een uitgangspunt gebruikt. Dit verslag beperkt zich tot het interactieontwerp daarom zijn er enkele aanbevelingen om de tool, mocht deze ooit gerealiseerd worden, goed op te kunnen zetten.

12.1 Feedback Een van de randvoorwaarden voor de tool was de mogelijkheid om feedback te geven. Feedback die de klant kan geven op een ontwerp. In deze scriptie is feedback geven echter beperkt meegenomen. Er is in het interactie ontwerp wel rekening gehouden om te annoteren op een ontwerp maar voor de ‘achterkant’ is hier geen goede oplossing voor gevonden. Feedback is een groot en zeer ingewikkeld begrip. Daarom is ervoor gekozen om deze zo minimaal mogelijk te houden. Het wordt zo ingewikkeld doordat feedback gegeven kan worden op één ontwerp. Maar in het geval dat bijvoorbeeld een belangrijke kleur aangepast dient te worden is dat ‘feedback’ dat geldt voor meerdere ontwerpen. Het goed overzichtelijk tonen van deze

88


feedback is een zeer complex en lastig probleem. Te groot om in deze scriptie op te nemen. Voor de realisatie van de tool zou het geen verkeerd idee zijn om goed te kijken naar de feedback. Wat voor feedback er vaak binnenkomt, hoe dit getoond en overzichtelijk gecommuniceerd kan worden naar de visual designer en hoe de klant de eventuele feedback kan volgen.

12.2 Ontwikkeling Voordat deze tool ontwikkeld en gebruikt kan worden, zal er eerst een visual design gemaakt moeten worden naar aanleiding van de interactie-ontwerpen. Dit visual design kan aansluiten bij de huisstijl van UNITiD omdat het product door klanten gebruikt gaat worden. Bij het programmeren van de tool is het handig om het uitbreidbaar op te zetten. UNITiD heeft zelf geen programmeurs onder de medewerkers, wat dit een belangrijk punt maakt voor een succes op de langere termijn. Omdat de tool binnenshuis wordt opgezet is het goed voor te stellen dat processen gaandeweg veranderen en dat de tool daarop aangepast moeten worden. Het is ook goed mogelijk dat de tool vrij snel na de lancering de eerste uitbreidingen krijgt en misschien zelfs commercieel ingezet kan worden. Het is goed om hier vanaf het begin rekening mee te houden om het systeem zo flexibel mogelijk te houden en er snel aanpassingen kunnen worden gemaakt.

12. Aanbevelingen

12.3 Uitbreidingen Het probleem die nu bestaat bij UNITiD is met het huidige ontwerp opgelost. Toch is het goed mogelijk dat er snel nieuwe wensen ontstaan zodra de tool in gebruik is genomen. Hieronder zijn enkele mogelijke uitbreidingswensen die tijdens interviews naar voren kwamen of door de functionaliteitenscope niet zijn meegenomen.

Integratie met Dropbox Dropbox is een veel gebruikte tool binnen UNITiD. Het zou daarom geen slecht idee zijn om het uploaden door de visual designer te vervangen door dit door Dropbox te laten doen.

Integratie met Basecamp Ook Basecamp is een tool die standaard bij elk project wordt gebruikt. Een integratie om bijvoorbeeld feedback van de klant om te zetten in een bericht op Basecamp zou wellicht een goede toevoeging kunnen zijn om beide tools goed naast elkaar te kunnen gebruiken.

89

13. Dankwoord Met enige zekerheid kan ik zeggen dat deze scriptie er niet zou zijn geweest zonder de bijzondere hulp en medewerking van docenten, collega’s, vrienden en familie.

Hogeschool van Amsterdam Allereerst wil ik natuurlijk de begeleiding vanuit de Hogeschool van Amsterdam. In het bijzonder Laura van der Vlies voor de goede begeleiding in het afgelopen studiejaar. Haar heldere inzicht en beschikbare tijd hebben dit verslag en het hele afstudeertraject naar een hoger niveau getild.

“Deze scriptie zou er niet zijn geweest zonder de bijzondere hulp en medewerking van docenten, collega’s, vrienden en familie.”

Graag wil ik ook nog even Fons van Kesteren bedanken voor zijn begeleiding bij de start van het project.

UNITiD Vanuit UNITiD heb ik hulp gekregen van veel collega’s, specifiek Anke Kok, Friso Schmidt, Martijn Pillich, Miguel Kooreman, Niels Stoeltie, Sara Emami, Sophie Kommer, Suzanne Wensveen en Thalia Keren. Aan hen

90

heb ik mijn vragen kunnen stellen als ik vast zat en ook kreeg ik hulp bij het ontwerpen als dat nodig was. Natuurlijk mogen hier Rick le Roy en Matthijs Collard niet ontbreken voor de tijd die ik heb gekregen om het project succesvol af te ronden.

Let’s build IT.nl Mijn dank is ook groot voor de technische partij in dit project: Let’s build IT.nl. Zij hebben de allereerste prototypes van dit afstudeerproject kosteloos ontwikkeld.

Overige hulptroepen Graag wil ik ook de andere personen bedanken die mee hebben geholpen aan dit project. Dit kan in vele vormen zijn geweest zoals het meedenken, het deelnemen aan workshops, testen en nalezen. Waarbij mijn dank groot is voor: Bart Koopman (TU Delft), Jesse Kraal (Clipboard Publishing), Joost Groen (Quinity), Joost Huijberts (HGB), Kayleigh van der Gulik (UvA), Lisa Vogelpoel (AMC), Michiel Boukens (MILabs), Robin Berghouwer (UvA), Sandra Karis (NU.nl) en Tim Zuiker (TU Delft).


13. Dankwoord

91

14. Bibliografie 14.1 Boeken Jarret, C. en Gaffney, G. (2008), Forms that Work, Verenigde Staten: Morgan Kaufmann Hoekman jr, R. (2011), Designing the Obvious, Verenigde Staten: New Riders Press Tidwill, J. (2006), Designing Interfaces, Verenigde Staten: O’Reilly Media Vos, K. de (2013), Brainstormen (2e editie), Amsterdam: Uitgeverij Pearson Wroblewski, L. (2008), Web Form Design, Verenigde Staten: Rosenfeld Wroblewski, L. (2011), Mobile first, Verenigde staten: Jeffrey Zeldman

14.2 Websites Adobe Photoshop, www.adobe.com/Photoshop, geraadpleegd op 3 januari 2014 Axure, http://www.axure.com, geraadpleegd op 16 oktober 2013 Basecamp, http://www.basecamp.com, geraadpleegd op 16 oktober 2013 Bounce, http://bounceapp.com, geraadpleegd op 16 oktober 2013 Choudhury, S. (2013), The Psychology behind information Dashboards, http://uxmag.com/articles/the-psychology-behindinformation-dashboards, geraadpleegd op 22 januari 2014 Collard, M. (2011), TAP- Fireworks touch prototype tool for iPhone, iPad, http://unitid.nl/2011/03/touch-application-prototypestap-for-iphone-and-ipad-using-adobe-fireworks/, geraadpleegd op 16 oktober 2013 Cronk, P. (2013), Desktop, tablet and mobile use by time of day, https://insidegovuk.blog.gov.uk/2013/11/14/desktop-tablet-andmobile-use-by-time-of-day/, geraadpleegd op 22 januari 2014

Dropbox, http://dropbox.com, geraadpleegd op 16 oktober 2013 Hambly, C. (2013), Why use short urls?, http://audana.com/short-urls/, geraadpleegd op 22 januari 2014

Facebook, http://www.facebook.com, geraadpleegd op 14 januari 2014 Fadeyev, D. (2009), 9 Common Usability Mistakes In Web Design, http://uxdesign.smashingmagazine.com/2009/02/18/9-commonusability-blunders/, geraadpleegd op 14 januari 2014

92


Jarrett, C. (2012), 7 Basic Best Practices for Buttons, http://www.uxmatters.com/mt/archives/2012/05/7-basic-best-practices-forbuttons.php, geraadpleegd op 22 januari 2014 Jovanovic, J. (2009), 10 UI Design Patterns You Should Be Paying Attention To, http://uxdesign.smashingmagazine. com/2009/06/23/10-ui-design-patterns-you-should-be-paying-attention-to/, geraadpleegd op 22 januari 2014 Maltha, H. (2009), Wireframes, de bouwtekening van een website, http://www.frankwatching.com/archive/2009/11/23/wireframesde-bouwtekening-van-een-website/, geraadpleegd op 6 januari 2014 Mifsud, J. (2011), An Extensive Guide To Web Form Usability, http://uxdesign.smashingmagazine.com/2011/11/08/extensive-guideweb-form-usability/, geraadpleegd op 17 januari 2014

Conceptshare, http://www.conceptshare.com, geraadpleegd op 16 oktober 2013 Kirmani, S. (2011), Building Trust on Ecommerce Home Pages, http://www.uxmatters.com/mt/archives/2011/07/building-trust-onecommerce-home-pages.php, geraadpleegd op 22 januari 2014

Mailette, http://mailette.com, geraadpleegd op 16 oktober 2013 Mockvault, http://www.mockvault.com/, geraadpleegd op 16 oktober 2013 Nudelman, G. (2009), Best practices for Designing Faceted Search Filters, http://www.uxmatters.com/mt/archives/2009/09/bestpractices-for-designing-faceted-search-filters.php, geraadpleegd op 22 januari 2014 Prevue, http://prevue.it, geraadpleegd op 16 oktober 2013 ProofHQ, http://www.proofhq.com, geraadpleegd op 16 oktober 2013 Qwik.vu, http://qwik.vu, geraadpleegd op 16 oktober 2013 RedPen, http://redpen.io, geraadpleegd op 16 oktober 2013 Sutter, J.D. (2010), How to create a ‘super password’, http://edition.cnn.com/2010/TECH/innovation/08/20/super.passwords/, geraadpleegd op 22 januari 2014 Terril, B. (2013), A Couple of Best Practices for Tablet-Friendly Design, http://css-tricks.com/a-couple-of-best-practices-for-tabletfriendly-design/, geraadpleegd op 22 januari 2014

The Verge, http://www.theverge.com, geraadpleegd op 14 januari 2014 UI Patterns, http://ui-patterns.com/patterns/ProductPage, geraadpleegd op 9 december 2013 Usability.gov (2013), Personas, http://www.usability.gov/how-to-and-tools/methods/personas.html, geraadpleegd op 6 januari 2014

Woorden-boek.nl, http://www.woorden-boek.nl/woord/flowchart, geraadpleegd op 16 december 2013 Wilson, G. (2012), Designing and Building Great Dashboards - 6 Golden Rules to Successful Dashboard Design, http://www. geckoboard.com/blog/building-great-dashboards-6-golden-rules-to-successful-dashboard-design, geraadpleegd op 21 januari 2014

14. Bibliografie

93

94


15. Bijlage

15. Bijlage

95

A. Persona Jelthe Luth Man, 28 jaar Creatief, eigenwijs, grappig, sociaal, zorgzaam

Quotes

Zijn appartement op de Naussaukade

“Maak je niet druk over ‘Hoe zou het zijn als ...’”. “Prepare and prevent, don’t repair and repent.”

Over Jelte

Favorieten

Jelte is Visual Designer en werkt al 2 jaar bij UNITID en kan zijn creativiteit goed kwijt in de ontwerpen die hij maakt voor websites en apps. Hij huurt met zijn vriendin in de Nederlandse hoofdstad Amsterdam, nog net binnen binnen de ring, een appartement.

Websites - froot.nl - smashingmagazine.com - despeld.nl

Jelte heeft voordat hij Visual Designer bij UNITiD werd eerst nog 1,5 jaar gewerkt bij een ander ontwerpbureau in Amsterdam de Stijlbende. Als student heeft hij gezeten op de Hogeschool voor de kunsten in Utrecht, ookwel beter bekend onder de naam HKU. Waar hij de vierjarige richting HKU Design heeft gevolgd en zijn studie heeft afgerond met het diploma “Bachelor of Design in Graphic Design”. Op maandagavond speelt hij samen met een paar vrienden voetbal tegen andere teams uit de buurt op een lokaal sportveldje.

96

Interieur van zijn appartement

Spots - Café Golem - Lokaal voetbalveldje - Pathé de Munt Eten - Indisch - Biefstuk met pepersaus

Zijn favoriete cafe, Cafe Golem


Basecamp

Tap

Email

iConceptshare

Mockvault

Mailette

Prevue

QwikiVu

Axure

ProofHQ

Dropbox

RedPen

Bounce

B. Concurrentie-analyse

Tonen op apparaat

N

J

N

N

N

N

N

N

J

N

G

N

N

Overzichtspagina

J

N

J

-

J

J

J

N

N

N

N

N

N

Upload van meerdere ontwerpen

J

J

J

J

N

J

N

J

J

J

J

N

N

Online beschikbaar

J

J

N

J

J

N

J

J

J

J

J

J

J

Responsive

N

N

N

N

N

N

N

N

G

N

N

N

N

Versiebeheer

G

N

N

G

N

N

N

N

N

J

N

N

N

Feedback

J

N

J

J

J

J

J

J

J

J

N

J

J

Eigen server

J

N

N

G

N

N

N

J

N

N

N

N

N

JPG ondersteuning

J

J

J

J

J

J

J

J

J

J

J

J

J

PNG ondersteuning

J

J

J

J

J

J

J

J

J

J

J

J

J

GIF ondersteuning

J

J

J

J

J

J

J

J

J

J

J

J

J

Achtergrondkleur wijzigen

N

J

J

N

J

J

J

J

J

N

N

N

N

Achtergrond afbeelding kiezen

N

N

J

N

J

J

J

N

J

N

N

N

N

Ontwerp uitlijnen

N

N

J

N

J

N

J

J

J

N

N

N

N

Titel per ontwerp

N

N

J

J

J

N

J

J

N

N

N

J

J

Tekst per ontwerp

N

N

J

J

N

N

N

N

N

N

N

J

N

Volgorde aanpassen

N

N

J

N

J

N

J

J

J

N

N

N

N

Eigen logo toevoegen

N

N

J

N

N

N

N

N

N

N

N

N

N

Feature

N = Nee, J = Ja, G = Gedeeltelijk 15. Bijlage

97

Basecamp

Tap

Email

iConceptshare

Mockvault

Mailette

Prevue

QwikiVu

Axure

ProofHQ

Dropbox

RedPen

Bounce

App icon voor iPhone & iPad

J

N

N

N

N

N

N

N

J

N

N

N

N

Accounts

J

N

N

J

N

N

N

N

J

J

J

N

N

Wachtwoord beveiliging

N

J

N

N

N

N

J

J

N

N

N

N

N

Default wachtwoord

N

N

N

N

N

N

N

N

N

N

N

N

N

Eigen (offline) software

N

N

N

N

N

N

N

N

J

N

N

N

N

Ontwerp downloaden

J

N

G

J

N

N

N

N

N

J

J

N

N

Inzoomen

N

N

N

J

N

N

N

J

J

N

J

N

N

Uitschakelen feedback

N

N

N

N

N

N

J

N

N

N

N

N

N

Project op een eigen URL

J

J

N

N

J

J

J

J

J

J

J

J

J

Delen via email

J

N

J

N

J

J

J

J

N

J

J

N

N

Notitie van designer

J

N

N

N

N

N

J

J

J

J

N

J

J

Slideshow

N

N

N

N

N

N

N

N

N

N

N

N

N

Akkoord op ontwerp

N

N

N

N

J

J

N

N

N

J

N

N

N

Notificaties naar designer

J

N

N

J

J

J

J

J

J

J

N

J

J

Connectie met Dropbox

N

N

N

N

N

N

N

N

N

N

J

N

N

Deadline instellen

N

N

N

N

N

N

N

N

N

J

N

N

N

$100 p.m.

gratis

gratis

$25 p.p

$49 p.m.

$9 p.3.p.

$75 p.15.p

$40 p.p.

$289 p.p.

$899 p.40.p

$99 p.p.

gratis

gratis

Feature

Prijs

N = Nee, J = Ja, G = Gedeeltelijk 98


C. Quotes uit interviews Matthijs Collard “Voor het op een hele eenvoudige manier, op een juiste manier tonen van je ontwerpen. Dus het juiste device, op de juiste grootte, met het juiste zoomlevel, je juiste resolutie.” “Zoals in Basecamp met allemaal supere klein thumbnails, dan klik je erop en dan wordt ie nog steeds niet groot.” “Het elke keer gewoon een enorm gedoe om een setje plaatjes aan de klant te laten zien, zoals jij ze wilt laten zien, op jouw volgorde, in jouw mapje, onder jouw structuurtje.” “En dan kan, volgens mij, een heel makkelijk tooltje zijn wat gewoon nog niet bestaat.” “Eigenlijk zou het TAP moeten zijn in mijn optiek, maar dan alle plaatjes automatisch aan elkaar gelinkt.” “Ik wil graag iets met folders en versie beheer dus dat je kan zien, dit is versie 1, dit is versie 2 en dit is versie 3.” “Ik klik erop en ik krijg um gewoon op ware grote te zien, ik kan er doorheen swipen en ik kan naar het concept makkelijk terug. Dat is alles eigenlijk. Dat wil ik heel graag…” “Als het zo simpel is, waarom hebben we het dan nog niet?” “Daar begint het bij, want als je die schermen niet kan delen dan heeft de tweede stap, feedback geven ook niet zo heel veel zin toch?” “Dan staat daar zo’n tekstje van “Dit is het nieuwe ontwerp” en dan wap, zo’n pagina van thumbnails.” “Vijfig plaatjes waar de klant dan maar moet bepalen. ‘Okey, wat is dit allemaal en waar moet ik beginnen en hoe krijg ik dat überhaupt netjes in mijn scherm wat ik kan beoordelen’?”

15. Bijlage

“Waar ik bang voor ben is dat je gelijk alweer accounts moet maken, moet betalen, moet inloggen en weet ik allemaal wat.” “Ik denk dat TAP ook zo’n populair ding is geworden omdat je even een paar technische trucjes kennen, FTP’en en CMOD instellen en dat soort dingen en voor de rest hoef je echt niets te doen.” “Volgens mij kan je dat ontzettend goed uitdenken zonder je dat een heel compleet een hele ingewikkelde nieuwe features als feedback erbij bedenkt. Dan wordt het in een keer heel ingewikkeld.” “Het belangrijkste is, is dat ze heel snel het ontwerp kunnen beoordelen zoals het bedoeld is.”

Miguel Kooreman (VD) “Omdat we ontwerpen voor web, gaan we even goed nog vaak statische schermen heen en weer sturen.” “Eigenlijk wil je het laten zien op hetgene waarop je het straks gaat bekijken.” “Het verschil tussen web en print is dat het interactief is. Dus de ‘magic happens’ tussen het ene plaatje en het andere plaatje.” Het voordeel is, is dat je een soort Business Catalyst site hebt. Je kan de URL opsturen en men kan in de browser bekijken hoe het eruit ziet.” “Ik denk dat we animaties niet vaak als taak krijgen omdat we niet ontwerpen, dus je krijgt de vraag ook niet.” “We hadden daar een animatie voor bedacht maar die hebben ze niet gebouwd omdat we die niet hebben kunnen laten zien in browser.”

99

“Ze kunnen er wat van zeggen als ze het zien” “Maar de tijd die je kwijt bent aan buttontjes en animaties maken voor zo’n prototype. Die win je weer in de discussie.”

Anke Kok (VD) “Niet iedereen heeft Basecamp door”. “Ik heb wel eens het idee dat ik de enige ben die post.” “Heel soms mail ik ook wel eens iets, maar ik vind het meestal wel handig als er meer een overzicht is.” “Soms dan zet ik schermen op Basecamp en dan wil ik zo snel mogelijk feedback.” “Als je fysiek presenteert of aan de smartphone, dan weet je dat ze er iets over moeten zeggen.” “Er moet wel tijd zijn om een prototype ‘even’ in elkaar te zetten.” “Als de tijd er is, is TAP inderdaad een mooie manier van presenteren.” “Versiebeheer in Basecamp is misschien voor de klant te moeilijk om te begrijpen.” “Een tool moet sowieso overzichtelijk zijn, dat de messages overzichtelijk zijn.” “In een toekomstige tool zou een todo lijst zou wel handig zijn.”

100


D. Notitie’s van testen Testpersoon 1 Inlogscherm Dat er geen ontwerp zijn voor de klant als ie inlogt. (zwarte balk) Hij heeft er niets aan.. Laatste versie.. Van waarschijnlijk van de volledige applicatie.. 3 versies waarschijnlijk niet voor smartphone. Totaal.. Weet niet voor elke versie.. of totaal. ‘Help wat is mijn wachtwoord’ is wat speels.

Start Waarschijnlijk de laatste versie. Die heeft 6 ontwerpen Screenshot van eerste ontwerp Datum, upload datum van deze versie. Rondjes van pagina’s onduidelijk… Bekijk -> Volledige eerste ontwerp van versie 3 -> Zo zou ik het doen. Eerste ontwerp: Dat zou ik logisch vinden.. Instellingen knop rechts boven, verwacht de instellingen: - Wachtwoord wijzigen? - Emailadres aangeven? - Andere voorkeuren die je hebt? - Inlog eerste versie?

15. Bijlage

Het ontwerp (met balken) 3 van 3.. De derde ontwerp van een bepaalde ontwerp heb geopend. 3e ontwerp in deze versie... Nieuwe versie... ‘Terug’ button is naar dat hoofdscherm -> Home ‘Tegeltjes’ button is een andere ontwerpen in deze versie te openen.. Naam -> Tips van favoriete op tv. Linkje dat je dan naar een set gaat van tips. Anoteren -> Notitie icoontje. Toevoegen.

Pagina overzicht Allemaal verschillende pagina’s Gesorteerd op alfabet. Sorteren -> Presenteervolgorde, logische volgorde. Sorteren -> 2 versie’s Varianten. Knopje op de versie number.... Het donkergrijze blokje is een kleine screenshot.

101

Testpersoon 2 Inlogpagina Hij is in zwart wit... De melding dat het eigenlijk geen zin heeft om in te loggen. Typfoutje bij “Type het wachtwoord” in. Er staat een laatste versie met datum, maar omdat er een melding boven staat is er geen nieuwe versie?

Start Overzicht van een app Soort van preview Andere schermen swipen. Oudere versie aan de linkerkant omdat oudere versie vorige is.. Instellingenknop.. Dat ik het scherm op kleur kan zetten. - Geen idee onder instellingen.. - Preview

Anoteren, aanmerkingen knopje... Commentaar kan geven op wat je te zien krijgt. Feedbackknopje.. Pagina knopje -> verkleinde weergaves van versies.. Titel -> geen idee...

Pagina overzicht Alle verschillende schermen met sorteren Gesorteerd op alfabet Grijs vlak onduidelijk -> Preview dingetje verwachten.. Meer dan 6 pagina’s... 15 paginas in totaal Instellingen knopje... Alfabet, laatste gewijzigd, meest gewijzigd... Oudere versie’s is op knop drukken... Voelt logisch qua opbouw...

Andere testpersonen Bij andere test zijn de gesprekken opgenomen waarbij tijdens de test geen notities zijn gemaakt.

Ik mis een updatelog Datum -> is uploaddatum... Transparant

Het ontwerp Versienummer & welke variant staat bovenin. Als je tapt dat dan die informatie verschijnt. Terug button -> Naar home. Misschien onderin plaatsen.

102


Ontwerpen delen Het kan slimmer, eenvoudiger en overzichtelijker!

Deze scriptie is het resultaat van de

delen met hun klanten. De eenvoud van

afstudeerperiode van Sebastian Conijn in

de tool moet het delen van ontwerpen

het kader van de studie Communication &

voor smartphone of tablet makkelijker

Multimedia Design (voorheen Interactieve

maken. Door te werken zonder accounts,

Media) in Amsterdam.

het minimale aan de designer te vragen bij het opzetten van een project en heldere

In dit verslag wordt het eindresultaat van

navigatie aan te bieden wordt ervoor gezorgd

de afstudeeropdracht besproken; een tool

dat het systeem simpel in de omgang is en

waarmee visual designers ontwerpen voor

begrijpbaar voor buitenstaanders. Dat is

verschillende apparaten eenvoudig kunnen

precies waar UNITiD naar op zoek is.

In samenwerking met:

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

Recommend Documents