Spookknoppen: wat is de juiste aanpak?

Minimalistische ontwerpen domineren tegenwoordig moderne websites, flat design is al enige tijd de belangrijkste trend. Sterk in opkomst zijn daarbij de zogenoemde spookknoppen, een dun kader met contrastrijke tekst erin. Die moeten gebruikers meteen naar belangrijkste content leiden. Waar moet je op letten?

Ghost buttons of spookknoppen zijn een wat vreemde benaming voor wat ze beogen: want zichtbaar zijn ze namelijk maar al te zeer. Alleen storen ze niet en zijn ze een geheel met hun achtergrond. Deze knoppen maak je met behulp van een style scheet, via elementen als <button> of <input>, en vergen doorgaans weinig ingewikkelde handelingen.

Maar flat design is nog geen garantie voor succes, waarschuwt Denis Potschien van Noupe. Die knoppen mogen bijvoorbeeld niet in de achtergrond verdwijnen, en dat gebeurt al gauw bij contrastrijke websites of het gebruik van levendige kleuren.  Spookknoppen doen het vooral goed tegen een achtergrond van foto’s, of bewegende video op de achtergrond, wat je ook steeds vaker ziet. Omdat de knoppen niet veel ruimte innemen komen die achtergronden juist goed naar voren.

Je kunt die knoppen overigens zo creatief mogelijk maken. Dankzij CSS3 zijn er nauwelijks beperkingen: ze kunnen ronde randen krijgen of volledig transparant zijn, met expressieve lettertypen, discrete animaties en transities. Maar houd het rustig.

En vergeet vooral niet de functie van de spookknop: het is een al dan niet transparante call-to-action, met als belangrijkste doel om de bezoeker te navigeren naar wat hij interessant vindt. En die content moet dat ook wel echt interessant zijn. Spookknoppen zijn geen vervanging van het hamburgermenu, de wegwijzer van met name mobiele sites. Gebruik de spookknop dus met verstand, en met mate. Goede voorbeelden van spookknoppen in e-commerce hier.