Für was sind Symbole da? Damit man es einfach hat. Denn sie werden schnell und intuitiv erkannt, vermitteln eine eindeutige Information und vermeiden Missverständnisse. Deshalb gibt es Stoppschilder, Totenköpfe oder kleine Kreuze rechts oben auf Programmfenstern Ihres Rechners. Und im Onlinemarketing fördern sie – richtig eingesetzt – die Usability.

Wie man eigentlich eindeutige Symbole auf einer Website falsch einsetzt und damit Nutzer verwirrt und verärgert, das zeigt die Navigation von TeeSchwendner.

Was ist ein Symbol?

Ein Symbol – oder auch „Sinnbild“ – ist eine Grafik, die mit einer ganz bestimmten Information bzw. Bedeutung verbunden ist. Meist ist diese Grafik auch sehr einfach und rudimentär.

Screenshot TeeGschwendner
Japanischer grünter Tee bei TeeSchwendner am 14.08.2014. Detailansicht des Menüs siehe unten.

Ein 6-Eck in Rot ist für uns das als Stoppschild ein Symbol und zeigt – egal ob im Straßenverkehr, an einer Tür oder auf dem Bildschirm – das wir jetzt nicht oder nur sehr vorsichtig weiter gehen bzw. fahren sollten. Ein Kästchen mit einem Kreuz rechts oben symbolisiert auf einem Bildschirm jedem Computernutzer, dass nach einem Klick etwas weg ist (nämlich das Fenster geschlossen). Und ein @ weißt genauso eindeutig auf eine E-Mail hin wie ein Totenkopf uns abhält, ein bestimmtes Gelände zu betreten oder etwas zu Essen. Ob rotes Secheck, Kreuz rechts oben oder Totenkopf: das Symbol genügt, um die Bedeutung zu transportieren. Weitere Erklärungen oder Texte braucht es nicht.

Warum? Weil eine ganz einfache, ursprünglich neutrale Grafik (das Kreuz) immer wieder im gleichen Zusammenhang verwendet wurde und die gleiche Bedeutung hat („schließen“). Das haben alle in der betreffenden Zielgruppe (in diesem Fall Computernutzer) gelernt und wissen es ganz intuitiv sofort.

Es gibt aber einen Unterschied zwischen einer einfachen Grafik und einem Symbol – und dieser Unterschied ist einzig seine allgemeine Bekanntheit. Eine Grafik ist nicht einfach so ein Symbol. Sie wird es nur, wenn praktisch jeder (in einer Zielgruppe) diese Grafik mit einer bestimmten, immer gleichen Information verbindet. Deshalb kann man auch nicht „Symbole entwickeln“, was leider so mancher Grafiker glaubt. Man kann immer nur Grafiken entwickeln. Daraus Symbole zu machen, ist extrem aufwändig.

Das richtige Symbole falsch genutzt

Und dann gibt es Grafiker, die setzen eine eigentlich mit einer Symbolwirkung verbundene Grafik einfach ein, ohne dass sie diese Symbolwirkung beabsichtigen. Das kann natürlich nicht gehen. Ist eine Grafik einmal ein Symbol, kann sie nur noch so verwendet werden. Die Assoziationen sind fest in das Gehirn der Nutzer eingebrannt und die Grafik ist untrennbar mit der symbolischen Bedeutung verbunden.

Navigation der Website
Die Navigation: was würden Sie beim Menüpunkt Japan erwarten? Die meisten Nutzer erwarten, dass es Unterpunkte gibt, also verschiedene grüne Tees aus Japan. Gibt es aber nicht. Das Dreieck-Symbol ist einfach „nur“ falsch eingesetzt.

TeeGschwendner das aber gemacht – ein bekanntes Symbol einzusetzen, aber die verbundene Symbolwirkung gar nicht beabsichtigt.

Denn jeder Computernutzer kennt es: wenn mehrere Begriff in einer Liste untereinander stehen und links eines Begriffs ein kleines nach rechts gerichtetes Dreieck zu sehen ist, dann heißt das: da gibt es noch mehr, ich kann was aufklappen. Mit einem Klick wird dann irgendetwas zusätzliches eingeblendet: meist Untermenüpunkte, aber auch Unterverzeichnisse oder einfach erklärende Informationen. Das Dreieck dreht sich dann oft nach dem Aufklappen auch nach unten und zeigt so, dass die Unterpunkte bereits zu sehen sind.

Nicht so bei TeeGschwendner. Dort verwendet man die Grafik eines kleinen Dreiecks im Menü der Website völlig ander. Es wird einfach nur als Designelement eingesetzt, mit dem die dritte von der zweiten Menüebene unterschieden werden soll (siehe Abbildung rechts). Klickt man nämlich auf den Menüpunkt „Japan“ oder „China“ in der dritten Menüebene passiert gar nichts. Es gibt keine weiteren Unterpunkte.

Die beabsichtigte Wirkung ist in diesem Fall also eine andere als die, für die das Symbol des Dreiecks üblicherweise eingesetzt wird. Nur dass ein Nutzer das nie verstehen wird bzw. kann. Ein solches Grafikelement wird niemals nur als Grafik oder Designelement wahrgenommen, sondern es hat immer die bekannte Symbolwirkung – das das heißt: hier kann man noch was aufklappen. . Das kleine Dreieck vor einem Begriff NUR als Verzierung und Unterscheidungsmerkmal einzusetzen ist unmöglich.

Messung und Optimierung der Usability

Ich schließe gerne eine Berater-Wette ab: wenn man ein MouseTracking auf die Seite setzt wird man sehen, dass auf diese Dreiecke im Menü sehr viele Nutzer klicken werden – und zwar, weil sie mehr sehen möchten. Und diese Nutzer hat TeeGschwendner dann verärgert: zuerst bietet man dem Nutzer an, dass es da mehr gibt und dann will der Nutzer mehr sehen z.B. zu japanischem Grüntee und kriegt es nicht. Diese Frustration wird dann leider auf die Website und die Marke übertragen und hinterlässt ein unschönes Gefühl. Sicher nicht das, was TeeGschwendner wünscht.

Meine Empfehlung als E-Commerce-Berater ist eindeutig: die Symbole an dieser Stelle unbedingt herausnehmen. Die Erkennbarkeit als dritte Menüebene muss anders sicher gestellt werden, z.B. durch stärkere Einrückung, andere farbliche Hinterlegung und/oder geringere Höhe der Menüpunkt dieser Ebene.

Idealerweise dreht man das Prinzip sogar herum und macht sich die Symbolwirkung der Dreiecke wirklich zu Nutze. Man bringt diese also an Menüpunkte an, die man wirklich aufklappen und weitere Unterpunkte aufrufen kann. Das macht die Navigation für den Nutzer einfacher und die gute Usability zahlt positiv auf die Marke ein.