Wolf’s Little Store

Links zijn een essentieel element van iedere site, maar krijgen vaak niet genoeg liefde van webdesigners. In deze blogpost: enkele tips en technieken om links bruikbaar en toch esthetisch verantwoord te houden.

1. Duidelijk maken wat klikbaar en niet klikbaar is

Eén van de grootste usabilityfouten die je kan maken ligt in de stijling van links. Standaard worden links blauw en onderlijnd getoond in een browser. In een lopende tekst vallen links zo erg hard op en kan dit als storend worden ervaren. Daarom vinden veel ontwerpers er niet beter op dan de onderlijning onder links weg te halen.

Dit kan, op voorwaarde dat het duidelijk blijft wat klikbaar is en wat niet. Links hebben sowieso een andere kleur nodig dan normale tekst. Er zijn een aantal technieken om links “mooier” te maken en de bruikbaarheid toch te behouden. Ikzelf prefereer om in plaats van text-decoration: underline; borders te gebruiken. Dit zorgt voor subtielere underlines. Daarnaast zet ik deze borders vaak een tik lichter dan de eigenlijke linkkleur; met name 33% van de originele linkkleur. Vergelijk het met opacity in Photoshop: de borders onder links hebben bij mij 33% opacity.

Een andere techniek is “swap underlines”. Dit houdt in dat je de border of underline pas toont bij het hoveren over een link. Deze techniek gaat usabilitygewijs al eerder de gevaarlijke kant uit, maar kan vlot toegepast worden in menu’s en doormats als het duidelijk is dat het een menu betreft, en de linkkleur consistent is met de rest van de website.

2. Clickable area vergroten

Niet iedereen kan even goed met zijn muis overweg als jij, en dan zijn er nog die avonden dat je gewoon moe (of dronken) bent. De beste remedie tegen “misclicks” (het verkeerde knopje of de verkeerde link aanklikken) is ervoor zorgen dat de clickable area van links groter is dan die eigenlijk lijkt. In een navigatiemenu is het bijvoorbeeld altijd aangeraden om links de CSS-property display: block; mee te geven en extra padding of margin. Een hover-effect om het klikbare gedeelte aan te duiden maakt het helemaal af.

3. Niet vergeten: visited states

De visited state wordt maar al te vaak vergeten bij het stijlen van een website. Met als gevolg dat gewone links en visited links er juist hetzelfde uitzien. Vaak gehoorde excuses zijn “ik vond geen goede kleur” en “dat is toch niet nodig?”. Voor een bezoeker heeft het wel degelijk nut om in één oogopslag te zien waar hij al geweest is en waar niet.

Een gemakkelijke manier om visited, en bij uitbreiding hover en active states te stijlen is de volgende:

• Voor de visited state neem je de kleur van de links, en maak je die 20% donkerder
• Voor de hover state neem je de kleur van de links, en maak je die 20% lichter
• Voor de active state neem ik vaak dezelfde kleur als de hover state, omdat een aangeklikte link al genoeg feedback aan de bezoeker geeft: in Internet Explorer hoor je het typische klikgeluidje, en in bijna alle browsers komt er een dotted outline rond de link.

Dat brengt ons bij het volgende punt.

4. Focus outline: niet verwijderen

Onlangs las ik een blogpost van Sven Peeters, student aan Devine een zogeheten tip om de outlines op links weg te halen. Deze tip bestond eruit a:focus { outline: 0; } aan je CSS toe te voegen. Ik ga akkoord dat die outline helemaal niet zo mooi is, maar er zijn een aantal redenen waarom je deze moet laten staan.

Ten eerste navigeren sommige gebruikers enkel met hun keyboard. Soms wegens een (fysieke) handicap, soms omdat ze het gewoon zijn hun keyboard voor alles te gebruiken. Door de outlines weg te halen krijgt de bezoeker geen feedback meer welk item er nu juist geselecteerd is. Daarnaast haal je een deel van de feedback weg voor gebruikers die de muis wel gebruiken (zie punt 3).

5. Buttons: show them some love too

Buttons zijn in feite gestijlde links en verdienen dezelfde “treatment” als normale links. Dit wil zeggen: een link, visited, hover en active-state. Bezoekers hebben een mentaal model over hoe knoppen werken (namelijk: je kan ze indrukken en er gebeurt iets). Het is dan ook nuttig om dit mentaal model te ondersteunen door bijvoorbeeld de “ingedrukte” staat van een knop er uit te doen zien als een knop die, je raadt het al, wordt ingedrukt. In de praktijk gebeurt dit door de spelen met de effecten in je beeldbewerkingsprogramma (bvb. inner shadow in Photoshop). Tim Van Damme zei onlangs op Twitter het volgende: “Buttons should look twice as sexy when clicked”. Daar kan ik volmondig mee akkoord gaan.