Praktische tips om van je website een goede, gebruiksvriendelijke website te maken. De tips zijn gebaseerd op problemen die vaak voorkomen in recent gemaakte websites.
2. De tekst in deze grijze vlakken zijn toelichtingen
bij de slides. Ik hoop dat iedereen zo het verhaal
begrijpt.
Deze presentatie is een onderdeel van mijn
keynote bij de uitreiking van de 5de Usability
Awards.
3. 1. Maak je website responsive
Je website moet vlot bruikbaar
zijn op tablets en smartphones.
4. +12% internetverkeer is mobiel
In België komt 12 tot 15% van het
internetverkeer van mobiele toestellen.
5. Hoe mobiel is mobiel?
Opgelet: maar in 1 op 4 gevallen is dat toestel
een smartphone. Smartphones zijn goed voor
ongeveer 2,5% van het internetverkeer.
6. Ja, responsive is belangrijk.
Maar omdat het maar om 2,5% van het verkeer
gaat, is het geen uitsluitingsregel geweest voor
de jury.
En het is zeker niet zo dat omdat een website
responsive is, ze ook gebruiksvriendelijk is.
11. 2. Carrousels horen thuis op de kermis
Carrousels of slideshows nemen vooral
veel plaats in. Ze dragen zelden iets bij.
12. Bewegende beelden op een website. Als dat het
geheel niet dynamisch maakt, weet ik het ook niet
Maar welk effect heeft zo'n carrousel op de conversie?
13. Bij Suzuki deden we een AB-test.
In het origineel: een carrousel met 4 sliders.
14. In de variant hebben we sliders vervangen door 4 statische
beelden met exact dezelfde inhoud als de carrousel.
Resultaat? 28% meer kliks en 4% minder bounces.
15. In een 2de variant hielden we maar 2 keuzes over, met name de
meest en minst aangeklikte beelden uit de slider.
Resultaat: 55% meer kliks! Lees de volledige case.
16. Nog een voorbeeld. Op deze website staan in de carrousel 13
slides. Allemaal van producten.
17. Wij vervingen de carrousel door ingangen naar de 6 populairste
categorieën van de site.
Resultaat? 188% meer kliks.
18. Het is dan ook pijnlijk om te zien dat 44% van de nieuwe of
grondig vernieuwde websites een carrousel heeft.
19. Niets nieuws onder de zon…
Vooral omdat het geen nieuw fenomeen is. Al in 2002
schreven we dit in ons Belgian Web Usability Report.
20. Maar wat moet je dan wel op de homepage zetten?
Een goed idee is vaak om de toptaken waarvoor je
bezoekers naar je website komen, centraal te zetten.
Geef het volk wat het volk vraagt. Het klinkt ordinair
maar websites die dat doen zijn vaak erg succesvol.
21. Wat bezoekers ook tof vinden, is dat de homepage rechtstreeks
toegang biedt tot de belangrijkste productgroepen.
Minder sexy dan een carrousel maar wel 100x beter en efficiënter.
22. 3. Val met de deur in huis
Je bezoekers komen niet voor je
topbalk maar voor de inhoud van
een pagina.
23. Kijk hoe weinig plaats de topbalk van Apple inneemt.
Waardoor de focus van bezoekers meteen op het product ligt.
24. Ook bij Amazon is de topbalk vrij smal en gaat alle aandacht
naar het product.
25. Apple
Amazon
Bij Partool drukt de grote topbalk de inhoud naar beneden.
De groene pijlen duiden aan waar bij Apple en Amazon de
paginatitel staat.
26. Apple
Amazon
Op deze website palmt de topbalk meer dan de helft van het
scherm in. En moet je als bezoeker zoeken naar het eigenlijke
begin van de pagina…
27. Apple
Amazon
Bij Bulo zie je door de standaard opengeklapte navigatie
amper nog het aanbod. Handig. Not!
28. Apple
Amazon
Zo'n topbalk kan ook voor verwarring zorgen, bijvoorbeeld
als op de pagina van een wandeling een 'sfeerfoto' verschijnt
van professionele wielrenners…
29. 4. Kies een vlot leesbare tekengrootte
Hoe je het ook draait of keert,
uiteindelijk moeten mensen lezen.
30. Een voldoende grote tekengrootte is
dus belangrijk. En ik weet dat pixels
weinig zeggen maar het is een
indicatie.
31. Ik denk dat het wel duidelijk is wat
het vlotst leest.
Heb echt geen schrik van een te
grote tekengrootte.
32. 5. Geen doodlopende straatjes
Elke detailpagina van je website
moet bezoekers aansporen om
iets te doen.
33. Op deze detailpagina springt 1 knop in het oog. Jammer
genoeg is het een 'Read more' die alleen wat extra info
doet openklappen. Een gemiste kans.
34. Op lange pagina's moet zeker ook
onderaan een call-to-action staan.
Mensen die tot op het einde van je
pagina lezen, zijn vaak erg
geïnteresseerd in je aanbod…
35. Like, tweet, share… Allemaal goed en wel, maar is dat
echt wat je op deze pagina wil dat je bezoekers doen?
36. Ook geen goed idee: je knop helemaal verwerken in je
lay-out en huisstijl waardoor hij nauwelijks opvalt.
38. 6. Zorg voor een goede error 404-pagina
Vang verloren gelopen
bezoekers op een vriendelijke en
efficiënte manier op.
39. 1 op 4 nieuwe websites heeft dus nog steeds geen
gepersonaliseerde error 404-pagina.
40. De meeste van die gepersonaliseerde 404-pagina's zijn eigenlijk
wel best zielig.
Ze helpen de bezoeker niet verder. Alweer een gemiste kans.
41. Oké, een uitweg naar de homepage en het telefoonnummer
van de klantendienst.
Al twijfel ik of veel surfers gaan bellen…
42. Een beetje droog, maar een link naar de homepage en
een zoekfunctie zijn best handig.
43. Een frivole noot kan geen kwaad,
maar je moet wel zien dat je je
bezoeker een uitweg biedt.
44. Hopelijk kom ik volgend jaar meer van deze
404-pagina's tegen. Leuk en nuttig tegelijk.
Zo hoort het.
45. 7. Doe normaal. Dat is al erg genoeg.
Doe op je eigen website niets waaraan
je je ergert op andere websites.
En kijk alles grondig na!
46. Ik weet het: dit is er eentje uit de oude doos.
Maar dit voorbeeld toont duidelijk aan:
controleer alles!
47. Deze webshop van Delhaize staat nog steeds online.
Zoeken naar 'ei' levert 'madeleines' en zelfs een 'beige panty'
op. Niet meteen wat ik zocht.
48. Of wat dacht je van een 'lege geurverspreider' als je zoekt naar
prei?
49. Nog zo'n mooie is deze slimme zoekfunctie van de Belgische
Senaat.
Als je zoek naar 'lid commissie' suggereert hij synoniemen als
'lul', 'penis, 'dupe' of 'roede'. Niet meteen een hulp…
50. Test alles op je website.
Toch vreemd dat wanneer je zoekt naar een
kantoor in '9000'…