72 usability tips voor websites

Meestal start je website met een mooi design. Misschien doe je het zelf of ga je misschien echt voor de professionele aanpak en kies je voor een webbureau dat de kneepjes van het vak kent. Daarna ga je in zee met een SEO bedrijf en ga je de strijd aan met die concurrenten die op de plaats staat in de zoekmachines waar jij liever jouw naam zou willen zien staan.

Allemaal haalbare punten op de agenda mits wat werk en een goed bureau onder de arm maar wat als die contacten nu uitblijven? Wat als er geen producten worden besteld? Wat dan?

Zoek de fout

Stel je hebt een grote online shop, een echte waardige e-commerce website maar ergens schort er iets. Je weet niet wat en je weet niet echt wat je te doen staat. Na wat keywords ingeven merk je toch steeds op dat de positie in de zoekmachines goed is. Waar ligt dan de fout?

Velen willen het nog niet geloven (lees snappen) dat dergelijke zaken in een klein hoekje kan schuilen. Je kan dergelijk probleem eigenlijk een beetje in 5 fasen opdelen. Ik noem het zelf de 5 fasen tot usability awareness:

1. Ontkenning – niet willen toegeven dat er iets mis is
2. Beseffen – na een tijdje hebben ze door dat er iets schort (op voorwaarde dat de content relevant is, de producten goed zijn en de website naar behoren werkt!)
3. Vraag stelling – wat kan ik doen? wat scheelt er aan mijn website?
4. Beslissen – ok, we doen iets anders of we herpakken ons, we pakken de website onder handen
5. Uitvoeren – effectief zaken (laten) aanpassen aan de website

Hier spreek ik nog niet eens van A/B testen en dergelijke maar het gaat hier puur om de klik te maken “hé, er moet iets anders zijn dat niet werkt”. Je zou natuurlijk misschien even de doelgroep van jouw website en SEO campagne even kunnen herzien en keywords wisselen, maar stel dat dit snor zit. Velen houden nogal vast aan hun website en hun design. Het was ok in 2000 maar vandaag de dag misschien niet meer. Een website mag nog grafisch zo mooi zijn als mijn autokoffer vol goud (i wish), als er niet is nagedacht over enkele praktische zaken en de contacten of bestellingen blijven uit, dan moet er actie ondernomen worden.

Er zijn nog teveel mensen die hun design niet durven omgooien, eens echt total loss gaan. Soms hoeft het allemaal niet veel te zijn hoor! Check even hieronder of je ook iets van deze usability tips kan meenemen in jouw webdesign. Misschien krijg je plots een ideetje voor jouw website. De tips zijn zowat een mengeling tussen usability voor de user, vooral praktische tips die je best uitvoert. Een beetje off the rails soms, maar zéér zeker te gebruiken of in het achterhoofd te houden!

Usability tips voor webdesign en focus op je business

1. Maak het logo van jouw bedrijf aanklikbaar en link naar de homepage
2. Kies ervoor links te onderlijnen
3. Stel een kleur in voor al reeds bezochte links
4. Tekst die geen link zijn, onderlijn je best niet. Dat is verwarrend voor de gebruiker
5. Kies een sans-serif lettertype, dat leest het beste op een scherm
6. Stel een achtergrondkleur in voor je website zelfs al gebruik je een achtergrond afbeelding. Bij sommige browsers kan je een achtergrond kleur instellen. Als jouw website dan geen achtergrond kleur heeft ingesteld, dan neemt de browser het kleur van z’n instellingen over. Als dat bijvoorbeeld roze is dan zou jouw website misschien wel eens een vraagteken oproepen bij de gebruikers
7. Kies doordacht de kleuren van jouw design. Blauw staat bijvoorbeeld voor vertrouwen, rood voor gevaar, …
8. Ontwerp voor de meest gebruikte schermresolutie. Vandaag de dag zal dat ongetwijfeld tussen 1024 en 1280px zijn. Een tipje: 1000px breedte vult nét het volledige scherm. Zo haal je het maximum uit je 1024px en ziet de gebruiker met 1280px geen te smalle website
9. Overweeg monochromatic design (design met 1 basiskleur), het is hot en het werkt goed!
10. Gebruik meer duidelijke afbeeldingen dan tekst in je design
11. Werk met een slogan die zegt wat je bedrijf doet
12. Een subslogan is ook altijd leuk voor dat extra tikkeltje verfijning van je business
13. Een traditionele homepage designen met alleen taalkeuzes? Doe je best niet, die tijd is passé
14. Denk goed na wat je waar plaats, plaats je belangrijkste producten of services in de kijker
15. Probeer ook een grafisch element of een catchy slogan te verwerken dat onbewust in het geheugen van de user wordt gegraveerd. Een grafisch element werkt het best, of misschien zelfs een leuke originele productvoorstelling, mensen onthouden alleen de origineelste en beste dingen. “hé heb je ook al die site gezien met ….”
16. Ik hoef er niet bij te vertellen dat je ook best jouw sociale profielen ergens in je design verwerkt en een tell-a-friend functie? (moet ik nog steeds eens doen, dringend)

