Omslag van 'Handboek webcontent: meer focus, minder content'

14. Hyperlinks: verbinding leggen

Hyperlinks maken het internet tot het unieke medium dat het onderscheid van boeken of video's. Je kunt linken binnen je site, buiten je site en zelfs binnen een pagina. Mensen associëren voortdurend en links zijn daar het ultieme hulpmiddel voor om dat te faciliteren.

14.1 Korte geschiedenis van de hyperlink (mag je over slaan hoor)

Het World Wide Web is in 1989 'uitgevonden' door Tim Berners-Lee. In feite koppelde hij 2 systemen aan elkaar:

  • Het internet, namelijk het netwerk van computers die op afstand met elkaar konden communiceren.
  • Het systeem van hyperlinken, namelijk dat je aan een stukje tekst een link kon koppelen naar een ander stukje tekst.

Het internet bestond al sinds de jaren 60. Ook het idee van hyperlinks bestond al heel lang. In 1945 schreef Vannevar Bush het verhaal 'As We May Think'. Daarin beschreef hij een systeem, Memex, waarin informatie aan elkaar gekoppeld was. Het is in deze tijd wel interessant wat hij aan ideeën hierover opperde. Enkele citaten uit zijn artikel.

"When data of any sort are placed in storage, they are filed alphabetically or numerically, and information is found (when it is) by tracing it down from subclass to subclass. It can be in only one place, unless duplicates are used; one has to have rules as to which path will locate it, and the rules are cumbersome."

Gegevens zijn verzameld in logische categorieën. Zo werkte het tot in de jaren '80, toen we kennis nog steeds uit encyclopedieën haalden.

Maar Vannevar concludeerde al dat die methode van gegevens ordenen niet past bij hoe ons brein werkt:

"The human mind does not work that way. It operates by association. With one item in its grasp, it snaps instantly to the next that is suggested by the association of thoughts, in accordance with some intricate web of trails carried by the cells of the brain."

Hij stelde zich een apparaat voor, dat hij Memex noemde, waarbij je via 'links' informatie die gerelateerd was, aan elkaar kon koppelen. Dit was in 1945!

"Wholly new forms of encyclopedias will appear, ready made with a mesh of associative trails running through them, ready to be dropped into the memex and there amplified. The lawyer has at his touch the associated opinions and decisions of his whole experience, and of the experience of friends and authorities. The patent attorney has on call the millions of issued patents, with familiar trails to every point of his client's interest. The physician, puzzled by a patient's reactions, strikes the trail established in studying an earlier similar case, and runs rapidly through analogous case histories, with side references to the classics for the pertinent anatomy and histology."

Vannevar beschrijft dus eigenlijk het internet zoals wij dat nu kennen!

De 'cyclops'-camera van Vannevar Bush (1945)

In 1965 verwoordde Ted Nelson dit principe met de term 'hyperlink', hierbij verwijzend naar de Memex van Vannevar Bush.

De term internet stamt ook uit de jaren 60. Er bestonden al computers, maar men wilde een systeem dat bleef werken als de hoofdcomputer door bijvoorbeeld een vijandige aanval zou worden uitgeschakeld. Men wilde een systeem van verschillende computers die onafhankelijk van elkaar konden doorwerken. Een van die systemen die ontwikkeld werd, was Arpanet, een systeem ontwikkeld door het Amerikaanse leger. Zo ontstond het internet.

Tim Berners-Lee koppelde dus de beide systemen – internet en hyperlinken – aan elkaar, en noemde dit het World Wide Web (www). Tegenwoordig noemen we het world wide web weer gewoon het internet.

14.2 Verbindingen maken

Wat we doen met links is het verbinden van content aan elkaar. Niets anders dan het oorspronkelijke idee van Vannevar. Een link hoort volgens Vannevar te staan op de plek waarbij de lezer de associatie heeft. Dus geen links onderaan een tekst, maar gewoon in de lopende tekst.

Veel sites hebben nog veel te leren van dit hele oude idee. Sommige sites zijn nog opgebouwd als 'categorieën', opgeslagen in een grote bak met gegevens, die los van elkaar bestaan. Een goede website koppelt de informatie aan elkaar, door te linken tussen de verschillende pagina's op de site zelf en te linken naar pagina's op andere sites. Een website denkt dus niet in categorieën, maar in associatie.

