Ghost Buttons: Schickes Design-Element oder Usability-Falle?

Schon ein paar Jahre spuken sie im Web – Tendenz steigend – und mischen die Webdesign Trends auf: Die Rede ist von Ghost Buttons. Gerade im Minimalistischen Webdesign, Material Design und Flat Design greift man bevorzugt auf das Element zurück. Doch was genau verbirgt sich hinter dem Ghost Button und welche Vor- bzw. Nachteile bringt er mit sich?

 

Ghost Buttons sind gerade im Flat Design oder bei minimalistisch gestalteten Webseiten beliebt.

Transparent. Prominent. Formvollendet.

Als Ghost Button bezeichnet man einen Button ohne Füllung. In aller Regel besteht der transparente (oder semi-transparente) Button aus einem feinen Rahmen, kurzem und einfachen Text sowie einem Mouse-Over-Effekt, der den Button ausfüllt und die Schrift invertiert. Der Button transportiert einen call-to-action, das heißt im Kern, er fordert den Besucher dazu auf, eine bestimmte Handlung durchzuführen, er gibt ihm zugleich Orientierung und er schafft Vertrauen und Sicherheit. Das Gestaltungsmittel ist auch unter den Begriffen Empty Button, Naked Button oder Hollow Button geläufig.

 

Durchsichtige Hingucker

Ghost Buttons stechen durch Ihre Transparenz hervor. Auf ein Minimum reduziert treten sie einerseits in den Hintergrund, sodass die zentrale Botschaft im Fokus bleibt und große Bilder sich in ihrer vollen Wirkungskraft entfalten können. Zugleich nehmen sie den User dezent, unaufdringlich und ohne überladene Effekthascherei bei seinen folgenden Schritten an die Hand.

Aktuell erfreuen sich Ghost Buttons auch in unserem Webdesign Berlin großer Beliebtheit. Gerade auf schlicht designten Webseiten machen sie sich gut und fügen sich ideal in die Gesamtharmonie der Seite ein. In Kombination mit Hero Images oder Blurry Background Bildern kommen sie besonders gut zur Geltung.

Der Ghost Button im Überblick:

  • transparent / hat keine Hintergrundfarbe
  • von einem schmalen Rahmen umrandet
  • enthält einen einfachen kurzen Text
  • Text & Rahmen sind meist schwarz oder weiß gehalten
  • besitzt gegenüber traditionellen Buttons ein etwas größeres Format
  • prominente Platzierung
  • call-to-action Funktion
  • beliebte Anwendung im Flat-Design, Material-Design, UX-Design & Minimalismus-Design

 

Zwischen Blickfang und Diffusion

Wie jedes andere (Trend-)Design-Element bringt der Ghost Button seine Vorteile genauso mit sich wie seine Nachteile. Richtig eingesetzt wirkt er wie ein eleganter Eye-Catcher, der die Seite zusätzlich ordnet und ihr einen harmonischen letzten Schliff gibt. Unbedarft eingefügt hingegen, kann er den Besucher verwirren oder einfach nur untergehen.

Geistreicher Minimalismus

Was vermeintlich einfach aussieht, kann große Wirkung haben: Bedacht implementiert und harmonisch eingebettet schafft der Naked Button es, nicht von den Bildern abzulenken, sondern dem Besucher vielmehr visuelle Anhaltspunkte mit Ordnungscharakter zu geben. Das Gestaltungselement verleiht der Seite so eine aufgeräumte und edle Ästhetik. Die Handlungsaufforderungen, die der Button transportiert, sind dabei ganz klar ohne aufdringlich zu wirken.

Der Ghost Button fügt sich ideal in das Konzept Minimalistisches Webdesign ein: Im Fokus stehen hier Funktionalität sowie eine klare Nutzeroberfläche mit wenigen, dafür aber besonders akzentuierten Elementen. Minimalismus-Webseiten arbeiten mit flachen Texturen, eingeschränkten Farbpaletten und viel negativem Raum. Das sorgt für kurze Ladezeiten und bietet viele Vorteile im Hinblick auf responsive Design.

Zudem lassen sich die transparenten Buttons vergleichsweise einfach mit HTML oder CSS kreieren (hierfür kann man im Netz sogar Tutorial-Anleitungen finden). Trotz der Schlichtheit wirken sie nicht trivial, sondern vielmehr ausgefeilt. Da sie größtenteils aus leerem Raum bestehen, lassen sie sich simpel mit anderen Gestaltungsmitteln und jedem Style verbinden. Auch in Sachen Versatilität können Ghost Buttons punkten: Im Prinzip können sie in jedem Farbschema zum Einsatz kommen. Schließlich gehören Ghost Buttons aktuell zu den angesagtesten (UI) Trends, die jeder Page einen modernen Look verleihen.

Die Vorteile des Ghost Buttons bei richtiger Anwendung im Überblick:

  • schlichtes und modernes Design
  • anspruchsvoller & raffinierter Look
  • eindeutiger aber unaufdringlicher call-to-action
  • Web Design Element, das nicht ablenkt; Hintergrundbild bleibt sichtbar
  • einfaches Design und Implementierung
  • vielfältige Einsatzmöglichkeiten

 

Den Geist (über)sehen?

Crowded out: Die Einfachheit und Durchsichtigkeit der Buttons kann ihnen aber genauso zur Falle werden. So könnten Besucher einer Seite die transparenten Knöpfe (gerade auf kontrastreichem Hintergrund) erst gar nicht als solche identifizieren. Hierbei ist es wichtig, wo der Ghost Button auf der Seite platziert wird, sodass er nicht untergeht, sondern die Aufmerksamkeit des Benutzers auf sich zieht.

Essenziell ist außerdem die Entscheidung bezüglich der Farbgebung: Photographische Hintergründe und eine ungünstige Farbwahl für die Buttons resultieren schnell in Unübersichtlichkeit und Unlesbarkeit. Gerade bei Nicht-Technikaffinen sorgt die Suche nach einer Möglichkeit sich weiterzuklicken dann nur für Verwirrung.

Die Nachteile, wenn Ghost Buttons ungünstig platziert werden, im Überblick:

  • Hintergrundbild kann den Button u.U. übertönen
  • Button kann Hintergrundbild überwältigen
  • schlechte Lesbarkeit
  • Button kann verwirren
  • könnte in ein paar Jahren veraltet sein