Zes tips voor gebruiksvriendelijke links

Zonder links zou internet niet bestaan. Links zijn essentieel voor je website. Maar ook voor zoekmachines. En zeker voor bezoekers. En dan niet alleen links naar de website toe, maar ook links op de site zelf. Toch wordt er in de praktijk relatief weinig aandacht besteed aan de gebruiksvriendelijkheid en toegankelijkheid van links, terwijl een simpele verbetering soms een boost voor je site kan betekenen.

De tips in het kort:

1. Maak van elke link een echte link
2. Geef een link een beschrijvende tekst
3. Zorg dat duidelijk is wat een link is (en wat niet)
4. Maak onderscheid in onbezochte en bezochte links
5. Open links niet in een nieuw venster
6. Gebruik iconen om links te verhelderen

1. Maak van elke link een echte link

Wanneer je links hebt waar bezoekers javascript voor nodig hebben om erop te kunnen klikken, dan heb je onechte links. Meestal staat er iets dergelijks in als:

<a href="javascript:newwindow()">link</a>
<a href="#" onclick="javascript:popUp('http://www.example.com')">link</a>

Die link leidt nergens naartoe wanneer javascript uitstaat. Nou hebben de meeste mensen wel javascript aan, maar zoekmachines niet. Daarom kunnen veel sites met javascriptmenu’s een hoge score in zoekmachines bij voorbaat al vergeten; er valt voor een zoekmachine weinig te indexeren. Daarnaast blijven er altijd mensen die bijvoorbeeld vanwege bedrijfsveiligheid javascript niet aan hebben staan (ongeveer 5%). En zelfs voor je webstatistiekenpakket kan het een probleem zijn. Kortom, zorg dat elke link ook zonder javascript ergens naartoe leidt. (Alternatieve menu’s bouw je met CSS, zoals wordt uitgelegd in het Listutorial. Gevorderde alternatieven zijn de o.a. de Son of Suckerfish dropdowns of de UDM4.)

2. Geef een link een beschrijvende tekst

Uit onderzoek blijkt dat veel bezoekers pagina’s niet lezen, maar door de pagina scannen naar informatie. Bezoekers letten op kopjes, dikgedrukte woorden, lijsten/opsommingen, maar ook op links. Immers, links zijn veelal bedoeld om aan te geven dat je naar meer informatie kun navigeren.

Tot voor kort was één van de meestvoorkomende linkteksten: “klik hier”. Wanneer je weet dat mensen de pagina niet lezen, maar scannen naar woorden en zinsdelen die aangeven dat er bepaalde informatie volgt, dan wordt duidelijk dat ‘klik hier’ de bezoeker weinig zegt. Men moet dan alsnog de context lezen om te begrijpen waar de link naartoe leidt. Bovendien is de ‘klik hier’-zin tekstueel gezien veelal overbodig; het is vaak voldoende om een woord of zinsdeel uit de voorgaande zin te linken.

In bovenstaande afbeelding had men makkelijk kunnen volstaan door alles te verwijderen behalve de kopjes en vervolgens een link te maken van ‘Lenen via internet’ en ‘Muziek lenen’. Niet alleen is meteen duidelijk wat het onderwerp van de link is, de extra regels ‘klik hier voor meer informatie’ zijn ook nog duidelijk overbodig.

3. Zorg dat duidelijk is wat een link is (en wat niet)

Links zijn vaak onderstreept. Maar op sommige sites wordt daarnaast onderstreping gebruikt om tekstkopjes te maken, of om een bepaald tekstdeel nadruk te geven. Bij teksten op papier is onderstreping daar erg geschikt voor, maar op internet valt zo moeilijker te onderscheiden wat een link is en wat niet.

Voorbeeld:
Dit is onderstreepte tekst en dit is een link naar de homepage.

Onderstreep dus nooit in internetteksten, tenzij het een link is. Het W3C heeft niet voor niks het underline-element afgekeurd, zoals ook valt te lezen in mijn artikel over achterhaalde elementen.

Hoewel links dus vaak onderstreept zijn, kiezen sommige sites ervoor de onderstreping van links juist weg te halen. Dat maakt links moeilijker te herkennen. In dat geval is het belangrijk dat je links op andere manieren goed zichtbaar maakt, bijvoorbeeld door ze zowel een andere kleur mee te geven, als door ze dikgedrukt te maken. Let er dan wel goed op dat die links niet lijken op andere elementen in de tekst die geen links zijn.

4. Maak onderscheid in onbezochte en bezochte links

Zeker wanneer je een grote website hebt, is het handig als bezoekers ziet welke pagina’s ze al wel hebben bezocht en welke nog niet. Hoe frustrerend is het als je op een site naar informatie zoekt en je meerdere malen op dezelfde pagina terecht komt, terwijl je daar al bent geweest? Voorkom zulke ergernissen op je eigen site en geef bezochte links een ander kleurtje mee. Hiervoor gebruik je de link-pseudo-classes a:link en a:visited.

Je kunt je pagina nóg gebruiksvriendelijker maken door links op te lichten wanneer je muis er overheen gaat (a:hover), door links op te lichten als je met de tabknop erop staat (a:focus) en door links op te lichten wanneer je erop klikt (a:active). Tip: let in je CSS op de volgorde van de link-states.

5. Open links niet in een nieuw venster

Sites openen links in een nieuw venster meestal om twee redenen:

• Om te voorkomen dat mensen je site verlaten.
• Om de huidige pagina te houden, maar tegelijkertijd een aanvulling te tonen, zoals een extra uitleg, een vergroting van een foto, of een invulscherm.

Met name het eerste punt is een veelgehoorde reden om een nieuw venster te laten openen. En inderdaad zijn er veel mensen die een nieuw scherm op prijs stellen. Het blijkt echter dat er net zoveel mensen zijn die helemaal geen nieuw venster willen openen, of op z’n minst zelf de keus daarover willen hebben. Dus hoewel je de helft helpt, val je de andere helft er mee lastig. Mensen zelf laten kiezen voor een nieuw scherm is dan de beste optie. Bovendien is het maar de vraag of je mensen kwijt bent zodra je de link in hetzelfde venster opent. Raakt Google mensen kwijt doordat geen enkele link in een nieuw scherm wordt geopend?

Voor het tweede punt, het tonen van aanvullende info over de betreffende pagina, heeft men tegenwoordig methodes bedacht die als alternatief kunnen dienen voor het openen van een nieuw scherm. De informatie die je in het nieuwe scherm zou zetten, kun je bijvoorbeeld ook verwerken in je huidige pagina; je verbergt het met CSS en toont het slechts wanneer men erom vraagt. Een ander alternatief is om de ‘popup-pagina’ te openen binnen hetzelfde scherm met behulp van scripts zoals Lightbox2 of Thickbox. Is een nieuw scherm toch nodig, zorg dan in ieder geval dat de popuplink leidt naar een echte pagina (zie punt 1).

6. Gebruik iconen om links te verhelderen

Soms werkt het verhelderend om in één oogopslag te zien wat een link doet of waar het naartoe leidt. Op dit blog bijvoorbeeld gebruik ik een icoon om aan te geven dat een link naar een externe website leidt. Ik gebruik daarvoor attribuut-selectors.

Meer leesvoer

• Webrichtlijnen: Links en navigatie
• Usarchy: Nooit meer “Klik hier” en “Lees verder”
• Usarchy: Usability mythe #2: open externe links in nieuw venster
• UseIt: Top Ten Mistakes in Web Design
• Dev.Opera: Accessible Context-sensitive Help with Unobtrusive DOM Scripting