Usability tips voor teksten en geschreven content

1. Schrijf geen lijnen vol met saaie tekst maar werk in paragrafen
2. Verwerk hier en daar een titel ertussen
3. Deel je content op in duidelijk blokken, users zoeken (screenen) content en willen snel iets vinden. Totale tekstblokken lezen, dat doen ze niet.
4. Verwerk ook korte opsommingen
5. Probeer niet te verwijzen naar stukken op andere pagina’s maar probeer de inhoud in 1 keer duidelijk uit te leggen aan je user (is meestal moeilijk maar toch proberen op te letten)
6. Schrijf geen grote teksten in een schuin lettertype, dat leest héél moeilijk
7. Zet ook je tekst niet in ‘justify’ alignment, dat leest ook niet zo lekker
8. Gebruik gerust wat word-spacing, das leest ietsje vlotter
9. Gebruik gerust een font-size van 10pt, meeste mensen klagen altijd over een te klein lettertype op websites (en neen geen ouwe zakken, maar ook anderen)
10. Wees duidelijk wat over wat je schrijft. Moeilijke woorden zijn fancy maar als je doelgroep die moet opzoeken met een woordenboek heb je er geen reet aan
11. Als je dan toch hier en daar een moeilijk woord wil gebruiken, schrijf de uitleg er zo kort mogelijk tussen haakjes bij en werk niet met sterretjes. De user wil niet zoeken naar de uitleg, die wil het onmiddellijk weten!
12. Als je van plan bent linken te leggen naar andere delen in je tekst, link dan gewoon de tekst en schrijf niet speciaal “klik hier”. Ol’skool is cool maar niet online ;-)
13. Kies voor een professioneel aanpak voor teksten maar wees menselijk, laat gerust eens een leuke twist in de tekst terugkeren, mensen lezen graag unieke  stukjes (lees: gesproken taal). vb: dat kraam op de kermis was vréé wijs
14. Overweeg de ‘u’ vorm of de ‘je’ vorm naargelang de doelgroep en de klanten die je aanspreekt
15. Overdrijf nooit met tekst, wees to-the-point
16. Breek je tekst met relevante images
17. Als er een lange tekst is die kost wat kost op je website moet komen en je wil die opbreken met images, overdrijf dan niet want zo kan de user ook afhaken. Probeer steeds de structuur en verhaallijn te behouden.
18. Laat er gerust eens een leuke quote tussen glippen, dat breekt terug de tekst
19. Kijk eens hoe kranten, magazines en vooral ads het doen

Usability tricks voor images

