Ein Button mit optischem Reiz

Tipps für Webdesigner – Optische Signale

Ich habe in dem Artikel Gestaltgesetze bereits einige Grundlagen über Gestaltung beschrieben, die beim Designen einer Website nicht außer Acht gelassen werden sollten.

Der folgende Artikel führt weiter aus, wie wir die Dinge wahrnehmen. Er soll für die Erstellung von euren Websites eine weitere Unterstützung sein.

Es werden noch weitere Artikel folgen, die euch Aufschluss über unsere Wahrnehmung geben. Dieses Wissen soll euch Ideen für eure Projekte liefern, euch helfen Fehler zu vermeiden und die Usability eurer Website erhöhen.

Optische Signale helfen uns, ein Objekt richtig zu verwenden

Die Form eines Objektes signalisiert uns bereits für welchen Zweck es gedacht ist. Wir müssen in der Regel nicht lange überlegen, sondern benutzen das Objekt intuitiv richtig.

Nehmen wir zum Beispiel eine Kaffeetasse. Angenommen, wir haben noch nie in unserem Leben eine Tasse oder ein ähnliches Objekt gesehen, sondern bisher nur aus Flaschen getrunken.

Wenn wir nun eine Tasse mit einem heißen Getränk sehen, verleitet uns der Henkel der Tasse intuitiv dazu unsere Finger um den Henkel zu schließen und die Tasse am Henkel anzuheben. Gerade, wenn wir aufgrund des Dampfes ahnen, dass die Flüssigkeit in der Tasse heiß ist und somit auch die Tasse selbst.

Ein solches optisches Signal wird Affordanz genannt. Aber wie hilft uns dieses Wissen nun im Webdesign weiter?

Die Elemente, die die Besucher unserer Website bedienen müssen, um eine Aufgabe zu lösen und zu  einem bestimmten Ziel zu gelangen, sollten so gestaltet sein, dass sie ihren Zweck deutlich signalisieren.

Nehmen wir zum Beispiel die Links. Links gibt es praktisch auf jeder Website.

Wir haben zwar einerseits gelernt und mittlerweile verinnerlicht, dass blaue, unterstrichene Wörter als Link gewertet werden sollen und diese zum Anklicken da sind aber es ist noch nicht das Optimum für einen Link.

Es reizt viel mehr, einen Link in Form eines Buttons zu drücken. Das hängt damit zusammen das ein Button in der Regel so gestaltet ist, dass er mit bestimmten Objekten assoziiert wird. Durch seine Schattierung hat ein Button dieselben optischen Signale wie zum Beispiel ein Klingelknopf an der Tür, Knöpfe zum Ein- und Ausschalten an diversen technischen Geräten oder einfach die Tasten auf unserer Tastatur.

So ein Button ruft uns aufgrund seiner Affordanz praktisch zu „Drück mich!“.

Ausschlaggebend dafür ist ein Reiz, der den Button für uns aus der Fläche herausragend und dreidimensional, also eindrückbar erscheinen lässt – die Schattierungen. Wichtig für diesen Effekt ist allerdings die Position der Schattierungen, dazu ein Beispiel:

Diese beiden Buttons sind aus ein und derselben Grafik entstanden, nur der rechte Button wurde einmal um 180° gedreht und schon hat er den gegenteiligen Effekt – er sieht eingedrückt aus.

Dieselben Buttons, nur aus verschiedenen Blickwinkeln

Diese Reize, die den User animieren den Button zu drücken, sind subtil, aber effektiv.

Zurück zu den blauen, unterstrichenen Wörtern – wir wissen, dass das normalerweise Links sind. Das ist soweit auch in Ordnung. Auch, dass andersfarbige Wörter im Fließtext Links darstellen, ist uns geläufig. Zugegeben, es ist auch relativ unzweckmäßig, für Links im Fließtext immer einen schönen, dicken Button einzubauen.

Jedoch gibt es auch Webdesigner, die ihre Links so gestalten, dass sie nicht sofort als Link auffallen oder gar nicht erst als Link wahrgenommen werden. Das ist insofern tückisch, da der Benutzer der Website – auch unbewusst, immer nach Objekten Ausschau hält, die ihm zu erkennen geben, dass er sie benutzen kann und für welchen Zweck sie da sind.

Vor allem, wenn er eine bestimmte Absicht verfolgt, zum Beispiel eine Bestellung tätigen, ist es sehr wichtig, dass klar erkennbar ist, was er als nächstes tun muss – will man einen zufriedenen Kunden haben.

Buttons verlieren auf manchen Webauftritten ihren Aufforderungsreiz, sie werden nicht mehr als richtiger Button gestaltet, sondern bestehen nur noch aus einer flachen Fläche. Manchmal heben sie sich zusätzlich noch nicht einmal besonders gut von der Umgebung ab und werden dadurch leicht übersehen.

Ganz schlecht ist es, wenn Links erst als Links erkennbar werden, wenn man den Mauszeiger darüber hält, also nur ein Hoover-Effekt für den Link besteht.

Auf mobilen Geräten, wie Smart Phones oder Tablets gibt es keinen Mauszeiger, ergo kann auch kein Hoover-Effekt ausgelöst werden. Dieser Fehler sollte also unbedingt vermieden werden.

Es ist andererseits genauso kontraproduktiv oder vielleicht sogar schlimmer, wenn falsche Reize gesetzt werden. Wenn also ein Objekt aussieht wie ein Link, aber gar keiner ist – die Irritation beim Benutzer ist dann sicher. Manche können dadurch so verunsichert werden, dass sie die Seite verlassen und lieber woanders ihr Glück versuchen.

Zusammenfassung:

  • Gestaltet eure Objekte so, dass sie deutliche Reize aussenden. Der Besucher soll intuitiv die Funktion der Objekte erkennen können und auch in der Lage sein diese zu bedienen, ohne erst darüber nachdenken zu müssen
  • Falsche Reize sind unbedingt zu vermeiden
  • Bei der Gestaltung von Objekten und Links solltet ihr nicht die verschiedenen Ausgabegeräte mit ihrer unterschiedlichen Bedienungsweise, wie zum Beispiel bei Smarth Phones, vergessen
About The Author

Diana Ludwig

Webdesignerin, Pinselschwingerin, Bloggerin und Studentin der Medieninformatik. Mein Steckenpferd ist das freie Open Source 3D Programm Blender, über das ich auf Blender-Tutorial schreibe. Du findest mich auch auf Google+ oder abonniere unseren RSS-Feed.

Comments are closed.