Transcript Document

VISUALISATIE
Rogier van der Linde & Davy De Winne, 2014
VISUALISATIE
Communicatie over concepten, de context, gebruikersgroepen enz… werkt best als het op een of andere
manier kan gevisualiseerd worden. Enkele technieken:
Context:
• user stories
• personas
Concept:
• scenarios
• storyboards
• UX vision videos
2
Structuur:
• use cases
• user flows
• user experience map
Design:
• moodboards
• style guides
CONTEXT – USER STORY
Steekkaarten met telkens één zin:
‘As a [who/role] I want to
[what/task] so that [why/goal]’
Voorbeelden:
‘As a teacher, I want to upload my
course material, so that my
students can access it’
‘As a tourist, I want to see
pictures of the bedrooms
so that i can choose a
romantic room for a week-end
with my partner’
3
CONTEXT – PERSONA
Fictief gebruikersprofiel als
typevoorbeeld van een bepaalde
groep gebruikers
4
CONCEPT – SCENARIO
Stap per stap beschrijving
van een concrete
gebruikssituatie van jouw
app/website/idee.
Kan met postits
weergegeven worden,
b.v.
- blauw: een actie
- geel: vraag
- groen: commentaar
- roze: idee
5
CONCEPT – STORYBOARD
Weergave van een
scenario in
stripverhaalvorm
•
•
•
6
6 tot 8 frames
verhaallijn onder elke
frame
tekstballonnen
CONCEPT – STORYBOARD – ‘HELP, IK KAN NIET TEKENEN’
Je hoeft niet te kunnen
tekenen; je kan de ‘stermannetjes’ gebruiken.
7
CONCEPT – STORYBOARD – ‘HELP, IK KAN NIET TEKENEN’
Je kan ook een korte comic maken met Photoshop
‘Cutout’ en ‘Poster Edges’ filters
8
http://www.userfocus.co.uk/articles/uxvision.html
CONCEPT – UX VISION VIDEO
Je kunt zelfs een video maken van je visie op de user experience:
9
STRUCTUUR – USE CASE
Visualisatie van de vereisten van een
toepassing of een deel van een toepassing
d.m.v. UML (Universal Modelling Language),
veel gebruikt in softwareontwerp.
Focus ligt vooral op implementatie en
functionaliteit, niet op de gebruikerservaring
(en is dus minder interessant in deze cursus).
10
STRUCTUUR – USER FLOW
Flowchart van de
mogelijke acties die een
gebruiker onderneemt
om tot een bepaald doel
te komen.
11
STRUCTUUR – USER EXPERIENCE MAP
Een model van de
complete ervaring die
een persoon heeft met
een dienst of product
12
DESIGN – MOODBOARD
Beeldcollage van concepten,
ideeën, dromen en gevoel.
Kan gebruikt worden om de stijl
van je product te bepalen, maar
ook om vage ideeën te
visualiseren en te bepalen welke
kant je opwil.
13
DESIGN – STYLE GUIDE
Een handleiding voor de
opmaak van designelementen;
kan gebruikt worden voor
documenten, websites,
drukwerk, of zelfs voor de hele
huisstijl.
14
PERSONAS
Clive
Ondernemer, heeft comfort en standing nodig
Dave
Sportman, heeft snelheid en blitz nodig
15
PERSONAS
?
?
16
PERSONAS
17
PERSONAS
een oplossing voor iedereen werkt voor niemand
18
PERSONAS
Personas zijn fictieve profielen die de belangrijkste
gebruikersgroepen voorstellen.
Typische gegevens:
- foto
- typerende quote
- persoonlijke info (naam, leeftijd, opleiding, werk...)
- korte beschrijving huidige situatie
- frustraties en doelstellingen
19
FOTO
PERSONAS
NAAM
QUOTE
BESCHRIJVING
PERSOONLIJKE INFO
DOELSTELLINGEN
20
http://www.linkedmediagroup.com/create-brand-persona/
PERSONAS
BESCHRIJVING
NAAM
PERSOONLIJKE INFO
DOELSTELLINGEN
FOTO
QUOTE
21
http://adpearance.com/blog/using-personas-in-web-design
PERSONAS
FOTO
NAAM
PERSOONLIJKE INFO
BESCHRIJVING
QUOTE
DOELSTELLINGEN
22
http://www.mediacurrent.com/blog/designing-personas
PERSONAS
Primary persona:
- belangrijkste / meest gemiddelde
persona
- zonder deze persona heeft je
toepassing geen bestaansrecht
- andere personas zijn mits
aanpassingen ok met een interfaceontwerp gericht op deze persona
- ontwerp eerst voor deze persona,
en pas dan aan voor de rest
23
http://www.mediacurrent.com/blog/designing-personas
PERSONAS
Enkele tips:
- personas moeten gebaseerd zijn op onderzoek van echte
gebruikers
- maak niet teveel personas; een goede vuistregel is
ongeveer 20 gebruikersinterviews en 4 personas
- personas mogen weinig met elkaar gemeen hebben
- focus op de verschillen tussen personas die er echt toe
doen; is bijvoorbeeld leeftijd belangrijk?
- personas moeten opgesteld zijn als het verhaal van een
echt persoon
24
PERSONAS – OPSTELLEN
We vertrekken we van een website
die de betere papierwaren
verkoopt. Stappen om tot
personas te komen:
Stap 1: verzamel resultaten van de
gebruikersinterviews
25
PERSONAS – OPSTELLEN
Stap 2: stel lijst op van belangrijke
sleutelkarakteristieken die uit de
intervieuws tevoorschijn komen
Stap 3: zet gebruikers uit op deze
karakteristieken
26
PERSONAS – OPSTELLEN
Stap 4: vorm groepjes gebruikers
met veel overeenkomsten
27
PERSONAS – OPSTELLEN
Stap 4: vorm groepjes gebruikers
met veel overeenkomsten
28
PERSONAS – OPSTELLEN
Stap 5: daarmee heb je je
personas gevonden
29
PERSONAS – OPSTELLEN
30
PERSONAS – PUBLICEREN
Stap 6: publiceer je personas
Print ze uit en hang ze aan de
muur...
31
PERSONAS – PUBLICEREN
... of wees creatiever. Dit is een
voorbeeld van Cisco, die er een
soort action figure van maken
32
PERSONAS – PUBLICEREN
Eentje van Yahoo...
33
PERSONAS – PUBLICEREN
Mogelijkheden te over: print ze op
- speelkaarten
- kaarsen
- sleutelhangers
- ...
ok, een tattoo is overdreven, maar
vergeet nooit wie je gebruikers zijn!
34