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

Voorbeeld van een splashpagina

• Om duidelijk te maken wat voor website het is;
• Om een goede indruk achter te laten;
• Om gebruikers keuzevrijheid te gunnen.

Allemaal erg begrijpelijke redenen, immers, bezoekers willen graag weten of ze op de goede site zijn; je wilt ook graag dat je bezoekers behoudt, door een goede indruk achter te laten; en bezoekers houden graag zelf de touwtjes in handen, dus bezoekers laten kiezen is ideaal. Toch?

De vraag is of daar een splashpagina voor nodig is. Vaak kan informatie en een goede indruk prima overgebracht worden zonder extra beginpagina. En zou het niet nog mooier zijn om bezoekers al voor te leggen waar men naar zoekt, in plaats van hen in een extra tussenstap een vraag voor te leggen?

Inhoud

• Nadelen van een splashpagina
• Ja, allemaal leuk en aardig, maar mijn flitsende intro dan?
• Maar als ik het intro alleen bij het eerste bezoek toon?
• Hoe maak ik dan duidelijk wat voor website het is?
• Maar hoe laat ik gebruikers dan een taal/schermgrootte/websiteversie kiezen?
  • Het kiezen van een schermgrootte
  • Het kiezen van een taal
  • Luxe versie vs. HTML
• Conclusie
• Extra leesvoer

Nadelen van een splashpagina

Er blijken veel nadelen te zitten aan een splashpagina:

De site met de splashpagina is moeilijk vindbaar; concurrenten zijn wel te vinden.

1. In de weg. Er zijn nauwelijks bezoekers die een splashpagina bekijken, want er staat nauwelijks informatie. En mocht er een animatie of filmpje staan, dan klikt men ook weg: internetters zijn ongeduldig. Vergelijk het met de ingang van een winkel waar je bij elk bezoek eerst verplicht langs een groot spandoek moet om bij de deur te komen. Of verplicht naar het optreden van steeds dezelfde clown moet kijken voordat je naar binnen mag.
2. Extra moeite. Makkelijk te bagatelliseren, maar een splashpagina betekent een extra muisklik voor bezoekers. Extra moeite is drempelverhogend. En elke drempel maakt de kans groter dat men vertrekt.
3. Extra laadtijd. Met name een groot logo of een animatie betekent extra laadtijd voor bezoekers. Extra laadtijd is drempelverhogend. Elke drempel maakt de kans groter dat men vertrekt.
4. Extra onderhoud. Wanneer men op de splashpagina uit meerdere versies van je website kan kiezen, betekent het ook dat je meerdere versies van je website moet onderhouden.
5. Extra bandbreedte. Extra laadtijd betekent vaak ook extra bandbreedteverbruik voor je website. Dat kan extra kosten met zich meebrengen.
6. Slechter vindbaar. En last but not least, omdat er nauwelijks informatie (trefwoorden) en links op een splashpagina staan, krijgt deze pagina een lage score in zoekmachines. Met een splashpagina zul je slechter vindbaar zijn dan zonder splashpagina. Dit valt al een aantal jaren niet meer op te lossen door trucs zoals het toevoegen van trefwoorden. Sterker nog, pagina’s waarop trucs worden toegepast, kunnen zonder pardon uit de index van de zoekmachine worden gegooid, zoals ook grote bedrijven als Ohra is gebeurd.

Ja, allemaal leuk en aardig, maar mijn flitsende intro dan?

Een goede indruk achterlaten is niet afhankelijk van een flitsende splashpagina. Je intro kan best geweldig zijn, maar aangezien de meeste internetters ongeduldig zijn, zijn ze ook weer snel weg. Daar gaat die mooie indruk. Een goede indruk achterlaten doe je wél door een overzichtelijke en makkelijk te gebruiken site te bouwen. En, belangrijker nog, door duidelijk te maken wat voor site het is en door zaken te bieden die de bezoeker wenst.

Maar als ik het intro alleen bij het eerste bezoek toon?

