gebruiksvriendelijk ontwerpen: gebruik je gebruikers david geerts 13 september 2004
TRANSCRIPT
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