Rogier van der Linde & Davy De Winne, 2014 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 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’

CONTEXT – PERSONA Fictief gebruikersprofiel als typevoorbeeld van een bepaalde groep gebruikers

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

CONCEPT – STORYBOARD Weergave van een scenario in stripverhaalvorm 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 ‘ster-mannetjes’ gebruiken.

CONCEPT – STORYBOARD – ‘HELP, IK KAN NIET TEKENEN’ Je kan ook een korte comic maken met Photoshop ‘Cutout’ en ‘Poster Edges’ filters 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:

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

STRUCTUUR – USER FLOW Flowchart van de mogelijke acties die een gebruiker onderneemt om tot een bepaald doel te komen. User flows zijn bijzonder nuttig: je kunt een deeltaak isoleren, en kijken waar eventuele knelpunten conversie in de weg staan: volgt elke stap logisch op de vorige, m.a.w. is het voor de gebruiker op elk moment duidelijk en logisch wat de keuzes zijn, of wat van de gebruiker verwacht wordt? zijn de flows goed van elkaar gescheiden, m.a.w. is lopen op pagina’s de flows niet door elkaar? (uitzondering zijn doorverwijspagina’s zoals de homepage) Over user flows zullen we het later nog hebben.

STRUCTUUR – USER EXPERIENCE MAP Een model van de complete ervaring die een persoon heeft met een dienst of product Deze experience map is opgesteld door Rail Europe. Rail Europe is een Amerikaanse distributeur reizigers 1 enkele plek biedt om treinkaartjes te reserveren en te kopen voor heel heel Europa, zodat ze niet naar allemaal verschillende websites moeten gaan. Ze hadden al een goede website en een gelauwerde contact center, maar ze wilden een beter zicht krijgen op de interacties van hun klanten op alle raakpunten, zodat ze beter zouden kunnen begrijpen waar ze hun budget, design en technologiemiddelen op moeten concentreren. Deze kaart heeft bijgedragen tot een beter empatisch begrip van de interacties van de klanten met de Rail Europe raakpunten, zowel in tijd als in ruimte. Het opstellen van een goede experience map is niet eenvoudig – zie http://www.adaptivepath.com/ideas/the-anatomy-of-an-experience-map/ - en valt buiten het bestek van deze cursus.

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.

DESIGN – STYLE GUIDE Een handleiding voor de opmaak van designelementen; kan gebruikt worden voor documenten, websites, drukwerk, of zelfs voor de hele huisstijl.

PERSONAS Clive Ondernemer, heeft comfort en standing nodig Dave Sportman, heeft snelheid en blitz nodig

PERSONAS ? ?

PERSONAS

een oplossing voor iedereen werkt voor niemand PERSONAS een oplossing voor iedereen werkt voor niemand

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

PERSONAS FOTO NAAM QUOTE BESCHRIJVING PERSOONLIJKE INFO DOELSTELLINGEN http://www.linkedmediagroup.com/create-brand-persona/

PERSONAS NAAM BESCHRIJVING PERSOONLIJKE INFO DOELSTELLINGEN FOTO QUOTE http://adpearance.com/blog/using-personas-in-web-design

PERSONAS FOTO NAAM PERSOONLIJKE INFO BESCHRIJVING QUOTE DOELSTELLINGEN 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 interface-ontwerp gericht op deze persona ontwerp eerst voor deze persona, en pas dan aan voor de rest 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

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

PERSONAS – OPSTELLEN Stap 2: stel lijst op van belangrijke sleutelkarakteristieken die uit de intervieuws tevoorschijn komen Stap 3: zet gebruikers uit op deze karakteristieken

PERSONAS – OPSTELLEN Stap 4: vorm groepjes gebruikers met veel overeenkomsten

PERSONAS – OPSTELLEN Stap 4: vorm groepjes gebruikers met veel overeenkomsten

PERSONAS – OPSTELLEN Stap 5: daarmee heb je je personas gevonden

PERSONAS – OPSTELLEN

PERSONAS – PUBLICEREN Stap 6: publiceer je personas Print ze uit en hang ze aan de muur...

PERSONAS – PUBLICEREN ... of wees creatiever. Dit is een voorbeeld van Cisco, die er een soort action figure van maken

PERSONAS – PUBLICEREN Eentje van Yahoo...

PERSONAS – PUBLICEREN Mogelijkheden te over: print ze op speelkaarten kaarsen sleutelhangers ... ok, een tattoo is overdreven, maar vergeet nooit wie je gebruikers zijn!