Blog
Ghost Buttons
Robert GiezenLead Ontwerper
Ontwerp19 oktober 2015

Ghost Buttons, Waarom ze WEL werken

Nee, ze heten misschien ‘Ghost buttons’, maar ze zijn zeker niet onzichtbaar en hebben niet de vorm van een spook. Alhoewel, dat laatste zou nog best kunnen. Wat is een ghost button dan wel? Misschien ken je ze ook als ‘Hollow buttons’. Het zijn knoppen bestaande uit een simpele tekst omgeven door een dunne lijn, op een transparante achtergrond. Meestal zijn ze ook wat groter dan de gewoonlijke knoppen. In het voorbeeld hieronder herken je ze waarschijnlijk direct, ze zijn namelijk al een tijdje erg populair. Er is echter al zo lang als ze bestaan de discussie gaande of ze wel doen wat ze zouden moeten doen. Tja, wat moeten ze eigenlijk doen?

“Het zijn knoppen bestaande uit een simpele tekst omgeven door een dunne lijn, op een transparante achtergrond.”

Ghost buttons voorbeeld

Een button is voornamelijk een onderdeel van functioneel design, en de vormgeving zou afhankelijk moeten zijn van zijn functie. De functie van een button in zijn simpelste essentie is dat er op geklikt moet worden, maar er komt natuurlijk meer bij kijken. Dit is allemaal afhankelijk van je doel, de functie, en je designconcept. De ghost button is één van de vele mogelijkheden, en zeker geen ‘one-and-only’ weg naar succes. Daarom zetten we de rest even opzij en wil ik alleen maar zeggen dat ghost buttons WERKEN, indien goed uitgevoerd.

Geeft content ademruimte

Ghost buttons zijn zo populair vanwege hun minimalistische en elegante stijl. Daarnaast geven ze een open gevoel van vrijheid. Door hun transparantie gaan ze makkelijk op in de rest van je design, en geven ruimte aan andere elementen. Dit is zowel een vloek als een zegen. Ghost buttons worden vaak gebruikt op websites die het volledige scherm willen benutten voor opvallende fotografie. Zo kan er toch een ‘Call-to-action’ aanwezig zijn op je pagina zonder dat je het beeld blokkeert. Simplistische websites die gebruik maken van minimal-design zijn er ook dol op. De ghost button geeft een gevoel van rust en orde, en nodigt je uit om door te klikken op je eigen tempo. Niks vervelender dan een vette schreeuwerige knop die je opjaagt en het gevoel geeft dat ze je iets proberen te verkopen.

DO DONT Ghost button

Fouten zijn snel gemaakt, gelukkig zijn er designers

Zoals ik al zei kent deze rustige houding ook zijn keerzijde. Het transparante design gaat makkelijk op in andere elementen, en daarmee ook makkelijk verloren in de achtergrond. Dit kan leiden tot kelderende conversie cijfers en gefrustreerde bezoekers. Indien verkeerd geplaatst kan het voor onervaren bezoekers zelfs totaal onduidelijk zijn dat het hier om een knop gaat, in plaats van een omlijnde titel.

“Net zoals bij alles in design moet je weten wanneer iets echt tot zijn recht komt.”

Maar dat is waarom designers gelukkig nog een baan hebben. Er zijn een aantal checks waar je rekening mee moet houden, en dan valt ook de transparante ghost button op. Net zoals bij alles in design moet je weten wanneer iets echt tot zijn recht komt. Daarom heb ik hieronder een paar Tips & Tricks op een rijtje gezet.

Tips & Tricks voor Ghost buttons

Zorg voor een duidelijke contrast tussen de achtergrond en je button.
In het voorbeeld hieronder zien we dat de witte tekst verloren gaat op de lichte, zo goed als witte, achtergrondfoto. Hierdoor verliest de button zijn leesbaarheid.

ghost buttons voorbeeld

©bilderphoto.com

Zorg voor een schone, minimalistische omgeving
Als je gebruik maakt van ghost buttons, zorg dan dat de button vrij staat van andere (klikbare) elementen. Zorg dat je ghost button geen competitie heeft en leid je bezoekers er visueel naartoe.

Ghost button voorbeeld

©anyilu.com

Hou je copy kort en duidelijk
Houd de Call-to-action van je button kort en duidelijk. De kracht van de button is zijn eenvoud, dit geldt ook voor de tekst. Geef er richting aan, zodat mensen weten dat het om een button gaat.

Ghost buttons voorbeeld

Less is more

Dus om terug te komen op de vraag; doen ghost buttons hun werk, of zijn ze de ondergang van je conversies? Tuurlijk, het kan allemaal opvallender, overheersender, en ook dit is niet de enige weg naar succes. Maar wanneer correct gebruikt in de juiste situatie is het een kans om de nadruk niet alleen op je knoppen te leggen, maar ook op de inhoud die je probeert te verkopen.

Content gericht design iets voor u? Leer meer over de mogelijkheden!

BREAKING NEWS: Per 1 januari 2019 gaan @junction.nl, @in2media.live en @friksweb samen verder onder de naam JUNCTION Creative & Digital Agency. 🎉 Meer info? Link in bio. #friksweb

NEW WORK: www.deunsk.nl 😁 @_delangejeroen_

BREAKING NEWS! Het redesign van Sanjesfertier staat online 💪🏻. Lees alles over de case op onze website. De link vind je in onze Bio. #friksweb #webdesign #bedrijfsfotografie

Die keer toen @jochem1979 op vrijdagmiddag Anne Hazes en Ricky ‘Genot’ uitnodigde 😁🎉 #workhardplayhard #friksweb #vrijmibo #tb

25 portretten voor @teamfrysk 📸 Laat het schaatsseizoen maar komen! 💪🏻 #portretphotography #elfstedenhal #smile #friksweb

Gratis quickscan
Hoe presteert jouw website? Klik hier voor een gratis Quickscan!
×