Als je ondanks alle tegenargumenten nog steeds een intro wilt tonen, dan kun je m.b.v. een cookie ervoor zorgen dat vaste bezoekers het intro overslaan. Echter, als de beveiligingsinstellingen van sommige vaste bezoekers zo zijn ingesteld dat ze geen cookies accepteren of dat cookies na het surfen worden weggegooid, zullen die vaste bezoekers bij elk bezoek alsnog iedere keer jouw intro zien. Dus iedere keer laden, iedere keer ‘skip intro’ klikken…

Kortom, er zijn simpelweg teveel argumenten om géén splashpagina te gebruiken. Duidelijk maken waar je site over gaat, gaat zelfs een stuk beter zónder splashpagina.

Hoe maak ik dan duidelijk wat voor website het is?

Enkele ideeën:

• Toon op elke pagina een duidelijk logo en/of titel.
• Geef op de homepage een duidelijke maar korte omschrijving waar de website over gaat, of gebruik een tagline.
• Lever links naar pagina’s op je site die meer informatie bieden.

Maar hoe laat ik gebruikers dan een taal/schermgrootte/websiteversie kiezen?

Bezoekers laten kiezen is vaak helemaal niet nodig, omdat in de praktijk blijkt dat bezoekersgedrag goed voorspelbaar is en je dus bij de bouw al rekening mee kunt houden met wat bezoekers willen.

Het kiezen van een schermgrootte

Aangezien nagenoeg elke computergebruiker surft met een schermresolutie van 1024×768 of groter (ca. 95%), is één van de meest gebruikte breedtes van een website ongeveer 960-990 pixels. Zo is de site met veruit de meeste schermgroottes ¹ goed te bekijken, ook op de minilaptops of netbooks die tegenwoordig ‘in’ zijn. Wil je dat de site meer ruimte inneemt bij grotere resoluties, dan kun je kiezen voor een layout die zich aanpast aan de beschikbare grootte op het scherm, de zogenoemde fluid of liquid layouts. Zo val je de bezoeker niet lastig met vragen over schermgrootte.

Let op dat ik het het hierboven had over de schermresolutie van computergebruikers; er zijn tegenwoordig ook steeds meer mensen die surfen op hun iPhone of ander mobieltje met internet. Mobiele internetters maken gebruik van een tragere verbinding en een veel kleiner scherm. Voor hen is het prettig als je een manier biedt die verder gaat dan een smallere website. Je kunt denken aan een speciale site voor mobiele browsers (zoals bijvoorbeeld Tweakers heeft gedaan met Tweakers.mobi), of een vergelijkbare functionaliteit waarbij je jouw site laat omzetten naar een versie geschikt voor mobieltjes.

Het kiezen van een taal

Dit kun je afvangen door met behulp van serverside scripting te kijken in wat voor taal de browser van bezoekers staat afgesteld en aan de hand daarvan de website in de juiste taal voor te leggen. Dan krijgt men zonder enige moeite te doen de taal die men wenst. Ook kun je de taalkeuze deel laten uitmaken van een vaste keuze op de pagina’s van je website. Dan kan men op ieder moment switchen en is men niet afhankelijk van binnenkomst via de voorpagina.

Luxe versie vs. HTML

Bezoekers gaan in het overgrote deel van de gevallen voor de versie die de content biedt die ze zoeken. Bewegende animaties of filmpjes om je site op te fleuren zijn van ondergeschikt belang. Sterker nog, na het één of twee keer gezien te hebben, gaat het irriteren en wil men liever een versie zonder fancy animaties. Richt je dus vooral op heldere, boeiende content. Waarom zou je de moeite van het bouwen van twee websites (een luxe versie en een gewone versie) niet steken in het bouwen van één geweldige website?

Conclusie

Uiteindelijk gaat het bezoekers slechts om het makkelijk en snel vinden van de juiste informatie. Een splashpagina levert extra laadtijd, extra klikken, teveel keuze, weinig info en slechte vindbaarheid, dus draagt daar niet aan bij.

Wel ben ik benieuwd of er nog andere argumenten zijn vóór een splashpagina?

Extra leesvoer

• Sink the splash pages (invalshoek: snellere website)
• How to convince a client they don’t need a splash page (invalshoek: zoekmachineoptimalisatie)
• Top Ten Guidelines for Homepage Usability (invalshoek: gebruiksvriendelijkheid)

Update 18 april 2009: extra links en info over cookies toegevoegd