Over welke links gaat het?
Eender welke tekstlink. Dus niet over knoppen, prentjes, banners etc.
De 5 basisregels van aanklikbaarheid
Maak duidelijk wat aanklikbaar is. Surfers willen niet zelf uitzoeken wat een link is en wat niet.
Veel websites gaan hier de mist in. Daarom nog even de basisregels van de aanklikbaarheid op een rijtje.
1. Onderlijn tekstlinks
Onderlijnde woorden vallen meteen op. Zo speel je meteen ook in op het vluchtige leesgedrag op het web.
2. Zet links in een goed leesbare, felle kleur
Door je link in een andere kleur te zetten dan je tekst, valt hij nog meer op.
De standaardkleur voor links is blauw en dat blijft de beste keuze. Kies gerust een andere kleur, maar zorg er dan wel voor dat het een goed leesbare kleur is die duidelijk verschilt van je normale tekstkleur.
Een andere kleur alleen is niet voldoende. Onderlijnen moet ook. Vooral voor surfers met een visuele beperking is dat belangrijk.
3. Gebruik verschillende kleuren voor bezochte en niet-bezochte links
Dat links naar bezochte pagina’s een andere kleur hebben dan niet-bezochte, is een webstandaard. Als je je bezoekers niet wil ergeren, volg je die regel best. Het is geen toeval dat websites als Google, eBay, … deze regel volgen.
Mensen weten graag welke pagina’s ze al bezocht hebben en welke niet. Het is erg vervelend om tijdens een zoektocht op een website op een link te klikken, om dan vast te stellen dat je die pagina al bekeken hebt.
De standaardkleur voor bezochte links is paars. Opnieuw: kies gerust een andere kleur. Maar zorg er dan wel voor dat het een goed leesbare kleur is die doffer is dan je kleur voor links. Bezochte links mogen iets minder opvallen dan niet-bezochte links.
4. Wees consistent in je kleurgebruik
Om de gebruiker niet te verwarren, gebruik je op heel je site best één kleur voor bezochte links en één kleur voor niet-bezochte links.
Gebruik deze kleur alleen voor links. Zet dus geen titels of subtitels in je linkkleur.
5. Onderlijn alleen tekstlinks
Omdat mensen gewend zijn dat links onderlijnd zijn, verwachten ze ook dat alles wat onderlijnd is een link is.
Verwar je bezoekers niet en onderlijn geen tekst die geen link is.
Toon interactie en geef instant feedback
Dat is een fundamenteel UX principe. En het is ook erg belangrijk bij links. Je gebruikers willen meteen zien of hun klik geregistreerd is. In dit artikel leggen we uit hoe je interactie toont en instant feedback geeft.
Uitzonderingen
Er zijn een aantal uitzonderingen op deze regels.
Navigatie
Links in de navigatie moeten niet in kleur staan of onderlijnd worden. De plaats en vormgeving moet duidelijk maken dat het om de navigatie gaat.
Bij navigatie-items dient het kleurverschil om aan te geven wat de rubriek is waar de bezoeker zich bevindt, niet om te laten zien waar hij al op geklikt heeft.
Links in lijstjes
Bij lijstjes, waar je allemaal links onder elkaar zet, zet je de links best wel in de linkkleur maar onderlijn je ze beter niet. De opeenstapeling van lijntjes zorgt voor een soort tralie-effect dat de leesbaarheid niet echt bevordert.
Wil je extra duidelijk maken dat het een lijstje links is? Gebruik dan geen bolletjes of streepjes als opsommingstekens maar pijltjes of zelfs groter-dan-tekens. Geen grotere klikmagneet dan iets wat op een pijltje lijkt.
Een link in een lijstje onderlijnen wanneer de gebruiker er met zijn muis overkomt, mag wel.
Call-to-action links
Heb je een aantal links op een pagina staan, maar is er eentje de call-to-action en wil je dat die eruit springt?
Zet die link dan in een andere kleur dan je gewone linkkleur.
Of maak er gewoon een knop van in plaats van een tekstlink. Dat kan natuurlijk ook.
Goed dat jullie weer terug zijn met verse blogs.
Ik heb nog wel een tip:
Als je een tekstlink hebt staan in een kadertje. Zorg dan dat het gehele kader klikbaar is en niet alleen de tekst.
Dit geldt alleen als het kadertje maar één link bevat en niet te groot is.
@Cowboy Tim
Absoluut gelijk. Blokjes met daarin 1 link zijn best in hun geheel aanklikbaar.
@ Karl,
Tekstlinks die verwijzen naar een externe site. Adviseer je deze dan te openen in hetzelfde venster of in een nieuw tabblad.
Ik heb wel eens gelezen dat je het juist in hetzelfde venster moet doen, omdat mensen liever op de backbutton drukken om terug te gaan naar de site waar ze waren.
En ik heb gelezen dat je juist een nieuw tabblad moet laten openen. Omdat zo je eigen website nog open blijft staan in de browser. Want als mensen wat interessants zien op de nieuwe externe site, dan zijn ze de website waar ze vandaan kwamen al snel vergeten. Maar omdat deze nog open staat is dit een geheugensteuntje wanneer de externe site weggeklikt wordt.
@ Cowboy Tim
Altijd openen in hetzelfde venster. (In de Westerse wereld toch.) Daar zijn de meeste usabilitymensen het is intussen over eens.
De volledige verklaring waarom dat het beste is, is voer voor een volgend artikel.
Interessant artikel.
PS: Jullie “Lees zeker ook” lijstje heeft ook last van het tralie-effect 😉
@Bart
I know. Proberen binnenkort eens wat verbeteringen te doen…
Dat mensen teksten niet lezen, maar scannen, zie je goed aan deze tekst.
Onder Onderlijn tekstlinks en Zet links in een goed leesbare, felle kleur staat 2 keer dezelfde kader, maar niemand maakt een opmerking. Gelukkig ben ik geen mens. 😉
Een andere kleur aanbieden voor linkjes mag altijd, er staan geen doodstraffen op, maar het is niet het beste advies.
Blauw is echt wel de beste kleur. Het is een de facto standaard, de meeste websites gebruiken immers die kleur voor hun links en dit al bijna 20 jaar.
Dat ook respecteren op je eigen website, heeft voordelen:
* Je hergebruikt kennis die mensen al eerder hebben vergaard
* Mensen moeten zich niet aanpassen aan de nieuwe of uitzonderlijke situatie
* Verlaagt de cognitieve belasting
* Versnelt de vorming van een mentaal model
* Zorgt voor een betere ondersteuning bij het ‘scannen’.
* …
Natuurlijk mag je hier soms van afwijken (menu’s, geen goed contrast tussen voor- en achtergrond, voor je call to action, …), maar laat die afwijking niet de norm worden.
@Edwin
Blijkbaar scan jij zo snel dat je het nog amper lezen kunt noemen.
De afbeeldingen zijn wel degelijk verschillend: in de eerste prent is de onderlijnde tekst zwart, in de tweede blauw.
Wat zei je ook weer over de cognitieve waarde van blauw en dat die kleur zo veel beter inspeelt op het ‘scannen’?
Haha Karl, wat een diss voor Edwin.
@AGConsult:disqus Hoe staat het intussen met de “klik hier”-formulering voor links? Niet op zichzelf, maar in de vorm van bvb “Klik hier om een gratis proefrit aan te vragen” (versus “Vraag een gratis proefrit aan”).
Goede vraag.
Jammer genoeg geen duidelijk antwoord. ‘Klik hier om’ werkt soms beter, soms niet.
Als knop werkt de korte versie meestal beter, als link – tot mijn eigen ergernis- vaak wel de langere versie. Toch zeker op websites waar de bezoekers niet de meest hippe/techie mensen zijn.
Ideaal om te AB-testen dus…
Dat hadden wij ook al gemerkt, helaas… 😉