1. Gebruik liever een groot sprekend beeld dan een A4 blad vol saaie tekst
2. Overdrijf ook niet met afbeeldingen, teveel en te groot is ook niet goed, wees selectief!
3. Images in een tekst maak je best niet te groot, maak een klein fotootje aan en laat die aanklikbaar zijn met een link naar de grote foto
4. Zet geen tekst zoals “klik hier om de foto te vergroten”, leg de link op de foto zelf
5. Als de foto aanklikbaar is, maak dat dan ook duidelijk aan je user. Zorg er zeker voor dat het handje van de cursor werkt als je met de cursor over de afbeelding zoeft.
6. Als gebruikers niet snappen dat je op een afbeelding kan klikken om die te vergroten, probeer dit dan misschien visueel voor te stellen met een voorbeeld
7. Laat de foto vergroten in een Fancybox (gekend onder de term lightbox, deze werkt op iedere browser!) en niet in een nieuwe pagina (ja ik zondig hier ook tegen, i know, maar mijn plugins overschrijven variabelen van elkaar, moet ik dringend bekijken)
8. Schrijf steeds een kort zinnetje bij de afbeelding ter verduidelijking voor jouw doelgroep (ook goed voor de zoekmachines trouwens, vergeet dan ook de alt tag niet hé)
9. Gebruik best een JPG formaat voor een afbeelding, de kwaliteit is beter dan GIF (is trouwens voor vector stuff en niet voor foto’s!) en je bent zeker dat het werkt in iedere browser
10. Wil je een slogan bij een afbeelding plaatsen? Plaats die er dan niet gewoon onder maar verwerk deze iets grafischer in je afbeelding. Dat spreekt meer aan. Vergeet dan niet de alt tag aan te vullen hé!

Usability trucs voor buttons, menu’s en call-to-actions

1. Vermijd ten alletijde de beruchte “klik hier” methodes
2. Denk na over een relevante zin, vb: “Wedden dat je hier vindt wat je zoekt?” of “Wedden dat je hier klikt?”
3. Gebruik ten alletijde een broodkruimelstructuur, wat zowat neerkomt op zeggen waar je user zich bevindt en vanwaar die precies komt. vb: categorie x > product 1 > foto’s. De user bevindt zich dus op de pagina foto’s van product 1 in de categorie x
4. Maak grote buttons met duidelijke tekst of gerichte acties die users snappen
5. Overweeg een JPG als je iets sterk grafisch van plan bent met je buttons, zo laat je cross-browser issues achterwege
6. Leg de nadruk vooral op een handig menu, probeer niet de magische “kijk wat ik kan” toer op te gaan
7. Overweeg in functie van duidelijkheid en gebruiksgemak submenu’s in categorie pagina’s of een menu dat uitklapt
8. Overweeg het aantal klikken, minder klikken is daarom niet altijd beter!
9. Kies doordacht het kleur van je call-to-action buttons (knoppen die uitnodigen om te klikken) ! Misschien kies je hier best een fellere kleur die opvalt tegenover je design. Complementaire kleuren is tha shit!
10. Probeer ook steeds dezelfde vorm buttons aan het houden voor consistentie maar wissel af met kleuren om zo kleuren te koppelen aan bepaalde delen van jouw website of aan producten. Mensen onthouden sneller een kleur dan een naam (als dat tenminste een niet zo evidente naam is)
11. Gebruik relevante icoontjes bij menu’s en call-to-actions
12. Durf zelfs buttons zonder tekst te gebruiken maar alleen als de icoontjes zo klaar zijn als een klontje

Usability tricks voor formulieren

1. Bespreek het doel van jouw formulier met enkele mensen en beslis hoe je het zal aanpakken
2. Ga je voor een klein formulier of ga je voor een groot formulier?
3. Overweeg het invullen van jouw form in stappen op te delen (voor lange formulieren of een bestelproces)
4. Durf gerust velden te schrappen, overbodig velden zijn alleen maar een reden voor de user om het formulier niet in te vullen
5. Laat de user eerst invullen wat echt belangrijk is en dan pas de rest
6. Bij een contactformulier zet je dus misschien best het veld voor de vragen en opmerkingen bovenaan en dan pas de rest van de gegevens zoals naam, adres, …
7. Overweeg een belformulier wat zoveel betekent als “wij bellen u tussen … en …. op het nummer ……”
8. Als je formulier enkel maar dient om een account of iets dergelijks aan te maken met een login en paswoord, gebruik dan gerust grote velden, een groot lettertype en zelfs een grote button. Tumblr is daar een prachtig voorbeeld van!
9. Verberg misschien optionele velden achter een uitschuif systeem (met Jquery), zo lijkt het form kleiner en je hoeft niet alles in te vullen. De drempel is een stuk lager
10. Overweeg een klein formulier op iedere pagina maar overdrijf ook niet, maak er dan een kleintje van hé of overweeg misschien best een mooie call-to-action naar het grote formulier
11. Stuur dezelfde e-mail of bevestiging naar jouw klant, die wil ook effectief weten als het mailtje of de bestelling is aangekomen
12. Sla alles op in een database, dat vergemakkelijkt het tracken van aanvragen en bestellingen

