Überblick

Die Gestaltung eines Buttons (auch »Schaltfläche« oder »Knopf« genannt) wird von passionierten Screen-Designern heiß geliebt. Denn hier kann man so richtig schön am Detail herumfummeln und eine individuelle Note hineinbringen.

Genauso wie Schuhe zur Kleidung passen sollten, so sollten die Buttons auch zum Screendesign passen. Im Web findet man aber allzuoft unpassendende Kombinationen, z.B. Smoking mit Turnschuhen, Badehose mit Cowboystiefeln, Kartoffelsack mit Pumps. Ich will hier jedoch keine Mode-Tipps geben, sondern lediglich zeigen, wie man schöne Schuhe selber herstellt. Ob sie dann letzten Endes zu Deinem Screendesign passen, musst Du einfach selbst entscheiden — lang lebe die gestalterische Vielfalt.

Nachfolgend erläutere ich kurz die Grundlagen der Buttongestaltung. Denn ist nicht nur wichtig, dass man mit seiner Grafik-Software umzugehen weiß, sondern diese Möglichkeiten auch zugunsten der Bedienungsfreundlichkeit einsetzt.

Über die rechte Menüleiste kannst Du zu den Schritt-für-Schritt-Lösungen navigieren.

Grundlagen der Button-Gestaltung

Im Web findet man Buttons in den verschiedensten Farben und Formen. Einige davon sind in mühevoller Kleinst-Arbeit entstanden, andere wurden im Schnellverfahren generiert oder ganz einfach von anderen Seiten geklaut, was arm und zugleich auch noch illegal ist.

Aber ganz gleich, wieviel Mühe man in die Erstellung der Buttons auch investiert, ein Designer sollte nie ihre eigentliche Funktion aus den Augen verlieren. In erster Linie sind sie dazu da, den Besuchern die Sprungmöglichkeiten einer Web-Seite klar und schnell zu offerieren und sie gezielt zu den gewünschten Inhalten zu navigieren.

Was sollte man also bei der Gestaltung eines Buttons beachten? Neben bestimmten ästhetischen Anforderungen, die jedoch immer nur subjektiv beurteilt werden können, erfüllt ein gelungener Button IMO noch folgende Kriterien:

• Er hebt sich genügend vom Hintergrund / dem Screendesign ab,
• wird vom Besucher als »drückbar« identifiziert und
• seine Funktion ist sofort und intuitiv zu erkennen.

Der »typische« Button besitzt deshalb eine eingegrenzte Fläche mit einem Rahmen oder Schlagschatten (durch die er sich abhebt), eine durch Licht und Schatten erzeugte Plastiziät (die ihn »drückbar« macht) und eine Beschriftung (durch die seine Funktion klar wird).



•   Buttonform

Ein Button braucht keine allzu ausgetüftelte Grundform zu besitzen. Je ungewöhnlicher ein Button geformt ist, desto größer ist sogar die Gefahr, dass die Besucher ihn nicht als Button erkennen.

Häufig wählt man deshalb auch einfache Formen wie Kreis, Dreieck und Rechteck. Es können aber durchaus auch innovative Buttonformen verwendet werden, wenn dafür gesorgt wird, dass sich der Button am Ende deutlich vom Hintergrund abhebt, als solcher erkannt wird und sein Funktion klar ist.

Klassische Bildbearbeitungsprogamme, wie etwa der Picture Publisher, bieten in der Regel keine besonders komfortablen Möglichkeiten, um Buttonformen herzustellen. Oft kann man dies mit nur mit den Maskenwerkzeugen und Hilfslinien erledigen.

Eine weitaus komfortablere Möglichkeit, schnell zur gewünschten Form zu gelangen besteht darin, sie einfach in einem Vektorgrafikprogramm wie z.B. Corel Draw erzeugen und in das Bildbearbeitungsprogramm zu exportieren.

Und wer diese Möglichkeit nicht hat oder dies nicht kann, für den habe ich einige Grundformen vorbereitet. Es handelt sich um TIFF-Dateien, bei denen die Buttonform innerhalb des Alphakanals (also als Maske) mit abgespeichert ist.

Nach dem Entzippen und Öffnen der TIFF-Datei ist also lediglich ein weißes Bild zu sehen und eine Maske mit entsprechender Form. Mit dieser kann dann beliebig weitergearbeitet werden.

Welche Form darf es denn sein?


Nach Klick auf die gewünschte Form kannst Du die entsprechende Maske abspeichern (ist in die TIFF-Datei integriert).


•   Rahmen und Schlagschatten.

Rahmen oder Schlagschatten sind vor allem dann richtig wichtig, wenn der Button keine ausreichend kontrastierende Farbe zum Hintergrund besitzt.

