Die Links, die sich in Website-Logos verstecken

Ein Klick auf das Logo führt meistens zur Startseite des jeweiligen Webauftritts. In der Regel deutet aber nichts auf diese Funktion hin.

Links nach Vorschrift

Ein Grundsatz für gutes Interaktionsdesign lautet, dass sichtbar sein muss, womit man interagieren kann. Die tollsten Dinge nutzen schließlich nichts, wenn sie niemand findet.

Um Links im Web, also Verweise auf andere Seiten, als solche erkennbar zu machen, sollte man insbesondere zwei Prinzipien anwenden: Konsistenz und Konvention.

• Konsistenz bedeutet, dass Links immer identisch aussehen sollten. Wenn einer durch blaue Schriftfarbe, ein anderer durch eine gelbe Hinterlegung und wieder ein anderer durch einen roten Rahmen hervorgehoben wird, darf man sich nicht wundern, wenn die Seitenbesucher nur einen Teil davon als Links erkennen, weil sie den Rest für irgendetwas Anderes halten.

• Konvention bedeutet, dass die Gestaltung von Links Mustern folgen sollte, die traditionell mit Links in Verbindung gebracht werden. In ihrer Standard-Darstellung sind Text-Links seit Jahrzehnten blau und unterstrichen; deshalb erkennen die meisten Benutzer intuitiv, dass blauer oder unterstrichener Text irgendwo hinführt, wenn man ihn anklickt, antippt oder sonst wie aktiviert.

  (Umgekehrt sollte man blaue Textfarbe und Unterstreichungen vermeiden, wenn etwas kein Link ist, denn sonst könnte manch einer verzweifelt darauf herumklicken und sich wundern, warum nichts passiert. Meine Beispiele weiter oben dienen nur zur Veranschaulichung.)

  Text in durchgängigen GROẞBUCHSTABEN wird dagegen kaum jemand als Link erkennen, weil das unkonventionell ist. Und nein: Das ist kein konstruiertes Beispiel, sondern etwas, das ich tatsächlich schon einmal auf einer Typographie-Website gesehen hatte – da wurde offenbar mehr Wert auf die Ästhetik als auf die Benutzbarkeit gelegt.

Hier auf WIESOSO sind deshalb grundsätzlich alle Text-Links unterstrichen – auch in der Navigation. Nur auf die blaue Farbe verzichte ich aus praktischen Gründen; darüber hatte ich in einem allgemeinen Artikel über Text-Links schon Genaueres geschrieben, aber in aller Kürze zusammengefasst: Eine Farbmarkierung allein ist nicht barrierefrei und eine Kombination aus Farbe und Unterstreichung lenkt zu viel Aufmerksamkeit auf sich.

Leider ist blaue Farbe in Form eines Rahmens aber auch das einzige konventionelle Erkennungszeichen von Bildern, die irgendwohin verlinken … oder war es zumindest einmal, denn ich kann mich nicht erinnern, wann ich tatsächlich das letzte Mal ein blau umrahmtes Bild gesehen habe. Es ist mir nicht einmal gelungen, auch nur einziges Beispiel für so einen klassischen blauen Rahmen zu finden, das ich an dieser Stelle zeigen könnte.

Ersetzt wurde diese Konvention durch nichts. Zumindest ist mir nichts bekannt, was heute noch Bilder klar als Links erkenntlich macht. Und ob ein blauer Rahmen nach seiner jahrelangen Vernachlässigung immer noch für jeden intuitiv verständlich ist, ist auch fraghaft. In aller Regel kann man heute nur aus dem Kontext oder durch Herumprobieren erraten, wo sich ein Link versteckt.

Damit die Bild-Links auf WIESOSO nicht ganz im Verborgenen bleiben, habe ich mir angewöhnt, solche Bilder immer mit einem klassisch unterstrichenem Textlink zu kombinieren, der zum selben Ziel führt. Somit bleiben Links auf der ganzen Website konsistent erkennbar.