Usability tips voor video

1. Vind het wiel niet opnieuw uit, zet je filmpjes op Youtube want iedereen kent de Youtube player en dit zal vertrouwd overkomen. Zo spaar je trouwens ook een boel hosting uit!
2. Als je meer Franse klanten over de vloer krijgt, kies dan gerust voor Daily Motion als hosting voor jouw video’s
3. Laat je video niet automatisch starten als dat niet nodig is. Mensen zullen wel klikken als ze deze willen zien. Trouwens, mensen klikken bijna altijd een video aan als er eentje op jouw webpagina staat. Tekst verveelt gewoon, weinigen lezen nog tekst. Bovendien bespaar op je zo ook op bandbreedte
4. Gebruik de Lyte Youtube player. Sleep de link in de balk met bookmarks van je browser, surf naar een Youtube video en klik op de bookmark. Daarna plak je de code in jouw pagina en klaar. Maar dit hoort eigenlijk thuis in de snelheid tips voor websites. Neem er eens je tijd voor want er zijn 4 delen!

Tips om Google Maps en routebeschrijvingen duidelijk te laten overkomen

1. Gebruik Google Maps, iedereen kent het en het is gemakkelijk om mee te werken
2. Als je Google Maps gebruikt om de locatie van jouw bedrijf aan te tonen, toon dan a.u.b. een kaartje dat groot genoeg is. Niemand ervaart een meerwaarde van een kaartje dat slechts enkele pixels groot is
3. Kies nooit voor het satelliet beeld, kies steeds voor de map met de wegen op!
4. Kies voor een interactieve kaart zodat users niet moet wegklikken naar Google Maps om meer te weten te komen over jouw ligging (plan ik een reeks posten over te doen – wordt een echte killer)
5. Routebeschrijvingen duidelijk laten overkomen is volgens mij het moeilijkste wat er is. Zoek die daarom even op via Google Maps en kopieer de op jouw website. Beter zal je ze niet kunnen maken, alleszins niet zonder fouten!
6. Overweeg foto’s of extra kaartjes bij moeilijke knooppunten
7. Overweeg icoontjes voor herkenningspunten, bijvoorbeeld een tankstation die je klant op weg naar jouw bedrijf zeker zal tegenkomen. Dan weet die dat hij/zij op de goede baan is
8. Als je genoeg technische skills hebt, probeer dan ook je bedrijfslogo op de map te voorzien, terug een herkenningspunt
9. Zorg ervoor dat de routebeschrijving kan worden geprint

Wees een user, not a designer

Ik kan hier in principe nog wel even doorgaan maar dan zou de usability vooral afzwakken en zou de technische kant overnemen en dat is nu even niet de bedoeling van deze post. Dit is waarschijnlijk nog de beste tip die ik je kan geven: wees een user. Het is cliché, i know maar het werkt! Als je echt het onderste uit de kan wil halen met jouw website, dan moet je handelen als de gebruiker. Niet zozeer denken, wat dat doen ze niet! Handelen!

De kunst hierbij is dat je jouw ideeën en beslissingen qua design en eerder uitgevoerde zaken totaal, maar dan ook totaal uit je bol (lees hoofd) wist en je volledig distantiëren van het technische en grafische aspect. De beste test hé, en nu ga je waarschijnlijk lachen, zet jouw grootmoeder achter de PC en laat ze hun ding doen. Geef ze een stuk taart en een koppie koffie en observeer haar gedrag. Het zal al snel duidelijk worden wat jij zo logisch en overduidelijk vond plots een nachtmerrie wordt voor jouw grootmoeder. Een user moet gestuurd worden, stuur die dan ook goed!