Knoppen en knopstanden

Mooi vormgeven van een knop versterkt het gevoel dat je hem kan indrukken. Door daarnaast ook het gedrag van een knop vorm te geven, geef je de gebruiker extra visuele zekerheid, zekerheid dat alles goed werkt. Het is daarom belangrijk om knoppen met aandacht te ontwerpen en rekening te houden met al de mogelijke knopstanden. Niet alleen met standen zoals we die al kennen van knoppen uit de fysieke wereld maar ook ‘virtuele standen’ waarmee we de usability verder verbeteren zoals de focus‑stand.

Nieuw voor het ontwerpen van knopstanden is CSS3, de meest recente versie van CSS. Nauwelijks passen ontwerpers CSS3 toe omdat oudere webbrowsers geen CSS3 ondersteunen of omdat de complete specificaties nog niet definitief vast staan. Toch adviseer ik CSS3 nu al veelvuldig te gebruiken. Hierdoor houd je namelijk júíst rekening met nieuwe systemen die geschikt zijn voor aanraak­schermen, zoals de iPad, en met nieuwe hoge resolutie schermen. Met oudere webbrowsers die geen CSS3 ondersteunen is er sowieso geen probleem, want de toegankelijkheid van je website blijft ook bij CSS3 gewaar­borgd. De vormgeving zal gracieus degraderen.

De kracht van CSS3 is dat je knoppen doormiddel van vectoren vorm­geeft. Vectoren nemen een steeds dominantere plaats in bij nieuwe browsers, tablets en beeld­schermen. Tot voor kort kon je met CSS2 alleen op een getruckte manier effecten aan knoppen toevoegen door afbeeldingen eraan te koppelen. Die afbeeldingen zijn gerasterd en liggen daardoor onwrik­baar vast. Als je achteraf bijvoorbeeld de schaduw wilt aanpassen, dan moet je de afbeeldingen opnieuw maken. Met het nieuwe CSS3 verander je zo’n effect (e.g. box shadow) door één enkel getal aan te passen. Dat scheelt veel tijd in bouw, in onderhoud en verminderd de kans op fouten.

Aan de gebruikerskant van een website, of de klantkant beter gezegd, heeft het ook grote gevolgen want doordat je vectoren gebruikt blijft het professio­nele uiterlijk van je website intact tijdens schalen naar verschillende grootten. Vroeger schaalde je alleen tekst als de letters te klein waren, nu schaal je alles inclusief afbeeldingen op je desktop computer. Op de iPad is schalen trouwens de normaalste zaak van de wereld.

Daarnaast zijn hoge resolutie-schermen (e.g. iPhone 4’s met hun retina display) in aantocht. Op een beeldscherm met een hoge resolutie is het verschil tussen vectoren en afbeeldingen echt opvallend. Mijn advies is dus om zoveel mogelijk vectoren te gebruiken om knoppen vorm te geven.

Mogelijke knopstanden op het web zijn: default, hover, actief, focus, geselecteerd en buiten werking.

Default

Default is de ruststand. De knop is niet geselecteerd en doet verder ook niks. De vormgeving van deze knop stem je dan helemaal af op het belang van de knop en in welke context hij opereert. In dit verband is ook mijn vorige blog over deze hiërarchie van knoppen relevant.

Hover

Zodra de gebruiker met de muis boven een knop ‘hangt’ maar nog niet klikt activeert de webbrowser de ‘hover‑stand’. Bij een goed ontworpen hover-stand krijgt de gebruiker feedback en ervaart hij zekerheid erover dat hij op de juiste knop zal gaan drukken.

De hover-stand komt niet voor in onze reële wereld. Knoppen hebben geen sensoren ingebouwd om te zien of je met je vinger er boven hangt. Ze geven geen visuele feedback, net als bij aanraak­schermen. Deze kunnen (nog) niet herkennen dat je met je vinger boven een bepaalde knop zweeft. De hover-stand heeft in de echte wereld er nog het meest van weg om een knop aan te raken zonder hem in te drukken.

Op de iPad is aanraken synoniem met indrukken. Je verwacht dus dat de hover-stand op het systeem van de iPad niet voorkomt. Toch is dit wel het geval en om de volgende reden. Ontwerpers gebruiken de hover-stand voor internettoepassingen om zowel de kleur van een knop aan te passen als om nieuwe opties te tonen, zoals een menu. Zouden de ontwerpers van de iPad de hover-stand dus letterlijk nemen, dan zou je met de iPad heel wat web­pagina’s niet meer kunnen bekijken. Daarom kozen ze ervoor om de iPad, de hover-stand te laten interpreteren als een actieve‑stand. Het resultaat is dan dat de bezoeker de hover-stand aanroept zodra hij op de iPad een knop in­drukt. De oorspronkelijk actieve-stand, die je hebt ontworpen zie je dus niet meer. De iPad overschrijft deze met de hover‑stand. Lastig want je wilt niet de hover-stand als actieve stand vormgeven. Wanneer je dat nou toch doet, dus de hover-stand als actieve stand ontwerpen, dan geef je de muis-gebruikers het gevoel dat de knop al actief is wanneer ze er met de muis boven zweven en hem nog niet hebben aangeklikt.

