Gebruiksvriendelijk ontwerpen: gebruik je gebruikers

Presentatie over: "Gebruiksvriendelijk ontwerpen: gebruik je gebruikers"— Transcript van de presentatie:

1 Gebruiksvriendelijk ontwerpen: gebruik je gebruikers
David Geerts 13 september 2004

2 Usability “The extent to which a product can be used by specified users to achieve specified goals with effectiveness, efficiency and satisfaction in a specified context of use” (ISO ) Effectief Doet de toepassing wat de gebruiker wil? Efficiënt Bereikt de gebruiker snel en eenvoudig zijn doel? Is de toepassing eenvoudig te leren? Tevredenheid Worden foute handelingen eenvoudig opgelost? Is de toepassing aantrekkelijk? In functie van de doelgroep, doelstellingen en gebruikscontext! Resultaat van User-centred of Usability Design Niet zomaar volgen van checklists

3

4 Usability versus esthetiek?
Websites zijn (meestal) geen kunst Kunst vereist geen functionele interactie, website wel Een gebruiksvriendelijke website vereist: Efficiënte interactie Aantrekkelijke vorm Mooiere websites worden als makkelijker en betrouwbaarder ervaren Is usability belangrijker dan esthetiek? "Form follows function - that has been misunderstood. Form and function should be one, joined in a spiritual union“ (Frank Lloyd Wright, architect)

5

6

7 Waarom aan usability design doen?
Ontwikkeling: Kosten besparen Minder ontwikkelingskosten Minder ontwikkelingstijd Minder onderhoudskosten Minder redesign kosten Verkoop: inkomsten verhogen Meer aankopen/transacties Meer product verkoop Meer bezoekers Klanten behouden Meer klanten aantrekken Marktaandeel verhogen Gebruik: efficiëntie verhogen Succesratio verhogen Fouten van gebruikers verminderen Productiviteit verhogen Tevredenheid van gebruikers verhogen Jobtevredenheid verhogen Gebruiksgemak verhogen Leercurve verkleinen Vertrouwen in systeem verhogen Minder onderhoudskosten Minder trainingskosten Bron: AM+A (2002)

8 Usability Design Proces
Analyse Gebruikersanalyse Taakanalyse Ontwerp Informatiearchitectuur Navigatie-ontwerp Maquettes Prototypes Iteratief! Evaluatie

9 Usability Design Proces
Uitgevoerd door één of meer usability designers Kennis van diverse methodes Goed contact met gebruikers In samenwerking met Gebruikers Ontwikkelaars (technisch en grafisch) Marketing, HR, training, documentatie, … Vereist goede planning Niet zomaar “even testen”

10 Usability Design Proces
Analyse Gebruikersanalyse Taakanalyse Ontwerp Informatiearchitectuur Navigatie-ontwerp Maquettes Prototypes Iteratief! Evaluatie

11 Gebruikersanalyse: vragen
Wie zijn mijn gebruikers? (doelgroep en context) Persoonlijke kenmerken Leeftijd, opleiding, beroep, inkomen, handicaps, … Soort internetgebruik en ervaring Gemakzuchtig, snelheidsduivel, krachtgebruiker, … Technische mogelijkheden Browserversies, resolutie, plug-ins, platform, verbindingssnelheid, … Opgelet: de ontwerper of opdrachtgever  gebruiker Wat willen de gebruikers van mijn site? (doelstelling) Ontspanning, leren, informatie, interactie, … Wat hebben de gebruikers nodig? Producten, besprekingen, handleidingen, forum, …

12 Gebruikersanalyse: methodes
Scenario’s Hoe zal mijn website worden gebruikt? In welke context zal dit gebeuren? (profiel en omgeving) Verzonnen scenario’s (als startpunt -> evalueren met gebruikers) Scenario’s van concrete gebruikers (“personas”) Vragenlijsten laten invullen Voor algemene richtlijnen Interviews Concreter, geen beïnvloeding, mogelijk beperkt, tijdsintensief Focusgroepen Concreet, uitgebreider, mogelijke beïnvloeding, tijdsbesparend

13 Usability Design Proces
Analyse Gebruikersanalyse Taakanalyse Ontwerp Informatiearchitectuur Navigatie-ontwerp Maquettes Prototypes Iteratief! Evaluatie

14 Taakanalyse: vragen Wat zullen gebruikers doen op mijn site?
Product aankopen, onderwerp leren, informatie opzoeken, … Taken onderverdelen Vb. E-commerce Product zoeken Product kopen Winkelkarretje, VISA-nummer, bevestiging, … Vb. Filmbesprekingen Nieuwste films opvragen Lijstje aanleggen van favoriete films Zelf filmbespreking schrijven en toevoegen Vanuit standpunt van de gebruiker, niet van de toepassing!

