Website Ontwikkelingsmethodolgie

Website
Ontwikkelingsmethodolgie
Testing
Claudia Eeckhout
Testing
Appearance | Usability |Readability |Accuracy
Creating
Create Master Document | Select Images | Key Pages
Organizing
Hierarchical, Linear, Grid, Webbed
Planning
Target Audience | Content | Content and Site Maintenance
Website Ontwikkelingsmethodolgie
Publishing | Maintaining
Inhoud
Waarom testen?
Wanneer testen
 Wat testen

•Types testen
•Test technieken
•Prioriteitsstelling
•Usability
Website Ontwikkelingsmethodolgie

Waarom testing?
•website ontwerp <> modder
•klanttevredenheid speelt enorm
belangrijke rol! doelpubliek => slechte
ervaring =>kwijt als klant / als
reclamemakers
meer nog: ze gaan anderen gaan waarschuwen voor je
slechte site)
Website Ontwikkelingsmethodolgie
"People will gladly waste a million of dollars on
their fancy design and not spend $4.000 to
see if it works"
Waarom testing?
Website Ontwikkelingsmethodolgie
Tijd = belangrijk
=>snel testen en zo tijd sparen
zelfs voor de implementatie
interessante feedback
 Testen uitstellen tot het laatste moment
kan tot rampen leiden

Waarom testing?

Vaak: testing = vervelend
Niet-testen
= soms desastreus
(broken links,
spelfout,
verkeerde tarifering…)
Ontwikkeling = cyclisch proces
=> testen ook!!! (regressietesten)
 Ultieme aanvaarding: ligt bij gebruiker
Website Ontwikkelingsmethodolgie


Wanneer? Parallel met het
ontwikkelproces
Website Ontwikkelingsmethodolgie
Test design & planning
 Unit testing
 Integration testing
 System testing