Mijn advies is daarom de hover-stand als een half ingedrukte knop vorm te geven. Op een aanraak­scherm ziet het eruit alsof je het indrukt en op de desktop­scherm krijg je het gevoel dat je het nog verder kunt indrukken.

Actief

De actieve stand laat de webbrowser maar heel kort zien, namelijk het moment waarop je de muisknop aan het in­drukken bent. Hoewel het moment kort is, geeft een goed ontworpen actieve stand een fijn gevoel bij de gebruiker. De stand communiceert naar de gebruiker dat de knop inderdaad is ingedrukt en dat alles naar verwachting werkt.

Focus

Als je met Firefox werkt, zie je een lelijk gestippelde rand zodra je op een link of knop klikt. Die rand hoort bij de focus. Firefox combineert namelijk de actieve en focus‑stand. Een veel gebruikte manier om die lelijke rand weg te halen is simpelweg de focus-indicatie verbergen. Je zorgt er dan helaas voor dat gehandicapte bezoekers, die geen muis kunnen bedienen, je website niet meer kunnen gebruiken, want juist voor hen is die focus-stand bedoeld. Zij navigeren met tab-knop van functie naar functie. Door de omlijning van de focus-stand weten ze waar ze welke functie op de website activeren is als ze op enter drukken.

Verwijder daarom nooit de focus‑stand. Maak hem juist mooi op zodat het goed opvalt en een eenheid met je layout vormt. Roger Johansson geeft de tip dat je de focus moet invullen alsof het de hover is. Hoe je het uiteindelijk doet maakt niet zoveel uit, als de focus maar glashelder is.

Geselecteerd

Een geselecteerde knop geeft aan dat de zichtbare content of functie te maken heeft met die specifieke knop. Het geeft een mode aan. Zorg er dus voor dat het overduidelijk is wat geselecteerd is en waar de gebruiker op dat moment mee bezig is.

Voor bezoekers die via de homepage binnenkomen is het belangrijk, maar nog veel belangrijker is het voor bezoekers die via een zoekmachine, dus zonder voortraject, binnen­komen. De laatste groep heeft geen enkel houvast en moet zich direct kunnen oriënteren vanuit de context van de pagina en hoe ze verder kunnen navigeren.

Om die reden moet je voorzichtig zijn met het opnemen van menu’s in de navigatie. Je kunt daarmee namelijk niet meer het huidige subniveau helder aangeven. Bezoekers hebben er geen idee van waar ze in de structuur beland zijn. Menu’s om te navigeren moeten dus altijd samengaan met kruimelpaden.

Buiten Werking

Knoppen in formulieren kan je met behulp van Javascript deactiveren. Handig als je wilt voorkomen dat de gebruiker meerdere malen dezelfde informatie achter elkaar opstuurt. Soms duurt het namelijk even voordat een formulier is opgestuurd vanwege een trage internet­verbinding. Een vertraging in de interactie kan de bezoeker onzeker maken: Heb ik de knop wel goed ingedrukt? Het is ook heel menselijk om meerdere keren op de knop te drukken als iets niet zo snel gaat als je zou willen. Je ziet het vaak mensen doen die op een lift staan te wachten of bij het voetgangers­oversteek­licht.

Door een knop te deactiveren en met tekst aan te geven dat de informatie nu wordt verwerkt, stel je de gebruiker gerust. Een gedeactiveerde knop duid je aan door saturatie van de knop te verminderen en het contrast tussen de knop en de tekst ervan te verlagen tot het punt dat die net nog te lezen is.

Een simpel voorbeeld hiervan zonder formvalidation is: of: In css kan je de volgende selector gebruiken om de vormgeving aan te passen: .button[disabled]

Knoppen en knopstanden

Gebruik zoveel mogelijk CSS3, ontwerp de hover als een gedeeltelijk ingedrukte knop en maak de focus glashelder. Hierdoor houd je rekening met hoge resolutie schermen, aanraakschermen, mobiele apparaten en je bezoekers met een handicap.

Voorbeelden van knoppen vormgegeven met CSS3 kan je onder andere vinden op Nimbupani, Smashing Magazine, Webdesign­ledger, specky­boy en zurb.

Bart van de Biezen

Bart van de Biezen

Als cognitief ergonoom bij Aan Zee Communicatie, onderzoek, ontwerp, spreek en schrijf ik over user interfaces en usability. M'n achtergrond: Industrieel Ontwerpen en daarna Psychologie aan de Universiteit Twente, afgestudeerd bij Philips op midair pointing voor een nieuwe generatie TV's, Apple Design Award voor CSSEdit, usability onderzoeker bij MetrixLab en blogger.