15 Taakanalyse: methodes
Scenario’s Zie gebruikersanalyse, maar: taakgericht Gebruik flowcharts Handig om workflow te optimaliseren Hiërarchische taakanalyse Deel hoofdtaken op in subtaken Beschrijf elke taak zo gedetailleerd mogelijk Voor zover je hier nog controle over hebt Evalueer deze taken met gebruikers Interviews, focusgroepen, “think aloud”-methode Zie later: prototypes Voorzie mogelijke “fouten” Voorkom ze of geef een duidelijke foutmelding Vb. verplichte velden van formulier niet ingevuld

16 Usability Design Proces
Analyse Gebruikersanalyse Taakanalyse Ontwerp Informatiearchitectuur Navigatie-ontwerp Maquettes Prototypes Iteratief! Evaluatie

17 Informatiearchitectuur
Wat is informatiearchitectuur? Structuur en organisatie van de inhoud Opdelen inhoud in categorieën Navigatiestructuur Boomstructuur, lineair, webstructuur, …

18 Informatiearchitectuur: methodes
Categorieën opstellen Op basis van taken, soort gebruiker, onderwerp, bedrijfsstructuur, systematiek, … Top-down design: eerst hoofdcategorieën Bottom-up design: eerst alle onderdelen Site-maps en flowcharts opstellen Kaartsorteren Open kaartsorteren enkel de onderdelen labelen, gebruikers sorteren en labelen categorieën, eventueel verder onderverdelen Gesloten kaartsorteren Onderdelen en categorieën reeds labelen

19 Usability Design Proces
Analyse Gebruikersanalyse Taakanalyse Ontwerp Informatiearchitectuur Navigatie-ontwerp Maquettes Prototypes Iteratief! Evaluatie

20 Navigatie-ontwerp Navigatiemethodes
Navigatiemethode hangt af van soort taak en gebruiker Vb. “satisficing” (niet altijd efficiënt!) Gebruiker kiest eerste link die past bij behoefte Als dit niet past, dan zoekt hij verder Dé beste navigatie bestaat niet Basisvragen van een gebruiker Waar ben ik? Waar kom ik vandaan? Waar kan ik naartoe?

21 Navigatie-ontwerp Topologie Breedte versus diepte Boomstructuur
meest gebruikt, snelle navigatie Lineair enkel voor procedures, kort houden! Web snelle navigatie, enkel voor kleine (deel)sites Best combinatie van topologieën Breedte versus diepte Diepte: weinig hoofdcategorieën, meer subcat. Lang navigatiepad, slecht overzicht Breedte: veel hoofdcategorieën, minder subcat. Meer items “scannen”, goed overzicht, kort navigatiepad Best max. 16 breed en max. 3 diep

22 Usability Design Proces
Analyse Gebruikersanalyse Taakanalyse Ontwerp Informatiearchitectuur Navigatie-ontwerp Maquettes Prototypes Iteratief! Evaluatie

23 Maquettes Schets van een webpagina Statische weergave van de webpagina
Van ruwe schets tot gedetailleerder uitgewerkt Laten evalueren door gebruikers Voordelen Visuele weergave van de webpagina Vergemakkelijkt evaluatie, demonstratie en aanpassingen Vermindert risico’s en ontwikkelingstijd Nadelen Geen interactiviteit

24 Usability Design Proces
Analyse Gebruikersanalyse Taakanalyse Ontwerp Informatiearchitectuur Navigatie-ontwerp Maquettes Prototypes Iteratief! Evaluatie

25 Prototypes Meerdere opeenvolgende pagina’s
Storyboard Opeenvolgende maquettes Wireframe Werkende pagina’s zonder layout High-end prototypes Werkende pagina’s met layout en alle functionaliteit Eén navigatiepad volledig uitgewerkt Taakgericht Laten evalueren door gebruikers

26 Usability Design Proces
Analyse Gebruikersanalyse Taakanalyse Ontwerp Informatiearchitectuur Navigatie-ontwerp Maquettes Prototypes Iteratief! Evaluatie

27 Evaluatie: methodes Door experts Heuristische evaluatie
Evaluatie met richtlijnen Met gebruikers Enquêtes Gebruikerstesten Usability lab Natuurlijke testomgeving

28 http://www.mediacentrum.be/ http://opleidingen.mediacentrum.be
Zijn er nog vragen?