Het redactieproces is meestal niet ingesteld op verbindingen maken. Vaak is een redacteur enkel met een tekst bezig. En te weinig met het doel van de tekst, met de wijze waarop de lezer associeert en links verwacht naar gerelateerde content.

Verbindingen maken in je content is een van de belangrijkste taken van jou als webredacteur.

14.3 Soorten links

Er zijn verschillende soorten links, die elk zijn eigen richtlijnen kent:

  1. Link op een tekst versus een afbeelding
  2. Link naar een webpagina versus naar iets anders, namelijk een bestand of e-mailadres
  3. Link binnen een pagina (ankerlink), naar een andere pagina op de site (interne link) of naar een andere site (externe link).

In dit hoofdstuk bespreken we deze soorten links.

14.4 Kenmerken van een goede linktekst

  • De linktekst is betekenisvol.
    De tekst geeft een goed idee van de inhoud waar de link naartoe linkt.
  • De linktekst is kort.
    Een link is makkelijk scanbaar.
  • De link is op de plek waar de lezer is.
    Bespreek je iets, plaats dan gelijk de link op de plek waar je het bespreekt. Dat is dus in de lopende tekst. Zet links niet buiten de context, bijvoorbeeld door ze onder de tekst te plaatsen.

14.5 Betekenisvolle linktekst

Een linktekst is betekenisvol en begrijpelijk. Dat is belangrijk voor zowel de scannende lezer als voor mensen die blind zijn en de tekst opgelezen krijgen (of in braille uitgevoerd).

Bekijk onderstaand voorbeeld eens: steeds is het woord 'website' gelinkt. Gebruikers van screenreaders krijgen bij het bekijken van de links alleen maar te horen 'website website website website'.

Handige websites

  • Website van het Ministerio de Educación (MENUD), het Chileense ministerie van Onderwijs (alleen Spaanstalig).
  • Website van de Universidad de Chile met uitgebreide informatie over het universitair toelatingsexamen: PSU/Prueba de Selección Universitaria (alleen Spaanstalig).
  • Website van het ministerie van Onderwijs met uitgebreide informatie over het hoger onderwijs in Chili (alleen Spaanstalig).
  • Website van de Consejo de Rectores de las Universidades de Chile (CRUCH), de organisatie van traditionele universiteiten in Chili.

Deze links in deze tekst zijn wel eenvoudig toegankelijk en betekenisvol te maken:

Handige websites

  • Ministerio de Educación (MENUD), het Chileense ministerie van Onderwijs (alleen Spaanstalig).
  • Universidad de Chile van de met uitgebreide informatie over het universitair toelatingsexamen: PSU/Prueba de Selección Universitaria (alleen Spaanstalig).
  • Ministerio de Educación de Chili, uitgebreide informatie over het hoger onderwijs in Chili (alleen Spaanstalig).
  • Consejo de Rectores de las Universidades de Chile (CRUCH), de organisatie van traditionele universiteiten in Chili.

Voorbeeld herschrijven link

Als voorbeeld onderstaande tekst:

Hygiënecodes en voedselveiligheidssystemen

Bedrijven moeten zich aan hygiënecodes en/of voedselveiligheidssystemen houden om zo veilig mogelijk te produceren. Meer informatie daarover vindt u bij HACCP.

De laatste zin is onnodig, de link kan al in de tekst zelf geplaatst worden:

Hygiënecodes en voedselveiligheidssystemen

Bedrijven moeten zich aan hygiënecodes en/of voedselveiligheidssystemen houden om zo veilig mogelijk te produceren.

14.6 Linktekst is kort

Een linktekst is bij voorkeur kort, alhoewel de link nog wel betekenisvol moet zijn.

Gebruikers van een screenreader vragen vaak een linklijst op, een lijst met alle links op een pagina op om zo de pagina snel te scannen. Voor hen is een korte linktekst fijn.

Ook voor Google zijn linkteksten belangrijk (geven extra waarde aan de pagina waarnaar toe gelinkt wordt). Een linktekst die kort is, maakt het Google makkelijker om de juiste betekenisvolle woorden te koppelen aan deze pagina.

14.7 Link op de plek waar de lezer is

In het voorbeeld hieronder staan de links onder de tekst, terwijl het voor de lezer makkelijker is als de links direct in de tekst staan.

(…)

Er is een goede samenwerking in de keten van de BGT tussen het ministerie van Infrastructuur en Milieu, SVB-BGT, Geonovum, Kadaster LV BGT en PDOK. Wat ons betreft is de keten er klaar voor om de landsdekkende BGT te ontvangen en te verstrekken.

