Usability van een Webshop Maartje de Vries & Ellen Schuurink UE 2016
Gastsprekers: Ellen & Maartje
TCP
TCP
Agenda - deel 1 ●
Waarom een webshop
●
Wat betekent “Usability” in de context van een webshop?
●
Hoe bereik je dat? Uitgangspunten
●
Als je de heuristieken hebt, ben je dan klaar?
●
Hoe bereik je dat? - ontwerp aanpak
●
Waarom is usability belangrijk voor een webshop?
●
Hoe bereik je dat? - in de organisatie
Agenda - deel 2 ●
De opdracht
●
Introductie Reload 3D
●
Persona’s workshop
●
Voor in het werkcollege
●
Video pitch
Werkcollege: vervolg Persona’s, User Scenario’s & Testplan
WAarom een webshop?
Wie koopt er wel eens online?
Thuiswinkel monitor Q4 2015
Populariteit type webshops Boeken, cd, dvd
Electronica
2% 6%
Kleding
Voeding
25%
18%
16%
Huis- en tuin artikelen
Bron data: CBS
Let op: Deze gemiddelde data kan afwijken voor de specifieke webshop Thuiswinkel monitor Q4 2015
Wat betekent “Usability” in de context van een webshop?
Stelling 1: Usability is belangrijker voor webshops dan (informatieve) websites
Stelling 2: Visuals & vormgeving is belangrijker voor usability dan tekst
Stelling 3: Voor webshops gelden andere usability regels
Hoe bereik je dat? Uitgangspunten
Welke onderdelen dragen bij aan goede usability? (algm) Help users recognize, diagnose and recover from errors
Visibility of system status Help and documentation
Match between system and the real world
User control and freedom
Aesthetic and minimalist design
Consistency and standards
Flexibility and efficiency of use Error prevention
Recognition rather than recall Bron afbeeldingen: João Machini
Webshop consistency, minimalism, match real world
Webshop error prevention & Help & flexibility
Webshop recover from errors
Webshop system status and recognition
Webshop User Control & Freedom
Als je de heuristieken op orde hebt, ben je dan klaar?
Meer dan usability Usability & UX
UX
Usability
Vergeet niet... Performance
Betrouwbaarheid
Customer Journey
Persuasive design
Cross device Welk device gebruikt je (potentiele) klant?
Hoe bereik je dat? Ontwerp aanpak
User centered design
Plan -
Budget Beschikbaarheid doelgroep Doorlooptijd Bereidheid om aanpassingen te maken? - Methode van ontwikkelen en testen
Research - technieken Kwalitatief: Interviews, focus groepen, diary studies, observaties Kwantitatief: Enquetes, data analyse huidige site
Van research naar design - technieken - Persona’s en user profiles - Scenario’s - Customer journey mapping
Design -technieken - Concepting / schetsen - Interactie ontwerpen
Partronen
http://ui-patterns.com/patterns
adapt - Prototyping (low- of high-fidelity) of verbeterde versie bouwen - Visueel (detail) design
Measure usability
Meten van usability -kwalitatief - Feedback verzamelen -
Remote Feedbacktool (bijv. usabilla) Ongestructureerd via social media/ contact kanalen
- Gebruikersonderzoek -
Bijvoorbeeld in usability lab Remote
Gebruikersonderzoek -
Hoe gaat het in zijn werk?? Methode Voorbereiding/werving Faciliteiten
Meten van usability - kwantitatief Maar kwantitatieve data geeft ook een heel goed beeld van de gebruiksvriendelijkheid: -
Bounce rate Visitors/views Time on page Zoekgedrag op de site Clickgedrag op de site CONVERSIE & NPS
Waarom is usability Belangrijk voor een webshop?
Wat levert goede usability voor een webshop op? ● ● ●
Hoge conversie / average order value / items per order Minder retouren Klant tevredenheid (terugkerende klanten + aanbevelingen)
conversie Hoeveel bezoekers kopen daadwerkelijk een product?
NPS - Net Promotor Score - Wat is het en hoe meten we het? - Waarom NPS?
Ab testen
GEVAAR VOOR WEBSHOPS Focus op conversie <> goede gebruikerservaring
En andersom
Rol van merk
Hoe bereik je dit? In de organisatie
Usability in de praktijk - wie is er verantwoordelijk?
Betrokken rollen ●
Usability engineer?
●
User researcher
●
Business analyst / product owners
●
Interactie designer & visual designer
●
Informatie architect
●
Copywriter
Onderscheid grote en kleine webshops? ● ● ● ● ● ●
Heel team Wie is de owner? Budget Aandacht voor onderzoek Mogelijk bureaucratisch Kleine verandering grote impact
● ● ● ●
Ondernemer geen web expert Persoonlijke contact (kneuterigheid) Afhankelijk van de individu Snelle veranderingen
Samenwerking
Wie doet het onderzoek?
Is het Agile? - Wat is Agile? - Iteratief en Innovatief - Continuous Improvement
Waarom Agile? Voorbeeld: Kleur van de button
Wie beoordeeld of er goede usability is?
Pauze
De Opdracht Ontwikkel Persona’s (workshop) en
Test de Usability
scenario’s en gebruik deze voor de onderzoeksmethode Think Aloud. Schrijf
Van webshop
je advies in een verslag en presenteer deze in een video pitch.
Reload 3D
Stappen voor de opdracht Persona’s
User scenario’s
Test
Onderzoeksmethode
Rapportage
Test Plan
Video pitch
Introductie: Reload 3D
Wat is dit voor webshop? Uniek? Product Of Dienst?
Doelgroep? Wie zit er achter?
Wie is de klant?
Op welk device & Browser?
Hoe lang blijven ze?
Persona’s Wat is het? Waarvoor gebruik je het?
Voorbeeld van ontwikkeling Persona’s
Voorbeeld van een Persona
3 Persona’s Reload 3D 1 “Probeert” - Koopt de 3D pen (voor zichzelf of kind) - Koopt eenmalig 1 product
2 “Enthousiast”
3 “Pro”
- Print bij 3D Hubs (locale 3D print shops) - Koopt kleine hoeveelheden filament - Gaat voor gratis verzending
- Heeft eigen 3D printer (s) - Koopt regelmatig grote hoeveelheden filament - Koop verschillende soorten filament per keer (ABC,PLA, TPE)
Werk een Persona uit -
Foto Naam Leeftijd Gezinssituatie Beroep Hobby’s Bestedingsbudget Hobby’s Slogan / Motto “Quotes” Interesse / Kennis in 3D printing Intensiteit gebruik van 3D printing Computer skills Webshop verwachtingen
… voeg extra (relevante) informatie toe in nieuwe categorieen
Opletten! - Kies realistische gegevens -
Echte naam (dus niet allemaal Jan Jansen) Bij voorkeur echt foto (geen modellen werk) Passende gegevens bij je data, maar wel écht. Dus geen ‘gemiddelden’
- Voeg elementen toe die voor de website relevant zijn - Hoe echter hoe beter: denk bijvoorbeeld aan ‘quotes’ uit onderzoek, - Visueel! Maak posters
Aan de slag! 15 minuten
Terugkoppeling: Presenteer Persona’s -
Wie Wat Wat Hoe
is de Persona? is zijn / haar doel? zijn de uitdagingen? kan de webshop hem / haar (beter) bedienen?
Voor in het werkcollege
Maak: User scenarios ‘Wat wil de persona bereiken? En hoe doet hij zij dat? Schets verhalen van de gewenste situatie, denk hierbij aan: - Persona (karakter, doelen) - Uitgangspunt (wens doel) - Locatie (en device??) Uitwerking visueel? Of in verhaalvorm? Gebruik de scenario’s voor het bedenken van de taken in de think aloud
Video Pitch
Wat is een video Pitch?
Tip: verzand niet in de editing. De boodschap is belangrijker dan de vorm
Deel je idee / advies in +- 2 minuten. ● ● ●
Kijker: Eigenaar Reload 3D Doel: Overtuig dat jij het beste advies geeft (en ingehuurd wordt) Vorm: eigen keuze
Meer weten? Stage?
[email protected] [email protected]
