Website testen

Er zijn verschillende testen waar je je website aan wilt onderwerpen. Een overzicht van website testen die ik meestal tijdens projecten uitvoer.

Visuele hiërarchie met blurtest

Je website dient een goede visuele hiërarchie te hebben. Dit helpt je gebruiker te vinden wat hij het meest nodig heeft. Een onduidelijke visuele hiërarchie is verwarrend en gebruiksonvriendelijk. Een goede manier om de visuele hiërarchie te testen is de blurtest.

Voor het uitvoeren van een blurtest heb je een image editor nodig (bijvoorbeeld Pixelmator of Photoshop).

Om de blurtest uit te voeren:

  1. Maak een screenshot van de pagina die je wilt testen.
  2. Maak de screenshot zwart/wit.
  3. Voeg een Gaussian Blur van 5px toe.
  4. Test of de belangrijkste onderdelen nog steeds goed zichtbaar zijn.
voorbeeld blurtest website
Voorbeeld website blurtest: links het origineel, rechts zwart/wit en 5px blur.

Zo niet, verbeter de visuele hiërarchie van deze onderdelen en voer de blurtest nogmaals uit. En ga net zolang door totdat de visuele hiërarchie op orde is.

Overigens is er ook een quick-and-dirty manier. Knijp je ogen samen en kijk door je wimpers naar de website. Dan kun je ook zien of de visuele hiërarchie op orde is. Deze ‘blurtest’ is vooral handig tijdens het ontwerpproces. De blurtest met het maken van een screenshot is vooral zinvol als je deze wilt laten zien aan derden, bijvoorbeeld een bespreking met je klant.

Browsertest

Hiervoor gebruik ik bijna altijd BrowserstackMeer informatie over website testen met Browserstack op browserstack.com.. Hiermee kan ik het ontwerp testen op browsers en devices (telefoons, tablets etc.) die ik niet zelf in bezit heb.

Het testen van een website doe ik standaard op de volgende browsers en devices:

besturingssysteem OS X iOS Windows Android
 versie/type device El Capitan iPad Air 2 10 tablets
 browser type en versie Safari 9.1 Safari IE 11 Galaxy Tab 4
Chrome 51 Firefox 46
Chrome 51

Versie tabel: 27 juli 2016.