Sebastian Conijn
Ontwerpen
delen
Het kan slimmer, eenvoudiger
en overzichtelijker!
Bekijk dit verslag digitaal:
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.
- Sebastian Conijn
Het doel van dit onderzoek is de ontwikkeling van een tool om het delen van ontwerpen van een app of website, naar een smartphone of tablet makkelijk te maken voor de klant. Dit is een lang gekoesterde wens van de visual designers bij UNITiD.
Probleem
UNITiD ontwerpt apps voor onder andere smartphones en tablets, in opdracht van klanten. Tijdens het
ontwerpproces moeten visual designers hun ontwerpen kunnen delen met de klant. Dit gebeurt nu vaak via een online projectmanagementsysteem. Het huidige systeem kan echter niet gebruikt worden vanaf een smartphone of tablet. De te ontwerpen tool om ontwerpen te delen naar een smarthone of tablet moet in de basis drie functionaliteiten bieden: het moet beschikbaar zijn op smartphones en tablets, de mogelijkheid bieden tot versiebeheer en informatie overzichtelijk presenteren. Het is tot op heden niet gelukt om een tool te vinden die voldoet aan deze drie criteria. Gevolg hiervan is dat het zowel de designer als de klant veel tijd en dus geld kost om een relatief simpele handeling te verrichten.
Onderzoek
Om meer inzicht te krijgen in het probleem zijn er interviews gehouden met visual designers en klanten
van UNITiD. Hoe het delen van ontwerpen nu verloopt is door middel van een taakanalyse inzichtelijk gemaakt. Ook zijn mogelijkheden onderzocht van bestaande tools die het delen van ontwerpen kunnen faciliteren.
Deze mogelijkheden zijn voorgelegd aan de visual designers van UNITiD om op die manier de functionaliteiten te prioriteren. Daarnaast is een ideation workshop georganiseerd om de belangrijke functionaliteiten inzichtelijk te maken. Het resultaat van deze workshop waren schetsen van de belangrijkste schermen van een nieuwe tool.
Ontwerp
Deze schetsen zijn vervolgens gebruikt voor een interactie-ontwerp van een nieuw te ontwikkelen tool. Omdat het hier een interactie-ontwerp betreft is er functioneel gekeken naar oplossingen en hierdoor minder naar de stijl, die de tool in een latere fase zal krijgen. In het ontwerpproces van de tool zijn er meerdere ontwerpen gemaakt van een scherm, die zijn geëvalueerd op functionaliteit. Er is gekozen voor een ‘achterkant’, die is gemaakt voor de visual designers, en een ‘voorkant’ voor de klanten. Voor het ontwerpen van de achterkant is alleen een desktop versie uitgewerkt. Voor de ‘voorkant’ zijn ontwerpen van de tool gemaakt voor smartphone, tablet en desktop.
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.
•
1. Inleiding
10
1.1 Achtergrondinformatie
10
1.2 Probleemstelling
10
1.3 Hoofdvraag
11
1.4 Deelvragen
11
1.5 Randvoorwaarden
12
1.6 Begripsbepaling
12
1.7 Oplevering
12
•
2. Probleemsituatie
14
2.1 Smartphone
14
2.2 Overzicht
16
2.3 Versiebeheer
16
2.3 Conclusie
16
•
3. Onderzoek naar de doelgroep
18
3.1 Interviews
18
3.2 Persona
18
3.3 Conclusie
19
•
4. Taakanalyse
20
4.1 Keuzeproces
20
4.2 Conclusie
20
•
5. Concurrentie-analyse
22
5.1 Basecamp
23
5.2 TAP
24
5.3 E-mail
25
5.4 Conceptshare
25
5.5 Mockvault
26
5.6 Mailette
27
5.7 Prevue
27
5.8 QwikVu
28
5.9 Axure
28
5.10 ProofHQ
29
5.11 Dropbox
30
5.12 Red pen
30
5.13 Bounce
31
5.14 Conclusie
32
•
6. Functionaliteiten
34
•
7. Ideation workshop
37
7.1 Eerste ronde
38
7.2 Tweede ronde
40
7.3 Conclusie
41
Inhoudsopgave
•
8. Sketching & Wireframing
42
8.1 Beginscherm
42
8.2 Swipes
44
8.3 Flowchart
46
•
9. Het interactie-ontwerp
48
9.1 Achterkant
51
9.2 Voorkant
60
9.3 Tablet
67
9.4 Desktop
68
•
10. Testen
78
10.1 De achterkant
78
10.2 De voorkant
81
10.3 Verbeteringen
84
10.4 Conclusie
85
•
11. Conclusie
86
•
12. Aanbevelingen
88
12.1 Feedback
88
12.2 Ontwikkeling
89
12.3 Uitbreidingen
89
•
13. Dankwoord
90
•
14. Bibliografie
92
14.1 Boeken
92
14.2 Websites
92
•
15. Bijlage
95
A. Persona
96
B. Concurrentie-analyse
97
C. Quotes uit interviews
99
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.
Nu zijn Ziggo, Rabobank en Philips grote beursgenoteerde bedrijven. Toch zitten er in het klantenbestand van UNITiD ook kleinere, minder
bekende bedrijven. Wat deze klanten allemaal gemeen hebben is dat ze open staan voor vernieuwingen en zich graag laten adviseren door professionals op het gebied van interactie ontwerp en visual design.
Tijdens de ontwikkeling van een (nieuw) product
worden er vanzelfsprekend ook concepten en ontwerpen getoond door designers van UNITiD aan de klant.
1.2 Probleemstelling
Vooral in het beginstadium van het ontwerpproces zullen de designers bij de klant langsgaan om de
ontwerpen te presenteren. Naarmate het ontwerpproces vordert zullen de aanpassingen aan de ontwerpen kleiner worden. Doordat het kleine wijzigingen zijn wordt er vaak gekozen om de ontwerpen te delen via het internet.
Vaak gaat dit met via een online projectmanagement-systeem. 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. Inleiding
“UNITiD staat
bekend als een
van de beste
ontwerpbureaus in
Nederland omdat ze
een goed ontwikkeld
specialisme hebben
op gebied van
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?
1.5 Randvoorwaarden
Door UNITiD zijn de volgende randvoorwaarden opgesteld voor het te ontwikkelen product.
1. Het product dient geïnstalleerd te worden op de servers van UNITiD. UNITiD houdt op deze manier de controle over de informatie die gedeeld wordt. 2. De mogelijkheid voor de klant tot het geven van
feedback.
3. Uitbreidingsmogelijkheden voor de toekomst.
1.6 Begripsbepaling
Ter verduidelijking zijn enkele woorden die vaak terug komen in het verslag hieronder gedefiniëerd:
Achterkant = De applicatie/website die alleen
beheerders te zien krijgen, te weten de visual designers.
Interaction designer = Een designer die zich bezig
houdt met interactie en functionaliteiten.
Klant = Klant van UNITiD en dus van de visual designer. Ontwerp = De uitwerking van een scherm.
Pagina = Een specifiek scherm van een applicatie of
website.
Versie = Een aantal ontwerpen die zijn voorzien van
aanpassingen.
Visual designer = Een designer die zich bezig houdt met
stijl en vorm.
Voorkant = De applicatie/website die in de basis
iedereen te zien krijgt.
Versies, pagina’s en ontwerpen
Een visual designer maakt verschillende versies van pagina’s (zie ook afbeelding 1). Deze pagina’s zijn ontwerpen van een applicaties of website. Hierbij kun je denken aan de “homepage”, “over ons pagina” of “contact”. Van deze pagina’s kunnen verschillende ontwerpen gemaakt worden, bijvoorbeeld heeft het ene ontwerp de hoofdkleur blauw en de andere groen. Zo heb je in elke versie meestal van elke pagina een of meerdere ontwerpen.
1.7 Oplevering
Voor de oplevering van de scriptie zijn verschillende pagina’s van de tool uitgewerkt. Deze zullen geen huisstijl meekrijgen. De ontwerpen die uitgewerkt zijn zullen van verschillende pagina’s en voor verschillende apparaten zijn. Omdat de tool een ‘voorkant’ (voor de klant) en een ‘achterkant’ (voor de designers) zal hebben, is in onderstaande tabel weergegeven waarvan er ontwerpen gemaakt zullen worden.
Voorkant
Achterkant
Desktop Ja Ja
Tablet Ja Nee
Smartphone Ja Nee
Voor de ‘voorkant’ ligt de focus op de smartphone. Dit is naast het apparaat dat het kleinste beeldscherm heeft, ook het apparaat dat een speerpunt is van de oplossing.
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.
Een veel gebruikte tool binnen UNITiD is Basecamp1. Dit online
projectmanagement- systeem zorgt ervoor dat alle berichten, to-do’s en bestanden online binnen één project voor iedereen met een account beschikbaar zijn. Dat klinkt in eerste instantie als dé oplossing voor bedrijven. De designers van UNITiD lopen echter tegen de limitaties van het systeem aan. Eén van de limitaties is bijvoorbeeld dat Basecamp niet beschikbaar is voor een smartphone. Een ontwerp op je smartphone bekijken is wel mogelijk, maar ontzettend omslachtig.
2.1 Smartphone
Een ontwerp bekijken op een smartphone is omslachtig (zie afbeelding 2) omdat Basecamp hiervoor geen mogelijkheden biedt. Het is dus aan de gebruiker om een aantal stappen te doorlopen het ontwerp dat op Basecamp staat toch op zijn smartphone te krijgen. Om inzicht te krijgen in deze stappen is er een diagram gemaakt. Afbeelding 2 beschrijft de zeventien stappen die een klant zou moeten doorlopen om een ontwerp te bekijken op een smartphone.
Afhankelijk van de hoeveelheid ontwerpen kan het dus voorkomen dat er vijf of meer stappen terug gegaan moet worden om ook meerdere ontwerpen naar de smartphone te krijgen. Doordat dit zo omslachtig werkt bekijken vele klanten het ontwerp daarom ook niet op hun smartphone, terwijl het ontwerp daar wél voor gemaakt is.
Notes
1. Basecamp, http://www.basecamp.com, geraadpleegd op 16 oktober 2013.
“Een ontwerp
bekijken op een
smartphone is
omslachtig omdat
Basecamp hiervoor
geen mogelijkheden
biedt.”
2.2 Overzicht
Een ander probleem waar vooral visual designers tegenaan lopen heeft te maken met overzicht. Het gaat dan vooral over het gebrek aan overzicht bij het uploaden van verschillende versies.
2.3 Versiebeheer
Er is nog een ander probleem, namelijk versiebeheer. Aangezien Basecamp veel functionaliteiten biedt worden discussies erg onoverzichtelijk. Ook verdwijnen nieuwe versies van ontwerpen tussen alle discussie, of raken ze uit het zicht doordat ze automatisch als nieuw bericht onder oudere berichten worden geplaatst.
2.3 Conclusie
Tijdens gesprekken met designers komen er drie duidelijke problemen aan het licht bij het online delen van ontwerpen. Het eerste probleem is dat het voor een klant teveel werk is om ontwerpen op een smartphone te bekijken. Het tweede probleem is het gebrek aan overzicht voor de visual designer bij het beheren van zijn ontwerpen. Het derde en laatste probleem is het opslaan en weergeven van versies. Zowel designers als klanten klagen over dit overzicht, of eigenlijk het gebrek hieraan.
“Versiebeheer in
Basecamp is misschien
voor de klant te moeilijk
om te begrijpen.”
“Anke, kun jij een nieuw
overzicht maken van wat
final is? Er staat weer genoeg
discussie in deze thread om
onduidelijkheid te hebben
welke ontwerpen wel en niet
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. Opmerkelijk was dat zowel designer als klant, Basecamp (zie hoofdstuk: 5.1 Basecamp) beschouwen als de ideale tool voor communicatie. Het delen van ontwerpen waren de meningen echter verschillend, ook per designer. Waar de designers het wel allemaal over eens waren was het feit dat het ontwerp bekeken moet worden op het apparaat waarvoor het ontworpen is. Echter werd tijdens de interviews duidelijk dat het op dit moment nog te weinig voorkomt.
De klanten had weer een heel ander probleem. Zo hadden zij vooral moeite met het juiste ontwerp te vinden. De juiste versie vinden op Basecamp of een
ander systeem is volgens Sandra Karis van NU.nl een “hel”. Het overzicht gaat al snel verloren.
Door alle verschillende tools (zie hoofdstuk: 5. Concurrentie-analyse) is versiebeheer erg lastig geworden. Als er via de visual designer een ontwerp wordt gedeeld via de ene tool is het ontwerp op de andere tool alweer oud en zal deze handmatig vervangen moeten worden.
3.2 Persona
Op basis van de interviews is een 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
3. Onderzoek naar de doelgroep
“Eigenlijk wil je het
laten zien op hetgene
waarop je het straks
gaat bekijken.”
“Versiebeheer is
echt een hel!”
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-to-and-tools/methods/personas.html, geraadpleegd op 6 januari 2014
Om inzicht te krijgen in het huidige ontwerpproces zijn er interviews en observaties gehouden met collega’s, klanten en de opdrachtgever van dit project. Met die informatie is een model opgezet (zie afbeelding 3). Dit model geeft weer hoe er gehandeld wordt en welke beslissingen er genomen moeten worden. Het toont het moment dat de designer beslist dat hij/zij zijn ontwerpen wil delen tot het moment dat het verstuurd of opgeslagen is.
Zodra de designer tot de conclusie komt dat de
ontwerpen verstuurd kunnen worden, komt er bewust dan wel onbewust een ‘analysemoment’. Op dit moment worden vragen gesteld die in een fractie van een
seconden beantwoord kunnen worden.
4.1 Keuzeproces
Zodra de meeste van deze vragen (zie afbeelding 3) zijn beantwoord kan de designer verder met het bepalen van de tool die gebruikt kan worden voor het delen. Ook dit gebeurt meestal in fracties van een seconde. Als de juiste tool is bepaald zal deze ingesteld moeten worden, of dit nu e-mail, Basecamp of een andere tool is. Er zullen ontvangers ingesteld moeten worden, wellicht ook het apparaat en de versie van het ontwerp; dit alles vermeld onder het juiste project.
Direct daarna komt de controle: het moment voordat je op verzenden drukt en nog even een blik werpt op het zogenoemde “aan-veld”. Tijdens dit controlepunt controleert de designer voor de laatste keer of alles juist is ingevuld. Zo niet kan hij weer een stap terug. Ook kan het voorkomen dat er andere factoren zijn, zoals dat er voor dit project andere tools gebruikt worden, zodat er opnieuw moet worden begonnen. De laatste uitvalsmogelijkheid is het punt dat de designer zich nog een wijziging herinnert die nog niet uitgevoerd is. In dit geval wordt de volledige procedure geannuleerd. Als dit alles niet het geval is, gaat de designer naar de laatste stap, het versturen van de ontwerpen. Zodra dat is gebeurd heeft de designer relatief weinig invloed meer op de volgende stappen, wat meestal inhoudt dat de klant de ontwerpen bekijkt.
4.2 Conclusie
Het wordt duidelijk dat er twee belangrijke keuzemomenten zijn voor een designer om zijn ontwerpen de delen. Het eerste is een analyse waarin er wordt gekeken naar bijvoorbeeld de hoeveelheid ontwerpen. Het tweede keuzemoment is bij het invullen van de tool. Zo is inzichtelijk geworden waar een
designer aan denkt om zijn ontwerpen in te vullen en de keuzemomenten makkelijker te maken.
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.
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 voor- en 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.
Naast dat de discussie erg versnipperd raakt, blijven de oudere versies altijd bovenaan staan in de discussie en raken de nieuwe versies ondergesneeuwd in de discussies.
In het tweede scenario is het geval dat er meerdere berichten worden geplaatst. Waar in het eerste scenario alle versies in één en hetzelfde bericht werden geplaatst, krijgt hier elke versie een nieuw bericht. Een gevolg hiervan kan zijn dat klanten deze nieuwe versie niet ‘doorhebben’ en blijven discussiëren over een oud ontwerp. Of de berichten met nieuwe versies vallen niet genoeg op bij andere berichten over bijvoorbeeld techniek en interaction design.
Mogelijkheden
Basecamp is in de basis een communicatietool voor projecten. Je kan er to-do’s aanmaken, vragen stellen en beantwoorden, discussies starten en bestanden delen.
Prijs
De prijs is vanaf $20,- voor 10 projecten.
Strategie
Basecamp is een algemeen communicatiemiddel dat zou werken voor bijna elk project. In de basis hebben bijna alle projecten hetzelfde nodig: ruimte voor discussies en to-do-lijstjes. Doordat de tool zo algemeen is, raakt het delen van ontwerpen achterop en mist het bepaalde belangrijke functionaliteiten.
Conclusie
Basecamp is een goede start vooral op het gebied van communicatie tijdens projecten. Toch zijn er in het huidige proces ook grote problemen als het gaat om het delen van ontwerpen. Bijvoorbeeld het bekijken van de op een smartphone.
5.2 TAP
Voordelen
Een van de grootste voordelen van TAP, en waar de andere tools nog vrij ver achter blijven, is het tonen op het apparaat waarvoor het ontwerp bedoeld is. Met TAP is het mogelijk om van je ontwerpen een kleine website te maken en deze te bekijken op smartphone of tablet.
Nadelen
Deze tool heeft ook zijn beperkingen omdat het geen overzichtspagina heeft, tenzij die door de designer zelf wordt gemaakt. Ook heeft geen functionaliteiten om verschillende versies online te zetten.
Mogelijkheden
TAP kan geïnstalleerd worden op een eigen server en daardoor zou je met wat technische kennis het uit kunnen breiden. Echter is de basis erg beperkt voor het delen van ontwerpen.
Prijs
Het product is gratis in de markt gezet en het lijkt er ook niet op dat daar snel verandering in komt.
Strategie
De strategie van TAP is dat het specifiek is ontwikkeld voor interaction designers die hun ontwerpen willen testen op een mobiel apparaat zoals een smartphone of tablet.
Conclusie
TAP is een erg sterke tool voor presentatie op andere apparaten dan een laptop of pc. Toch is het instellen van deze tool zeer tijdrovend.
5.3 E-mail
Voordelen
E-mail biedt gemakkelijk een overzicht van alle ontwerpen en het stelt je in staat om meerdere ontwerpen te versturen.
Nadelen
Het is lastig om de ontwerpen juist te tonen op een smartphone of tablet en er zijn geen mogelijkheden tot versiebeheer.
Mogelijkheden
Het voordeel van e-mail is dat je het volledig vorm kan
geven naar bijna alle wensen. Lettertypes, logo’s, titeltjes per ontwerp, het is allemaal mogelijk met e-mail. Echter zodra het meer technisch wordt, worden de beperkingen zichtbaar. Zo kunnen de ontwerpen niet wachtwoord beveiligd worden en zijn ze niet te zien op een URL doordat het zich beperkt tot de e-mailboxen van de ontvangers.
Prijs
In de meeste gevallen gratis.
Strategie
Het is oorspronkelijk ontwikkeld voor het versturen van berichten naar elkaar en niet om ontwerpen te delen.
Conclusie
Iedereen weet hoe e-mail werkt en het is daarom voor alle partijen een ideale tool. Toch beperkt het delen zich tot de e-mailboxen van de geadresseerden en wordt het al snel onoverzichtelijk doordat er ook andere e-mail binnenkomt.
5.4 Conceptshare
Voordelen
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.
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.
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
Mockvault is gericht op de klant van de designer, wat een groot verschil is in vergelijking met de andere tools in het lijstje. Toch heeft deze tool ook een groot nadeel: het delen van ontwerpen gaat per ontwerp en is niet beschikbaar op een smartphone of tablet.
5.6 Mailette
Voordelen
Waar e-mail zich beperkt tot de e-mailboxen gaat 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.
Nadelen
Er is geen vorm van versiebeheer en zijn de ontwerpen niet goed te bekijken op een mobiel apparaat.
Mogelijkheden
Omdat het werkt via een URL is het niet mogelijk om deze te beveiligen met behulp van accounts of wachtwoorden. Ook de pagina waar de ontwerpen opstaan is zeer beperkt. Zo is er maar één pagina met alle ontwerpen onder elkaar en kunnen de ontwerpen niet individueel bekeken worden.
Prijs
De prijs is $9,- per drie gebruikers per maand.
Strategie
Het enige wat er gebeurt is dat de ontwerpen online gezet worden op een URL die zich weer alleen beperkt tot de e-mailboxen van de ontvangers. Het is erg goedkoop maar niet handig te gebruiken in teamverband.
Conclusie
Bij Mailette staan de ontwerpen online maar gaat een groot deel van de communicatie nog steeds via e-mail.
5.7 Prevue
Voordelen
Misschien wel een van de simpelste interfaces in dit rijtje. Aangezien de functionaliteiten geminimaliseerd zijn werkt de tool goed en prettig.
Nadelen
Het is door die simpele interface mogelijk om maar één ontwerp per keer toe te voegen aan een project. Ook hebben ze geen mogelijkheid voor versiebeheer of het tonen op mobiele apparaten.
Mogelijkheden
Prevue7 biedt zeer veel mogelijkheden om de ontwerpen
goed te presenteren door achtergrondkleuren aan te passen en titels toe te voegen.
Prijs
De prijs is $75,- per 15 gebruikers per maand.
Strategie
De gratis variant biedt de mogelijk om 50 ontwerpen te uploaden. Bij de meest uitgebreide variant is dat onbeperkt. Ook al is het erg basic, in geval van meerdere ontwerpen kan het een lange tijd duren voordat alles juist is ingesteld.
Conclusie
De kracht van Prevue, in vergelijking met andere tools, zit hem in het feit dat ze de tool erg hebben uitgekleed. De functionaliteiten zijn minimaal en dit zou een bedrijf kunnen tegen houden om de tool te gebruiken.
5.8 QwikVu
Voordelen
Zodra je de ontwerpen wilt delen gaat QwikVu8 uit van
verzamelingen. Je kan een nieuwe verzameling starten en daar alle ontwerpen die je wilt delen naar uploaden.
Nadelen
Ook ondersteunt QwikVu niet de mogelijkheid om de ontwerpen te delen op een mobiel apparaat en heeft het geen overzichtspagina voor de klant.
Mogelijkheden
QwikVu heeft een sterke en aanwezige vormgeving. Veel van de functionaliteiten zien we ook terug bij de concurrenten.
Prijs
De prijs is $40,- per gebruiker per maand.
Strategie
Van QwikVu gaan er dertien in een dozijn. De vormgeving is erg aanwezig en biedt niets meer of minder dan z’n concurrenten. Dit zou de oplossing kunnen zijn voor de freelancer want het geeft geen tot weinig ondersteuning aan teams.
Conclusie
Het is een sterke tool met alle basisfunctionaliteiten. Echter beperkt de tool zicht tot freelancers waardoor er niet in teams gewerkt kan worden.
5.9 Axure
Voordelen
Het is een totaalpakket. Vanaf het ontwerp tot aan een prototype biedt Axure mogelijkheden.
Nadelen
Een groot nadeel hiervan is dat iedereen moet kunnen werken met Axure. Programma’s als Photoshop kunnen niet overweg met Axure-bestanden. Dit zou dus betekenen dat de designers van UNITiD allemaal moeten gaan werken met Axure, iets wat ze nu niet doen.
Mogelijkheden
Aangezien Axure in de basis meer een ontwerptool is dan een tool om ontwerpen mee te delen zijn er erg veel functionaliteiten aanwezig. Echter voor het delen ben je wel verplicht je ontwerp te maken in Axure.
Prijs
De prijs is $289,- per gebruiker per maand.
Strategie
Axure is een tool die het ontwerpproces ervoor ook faciliteert. Hierdoor kunnen ze meer geld vragen en kan je uiteindelijk natuurlijk ook meer. De beperking zit vooral in de mogelijkheden om ontwerpen te importeren en te exporteren naar andere ontwerptools. Dit beperkt de designer zeker.
Conclusie
Axure biedt vanalles, van ontwerpen tot feedback. Daarvoor moet dan ook wel betaald worden. Een ander nadeel is ook dat de designer vastzit aan de tool van Axure.
5.10 ProofHQ
Voordelen
Deze tool biedt veel functionaliteiten voor het online opslaan en delen van ontwerpen.
Nadelen
Deze tool heeft de minst gebruiksvriendelijke interface. Er zijn ontzettend veel opties die bij de instellingen ook allemaal getoond worden. Aan de achterkant staat de overzichtspagina vol met onduidelijke icoontjes. Het biedt, net zo als vele andere tools, geen mogelijkheid om de ontwerpen te delen via mobiele apparaten en er is ook geen mogelijkheid om nieuwe versies te uploaden.
Mogelijkheden
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.
Prijs
Strategie
Bij ProofHQ gaat het vooral om projecten, ze bieden ontzettend veel en hopen daarmee een grote doelgroep te bereiken. Technisch zit het goed in elkaar en daarom zou het goed mogelijk zijn dat ProofHQ is ontwikkeld door mensen uit de technische sector.
Conclusie
ProofHQ heeft erg veel mogelijkheden, maar door al die functionaliteiten tegelijkertijd aan te bieden verliest het overzicht bij het delen van meerdere ontwerpen.
5.11 Dropbox
Voordelen
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.
Nadelen
Er zit om de ontwerpen een dikke ‘Dropbox’-rand, er is geen duidelijke overzichtspagina en het werkt niet met versiebeheer.
Mogelijkheden
Dropbox is gemaakt om bestanden te delen maar niet
zozeer om ontwerpen goed naar de klant te presenteren of projectmanagement bij te houden. Er kan niets ingesteld worden om de presentatie naar de klant toe te verbeteren.
Prijs
De prijs is $99,- per gebruiker per jaar.
Strategie
Enkel voor het delen van bestanden werkt Dropbox prima. Echter zodra er ontwerpen gedeeld moeten die bekeken moeten worden loop je tegen vele beperkingen aan.
Conclusie
Voor het onderling delen werkt Dropbox prima, maar het delen van ontwerpen heeft erg veel ‘maren’. Dit komt voor een groot gedeelte doordat Dropbox in de basis niets te maken wil hebben met een specifieke branche; ze willen hun interface niet puur op designers toespitsen.
5.12 Red pen
Voordelen
Red pen12 is erg simpel in het gebruik. Je sleept je
ontwerp naar de website, je krijgt een link en klaar is kees.
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
Bounce13 is ook een tool die net zoals bijvoorbeeld Red
Pen, met één ontwerp per keer de eenvoud probeert te behouden. Naast het tonen van één ontwerp kan je ook screenshots maken van een website en deze met mensen delen.
Nadelen
De reclame op de website is wel een groot nadeel als je dit als bedrijf wilt inzetten voor het delen van de ontwerpen.
Mogelijkheden
Het is erg basic, zo kan je maar één ontwerp per keer uploaden of een screenshot maken van een website.
Prijs
Gratis
Strategie
De tool zit vol met reclame van het bedrijf of van andere aanbieders. Verder lijkt het zich meer te richten op het maken van screenshots van websites dan op het delen van ontwerpen.
Conclusie
De tool is erg basic en vol met reclame. Het zou wellicht goed kunnen werken voor het maken van een screenshot van een lange webpagina en minder voor het delen van ontwerpen.
5.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
“Bij tien veelgenoemde
tools op het internet
is er per tool gekeken
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.
Nu de mate van het belang is ingevuld kon het in een assenstelsel gezet worden samen met haalbaarheid. Met haalbaarheid wordt bedoeld of de functionaliteit ingewikkeld is of veel tijd zal kosten om te ontwerpen en te bouwen. Uiteindelijk staan alle belangrijke en haalbare functies in de rechterbovenhoek van het assenstelsel. Aan het eind van deze sessie is duidelijk geworden welke functionaliteiten er niet mogen ontbreken en goed zijn te ontwikkelen.
Uiteindelijk kwamen de meest belangrijke en haalbare functionaliteiten naar voren.
De vier belangrijkste functionaliteiten: 1. Simpel in gebruik
2. Ontwerp tonen op juiste manier 3. Responsive
4. Ontwerp op ware grootte
6. Functionaliteiten
“Uiteindelijk staan
alle belangrijke
en goed haalbare
functies in de
rechterbovenhoek
van de as.”
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.
Wat hield de workshop in? Voor de workshop waren verschillende ‘types’ mensen uitgenodigd. Zo waren er drie interaction designers, één visual designer en drie personen die weinig of niets met digital design te maken hadden. Deze drie personen waren geen klanten van UNITiD maar zorgden ervoor dat de zogenoemde ‘voorkant’ van de website of app ook begrijpbaar zou worden voor mensen die minder vaak met nieuwe media omgaan.
Na een korte voorstelronde over wie ze waren en wat ze voor beroep en/of functie beoefenden werd er een introductie gegeven over het project. Hierbij werd ook de probleemsituatie uitgelegd. Voordat er nog maar één schets op papier werd gezet is er een een warming-up 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
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.
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.
Notes
14. Vos, K. de (2013), Brainstormen (2e editie), Amsterdam: Pearson Benelux
Na deze vijftien minuten werden de aanwezigen
gevraagd hun ontwerp op te hangen aan een magnetisch whiteboard en één voor één uit te leggen wat ze hadden ontworpen. Zo werd duidelijk waarom bepaalde keuzes waren gemaakt en hoe ze zich de interface voorstellen. Ook functionaliteiten die tijdens een interview niet aan bod komen, worden vaak tijdens zo’n workshop zichtbaar.
7.1 Eerste ronde
Een van de aspecten die dit project lastig maakte is hoe je het overzicht kunt bewaren in alle verschillende ontwerpen en versies. In versies kunnen bijvoorbeeld kleuren zijn veranderd, elementen verplaatst of tekst herschreven.
Er werd gaandeweg een groot verschil bij de schetsen duidelijk. Er zijn twee soorten ‘ingangen’ om een ontwerp te bekijken (zie ook afbeelding 6). Er kan namelijk gestart worden met een pagina of met een versie. In geval van een pagina heb je daar verschillende versies van waaruit je een keuze moet maken voordat je de door jouw gekozen pagina en de juiste versie voor je hebt. De andere ingang is dat je begint met het kiezen van een versie en daar vervolgens een pagina selecteert om het gewenste ontwerp te bekijken.
Omdat er werd gevraagd een interface te schetsen voor een smartphone was er een duidelijk patroon te
herkennen in de schetsen. Zo kwamen er meerdere keren functionaliteiten naar voren voor navigatie door middel van zogenoemde ‘swipes’. Bij “swipen” veeg of sleep je met een vinger over het scherm en kun je zo bijvoorbeeld bladeren door de verschillende berichten, foto’s en of dagen van de week. In dit geval waren er swipes bedacht waarmee je door verschillende pagina’s of versies kunt navigeren.
Ook werden er veel schetsen gemaakt voor het vergelijken van pagina’s met verschillende versies. Daarbij was het idee dat je de laatste versie makkelijk kon vergelijken met een versie daarvoor. Tijdens het schetsen werd onder andere bedacht dit te doen door het scherm lang ‘ingedrukt’ te houden.
Om de aanwezigen voor de tweede opdracht scherp te houden, werd er een pauze ingelast waarin mensen wat konden drinken en pizza konden eten. Na dit kleine intermezzo kon er verder gegaan worden met de tweede schetsopdracht.
In deze opdracht werd er gevraagd om de ‘achterkant’ te bedenken. De achterkant zou een desktop interface zijn waarin de designer de ontwerpen kan uploaden naar de tool. Ook dit systeem moet natuurlijk overzichtelijk en handig zijn. De aanwezigen bij de workshop moesten zich daarvoor inleven in een designer en niet in de klant zoals in de vorige opdracht. Ook voor deze opdracht kregen de aanwezigen vijftien minuten.
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. 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.
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.
Afbeelding 7, Toevoegindicator, Typeform.com 2014
“Een ander opvallend
verschijnsel is dat op
één na iedereen
als basis de versie
had geschetst.”
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”). 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.
“Uit de eerste
ronde met
schetsen kwam
naar voren dat
er verschillende
ingangen zijn
om een project te
benaderen.”
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.
Na het allereerste ontwerp voor de smartphone (zie afbeelding 8) bekeken en voorgelegd te hebben aan collega interaction designers, waren er verschillende vragen. Een van die vragen ging over het selecteren van een pagina op het homescreen.
Zou het selecteren van zo’n pagina genoeg bieden om het scherm ingewikkelder, drukker en onoverzichtelijk te maken? De naam van de pagina zegt weinig en maakt het scherm ‘druk’. Daarom is er een alternatief ontworpen zonder de pagina’s op het eerste scherm te tonen en is het sfeerbeeld van het eerste ontwerp in de versie vergoot om het geheel meer stijl en identiteit te geven (zie afbeelding 9).
Omdat de versie het belangrijkste onderdeel is in dit scherm is het verstandig deze prominent op het scherm te tonen. Als er van rechts naar links geswiped wordt en de duim over het scherm veegt is het versienummer niet te zien. Door het versienummer en het aantal pagina’s boven het ontwerp te zetten is dat opgelost (zie afbeelding 10). Door deze aanpassing is het mogelijk om nog voor dat je duim van het scherm is gehaald de versie te zien.
Doordat een directe link naar de pagina’s is weggehaald, is die opening verdwenen en zijn gebruikers verplicht op deze manier met versies te werken. Terwijl in de ideation workshop veel gevraagd werd om een ‘ingang’ via pagina’s is er gekeken om dit op een andere manier op te lossen. Deze werd gevonden door het aantal pagina’s op de homepage te gebruiken als verwijzing naar een speciaal scherm met alle ontwerpen.
8. Sketching & Wireframing
“De naam van
het ontwerp zegt
weinig en maakt
het scherm
Afbeelding 8, Eerste ontwerp, Sebastian Conijn 2014
Afbeelding 9, Tweede ontwerp, Sebastian Conijn 2014
Afbeelding 10, Derde ontwerp, Sebastian Conijn 2014
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.
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.
8.3 Flowchart
Een flowchart 15 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’
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
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 zullen zijn.
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
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-de-bouwtekening-van-een-website/, geraadpleegd op 6 januari 2014
9. Het interactie-ontwerp
“In de wireframes
worden zaken
vastgelegd als
navigatie, indeling
en inhoud, zonder
gebruik te maken
van een grafisch
ontwerp.”
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.
Positie label
Snelheid
Boven Snelst
Rechts Gemiddeld Links Langzaamst
Notes
18. Mifsud, J. (2011), An Extensive Guide To Web Form Usability, http://uxdesign.smashingmagazine.com/2011/11/08/extensive-guide-web-form-usability/, geraadpleegd op 17 januari 2014
19. Wroblewski, L. (2008), Web Form Design, Verenigde Staten: Rosenfeld
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.
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).
“Het inloggen is
misschien wel het
meest vervelende
scherm in de flow.”
“Zodra een
medewerker
buiten het
kantoor werkt
worden de tekens
weergegeven.”
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. 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-successful-dashboard-design, geraadpleegd op 21 januari 2014
9.1.3 Indeling
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.
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. 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
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
“Om ontwerpen
toe te voegen aan
het project kan
de designer zijn
ontwerpen in het
venster slepen of op
een knop ‘bestanden
selecteren’ drukken.”
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/10-ui-design-patterns-you-should-be-paying-attention-to/, geraadpleegd op 22 januari 2014
Afbeelding 21, Titel van ontwerp wijzigen, Sebastian Conijn 2014