So ist es weniger gut: Der Button hebt sich zu wenig vom Hintergrund ab. Die Besucher können daduch den Inhalt und die Navigation nicht mehr so leicht voneinander unterscheiden.

Schon besser. Der Button wurde durch einen Rahmen vom übrigens Bild abgegrenzt. Besucher, die ihren Blick auf diesen werfen, erkennen: Das ist kein Inhalt, sondern ein Button.

Ein Schlagschatten ist nicht zwingend erforderlich, hilft aber den Besuchern dabei, die Navigation noch deutlicher vom Inhalt unterscheiden zu können.


Letztendlich geht es darum, dass die Besucher schnell sehen, von wo aus es wohin weitergeht. Niemand möchte erst nach Buttons suchen müssen.


•   Licht und Schatten

Ein Button muss nicht zwingend Licht- und Schattenkanten haben. Dies ist in erster Linie eine Frage des persönlichen Geschmacks und der vertretenen »Design-Philosophie«.

Da die Buttons aus der realen Welt (z.B. Klingelknöpfe oder Tasten an Geräten) ebenfalls plastisch sind, verstärkt ein plastisch wirkender Web-Button nocheinmal die Gewissheit, dass man dort auch »draufdrücken« kann.

Der Vergleich zwischen nicht-plastischem Button (links) und plastischem Button (rechts) zeigt: Plastizität verstärkt bei einem Button den Eindruck, dass man dort auch tatsächlich "draufdrücken" kann.


•   Beschriftung

Die Beschriftung ist das Wichtigste an einem Button. Ohne sie weiß niemand, was passiert, wenn man draufklickt. Der Button ist also ohne sie unnütz. (Ausnahme: Die Buttonform selbst ist schon Beschriftung genug, z.B. Pfeil nach rechts = weiterblättern, Fragezeichen = Hilfe).

Bei der Verwendung von Symbolen sollte man aufpassen: Was für einen selbst vielleicht glasklar ist, gibt Besuchern unter Umständen Rätsel auf. Und die will im Web weiß Gott niemand lösen, sondern das Ganze sollte gefälligst intuitiv sein.

Inzwischen haben sich aber einige Symbole etabliert, die von nahezu jedem Besucher intuitiv verstanden werden. Dazu gehören u.a. das Haus (= »zur Startseite«), Pfeile (= »weiter« oder »zurück«, ...), Fragezeichen (= »Hilfe«), Häckchen (= »OK«), Briefumschlag (= »E-Mail schicken«), usw.

Da ein Button nicht viel Platz für Text bietet, stellt sich ein ähnliches Problem, wenn man die Funktion eines Buttons mit Hilfe eines Begriffes eindeutig beschreiben möchte. So haben sich inzwischen (nicht nur auf Firmen-Sites) Begriffe wie »Kontakt« etabliert, obwohl sie eigentlich kein Web-Gestalter so richtig liebt. Gäbe es einen besseren Begriff, dann hätte er sich schon etabliert. Es gibt ihn aber nicht, oder kennst Du einen?

Auf der anderen Seite ist es aber nicht sinnvoll, neue Begriffe einzuführen oder gar zu erfinden, wenn Besucher deren Bedeutung erst lernen müssen oder intuitiv anders verstehen. (So pochen z.B. viele Marketing-Abteilungen aus persönlicher Eitelkeit oft darauf, dass »Ihre« Begriffe oder Sprachschöpfungen auch auf der Web-Site verwendet werden. Das Resultat: Der Besucher findet sich nicht zurecht.)

Will man also eine besucherfreundliche Web-Site erschaffen, dann bleibt am Ende nichts anderes übrig, als mit der Masse zu schwimmen und bei den Buttons Begriffe zu verwenden, die sich bereits bewährt und etabliert haben.

Eines ist aber auf jeden Fall zu empfehlen: Die Beschriftung eines Buttons sollte mit einer schnörkellosen Schriftart erfolgen. Schreibschriften sehen zwar hübsch aus, haben aber auch einen hohen Lesewiderstand. Der Begriff kann bei diesen nicht auf einen Blick erfasst werden, sondern muss gelesen werden – anstrengend.


Die Beschriftung des linken Buttons ist deutlich schlechter zu erfassen als die des rechten. Schreib- und Kunstschriften eignen sich nicht für die Beschriftung von Buttons. Ausnahme: Man will gar nicht, dass der Besucher schnell navigiert.

Damit hätten wir alle Grundlagen beisammen, die aus meiner Sicht bei der Button-Gestaltung zu beachten sind und können uns nun daran machen, »die Teile zusammenzufummeln«. Viel Spaß!