Gebruiksvriendelijk ontwerpen: gebruik je gebruikers

David Geerts13 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 kunstKunst 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 verhogenMeer aankopen/transacties

Meer product verkoop

Meer bezoekers

Klanten behouden

Meer klanten aantrekken

Marktaandeel verhogen

Gebruik: efficiëntie verhogenSuccesratio verhogenFouten van gebruikers verminderenProductiviteit verhogenTevredenheid van gebruikers verhogenJobtevredenheid verhogenGebruiksgemak verhogenLeercurve verkleinenVertrouwen in systeem verhogenMinder onderhoudskostenMinder trainingskosten

Bron: AM+A (2002)

Usability Design ProcesAnalyse

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 ProcesAnalyse

Gebruikersanalyse

Taakanalyse

Ontwerp

Informatiearchitectuur

Navigatie-ontwerp

Maquettes

Prototypes

Iteratief!

Evaluatie

Gebruikersanalyse: vragenWie 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: methodesScenario’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 invullenVoor algemene richtlijnen

InterviewsConcreter, geen beïnvloeding, mogelijk beperkt, tijdsintensief

FocusgroepenConcreet, uitgebreider, mogelijke beïnvloeding, tijdsbesparend

Usability Design ProcesAnalyse

Gebruikersanalyse

Taakanalyse

Ontwerp

Informatiearchitectuur

Navigatie-ontwerp

Maquettes

Prototypes

Iteratief!

Evaluatie

Taakanalyse: vragenWat zullen gebruikers doen op mijn site?

Product aankopen, onderwerp leren, informatie opzoeken, …

Taken onderverdelenVb. 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: methodesScenario’s

Zie gebruikersanalyse, maar: taakgerichtGebruik flowcharts Handig om workflow te optimaliseren

Hiërarchische taakanalyseDeel hoofdtaken op in subtakenBeschrijf elke taak zo gedetailleerd mogelijk Voor zover je hier nog controle over hebt

Evalueer deze taken met gebruikersInterviews, focusgroepen, “think aloud”-methodeZie later: prototypes

Voorzie mogelijke “fouten”Voorkom ze of geef een duidelijke foutmelding Vb. verplichte velden van formulier niet ingevuld

Usability Design ProcesAnalyse

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 ProcesAnalyse

Gebruikersanalyse

Taakanalyse

Ontwerp

Informatiearchitectuur

Navigatie-ontwerp

Maquettes

Prototypes

Iteratief!

Evaluatie

Navigatie-ontwerpNavigatiemethodes

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-ontwerpTopologie

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 diepteDiepte: 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 ProcesAnalyse

Gebruikersanalyse

Taakanalyse

Ontwerp

Informatiearchitectuur

Navigatie-ontwerp

Maquettes

Prototypes

Iteratief!

Evaluatie

MaquettesSchets 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 ProcesAnalyse

Gebruikersanalyse

Taakanalyse

Ontwerp

Informatiearchitectuur

Navigatie-ontwerp

Maquettes

Prototypes

Iteratief!

Evaluatie

Prototypes

Meerdere opeenvolgende pagina’sStoryboard Opeenvolgende maquettes

Wireframe Werkende pagina’s zonder layout

High-end prototypes Werkende pagina’s met layout en alle functionaliteit

Eén navigatiepad volledig uitgewerktTaakgericht

Laten evalueren door gebruikers

Usability Design ProcesAnalyse

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

Zijn er nog vragen?

http://www.mediacentrum.be/

http://opleidingen.mediacentrum.be