Auf der ganzen Website? Nein, nicht ganz. Ein kleiner Bildlink leistet der Konvention erbitterten Widerstand. Die Rede ist von meinem Website-Logo, das auf die Startseite verlinkt. Und in diesem Artikel erzähle ich, wieso das so ist.

Verlinken oder nicht verlinken?

Jetzt könnte man mich fragen, warum ich überhaupt das Logo auf die Startseite verlinke. Die Antwort lautet: Weil das ebenfalls eine Konvention ist. Das funktioniert auf Wikipedia, das funktioniert auf YouTube … und auf Österreichs seriösester Nachrichten-Website funktioniert es auch.

Unbedingt nötig wäre es auf WIESOSO nicht unbedingt, schließlich gibt es, wenn man gerade einen Artikel liest, links oben auch einen Text-Link namens »Artikelübersicht«, der eine ähnliche Funktion erfüllt. Aber diejenigen, die die Logo-Link-Konvention kennen, könnten sich vor den Kopf gestoßen fühlen, wenn bei einem Klick auf das Logo nichts passiert.

Was an meinem Logo-Link im Gegensatz zu meinem Text-Link verwirrend sein kann, ist die Tatsache, dass er immer da ist – auch dann, wenn man sich bereits auf der Startseite befindet. Dort kann man genauso auf das Logo klicken, aber es lädt bloß dieselbe Seite neu.

Auf Websites wie YouTube und x.com ist so etwas eventuell noch nützlich, um neue, aktuellere Inhalte vorgeschlagen zu bekommen, aber auf meinem chronologisch sortierten Blog, auf dem ich ein Mal im Monat einen neuen Beitrag schreibe, wird hoffentlich niemand so verbissen auf neue Artikel warten.

Den Link auf der Startseite – und nur dort – zu entfernen, wäre allerdings ein Bruch mit der Konsistenz. Wenn der Kopf meiner Website überall gleich aussieht, sollte er auch überall gleich funktionieren statt einmal mit und einmal ohne Link ausgeliefert zu werden.

Klar könnte man argumentieren, dass niemand einen Link vermissen würde, der einen ohnehin nur dorthin führt, wo man bereits ist. Das klingt wie eine Tür in einen kreisförmigen Gang, der bloß zurück zur selben Tür führt.

Aber aus eigener Erfahrung weiß ich, dass es nicht immer offensichtlich ist, ob man sich gerade auf der Startseite befindet. Da bringt ein Klick auf ein offenbar verlinktes Logo zumindest die Gewissheit, dass man wirklich an der Pforte steht.

Dummerweise besteht das Web aber aus sehr unterschiedlichen Websites – auch solchen, die nur eine einzige Seite beinhalten. Diese haben typischerweise natürlich keinen Startseiten-Link im Logo, weil man die Startseite ohnehin nie verlässt. Spätestens bei der Betrachtung quer über verschiedene Websites wird die Logo-Link-Konvention also doch ein wenig inkonsistent.

Das größte Problem dabei ist, dass man auf den ersten Blick oft nicht erkennen kann, ob es sich bei einer Website um einen Einseiter oder Mehrseiter handelt. Nicht selten gibt es auf Einseitern ein mehrseiter-typisches Menü, das aber nur zu Ankerpunkten innerhalb der Einzelseite springt. Und oft sind Einseiter inhaltlich so karg, dass ich mir nach dem ersten Blick sage »das kann doch nicht alles sein« und instinktiv auf das Logo klicke – in der vergeblichen Hoffnung, mehr vom großen Ganzen zu sehen.

Vielleicht wäre es also praktisch, auf Einseitern bei einem Klick auf das Logo ein Meldungsfenster einzublenden, in dem sinngemäß steht: »Sorry, das war alles! Mehr gibt es hier nicht zu sehen.«

Das Geheimnis, das jeder kennt

Da Logo-Links üblicherweise nicht direkt sichtbar sind, liegt die Vermutung nahe, dass viele Web-Nutzer gar nicht darüber Bescheid wissen. Aber was sagen konkrete Studien dazu?

