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.
De tekst indeze 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 jewebsite responsive
Je website moet vlot bruikbaar
zijn op tablets en smartphones.
4.
+12% internetverkeer ismobiel
In België komt 12 tot 15% van het
internetverkeer van mobiele toestellen.
5.
Hoe mobiel ismobiel?
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 isbelangrijk.
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.
2. Carrousels horenthuis op de kermis
Carrousels of slideshows nemen vooral
veel plaats in. Ze dragen zelden iets bij.
12.
Bewegende beelden opeen 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 dedenwe een AB-test.
In het origineel: een carrousel met 4 sliders.
14.
In de varianthebben 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 2devariant 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 decarrousel door ingangen naar de 6 populairste
categorieën van de site.
Resultaat? 188% meer kliks.
18.
Het is danook pijnlijk om te zien dat 44% van de nieuwe of
grondig vernieuwde websites een carrousel heeft.
19.
Niets nieuws onderde zon…
Vooral omdat het geen nieuw fenomeen is. Al in 2002
schreven we dit in ons Belgian Web Usability Report.
20.
Maar wat moetje 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 ooktof 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 metde deur in huis
Je bezoekers komen niet voor je
topbalk maar voor de inhoud van
een pagina.
23.
Kijk hoe weinigplaats de topbalk van Apple inneemt.
Waardoor de focus van bezoekers meteen op het product ligt.
24.
Ook bij Amazonis de topbalk vrij smal en gaat alle aandacht
naar het product.
25.
Apple
Amazon
Bij Partool druktde grote topbalk de inhoud naar beneden.
De groene pijlen duiden aan waar bij Apple en Amazon de
paginatitel staat.
26.
Apple
Amazon
Op deze websitepalmt 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 zieje door de standaard opengeklapte navigatie
amper nog het aanbod. Handig. Not!
28.
Apple
Amazon
Zo'n topbalk kanook voor verwarring zorgen, bijvoorbeeld
als op de pagina van een wandeling een 'sfeerfoto' verschijnt
van professionele wielrenners…
29.
4. Kies eenvlot leesbare tekengrootte
Hoe je het ook draait of keert,
uiteindelijk moeten mensen lezen.
30.
Een voldoende grotetekengrootte is
dus belangrijk. En ik weet dat pixels
weinig zeggen maar het is een
indicatie.
31.
Ik denk dathet wel duidelijk is wat
het vlotst leest.
Heb echt geen schrik van een te
grote tekengrootte.
32.
5. Geen doodlopendestraatjes
Elke detailpagina van je website
moet bezoekers aansporen om
iets te doen.
33.
Op deze detailpaginaspringt 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'smoet 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 goedidee: je knop helemaal verwerken in je
lay-out en huisstijl waardoor hij nauwelijks opvalt.
6. Zorg vooreen goede error 404-pagina
Vang verloren gelopen
bezoekers op een vriendelijke en
efficiënte manier op.
39.
1 op 4nieuwe websites heeft dus nog steeds geen
gepersonaliseerde error 404-pagina.
40.
De meeste vandie gepersonaliseerde 404-pagina's zijn eigenlijk
wel best zielig.
Ze helpen de bezoeker niet verder. Alweer een gemiste kans.
41.
Oké, een uitwegnaar 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 nootkan geen kwaad,
maar je moet wel zien dat je je
bezoeker een uitweg biedt.
44.
Hopelijk kom ikvolgend 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 vanDelhaize staat nog steeds online.
Zoeken naar 'ei' levert 'madeleines' en zelfs een 'beige panty'
op. Niet meteen wat ik zocht.
48.
Of wat dachtje van een 'lege geurverspreider' als je zoekt naar
prei?
49.
Nog zo'n mooieis 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 opje website.
Toch vreemd dat wanneer je zoekt naar een
kantoor in '9000'…