(...)

Relevante links:
Website Kadaster
Website SVB-BGT
Website BGTweb

De herschreven versie:

(…)

Er is een goede samenwerking in de keten van de BGT tussen het ministerie van Infrastructuur en Milieu, SVB-BGT, Geonovum, Kadaster en PDOK. Wat ons betreft is de keten er klaar voor om de landsdekkende BGT te ontvangen en te verstrekken.

(…)

14.8 Linken naar externe sites, bestanden en e-mailadressen

Externe sites

Een link naar een externe site wordt vaak aangegeven met zo'n icoontje, zie afbeelding hieronder. Maar dat hoeft niet meer. Voor de bezoeker van je site maakt het niet uit of de link intern of extern is. Ook hoef je het webadres niet te laten zien.

Hieronder een voorbeeld zoals het niet moet:

Volledig adres uitgeschreven, icoontje voor externe site

De herschreven versie ziet er zo uit:

De leveranciers zijn:

  • Hulpmiddelencentrum
  • Medipoint

Linken naar bestanden

Als je linkt naar bijvoorbeeld een pdf-bestand, dan opent de browser een pdf-reader in de browser of buiten de browser. In beide gevallen is het een andere lay-out dan de browser en dit kan verwarrend zijn. Vandaar dat je altijd duidelijk laat zien - in de linktekst - dat je linkt naar een bestand. Het openen van een bestand in een nieuw venster mag wel (zie ook verder).

Ook is de grootte van belang. Als bezoeker wil je wel voor je klikt weten of het een bestand van 20 MB ... Meld daarom ook in de linktekst de grootte van het bestand.

Niet goed zijn de volgende links (gaan allemaal naar pdf-bestanden):

Links naar pdf's: onduidelijk dat het pdf's zijn en de grootte wordt niet gemeld

In het voorbeeld hieronder gaat het wel goed: het formaat pdf en de grootte van het bestand staan vermeld in de linktekst.

Duidelijke tekstlink: formaat en grootte staan in de link

Links naar e-mailadressen

Laat altijd het mailadres zien in de link, dan is het voor de bezoeker geen verrassing dat hij naar zijn e-mailprogramma gaat.

Maak duidelijk dat je linkt naar een mailadres: mailadres is zichtbaar in de link.

14.9 Links op de pagina zelf (ankerlinks)

Dit e-book bevat bovenaan een inhoudsopgave van de pagina. Een dergelijke inhoudsopgave is handig als je een lange pagina hebt. Zo kun je bezoekers een indruk geven van de pagina en maak je het navigeren makkelijker.

Belangrijk is dat de inhoudsopgave er ook echt zo uitziet. In onderstaand voorbeeld is dat niet zo. De links rechts van de afbeelding zijn interne links, maar qua opmaak zouden het net zo goed links naar andere pagina's kunnen zijn.

Onduidelijk intern menu

Zet er een kopje 'Inhoudsopgave' of 'Inhoud' bij, zodat duidelijk is dat het een intern menu is.

Inhoudsopgave pagina

Je kunt ook vanaf een andere pagina direct verwijzen naar een ankerlink. Zo link je naar een specifieke plek op de pagina. Dat lijkt handig, maar dat is het zeker niet altijd. Het kan verwarrend zijn voor de bezoeker dat hij bij het klikken op een link midden op een pagina komt, zonder menu of header in beeld die duidelijk maakt waar hij is.

Verder lezen?
Anchors OK? Re-Assessing In-Page Links, Nielsen Normal Group

14.10 Open geen nieuwe vensters (tenzij ...)

De discussie wel/niet openen in een nieuw venster sleept zich al een paar jaren voort.

Ons korte antwoord: open links niet in nieuwe vensters, uitgezonderd:

  • links naar downloads, zoals pdf-bestanden
  • links in een proces dat niet onderbroken mag worden, zoals de algemene voorwaarden in een formulier
Link naar algemene voorwaarden opent in nieuw venster/tab