Die erste Zahl, die ich spontan finden kann, hat in einer Nutzungsdaten-Analyse mit drei Websites über den Zeitraum von einem Quartal gezeigt, dass bei gleichzeitigem Vorhandensein eines Logo-Links und eines gleichwertigen Textlinks bis zu 95 Prozent aller Wege über das Logo statt den Textlink führen.

In einer anderen Studie mit Testpersonen, die auf Mode-Webseiten mit nur einem Klick zur Startseite springen sollten, scheiterten vier Prozent daran, den Link in einem links oben positionierten Logo zu finden. Wenn ich die nicht ganz so ausführliche Beschreibung richtig interpretiere, bestehen diese vier Prozent aus gerade einmal einer von insgesamt 25 Testpersonen, also sollte man den konkreten Prozentsatz nicht auf die goldene Waagschale legen. Mit nur einer Person mehr wären es acht Prozent, mit einer weniger eine glatte Null.

Aber beide dieser Studien zusammengenommen lassen den einigermaßen fundierten Schluss zu, dass rund 5 Prozent der Webnutzer die Logo-Link-Konvention nicht kennen. In jedem Fall lässt sich damit sagen: Ganz so geheim ist dieses Wissen nicht. Schade eigentlich – dann muss ich meine Visitenkarten-Bestellung für den exklusiven Klub der Logo-Link-Erleuchteten wohl stornieren …

Nichtsdestotrotz können sich diese fünf Prozent der Unwissenden rasch summieren. Von 1.000 Seiten-Besuchern im Monat – so viele bekomme ich in guten Zeiten via Google – wären das immerhin 50 Leute. Anders ausgedrückt: 600 Leute im Jahr. Oder 60.000 Leute in 100 Jahren – denn warum nicht gleich ins Extrem gehen, wenn ich mir die Dinge schon schönrechne, damit meine falschen Vorannahmen nicht mehr ganz so falsch aussehen?

Jeder kennt es, nicht jeder nutzt es

Die Logo-Links sind also gar nicht mal so unbekannt. Aber sind sie auch intuitiv zu benutzen?

Die Testpersonen-Studie hatte ausschließlich Websites einbezogen, die keinen Textlink zur Startseite haben. Insofern waren die Benutzer gezwungen, den Bild-Link zu finden – egal, wie hart und unmenschlich dieser Prozess auch sein mag.

Die andere Studie liefert da mit ihren Textlink-Vergleichen detailliertere Daten. Die schon genannte 95-Prozent-Klickrate auf das Logo statt den Text ist dabei lediglich ein Maximalwert. Je nach Website und Gerät schwankt diese Zahl stark – in einem Fall sinkt sie bis auf 16 Prozent und der Durchschnitt über alle untersuchten Varianten beträgt 58 Prozent.

Ursprünglich hatte ich vermutet, dass Smartphone-Nutzer seltener über die Logo-Links Bescheid wissen als PC-Nutzer, weil man am Smartphone ja tendenziell mehr Apps statt Webseiten benutzt. Aber da lag ich falsch: Bei Mobilgeräten wurden genauso wie auf dem Desktop bis zu 95 Prozent erreicht und in dem 16-Prozent-Szenario war die Logo-Klickrate auf Smartphones sogar ein wenig höher als am PC.

Entscheidender als die Hardware ist offenbar die Gestaltung der jeweiligen Website. Die Datenanalyse-Studie argumentiert etwa, dass der Textlink auf der 16-Prozent-Logoklick-Website »deutlich sichtbarer und klarer« (»far more visible and clear«) ist als jener auf der 95-Prozent-Logoklick-Website. Das deutet an, dass der Logo-Link nicht sonderlich gut sichtbar und klar ist. In anderen Worten: Er ist trotz seiner grundsätzlichen Bekanntheit nicht besonders intuitiv.

