Gebruiksvriendelijk ontwerpen: gebruik je gebruikers David Geerts 13 september 2004

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 9241-11) 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

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)

http://www.mca.com.au/

http://www.plama.art.pl/

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)

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

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”

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

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, …

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

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

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!

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

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

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

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

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

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?

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

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

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

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

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

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

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

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