Blog

Marijn Kortstra

Marijn Kortstra

30 mei 2016 Tips voor content

5 tips voor betere hyperlinks

5 tips voor betere hyperlinks

Je kent ze wel: 'Klik hier', 'meer informatie', 'lees verder' en ga zo maar door. Waarschijnlijk lees je iedere dag dit soort (hyper)links. En er bestaat een grote kans dat deze links ook te vinden zijn op jouw website.

Hyperlinks zijn cruciaal voor iedere website. Via deze links surfen de bezoekers namelijk op het internet.

Heldere en herkenbare links zijn daarom een must en vergroten de kans dat een bezoeker verder klikt op je website. Tijd dus voor 5 tips voor betere hyperlinks.


Altijd onderstrepen

Om te beginnen moeten links altijd onderstreept zijn. Op deze manier onderscheiden links zich op een gemakkelijke manier van de rest van de tekst.

Door alle jaren heen zijn bezoekers inmiddels ook gewend aan het feit dat links onderstreept zijn. Zij herkennen de link daardoor sneller (1). Kortom: door de links te onderstrepen maak je het de bezoeker gemakkelijker om jouw website te begrijpen.

Het is daarbij wel belangrijk dat je geen andere woorden in de tekst onderstreept. Anders kan dit weer verward worden met een link en wordt je bezoeker teleurgesteld als hij erop klikt.

Uitzondering

Op iedere regel is er een uitzondering, in dit geval zelfs twee. Links hoeven niet onderstreept te worden bij:

  • het menu van de website
  • andere lijsten met links

Omdat deze elementen (menu, lijsten) van de content zijn afgezonderd, weten bezoekers dat zij hier op kunnen klikken. Het onderstrepen van de links voor extra herkenning is daarom niet nodig.


Nadat onze link mooi is onderstreept gaan we ons buigen over de kleur. Links moeten altijd een kleur hebben met een duidelijk contrast tegenover de rest van de tekst.

In principe kun je iedere kleur kiezen. Als je geen voorkeur hebt, dan kun je het beste een blauwtint gebruiken.

Blauw wordt namelijk het snelst herkent als een link (2). Dit heeft een logische reden: de uitvinder van de internet (Tim Berners-Lee) heeft blauw in 1989 als standaard kleur gekozen (3) (4). Ook hier zijn mensen dus aan gewend.

De juiste kleur voor kleurenblindheid

1 op de 12 mannen is kleurenblind, tegenover 1 op de 250 vrouwen. De meeste kleurenblindheid bevindt zich in het rode en groene spectrum (5). Een relatief grote groep dus, waar zeker rekening mee moet worden gehouden.

Kleurenblindheid test1 op de 12 mannelijke bezoekers kan een of meerdere van de getallen (7, 13, 16, 8, 12, 9) in dit plaatje niet zien.

In tegenstelling tot het rode en groene spectrum, komt kleurenblindheid in het blauwe spectrum nauwelijks voor (6). En zelfs wanneer iemand kleurenblind is in het blauwe spectrum, kan hij of zij deze kleur vaak wel onderscheiden van andere kleuren. Je raadt het al: ook voor bezoekers met kleurenblindheid is blauw dus de juiste keuze.

Geen blauw? Altijd onderstrepen!

