Responsive Design – Dé usability factor van 2013

Usability (gebruiksvriendelijkheid) speelt een belangrijke rol binnen het vak webdesign. Een verbetering van de usability van een website kan resulteren in een explosieve groei van je conversie. Het zo ‘usable’ mogelijk maken van je website is geen eenvoudig proces. Door de komst van verschillende devices en browsers is dit proces de laatste jaren nog ingewikkelder geworden.

Uit onderzoek naar de usability van overheidswebsites door de UT Twente komt het volgende naar boven:

  • 20% van de gebruikers slaagde er niet in om een bepaalde knop op de website te vinden;
  • 30-40% van de gebruikers wist niet succesvol te oriënteren, navigeren of informatie te zoeken binnen de website;
  • 75%(!) van de gebruikers wist via een website een bepaald doel niet te bereiken.

In mijn ogen zijn dit zorgelijke cijfers. Als 30 tot 40 procent van je gebruikers bepaalde informatie of een product niet op jouw website weet te bereiken, dan betekent dat dat er 30 tot 40 procent van de gebruikers niet tot conversie over kan gaan. Niet getreurd. Door de volgende richtlijnen te hanteren zit je een heel eind in de goede richting op het gebied van usability.

Usability in het algemeen

Je wilt je website zo goed mogelijk afstemmen op de persoon die hem daadwerkelijk gaat gebruiken: je bezoeker. Zet de gebruiker dus centraal bij het ontwerpen van een website. Neem daarbij de volgende richtlijnen in overwerging:

  • Kan de bezoeker overal bij, alles gebruiken en alles vinden – Kan iedere pagina door de bezoeker (het liefst via zo min mogelijk klikken) worden bereikt? Is de menu structuur helder voor de bezoeker?
  • Is de website op alle browsers en systemen (mobiel!) toegankelijk? – Responsive design (verderop in dit blog) biedt uitkomst.
  • Is je website geoptimaliseerd voor een visueel, auditief of motorisch beperkte bezoeker? – Google is je belangrijkste ‘visueel beperkte’ bezoeker!
  • Is de website goed vindbaar in de zoekresultaten? – SEO speelt hier een grote rol in, daarover meer in een later blog.

Bovenstaande richtlijnen klinken als een open deur, maar worden lang niet door alle websites gehanteerd. ‘Google is je belangrijkste ‘visueel beperkte’ bezoeker’ vind ik een belangrijke stelling: Het uiterlijk van je website is belangrijk, de techniek die er achter zit (die Google ziet) misschien nog wel veel belangrijker.

Bovenstaande punten zorgen dat je het bereik van je website vergroot, het gebruik(er)sgemak vergroot en je website meer zoekmachine vriendelijk is. Een betere usability is het verhogen van het rendement van je website. Checken hoe toegankelijk jouw website is? Doe dan een W3 validator check.

Responsive design

Door de komst van smartphones en tablets zijn er zo veel schermresoluties ontstaan dat er eigenlijk geen standaardformaat voor een website te definieren is. Toen de smartphone in opkomt was zag ik het aantal websites dat een mobiele website of app introduceerde stijgen. Persoonlijk heb ik niet zoveel met mobiele websites. Het is vaak een versimpelde versie van de normale website waar veel informatie achterwege is gelaten. Een website die dat bekrachtigt is de website van de Hogeschool van Arnhem en Nijmegen:

imac-iphone-hanOp de mobiele website (rechts) is direct zichtbaar dat een groot deel van de content en menustructuur van de ‘normale website’ niet aanwezig is. Alleen algemene zaken zijn op de mobiele website te vinden. Ook is de ‘look-and-feel’ van de normale website nergens op de mobiele website terug te vinden. In mijn ogen een ergenis voor mensen die weten dat bepaalde content op de normale website te vinden is, en het vervolgens niet op de mobiele website kunnen vinden.

Een steeds meer terugkomende term is responsive design. 2013 wordt door sommigen al het jaar van responsive design genoemd. Responsive design is een combinatie van ontwerp en nieuwe techniek (HTML5 en CSS3) dat er voor zorgt dat je website op ieder device optimaal wordt weergeven. De bezoeker krijgt, ongeacht het device waarmee hij je website bezoekt, altijd dezelfde (volledige) content. Een voorbeeld hiervan is de website van Faktor 22:

 

imac-iphone-f22Tip: Je kunt op je Mac of PC zelf zien of een website responsive is. Maak je browser venster breder en smaller met behulp van de balk aan de rechterzijde. Een responsive website zal zich telkens aan de breedte van je scherm aanpassen.

Het voordeel van responsive design is dat je altijd volledige content hebt, ongeacht het device. Ook zit je als beheerder niet met dubbele content voor verschillende versies. Ook hoef je grafische aanpassingen maar één keer door te voeren, en niet op de verschillende versies van je website.

In mijn ogen gaat responsive design het in 2013 helemaal worden. Ik zie het belang en de toekomst van responsive design in en het verbaasd me dat veel (online georiënteerdeorganisaties nog niet responsive zijn. Wordt eind 2013 vervolgd…

Afbeelding: CapetownDailyPhoto