Dan het lange antwoord: waarom zou je links niet in nieuwe vensters/tabs moeten openen?

  • Uit principe niet. Jouw bezoeker bepaalt zelf hoe hij de link wil openen, niet jij als afzender. Dat is een elementair uitgangspunt op het web: de gebruiker bepaalt hoe hij de content ziet en gebruikt, niet jij als afzender.
  • Het is niet gebruiksvriendelijk. Als jouw link in een nieuw venster/tab is geopend en de gebruiker wil weer terug, dan zal hij vaak de terugknop van de browser gebruiken. Maar die werkt dan niet meer. Breaking the back-button is een van de hoofdzonden in gebruiksvriendelijkheid.

14.11 Aanklikbare afbeeldingen

Banners, social-media-icoontjes of advertenties zijn vaak aanklikbare afbeeldingen. Voor zowel zoekmachines als blinde gebruikers is het belangrijk dat duidelijk is waar de link naartoe gaat. Voeg daarom een betekenisvolle alt-tekst toe, die aangeeft wat de bestemming van de afbeelding is.

Bijvoorbeeld een Facebook-icon:

Facebook-icon

De juiste bijbehorende code is:

<a href="https://www.facebook.com/"><img src="facebook.png" alt="Facebook">

Je hoeft niet in de alt-tekst 'link naar' op te nemen, in screenreaders wordt dit bij een link al automatisch opgelezen.

Een title-attribuut gebruik je niet. Een title-attribuut bij afbeeldingen en links is nooit nodig. Dus deze code is NIET goed:

<a href="https://www.facebook.com/"><img src="facebook.png" alt="Facebook" title="Facebook">
Opmerking: Meer hierover vind je in ons e-book Webtechniek.

14.12 Microcontent

Microcontent is een korte tekst met eventueel een foto, die aanklikbaar is en waarvan de link leidt naar het volledige bericht. Microcontent is dus nooit het volledige bericht, het is een ankeiler naar het volledige bericht. Nielsen beschrijft microcontent als een zeer korte samenvatting van macrocontent (Wikipedia: microcontent).

Voorbeelden zijn de ankeilers voor nieuwsberichten, agenda-items, contentblokjes op een navigatiepagina en zoekresultaten.

Voorbeeld van blokjes microcontent op de website van de gemeente Venlo.

Antwoord geven op de vraag van de bezoeker

Belangrijk is dat microcontent al zo goed mogelijk antwoord geeft op de vraag die een bezoeker heeft. Het doel van microcontent is namelijk in de 1e plaats om antwoord te geven op een vraag van de bezoeker. In de 2e plaats is het bedoeld om mensen het idee te geven dat hun vraag beantwoord wordt als ze doorklikken naar het hele artikel.

Opbouw microcontent

Microcontent bestaat vaak uit een titel en een snippet. De snippet is maximaal 100 tot 150 tekens. Hieronder nog een voorbeeld van de gemeente Venlo:

Verhuizen, emigreren en immigreren, naturalisatie, inburgeren, aanvragen BSN, briefadres en geheimhouding persoonsgegevens

De snippet is hier belangrijk om mensen te laten weten welke informatie ze kunnen vinden onder het kopje Verhuizen.

Afhankelijk van het type content kan dat nog uitgebreid zijn. In een zoekresultaat van Google staat ook een datum en een webadres of broodkruimelpad:

www.yourlittleblackbook.me › ... › Jordaan › Negen Straatjes › Lijstjes

19 feb. 2016 - Wil jij gezellig gaan lunchen in Amsterdam Centrum? Check deze blog met de leukste lunchspots op een rijtje! Ontdek ze allemaal op Your ...

In een nieuwsbericht staat er vaak ook nog een foto bij, zoals in het voorbeeld hieronder van de BBC:

Microcontent op de BBC: titel, snippet en foto

Voor veel nieuwsberichten op non-profitsites is een foto echter niet nodig en kun je volstaan met titel en lead, eventueel aangevuld met een datum.

De New York Times gebruikt een opsomming als microcontent.

New York Times: opsomming als microcontent

Blendle kiest ervoor om soms geen snippet te tonen, maar ze gebruiken wel langere titels, soms tot wel 130 tekens. Daarmee is de titel een soort combinatie van titel en snippet geworden.

Blendle: lange titels, geen snippet

Kenmerken goede microcontent

  • Informatief
  • Zichtbaar incompleet
  • Zichtbaar aanklikbaar
  • Makkelijk aanklikbaar

Informatief

De microcontent geeft zo mogelijk al antwoord op de vraag van de bezoeker. In het ideale geval hoeft de bezoeker dan niet eens door te klikken. De tekst is geen vraag en is niet verhullend of op een andere manier verwarrend of onduidelijk.