Die Testpersonen-Studie zeigt außerdem, dass die Position des Logos einen großen Unterschied macht. Während nur eine von 25 Personen (4%) daran gescheitert ist, ein links oben ausgerichtetes Logo zur Navigation zu nutzen, sind in einer zweiten Testgruppe mit einem mittig ausgerichtetem Logo sechs von 25 Personen (24%) gescheitert. Mehrere dieser Gescheiterten hatten stattdessen – scheinbar instinktiv und offenbar ohne ihn zu lesen – den ersten Textlink links oben im Menü angeklickt.

Aufgrund unserer westlichen Leserichtung – von links nach rechts und von oben nach unten – klingt es logisch, dass Seitenbesucher den Link zur Startseite instinktiv dort, am Start der Seite, suchen. Und da ich auf WIESOSO dort genauso instinktiv einen passenden Textlink hingepackt habe, muss ich mir auch keine Vorwürfe wegen des nicht-links ausgerichteten Logos machen.

Bitte hier entlang!

Zusammenfassend kann man sagen, dass Logo-Links trotz fehlender Markierung als Link bereits gut angenommen werden, aber kein ideales Navigations-Werkzeug darstellen, weil sie nicht von jedem gefunden werden und klar formulierte, gut sichtbare Textlinks offensichtlich zugänglicher sind.

Ein Textlink – links oben auf der Website positioniert – sollte die Schwächen eines Logo-Links kompensieren können, aber wirklich elegant ist so eine Dopplung auch nicht. Das ist ein wenig so, als hätte man in seinem Wohnzimmer gleich nebeneinander zwei Türen, die in das Vorzimmer führen, wobei eine davon mit »Vorzimmer« beschriftet ist, während die andere aus einer als Bücherregal getarnten Geheimtür besteht, die aber trotzdem da sein muss, weil manch einer sonst in falscher Erwartung einer Tür gegen das Regal läuft.

Optisch mag das ja kein Makel sein, schließlich sieht man den Link im Logo nicht. Aber wer die Website mit einer Tastatur bedient – zum Beispiel im Zusammenspiel mit Sprachausgabe wegen einer Sehbehinderung –, der bekommt zweifach den gleichen Link serviert.

Eine naheliegende Lösung bestünde darin, Logo und Text gemeinsam in einem einzigen Link zusammenzufassen. Dann müssten die beiden aber auch fix beisammen stehen, was einem nicht viel gestalterischen Freiraum lässt. Eventuell wäre es mit ein paar Formatierungstricks möglich, das Ganze anschließend optisch wieder voneinander zu trennen und anders anzuordnen, aber solche Tricksereien bringen oft mehr Probleme mit sich als sie lösen. Da tauscht man letztendlich Teufel gegen Beelzebub.

Sag mir zumindest, wohin die Reise geht!

Eine technisch einfachere – aber weit weniger nützliche – Verbesserung wäre es, das Logo mit einer Funktion zu hinterlegen, die seine Darstellung ändert, sobald man die Maus darüber hält oder es mit der Tastatur markiert. In diesem abgeänderten Logo könnte man zum Beispiel einen Text einblenden, der darauf hinweist, dass man hier zur Startseite kommt.

Mit so einer Funktion wäre der Link im Logo zwar auf den ersten Blick nach wie vor nicht ersichtlich, aber sobald man sich mit Maus oder Tastatur dorthin bewegt, erhält man ein deutliches und verständliches Signal, dass dort ein Link ist und wo dieser hinführt.

Wem selbst das noch zu viel Aufwand ist, der kommt nun auf meinem persönlichen, bodennahem Niveau an. Das Logo hier auf WIESOSO habe ich mit einem sogenannten Tooltip hinterlegt, einer kleinen Info-Box, die sich nur dann öffnet, wenn man den Mauszeiger kurz über dem Logo stillhält.

Touchscreen- und Tastaturnutzer werden das in der Regel nie zu Gesicht bekommen, aber dafür hat es sich mit nur einem einzigen Parameter im Code, also mit minimalem Aufwand, so einrichten lassen. So könnten zumindest ein paar Mausnutzer unter meinen 60.000 unwissenden Seitenbesuchern den gar nicht so geheimen Geheim-Link entdecken.