Unit testing
Gebruik checklist (cf labo)
Gebruik tools (dreamweaver,
http://www.nils.org.au/ais/
http://www.chrispederick.com/work/fir
efox/webdeveloper/ …)
Website Ontwikkelingsmethodolgie
Ook wel module test genoemd.
Het testen in dit stadium is op een
geïsoleerde unit (single page, werking
form, …)
Per pagina (alvorens upload!)
Website Ontwikkelingsmethodolgie
Gebruik een checklist
Unit testing
Elke component (pagina, sectie van de site) wordt afzonderlijk getest.
HTML
Correcte HTML syntax
Op Tucows vind je allerlei validatietools
(ook vb. http://validator.w3.org)
Links
Link checking kan soms ook al gebeuren, meestal moet dit wachten tot
verschillende units van een site zijn geïntegreerd
Interactieve
Unit testing voor interactieve pagina's is een stuk moeilijker:
pagina's
vb. als een bepaald veld alleen positieve getallen mag aanvaarden, moet
dit worden getest; maar ook moet er gekeken worden wat er gebeurt met
negatieve getallen of letters. (geautomatiseerd testen is soms wel
mogelijk, maar dit wordt best manueel nagekeken -- waar mogelijk).
Website Ontwikkelingsmethodolgie
Unittesting
Inhoudstesting
Nalezen op spel- en grammaticafouten
Accuraatheid van informatie
(voor betere leesbaarheid: print pagina's om ze na te lezen)
Copyright
Eventueel vraag je raad aan een advocaat gespecialiseerd in deze
voorkeursmaterie
http://www.advocaat.be
Fotomateriaal
Kleuren
Website Ontwikkelingsmethodolgie
Spelling
Accessibility testing
opm: Merendeel van de helmpjes zijn waarschuwingen en je moet nog
manueel gaan checken
http://www.bbc.co.uk/education/betsie/in
verse/about.html (screenreader BBC)
 http://www.rnib.org.uk/digital/how.htm

Website Ontwikkelingsmethodolgie
http://www.waller.co.uk/access.htm
 http://www.w3.org/TR/WAIWEBCONTENT/
 http://www.cast.org/bobby - checkt
specifieke pagina’s

Accessibility testing
http://www.vischeck.com/vischeckURL.php3
kleurenblind-simulatie
 http://www.lighthouse.org/color_contrast.htm
tips bij ontwerpen
 http://www.wave.webaim.org/index.jsp
Wave, simulatie van een text to voice reader.
 http://euroaccessibility.org/faq.php
promotie van accessibility in Europe.
deadline eerste resultaten: 2005
in elk Europees land zal consulting desk
websites certifieren
Website Ontwikkelingsmethodolgie

Wave
Website Ontwikkelingsmethodolgie
Vb kleurenblind
Deuteranope simulation of http://www.google.com.
Website Ontwikkelingsmethodolgie

Vb Accessibility
Health
 Education
 Welfare
 Community

Sites met
deze topics:
MUST!!!!!
Website Ontwikkelingsmethodolgie
http://www.helptheaged.org.uk (vb enlarge)
 http://www.genk.be (vb enlarge)
 http://www.macromedia.com/macromedia/a
ccessibility/ (ook Flash!)
 http://www.deafblind.com (vb bobby ea)

Integration testing = Integratietesten
Website Ontwikkelingsmethodolgie
samenvoegen van verschillende units
moet één geheel vormen
Er kunnen bijvoorbeeld conflicten
optreden als verschillende units apart
werden ontwikkeld.
=>Geen overbodige luxe om bij integreren
van units te testen of integratie
naadloos verloopt.
Integratietesten
Zijn er geen subtiele afwijkingen tussen de verschillende pagina's te
Consistensie
bemerken eenmaal de verschillende delen werden geïntegreerd?
Vb. font size, foutmeldingen, layout, ..
Integratietesting zorgt ervoor dat de volledige site 'samen'werkt
Links
Zie boven, verschillende linkcheckers zijn beschikbaar
Website Ontwikkelingsmethodolgie
Integratietesten
System testing
browsertesting
 configuratietesting
 delivery testing


Cf ook Live site testing
Website Ontwikkelingsmethodolgie
Wanneer het geheel is afgewerkt, kan je
de site als werkend geheel gaan
beginnen testen.
Verschillende types system testing:
Vb system testing
Check of
crossbrowser features daadwerkelijk werken.
Verschillende
Testen op alle mogelijke browsers hoeft niet; enkel op die van je target(s)
browsers
(afh. van doelpubliek)
Browsereigenschappen (frames niet door alle browsers, specifieke
elementen als <marquee>, etc.)
Scripts
Usersettings
Probeer je scripts ook uit op verschillende platformen
Pas ook usersettings aan vb geen scripting, geen img, andere kleuren,
Basis
Bookmarken, resizen van pagina's, printen
browsergebruik
Hoe ziet de layout er uit in extreme condities (zware resize => 'snaptest')
Website Ontwikkelingsmethodolgie
Browsertesting
Vb system testing
Eindgebruikers
omgeving
Systeemaspecten zoals processor power, schijfsnelheden, OS kunnen
website gebruik op substantiële wijze beïnvloeden.
Website Ontwikkelingsmethodolgie
Configuratie testen
Vb system testing
Test m.b.v. lowspeed connectie op piekmomenten of de pagina's op een
Downloadtijd
aanvaardbare snelheid inladen (stopwatch)
Duid aan welke pagina's aanzienlijk trager inladen
Website Ontwikkelingsmethodolgie
Delivery testing
Stadium
Paper mockups/prototype

Wire frames

Beta testing op (live) site
Paper prototype
Wat wanneer
Website Ontwikkelingsmethodolgie

Prioriteitsstelling: gewogen meting
Website Ontwikkelingsmethodolgie
Testing Need
Aim
Complexity
(0-3)
3
2
0
(1-3)
1
3
-
1
3
2
3
2
9
3
3
3
3
3
1
3
1
9
3
9
3
Client side Compatibility
Platform
Browsers
Settings, Preferences
Printers
3
3
1
1
1
2
2
1
3
6
2
1
Performance
Connection speed
Load
Stress
Continuous use
3
2
2
3
3
3
3
3
9
6
6
9
Security
General Security
1
3
3
Functionality
Links
Forms
Cookies
Indexing
Programming Language
Dynamic Interface Components
Usability
Navigation
Graphics
Content
General Appearance
3
6
0
Server side Interface
Server Interface
External Interface
Testvormen
Kwalitatief
Walkthroughs & inspections
 Heuristic evaluation


Kwantitatief: cijfermatige feedback
Bestede tijd aan zoekacties of nodige
muisclicks voor doel bereikt
 handig als vergelijkingsmateriaal, maar
doel = inzicht

Website Ontwikkelingsmethodolgie

Kwalitatieve testtechnieken
Walkthrough


is een review process waarbij een designer
één of meerdere mensen door (een deel
van) het design of de code, gaat loodsen
die hij/zij heeft geschreven.
Heuristic evaluation

is de wat meer formele variant
Website Ontwikkelingsmethodolgie

Heuristic Evaluations
Onafhankelijke check naar conformiteit met
usability principes (“heuristics”)
 Verschillende evaluatoren zullen
verschillende problemen identificeren


Live site of paper prototype
Website Ontwikkelingsmethodolgie
Ontwikkeld door Jakob Nielsen
 Een beperkte set (3 a 5) inspecteren de
UI

Heuristic Evaluation
Hoe:
http://www.useit.com/papers/heuristic/he
uristic_evaluation.html

Aside 
http://www.stcsig.org/usability/resources/
infants.html
Website Ontwikkelingsmethodolgie

10 Classic Heuristics
Visibility of system status
Match between system and the real world
User control and freedom
Consistency and standards
Error prevention
Recognition rather than recall
Flexibility and efficiency of use
Aesthetic and minimalist design
Help users recognize, diagnose, and recover
from errors
10. Help and documentation
Website Ontwikkelingsmethodolgie
1.
2.
3.
4.
5.
6.
7.
8.
9.
Voorbeeld probleemstelling
Typographical mix van upper/lower case,
bold, italic and fonts
Schendt “Consistency and standards” (H4)
 Vertraagt gebruikers
 (Wordt waarschijnlijk niet ontdekt door
usertesting)
 Fix: één formaat voor volledige interface

Website Ontwikkelingsmethodolgie

Regressietesting
Website Ontwikkelingsmethodolgie
Bedoeling: problemen
Het opnieuw testen van gecorrigeerde
aspecten heet gebruikelijkerwijze:
regressie testing.
Testing


Testen => problemen
Prioriteiten stellen bij oplossen
Severity Ratings: Gebruikt om nodige resources te
alloceren
Combinatie van



frequentie
impact
Wordt door verschillende evaluators gedaan en dan
uitgemiddeld
0 - not a usability problem
1 - cosmetic problem
2 - minor usability problem
3 - major usability problem; important to fix
4 - usability catastrophe; imperative to fix

http://macfadden.mit.edu:9500/webgroup/project.html
Website Ontwikkelingsmethodolgie


Prioriteitsstelling
Testen kost geld en
tijd.
=>Focus duidelijk op
prioriteiten.
 handig hulpmiddel:
test priority sheet.
 Severity Ratings
Website Ontwikkelingsmethodolgie

Gebruikerstesten: uiteindelijke
aanvaarding ligt bij de gebruiker
Website Ontwikkelingsmethodolgie
Inhoud:
Website Ontwikkelingsmethodolgie
Wat, waarom en hoe van
gebruikerstesten
 Informele vs gestructureerde testing
technieken
 Doel: interesse
=>experimenteren
(in labo!)

Wat niet?
Surveys laten niet zien waarom en waar
mensen problemen hebben met je site:
enkel dat ze het vb moeilijk vinden om te
gebruiken
 Voorbeeld van een survey: proxis

Website Ontwikkelingsmethodolgie
Niet: link testing of code testen… (cf
voorgaande)
 Niet: Online survey
=> geen echte “test”

Survey
Waarom?
Website Ontwikkelingsmethodolgie
Data + team heel kritische mensen ->
testen gewoon overslaan?
 Demonstraties?
 Zelftesten heel nuttig + tijdbesparend
(voorbereiding) MAAR nood aan detail
van user tests

Wat ben je aan het testen?
Checken of gebruiker specifieke informatie
kan verzamelen
 Checken of gebruiker specifieke taak kan
uitvoeren (vb een aankoop proces van
begin tot einde)

Website Ontwikkelingsmethodolgie
=> Specifieke usability evaluatie
Gebruikelijk redenen om te gaan testen:
Wat?
= uitpikken van enkele belangrijke taken
(functionaliteiten) en op een of ander
manier observeren hoe testpersonen de
taken trachten uit te voeren
(navigational) Stress test
Vrije vorm review
Website Ontwikkelingsmethodolgie
Empirische data
Checklists (+observatie)
Scenario’s
Kwalitatieve testtechnieken
usability checklist: zeer goedkoop om
te implementeren
geen universeel toepasbare checklist
 beste resultaten: focus op gelimiteerd (6 a
10) aantal specifieke vragen en criteria


In combinatie met observatie!!
Website Ontwikkelingsmethodolgie

Usability checklist suggesties
In combinatie met observatie
Website Ontwikkelingsmethodolgie
Duidelijke communicatie
 Straalt de site uit voor wie de site bedoeld is?
 Gebruikt het aangepast taalgebruik
 Toegankelijkheid
 ...

Kwantitatieve testtechnieken:
empirische testen
Website Ontwikkelingsmethodolgie
Testtechnieken
Stress test (Keith Instone)
Website Ontwikkelingsmethodolgie

Website Ontwikkelingsmethodolgie
Testtechnieken
Vrije-vorm review

gaat je info verschaffen over browsing
gebeuren. (zegt al iets over
gebruiksvriendelijkheid maar lang niet
alles)
De bedoeling is dat de gebruiker vrij
rondsurft en dan luidop denkt
Website Ontwikkelingsmethodolgie

Testtechnieken
Website Ontwikkelingsmethodolgie
Scenario’s

Tips
Website Ontwikkelingsmethodolgie
Bij schrijven van scenario's =>
gebruikers niet ‘leiden’
 Testgebruikers op hun gemak stellen,
niet afleiden
 Gebruik als nota's screenshots waar je
kan op krabbelen
 Let naast wat testpubliek zegt ook op
zijn / haar lichaamstaal

Waarom?
Website Ontwikkelingsmethodolgie
Niet noodzakelijk hap zijn uit geld en
tijdsbudget
-> Low-cost testing

Complexiteit testsetting
Website Ontwikkelingsmethodolgie
Mini-testen (+- 15 min) =
opportunistische testen
 Planning (+- 1 h) testen
quick en dirty
 Bij testen van 1 dag gebruik je een
ruimte als lab-voor-één-dag.

User Testing
Website Ontwikkelingsmethodolgie
Complexiteit testsetting
Tests mbv video

(vaak gebruikt bij testen van traditionele
software, …)
Hulpmiddel screen-sharing software
(ingewikkelder)
 MS, Sun: echte labo's enkel voor
testing


($!) sound proof, met camera's,
microfoontjes en 2-zijdige spiegels
Website Ontwikkelingsmethodolgie

Complexiteit testsetting
Website Ontwikkelingsmethodolgie
>> http://www.microsoft.com/usability/tour.htm
http://www.usability.serco.com/services/testingfacilities.htm
User Testing
Website Ontwikkelingsmethodolgie
Website Ontwikkelingsmethodolgie
Minimalistisch “lab”
Website Ontwikkelingsmethodolgie
Aantal testpersonen
Webmonkey, CNET, All things web, …
=> kleine testgroep is voldoende
grootste deel van problemen + snelle evaluatie
mogelijk

Jacob Nielsen:
Beste resultaten van tests met niet meer dan 5
gebruikers
 beter veel kleine testen dan 1 hele uitgebreide

Website Ontwikkelingsmethodolgie

Curve
Website Ontwikkelingsmethodolgie
Curve
Website Ontwikkelingsmethodolgie
Zonder gebruikers: geen inzichten
1 gebruiker: bijna 1/3
2e gebruiker: al wat overlap met 1
3e gebruiker: veel overlap =>klein aandeel
nieuwe gegevens
Bij meer en meer gebruikers, leer je minder
en minder bij
Na de 5e gebruiker: eigenlijk tijd aan het
verliezen
Iteratieve testen
met 15 gebruikers: alle problemen
 beter
om (beperkte) budget te spreiden
over verschillende kleine tests
 na
1e test met 5 gebruikers: 85% van
zwakke punten.
 opnieuw

gaan testen (regressietesten)
als garantie + kwaliteitscheck van 1e studie
Website Ontwikkelingsmethodolgie
 pas
Waarom niet 1 gebruiker testen?
Grafiek: veel info van 1 gebruiker
(dus: 15 * 1 gebruiker?)
=> zekere diversiteit in gebruikersgedrag
nodig (idiosyncratische benadering)
Nielsen: inzicht wat uniek en wat
generaliseerbaar vanaf 3 gebruikers
 Kosten-baten toont aan dat je best
werkt met 3 a 5 gebruikers.

Website Ontwikkelingsmethodolgie

Wanneer meer gebruikers
testen?

Meer dan 5 mensen uitnodigen: typisch dat
er mensen niet komen opdagen…
Website Ontwikkelingsmethodolgie
meerdere specifieke doelgroepen
 3-4 gebruikers van elke categorie bij 2
groepen
 3 gebruikers bij het testen van 3 of meer
groepen (steeds min. 3 )
 zekere overlap (mensen)

Waar vind je je testpersonen?
Website Ontwikkelingsmethodolgie
Waar vind je je testpersonen?
Het selecteren van ‘konijnen’ kan vb
door gebruik te maken van listserv, ...

Gebruik maken van bestaande
verenigingen (“web-oma’s”)
Website Ontwikkelingsmethodolgie

Hoe een usability test uitvoeren?
drie grote delen:
plannen, doen en opvolgen
Website Ontwikkelingsmethodolgie

Plannen
Doel en doelpubliek van je site

Doelstelling naar gebruiksvriendelijkheid

Taken

Deelnemers, betaling

Materialen

Setting

… kunnen leven met kritiek
Website Ontwikkelingsmethodolgie

Doen
introductie naar deelnemers

duidelijk maken: user feedback
beantwoordt aan een 3-tal criteria:
specifiek
 eerlijk
 gericht op oplossingen


Test
Website Ontwikkelingsmethodolgie

Debrief en betaling testpersonen
Debrief
Korte
vragenlijst om de
gebruikerstevredenheid te meten
Site structuur: kunnen ze een structuur
tekenen?

Betaling
Bedanking,
betaling of Cadootje
Website Ontwikkelingsmethodolgie

Follow-up
Nood aan highlights:
"the site must ship' (duidelijke prioriteiten)
 Opvallend positief
 Opvallend negatief


(+ ook eventuele aanbevelingen voor
volgende testings)
Website Ontwikkelingsmethodolgie
Bevindingen + aanbevelingen +
toekomstige acties
 Rapport

User Testing
Website Ontwikkelingsmethodolgie
Cf Labo: tools gebruiken
Website Ontwikkelingsmethodolgie
User Testing
fotomateriaal uit: Keith Instone: “How to
Test Usability” - Web Design World 99,
July 21, 1999
Website Ontwikkelingsmethodolgie
