Georg Peez & Michael Schacht: Gestaltungshinweise zur Arbeit mit Autorenprogrammen und HTML-Editoren

Bildschirmdarstellung von Schriftarten
Bildschirmhintergrund
Buttons, Icons und Schaltflächen
Grafiken für das Internet

Buttons, Icons und Schaltflächen

Auf Interaktivität hin konzipierte multimediale Präsentationen kommen ohne Bedienelemente nicht aus. Solche Bedienelemente werden auf dem Bildschirm meist als Knöpfe (engl.: "Buttons") dargestellt. Wenn Nutzende einen Knopf oder eine Schaltfläche auf dem Monitor anklicken, wird eine Aktion ausgeführt, ihre Handlung hat Folgen: Eine Musik erklingt beispielsweise, eine Animation beginnt oder eine neue Seite wird aufgerufen.
Im Gegensatz zu vorgefertigten Schaltflächen und Knöpfen, die die Editorenprogramme fix und fertig bieten und die für Anfänger hilfreich, weil leicht verfügbar sind (Abb. 1), lassen sich mit einem Grafikprogramm oder speziellen Icon-Editoren wie z. B. Microangelo durchaus interessantere, teils animierte Schaltflächen ("Animated GIFs") individuell und passend zum Thema der eigenen Präsentation gestalten.

Abb. 1 Abb. 2 Abb. 3


Wenn man Worte in einer bestimmten Schrift schreibt, als GIF abspeichert und diese Grafik dann in einer Multimediapräsentation mit einem Link belegt, so kommen viele Nutzende nicht unbedingt auf den Gedanken, mit der Maus hierüber zu fahren, um zu sehen, ob sich der Mauszeiger evtl. zu einer Hand mit ausgestrecktem Zeigefinger verwandelt, ob also hierunter ein Link bzw. eine Funktion verborgen ist (Abb. 2). Ein Link sollte (neben der aus dem Internet bekannten Option des unterstrichenen farbigen Textes) in aller Regel als Schaltfläche erkennbar sein und “anfassbar” erscheinen. Eine Ausnahme wäre ein bewusstes “Verstecken” des Links, um Nutzende zum “Suchen” anzuregen, damit sie sich mit der Seite näher beschäftigen. Gerade in multimedialen Präsentationen, die innerhalb des Kunstunterrichts entstehen, sollte die Anweisung “Bitte hier klicken” eigentlich nicht vorkommen, wenn dieser Verweis optisch durch eine entsprechend gestaltete Grafik vermittelt werden kann.
Eine sehr einfache und zugleich sinnvolle Lösung ist die Darstellung eines runden Knopfes oder einer beispielsweise rechteckigen Fläche, die einem Wort vorangestellt werden kann. Diese Grafik ließe sich im oberen Bereich etwas aufhellen und unten etwas abdunkeln, so dass sie plastisch erscheint. Ein solcher Knopf vermittelt optisch Assoziationen zu einem Schalter oder einem Klingelknopf. Je kleiner diese Fläche ist, desto schwieriger ist es allerdings, sie mit der Maus zu treffen (Abb. 3). Aus diesem Grunde werden die entsprechenden Worte oft direkt auf eine größere Schaltfläche geschrieben.
Ein Button wird einem realen Knopf noch ähnlicher, wenn sich der Knopf tatsächlich zu senken scheint, sobald man ihn mit der Maus anklickt, oder sich zumindest verändert, z. B. seine Farbe von grau zu rot wechselt. Hierfür muss man eine zweite Grafik im Grafikprogramm erstellen und im Editorenprogramm für die Präsentation entsprechend einfügen, so dass die zweite Grafik erscheint, sobald die Maustaste gedrückt wird (Abb. 4 a u. b). Diese Funktion kann zusätzlich mit einem entsprechenden Geräusch – das nicht unbedingt immer ein einfaches “Klick” sein muss, sondern eine zum Thema passende Tonfolge oder ein gesprochenes Wort sein kann – unterlegt werden.

Abb. 4a Abb. 4b


Die Unterlegung eines Textes mit einem Schlagschatten, um hierdurch Räumlichkeit zu erzielen, erscheint allerdings wenig eindeutig (Abb. 5). Auch wenn der Text über der Grundfläche zu schweben scheint, so ist er dennoch nicht als Schaltfläche eindeutig zu erkennen. Zu oft wird inzwischen dieser Schlagschatten-Effekt in den Printmedien genutzt oder auch auf Webseiten ohne mit einem Link unterlegt zu sein. Zu größerer Klarheit würde hier die Option einer Veränderung der Schrift bei gedrückter Maustaste führen, wie zuvor beim Button geschildert.

Abb. 5 Abb. 7


Eine effektive und sinnvolle Lösung für das Kenntlichmachen einer Schaltfläche mit unterlegtem Link ist der so genannte Roll-over-Effekt, wie er im Internet in den unterschiedlichsten Varianten häufig verwendet wird. Fährt man mit der Maus über eine zunächst nicht erkennbare Schaltfläche, ändert diese ihre Farbe, sie scheint aufzuleuchten oder man löst mit seiner Bewegung eine kurze Animation aus (Abb. 6 a u. b). “Roll-over” ist eine Funktion, die jedes Multimedia-Editoren-Programm bereithält. Per Java-Skript lassen sich Roll-over-Effekte auch in HTML-Dokumente einbinden. Eine weitere Möglichkeit: Der Button ist zunächst im Normalzustand nur angedeutet, etwa leicht grau. Gelangt man mit dem Mauscursor hierüber, wird erst dann die Schaltfläche vollständig sichtbar. Auch das Roll-over lässt sich freilich mit einem Sound unterlegen.

Abb. 6a
Abb. 6b


Ein Knopf muss nicht immer mit einem Begriff versehen werden, der auf eine Funktion verweist. Ein entsprechendes Icon bzw. ein Bildausschnitt (Abb. 7) können oft auch die Botschaft an Nutzende vermitteln. Gerade in unserer von den Bildmedien geprägten Zeit lernen Heranwachsende im Entwerfen eines Icons als Schaltfläche, ihre Bildsprachenkompetenz aktiv und produktiv weiterzuentwickeln und auszubauen. Doch Icons sind längst nicht immer eindeutig: Wer z. B. statt den Namen von Künstlerinnen und Künstlern zu schreiben, deren Porträts oder ein Kunstwerk abbildet, setzt bei Nutzenden voraus, dass diese die Konterfeis bzw. Arbeiten der Personen entsprechend erkennen können. Dennoch: Für ein Schulfach, das die visuelle Kommunikation zum Thema hat, ist es wichtig, Schaltflächen nicht nur mit Worten zu bestücken, sondern deren Funktion bildlich kenntlich zu machen.


Literatur
Loviscach, Jörn: Klick-Collage. Gestalten für Multimedia. In: c‘t Heft 19, 2000, S. 202-211


Bibliografische Angaben zu diesem Text:

Michael Schacht / Peez, Georg: Buttons, Icons und Schaltflächen. In: Kunst + Unterricht 257 / 2001


Michael Schacht (http://www.michaelschacht.de) & Georg Peez (http://www.georgpeez.de) Zuletzt geändert am 28.08.2001