Rapprt audit: www.vrbeeld.be Scre per nderdeel 1. Hardware en sftware 5/10 50% 2. Accessibility 25/35 71% 3. User experience 30/30 100% 4. Navigatie 45/52 87% 5. Hme page 35/43 81% 6. Paginalay- ut 17/31 55% 7. Tekstlay- ut 30/46 65% 8. Schrijven vr het web 16/28 57% 9. Lijsten 17/21 81% 10. Hfding, titels en labels 16/21 76% 11. Links 22/49 45% 12. Online frmulieren 32/56 57% 13. Grafieken, afbeeldingen en multimedia 11/15 73% 14. Inhudelijke rganisatie 9/9 100% 15. Zekfunctie - - 16. Privacy en security 3/3 100% 17. e- Cmmerce - - 18. Mbiele website 1/1 100% Ttale scre = 70% Certificaat behaald (De minimale scre vr het tekennen van een certificaat is 70%) Steekpref De audit die we uitveren gebeurt niet p de vlledige website. Op vrhand wrdt een steekpref van 25 pagina s bepaald. Hierbij selecteren we in de eerste plaats de hmepage en de pagina s achter elk item in de hfdnavigatie. De steekpref wrdt vervlgens verder aangevuld met pagina s die infrmatie f functinaliteiten bevatten die belangrijk zijn m mee te nemen in de audit (bv. invulfrmulieren, tabellen, vide, etc.). Onderstaande pagina s werden pgenmen in de steekpref: 1. http://www.vrbeeld.be 2. http://www.vrbeeld.be/1 3. http://www.vrbeeld.be/2 4. http://www.vrbeeld.be/3 5. http://www.vrbeeld.be/4 6. http://www.vrbeeld.be/5 7. http://www.vrbeeld.be/6 8. http://www.vrbeeld.be/7 9. http://www.vrbeeld.be/8 10. http://www.vrbeeld.be/9 11. http://www.vrbeeld.be/10
12. http://www.vrbeeld.be/11 13. http://www.vrbeeld.be/12 14. http://www.vrbeeld.be/13 15. http://www.vrbeeld.be/14 16. http://www.vrbeeld.be/15 17. http://www.vrbeeld.be/16 18. http://www.vrbeeld.be/17 19. http://www.vrbeeld.be/18 20. http://www.vrbeeld.be/19 21. http://www.vrbeeld.be/20 22. http://www.vrbeeld.be/21 23. http://www.vrbeeld.be/22 24. http://www.vrbeeld.be/23 25. http://www.vrbeeld.be/24 Aanbevelingen Hardware en sftware Niet elke bezeker van uw website maakt gebruik van dezelfde webbrwser (bv. Firefx, Chrme, Internet Explrer, etc.). Ga daarm na f uw website vlledig tegankelijk, bruikbaar en leesbaar is via de webbrwsers die het vaakst gebruikt wrden dr uw delpubliek. Ga zeker na f: alle tekst zichtbaar en leesbaar is; tabellen en afbeeldingen crrect wrden weergegeven; alle functinaliteiten van de website (bv. autmatische futmeldingen bij het invullen van een nline frmulier) crrect werken. Betrkken pagina s: 5: Firefx: de labels van het frmulier wrden niet crrect weergegeven. Niet elke bezeker van uw website maakt gebruik van hetzelfde besturingssysteem (bv. Windws, Mac OS X, Linux, etc.). Ga daarm na f de website vlledig tegankelijk, bruikbaar en leesbaar is via de besturingssystemen die het vaakst gebruikt wrden dr uw delpubliek. Ga zeker na f: alle tekst zichtbaar en leesbaar is; tabellen en afbeeldingen crrect wrden weergegeven; en alle functinaliteiten van de website (bv. autmatische futmeldingen bij het invullen van een nline frmulier) crrect werken. Hu bij het testen van uw website p Windws k rekening met de verschillende versies van dit besturingssysteem (Windws 8, Windws 7, Windws Vista, etc.). Test uw website zeker uit p Windws XP. Hewel dit een sterk veruderde versie is, wrdt het ng steeds dr een grte grep mensen gebruikt. Betrkken pagina s: Windws XP/Windws Vista: de tekst van de navigatiebalk is nvldende leesbaar.
Paginalay- ut Het is belangrijk m vldende stil te staan bij de lengte van een webpagina. Krte pagina s vergemakkelijken het scannen van de pagina en geven gebruikers een duidelijk verzicht. Hu daarm de hmepage, navigatiepagina s en pagina s met grte grafieken krt. Bij vrkeur niet langer dan 1 schermlengte (rekening hudend met de schermresluties die het vaakst gebruikt wrden dr uw delpubliek). Betrkken pagina s: 1: De hmepage is te lang. Wanneer een webpagina meer infrmatie bevat dan wat er p de eerste schermlengte te zien is (meer infrmatie belw the fld), verschijnt er rechts van de webpagina een scrll- balk. Echter, gebruikers merken deze vaak niet p. Daarm is het belangrijk dat het vr een gebruiker meteen duidelijk is dat de infrmatie die hij te zien krijgt niet vlledig is (bv. mdat afbeeldingen f tekst nderaan wrdt afgekapt). Te veel witruimte f een grte afbeelding die bijna de hele eerste schermlengte inneemt kunnen een gebruiker nterecht het idee geven dat er verder geen infrmatie meer beschikbaar is. Betrkken pagina s: 1, 2, 3, 5, 6, 8, 14, 15, 16, 22, 23, 24: Er wrdt te veel witruimte vrzien, waardr het lijkt alsf er geen infrmatie meer belw the fld zit. Een crrect gebruik van witruimte verhgt de scanbaarheid van een webpagina. Maak daarm gebruik van witruimte m elementen (bv. knppen) te greperen en de paragrafen in een tekst te nderscheiden van elkaar. Pas wel p vr teveel witruimte. Dat zrgt immers vr nndig scrllen. Betrkken pagina s: 1, 3, 22, 25: Te veel witruimte zrgt vr nndig scrllen. Tekst lay- ut Veel mensen ndervinden meilijkheden bij het lezen van tekst p een scherm. Zrg daarm vr vldende cntrast tussen de tekst en de achtergrnd. Vr bdytekst is een cntrastrati van 5:1 aan te raden. Vr grtere tekst (minimaal 18pt f 14pt bld) is een cntrastrati van 3:1 vldende. Vermijd te allen tijde de vlgende cmbinaties: Blauw en zwart; Lichte kleuren en wit; Rd en gren; Rd en blauw; Rd en zwart. Betrkken pagina s: Bv. 1, 2: wit p blauw (navigatie) Bv. 1, 12, 20: ranje p wit, gren p wit Veel mensen ndervinden meilijkheden bij het lezen van tekst p een scherm. Zrg daarm vr vldende cntrast tussen de tekst en de achtergrnd. Een niet- egale achtergrnd (bv. met een afbeelding f een afleidend patrn) kan de leesbaarheid verminderen. Vermijd dus een drukke achtergrnd f afbeelding achter de tekst p uw website.
Betrkken pagina s: 2, 3, 4, 5, 6, 7, 8, 10, 11, 21, 22, 25 Veel mensen ndervinden meilijkheden bij het lezen van tekst p een scherm. Een ptie m de tekst p een webpagina te vergrten kan helpen. Zrg er daarm vr dat alle tekst tt 150% schaalbaar is. Het schalen van de tekst mag geen verlap verrzaken tussen de verschillende elementen van de webpagina. Betrkken pagina s: 3 Schrijven vr het web Een gebruiker wil kunnen inschatten he accuraat de infrmatie is die wrdt aangebden p uw website. Het internet bevat immers heel wat veruderde en achterhaalde infrmatie. Laat bezekers daarm steeds weten wanneer de infrmatie p uw website vr het laatst werd geüpdatet. Vrzie p elke pagina met infrmatie de datum van de laatste update. Indien uw website nieuws en/f andere tijdsafhankelijke infrmatie bevat, veg dan zeker de publicatiedatum en (indien mgelijk) het uur van publiceren te. Betrkken pagina s: alle pagina s Bezekers van uw website die nieuw zijn binnen uw vakgebied, zijn vaak niet bekend met gangbare acrniemen en afkrtingen. Leg daarm duidelijk uit wat acrniemen en afkrtingen precies betekenen. Hu er k rekening mee dat niet alle bezekers via de hmepage p uw website terechtkmen. De betekenis van acrniemen en afkrtingen met dus vanp elke pagina duidelijk zijn. Betrkken pagina s: 2 (bv. CRM) 20 (bv. SEO, SEA) Links Hyperlinks in een tekst meten ged te herkennen zijn. Het met vr een gebruiker in één gpslag duidelijk zijn waar hij kan klikken, znder dat hij met gkken f de muis ver de pagina heft te bewegen m hyperlinks te ntdekken. Het gebruik van kleur is een eerste stap in de gede richting. Dit is echter niet vldende. Geef tekstuele hyperlinks een aparte kleur én nderlijn ze. Z kunnen k mensen met kleurenblindheid de hyperlinks herkennen. Betrkken pagina s: alle pagina s Het met vr een gebruiker in één gpslag duidelijk zijn waar hij wel en niet kan klikken. Vermijd daarm elementen (zwel tekstlinks als afbeeldingen) p de website die er aanklikbaar uitzien, maar het tch niet zijn. Dit kan een gebruiker verwarren en leidt uiteindelijk tt frustratie. Betrkken pagina s: 2: de ft s van de teamleden zien er aanklikbaar uit. De navigatiestructuur van een website is vaak niet vr elke gebruiker even duidelijk. Dr hem feedback te geven rnd reeds uitgeverde acties kan u
vrkmen dat een gebruiker binnen de website in een kringetje blijven rnd navigeren. Geef daarm hyperlinks die reeds bezcht werden autmatisch een andere kleur. Geef niet- bezchte hyperlinks een levendige kleur en bezchte hyperlinks eerder een dffe kleur. Let p: dit geldt niet vr de links in een (navigatie)menu. Betrkken pagina s: alle pagina s Een gebruiker wil steeds weten wat hij kan verwachten bij het klikken p een hyperlink. Wanneer hij p vrhand ged weet wat er zal gebeuren kan hij beter inschatten f dat echt is wat hij wil. In de meeste gevallen zal een gebruiker verwachten dat een hyperlink hem naar een andere pagina van de website brengt. Wanneer de hyperlink echter een andere website, een e- mailbericht, een audi- f videbestand f een andere applicatie pent, laat dat dan duidelijk weten aan de gebruiker. De linktekst met dit duidelijk maken. Betrkken pagina s: 1 (link naar een externe website) 3 (grafische link naar een externe website) Wanneer de linktekst van een hyperlink en de titel p de bestemmingspagina waar de hyperlink naar verwijst vereenkmen, geeft dat een gebruiker duidelijk de feedback dat hij de gewenste pagina bereikt heeft. Een grt verschil tussen beiden kan een gebruiker verwarren. Zrg er daarm steeds vr dat de linktekst van een hyperlink en de titel p de bestemmingspagina hetzelfde zijn. Betrkken pagina s: bv. "schrijf je in" en Onze wrkshps Cnsistentie is één van de belangrijkste begrippen binnen web usability. Het zrgt vr een betruwbare uitstraling en helpt gebruikers sneller te begrijpen he een website in elkaar zit. Wees daarm cnsistent in het bepalen van linkteksten. Hyperlinks met eenzelfde del (bv. het cntactfrmulier) krijgen steeds dezelfde linktekst (bv. cntact ). Betrkken pagina s: Bv. Geef ns dan een seintje, cntact Online frmulieren Bij het invullen van een nline frmulier met het vr een gebruiker duidelijk zijn wat hij waar dient in te vullen. Elk invulveld met vrzien zijn van een duidelijk label. Onduidelijke labels kunnen een gebruiker verwarren. Let p: plaats het label niet in het invulveld zelf. In dat geval kan een gebruiker achteraf niet meer nagaan f hij de juiste infrmatie in het juiste invulveld geplaatst heeft. Betrkken pagina s: 5
Bij het invullen van een nline frmulier met het vr elke gebruiker duidelijk zijn wat hij waar dient in te vullen, k vr gebruikers die gebruik maken van assistieve technlgie. Zrg er daarm vr dat het k in de HTML- cde duidelijk is welk label bij welk invulveld hrt. Z kan een screen reader bij elk invulveld het label crrect vrlezen. Vrzie het vlgende in de brncde: unieke id- attributen vr invulvelden, en een labelelement (<label>) vr elk label. Zrg ervr dat in elk labelelement de waarde van het fr- attribuut dezelfde is als het id- attribuut van het bijhrende invulveld. Betrkken pagina s: 5 Bij het invullen van een nline frmulier met het vr een gebruiker duidelijk zijn wat verplicht is m in te vullen. Tenzij alle velden ptineel zijn, met duidelijk aangegeven zijn welke velden verplicht zijn en welke niet. Het plaatsen van een asterisk (*) naast de verplichte velden is een gede ptie. Het is dan wel ndzakelijk m p de pagina te vermelde dat * betekent dat een veld verplicht is. Betrkken pagina s: 5 Gebruikers maken nu eenmaal futen bij het invullen van een nline frmulier. Wanneer een inverfut gedetecteerd wrdt, geef dan p een crrecte manier feedback aan de gebruiker. Een gede futmelding: legt p een beleefde manier uit wat er mis is (bv. Dit e- mail adres bestaat jammer geneg niet. ); duidt aan waar de fut zich bevindt; en geeft aan wat een gebruiker kan den m het prbleem p te lssen (bv. Gelieve een bestaand e- mail adres in te vullen. ). Vr de plaatsing van de futmelding zijn er twee mgelijke pties: Markeer de invulvelden die een fut bevatten (via kleur f een icntje) en vrzie een verzicht van alle futmeldingen (in tekst!) bvenaan de pagina. Markeer de invulvelden die een fut bevatten (via kleur f een icntje) en vrzie vr elke fut een uitleg (in tekst!) naast het betrkken invulveld. Betrkken pagina s: 5 (bv. de verwrding kan kunnen iets beleefder en er wrdt niet uitgelegd he het prbleem pgelst kan wrden) U- CERT is een nafhankelijke certificatie- rganisatie die ntstaan is vanuit de nderzeksgrep CUO Scial Spaces, iminds - KU Leuven (http://www.kuleuven.be/cu/). De rganisatie streeft naar meer gebruiksvriendelijke websites. U- CERT ndersteunt k websitebuwers via wrkshps waar de belangrijkste UX- richtlijnen wrden vrgesteld en besprken.