Zichtbaar incompleet

In principe is microcontent bedoeld om op door te klikken, zodat je het volledige bericht kunt lezen. Het moet daarom duidelijk zijn dat het incompleet is. Dat bereik je vooral door de hoeveel informatie beperkt te houden. De snippet is daarom niet langer dan 150 tekens. Vaak zijn 100 tekens al voldoende. Maak je de snippet langer, dan kan het onduidelijk voor bezoekers zijn dat je er nog meer informatie is dan alleen deze microcontent.

Te lange snippet in microcontent: 276 tekens. Het is niet duidelijk of je nu het hele bericht al hebt gelezen of dat je nog door moet klikken.

Zichtbaar aanklikbaar

Het blokje is aanklikbaar en dat moet ook duidelijk zichtbaar zijn voor bezoekers.

Makkelijk aanklikbaar

Bij voorkeur is het hele blokje microcontent aanklikbaar. Dit kan de webbouwer eenvoudig maken met css.

Op onze site kun je zien dat de blokjes microcontent compleet aanklikbaar zijn.

Complete blokje microcontent is aanklikbaar

14.13 Voorbeelden microcontent

Voorbeeld 1: Nieuwsbericht gemeentesite

Hieronder een blokje microcontent met een nieuwsbericht.

Microcontent met lees-verder-link

Wat kan er beter?

  • De lees-verder-link is niet nodig. Als blijkt dat het onvoldoende duidelijk is dat het bericht aanklikbaar is, onderstreep de titel.
  • Waarschijnlijk is de afbeelding onnodig.

Dan blijft er over:

21 inwoners van de gemeente Venlo zijn onderscheiden met een koninklijke onderscheiding.

Misschien saaier voor de redacteur, maar waarschijnlijk veel beter bruikbaar voor de bezoeker. Zegt jouw collega dat het saai is voor de bezoeker? Vraag of hij dit wil onderbouwen, alleen aan een onderbuikgevoel heb je niks.

Voorbeeld 2: Nieuwsbericht waterschap (1)

Hieronder een nieuwsbericht op de site van een waterschap. Zie jij wat er aanklikbaar is? Je verwacht wellicht de titel, maar dat is niet zo. Het is de rode tekst onderaan: Schouw watergangen.

Microcontent waterschap

Wat kan er beter?

  • Verwijder de tekst onderaan (Schouw watergangen).
  • Maak de titel aanklikbaar (verwijder de streep die er nu onderstaat). Onderstreep dan eventueel wel de titel.
  • Gebruik een kortere snippet. De snippet is te lang, namelijk 161 tekens. Je krijgt als lezer de indruk dat de tekst compleet is, terwijl microcontent juist duidelijk incompleet moet zijn. Het is de bedoeling dat mensen doorklikken.
  • Foto kan hier ook weg.

Dit zou het kunnen worden:

Binnenkort komt het waterschap langs om de sloten te controleren.

Voorbeeld 3: Nieuwsbericht waterschap (2)

Het onderstaande bericht is ook van een waterschap.

Microcontent waterschap (2)

Wat kan er beter?

  • Gebruik geen title-attribuut. Hier is wel een title-attribuut gebruikt; dat geeft de mouse-overtekst. Maar in de mouse-overtekst wordt letterlijk de titel herhaald. Overbodig dus.
  • 'Lees meer' kan weg. Maak de titel aanklikbaar en onderstreep hem eventueel.
  • Foto is hier niet nodig.

14.14 Vormgeving linktekst

Het is ook belangrijk dat de link die opgebnomen is in een lopende tekst visueel goed te onderscheiden is van andere content.

De regels hiervoor zijn:

  • Voldoende contrast tussen de link en de omringende tekst
    De kleur van de linktekst is duidelijk anders dan de gewone tekst. Uitgedrukt in technische termen: de linktekst heeft een contrastwaarde van minimaal 3,0 met gewone tekst. (WCAG-eis)
  • Linkkleur is anders dan de kleur van koppen.
  • Link wijkt af in vorm van omringende tekst
    De link heeft ook een afwijkende vorm, meestal doordat deze onderstreept is, want dan zien mensen dat het een link is. Die onderstreping mag ook alleen bij mouse-over. Vooral voor mobiele gebruikers is dit belangrijk.
top

Feedback

Contact

Vul dit in als je wil dat we contact met je opnemen.