Mocht je toch kiezen voor een andere kleur dan blauw, bijvoorbeeld omdat het beter in je huisstijl past, zorg er dan in elk geval voor dat de link onderstreept is (tip #1). Op deze manier kunnen bezoekers met kleurenblindheid de link toch herkennen.

Kleurenblindheid testEen simulatie hoe iemand met kleurenblindheid rode, niet onderstreepte, links ziet op de website van kelloggs.nl.

Een voorbeeld om bovenstaande te illustreren. Op de website van Kelloggs valt de rode link voor iemand met kleurenblindheid compleet weg. De rode kleur verandert dan namelijk in een grijstint. Omdat de link niet is onderstreept en de rest van de tekst ook zwart is, kan de link niet meer worden herkend. Voor een kleurenblinde bezoeker is website van Kelloggs dus niet goed bruikbaar.

Fun fact: 41 tinten blauw

Waar menig vrouw enthousiast werd van 50 tinten grijs, voelt Google meer voor 41 tinten blauw. Zij hebben bezoekers tijdens een onderzoek verschillende tinten blauw voorgeschoteld om te testen welke kleur het beste werkt (7). Hierbij zaten ook een aantal tinten blauw die richting groen en rood gingen. Uit de test bleek dat gewoon helder blauw - niet te groen, niet te rood - het beste werkt (8).


Waar ga ik heen?

Een link moet de bezoeker een duidelijk beeld geven over waar hij naartoe navigeert. Waarschijnlijk ken je het zelf ook. Je klikt op een link en plots kom je op een plek die je niet verwacht. Misschien opent er opeens een PDF, of nog erger, een totaal andere website.

Bezoekers die scannend lezen

Uit een recent eyetracking onderzoek blijkt daarnaast dat bezoekers die een tekst scannend lezen, daarbij vooral letten op hyperlinks (9). Een link valt namelijk op en geeft meestal een duidelijk beeld van de informatie uit een alinea. Des te meer reden dus om een link inhoudelijk te formuleren.

Zoekmachines & SEO

Niet alleen voor de bezoeker, maar ook voor Google (en andere zoekmachines) is het goed om inhoudelijke links te schrijven. Google gebruikt de linktekst namelijk om te beoordelen of de pagina relevant is voor bepaalde zoekopdrachten. Met teksten als ‘klik hier’ kan Google natuurlijk net zo weinig als jouw bezoeker.

Een voorbeeld van hoe een link geschreven moet worden:

  • Dus niet: ‘Wilt u meer weten? Klik dan hier om contact op te nemen.’
  • Maar wel: ‘Neem contact met ons op voor de mogelijkheden.’

Een ander voorbeeld:

  • Dus niet: ‘Meer informatie over onze tarieven.’
  • Maar wel: ‘Tarievenlijst (PDF, 2 MB)’

Op deze manier is het gelijk duidelijk waar de bezoeker heen gaat en wat hij kan verwachten.

Blinden & slechtzienden

Er is nog een reden waarom het belangrijk is om termen zoals ‘klik hier’, ‘meer informatie’ en ‘lees verder’ te vermijden. Ook hier denken we aan bezoekers met een beperking, in dit geval blinden en slechtzienden.

Zij gebruiken software die de teksten op hun computer voorleest of omzet naar braille. Dergelijke software is vaak ook in staat om de hyperlinks van een pagina op te sommen.

Een bezoeker die gebruik maakt van een braille displayEen bezoeker die een website leest via een braille display

Wanneer je bovenstaande termen gebruikt kan een blinde of slechtziende niets met die opsomming. Zij horen of voelen dan alleen maar herhaling van ‘klik hier’ en ‘meer informatie’, zonder een idee te hebben van de context waarin de link staat. Met inhoudelijke hyperlinks wordt de website dus beter bruikbaar voor hen.


Tip #4 - Wees consistent

Wees over de hele website consistent in de links naar een bepaalde pagina. Gebruik dus niet de link ‘Werken bij ons bedrijf’ op de ene pagina en ‘Vacatures’ op de andere pagina.

Als schrijver weet je dat de links naar dezelfde pagina leiden, maar als bezoeker niet. Voor de bezoeker is het vervelend als hij denkt naar een nieuwe pagina te gaan, maar op een pagina uitkomt die hij al bezocht heeft.

In dat kader zien we de laatste tijd een trend. Waar hyperlinks vroeger paars werden als je de pagina al eens bezocht had, behouden ze tegenwoordig vaak dezelfde kleur. Dat is jammer, want voor de bezoeker is het prettig om te weten.

Het is daarom goed om op jouw website een andere kleur te gebruiken voor de links die een bezoeker al bezocht heeft. Voor niet bezochte links is een felle, heldere kleur de juiste keuze. Voor de bezochte links kun je het beste gaan voor een wat doffe of mattere kleur, die het idee geeft al ‘gebruikt’ te zijn (10).


Tip #5 - Maak de bestemming herkenbaar

Doel bereikt? Denk aan de bestemming.

Wanneer je link goed is opgemaakt en op de juiste manier is geformuleerd, volgt de waardering. Doordat de bezoekers jouw website beter begrijpen, zal het aantal klikken op links waarschijnlijk snel toenemen.

Om deze reden besteden we ook kort aandacht aan de bestemming: de pagina waarop de bezoeker landt na het klikken op jouw hyperlink.

Zorg ervoor dat de bestemming herkenbaar is. Bij voorkeur doe je dit door alle of enkele woorden uit de hyperlink terug te laten komen in de titel van de bestemmingspagina.

Stel je bezoeker gerust

Klikt iemand op de link ‘Trainingsaanbod’? Zorg er dan voor dat de bezoeker niet op een pagina komt met de titel ‘Ons aanbod’. Herhaal in plaats daarvan het woord training ergens in de titel. Op deze manier verzeker je de bezoeker ervan dat hij op de juiste pagina is aangekomen.


Heb je vragen over het artikel? Heb jij nog tips over hoe je het bezoekers gemakkelijker maakt om te navigeren op je website? Laat het ons weten in de reacties, onderaan deze pagina.


Bronvermelding:
(1), (2) https://www.nngroup.com/articles/guidelines-for-visualizing-links/
(3) https://books.google.nl/books?id=wK0xBWfL9GkC&redir_esc=y
(4) http://fagerjord.no/blog/archive/whyareli.html
(5), (6) http://www.gezondheid.be/index.cfm?fuseaction=art&art_id=3174
(7) https://www.theguardian.com/technology/2012/jul/16/marissa-mayer-appointment-mean-yahoo
(8) http://www.fastcompany.com/1403230/googles-marissa-mayer-assaults-designers-data
(9) https://www.nngroup.com/articles/writing-links/
(10) https://www.nngroup.com/articles/guidelines-for-visualizing-links/
Deze bronnen zijn geraadpleegd op 30 mei 2016.


Wat gehad aan dit artikel? Deel 'm met anderen!

Ontvang de no.dots blog in je inbox

Iedere maand nieuwe tips om succes te behalen met je website.