Jenseits blauer Links: klickbare Elemente erkennbar machen

by Hoa Loranger (deutsche Übersetzung) – 08.03.2015

Das Surfen im Internet ist ein Mittel zum Zweck und dabei zählt jeder Klick. Nutzer müssen wissen, welche Bereiche der Seite rein statische Inhalte enthalten und welche Bereiche anklickbar sind (bzw. durch Tippen aktiviert werden können).

Legen Sie den Nutzern die klickbaren Elemente offen, damit die Nutzer nicht über die Bedeutung von Designelementen nachdenken müssen oder unliebsame Überraschungen erleben, falls Dinge nicht wie erwartet funktionieren. In diesem Fall gilt der Spruch von Jakob Nielsen: «Das Leben ist zu kurz, um auf Dinge zu klicken, die Sie nicht verstehen.»

Dabei geht es ganz einfach um die Frage der Interaktionskosten (engl.): Menschen behandeln Klicks wie eine Währung, die sie nicht leichtfertig ausgeben. Sie bewachen ihre Klicks sorgfältig und hassen Websites, die sie zwingen, nach klickbaren Elementen zu suchen, oder – noch schlimmer – ihre Klicks zu verschwenden.

Tom’s of Maine: Veranstalten wir ein kleines Quiz. Raten Sie, welche Bereiche auf diesem Bildschirm klickbar sind. Scrollen Sie dann nach unten, um die Antwort zu erfahren.

Ein wichtiger Faktor bei der Gewinnung von Klicks, ist die Qualität des Linktexts. In diesem Artikel konzentrieren wir uns aber auf den visuellen Aspekt der Klickbarkeit: erkennen Sie, welche Bereiche weiterführend sind, indem Sie sich die Website einfach nur ansehen? Wie ein Objekt aussieht, informiert uns darüber, wie wir es verwenden können. Don Norman, Mitbegründer der Nielsen Norman Group, beschrieb diese physisch erkennbaren Hinweise, die uns über die Nutzung eines Objektes informieren, als wahrgenommenen Aufforderungen (engl.), oder, aktueller, als so genannte Signifier (engl.). In der online Welt beurteilen Menschen die Anklickbarkeit von Dingen basierend auf vorhergehendem Wissen über die Welt im Allgemeinen und das Internet im Besonderen. Sie geben visuellen Eigenschaften, wie Formen, Farben und Inhalten, eine Bedeutung, die sich auf bekannte Muster abstützt. Visuelle Hinweise, die den Erwartungen entsprechen, helfen ihnen dabei, schnell herauszufinden, auf welche Dinge sie klicken sollten.

Der traditionelle Hinweis auf Hyperlinks ist blau unterstrichener Text, wie wir ihn hier verwenden. Buttons sind, genau wie im echten Leben, viereckig und sehen dreidimensional aus. Diese Charakteristika liefern die stärksten Hinweise auf Klickbarkeit, weshalb wir in den Anfangsjahren empfahlen, dass Buttons und Links diese Richtlinien einhalten sollten.

Moderne Nutzer hatten allerdings bereits mit Hyperlinks und Buttons zu tun, die ganz anders aussahen. Signifier können sich mit der Zeit weiterentwickeln, da Nutzer mit verschiedenen Interaktionshinweisen konfrontiert werden und lernen, diese neuen Hinweise zu erkennen.

Der Flat Design Trend (ein Nutzeroberflächendesign, das sich auf zweidimensionale, flache Illustrationen konzentriert und gut von iOS 7 und Windows 8 veranschaulicht wird) sorgt allerdings dafür, dass der minimalistische Zugang einiger Webdesigner extreme Züge annahm. Die Idee, die hinter einem Flat Design steckt, ist es, die Nutzeroberfläche zu vereinfachen. Zu viele Dinge zu entfernen sabotiert dieses Ziel allerdings, da die Interaktion dadurch komplexer wird. Ein Hauptproblem des Flat Designs ist, dass einer der stärksten Hinweise für Klickbarkeit – die Dreidimensionalität – komplett entfernt wurde. Strukturen, die Nutzer seit langem verwendeten, um Hinweise zu erhalten, verschwanden. Dies führte dazu, dass es schwerer wurde zu erkennen, welche Dinge klickbar sind und welche nicht.

Tom’s of Maine: Auf dieser Seite sind nur die grün unterlegten Bereiche klickbar. Nutzer, die auf Dinge ausserhalb dieser Klickzonen klicken, werden leider enttäuscht.

Die Klick-Unsicherheit reduzieren

Zwingen Sie Nutzer nie zu Mouseover, um herauszufinden, ob ein Text klickbar ist. Links nachzujagen ist mühsam und Nutzer werden es nicht lange tun. (Falls es eine Usability-Richtlinie gibt, die immer wahr sein wird, ist es, den Aufwand der Nutzer zu reduzieren. Mehr Aufwand bedeutet geringere Nutzung.) Unten stehend finden Sie einige grundlegende Design-Überlegungen, um das Rätselraten zu reduzieren:

Textlinks

• Obwohl Blau immer noch die sicherste Linkfarbe ist, funktionieren andere Farben genauso gut, solange sich die Links klar vom restlichen Text unterscheiden. Falls Sie keinen bestimmten Grund haben, um eine andere Farben zu bevorzugen, empfehlen wir Ihnen dennoch Blau als sicherste Wahl.
• Die Position eines Links kann Ihnen dabei helfen, festzustellen, ob der Link unterstrichen werden sollte. Die Inhalte von Navigationsmenüs und Listen, vor allem am Rand der Website, müssen nicht unterstrichen werden. Ihre Position identifiziert sie als Links.
• Testen Sie die Farben, die Sie für Ihre Hyperlinks auswählen, um sicherzustellen, dass sie auch von farbenblinden Menschen problemlos erkannt werden können.
• Statische Objekte sollten nicht dieselbe Farbe wie Hyperlinks haben.
• Verwenden Sie keinen blauen Text (oder unterstrichenen Text) für nicht anklickbare Objekte.
• Egal welches Aussehen Sie für Ihre Hyperlinks wählen, stellen Sie sicher, dass Sie diese Prinzipien konsequent auf der gesamten Website anwenden.

Patient Safety and Quality Healthcare: Die irreführenden Hinweise auf dieser Seite sorgen für Verwirrung. Die blauen Überschriften sind nicht anklickbar. Die Bilder sind zwar klickbar, sehen aber wie statische Bilder aus. Die Anleitung im oberen Bereich der Seite erklärt Ihnen, worauf Sie klicken können – ein eindeutiges Zeichen für ein fehlgeschlagenes Design.

Starbucks: Links müssen nicht mehr blau sein. In diesem Fall ist es offensichtlich, dass die Hyperlinks auf dieser Seite grün sind. Die Listen im rechten Bereich der Seite suggerieren aufgrund ihrer Platzierung (in einer schmalen Spalte auf der Seite) und Formatierung (Kästchen und Stichpunkte mit Links, ohne anderen Text) Klickbarkeit.

Buttons

• Sorgen Sie dafür, dass Buttons zumindest entfernt physischen Tasten ähnlich sind. Damit ein Objekt erkennbar wird, muss es die richtigen visuellen Hinweise aufweisen, um schnell und korrekt die richtigen Assoziationen hervorzurufen. Behalten Sie die viereckige Form bei (bevorzugt mit abgerundeten Ecken), falls Sie auf Dreidimensionalität verzichten. Interaktive Komponenten eines Flat Designs sollten klickbar aussehen – auch ohne weitere Effekte, wie Schatten und Farbverläufe.
• Sorgen Sie umgekehrt dafür, dass nicht klickbare Objekte auf keinen Fall wie Buttons aussehen. Indem Sie zum Beispiel Überschriften mit einer Hintergrundfarbe versehen, ähneln sie Buttons, obwohl sie keine sind.
• Konzentrieren Sie sich auf die Inhaltshierarchie der Seite. Vermeiden Sie es, viele bunte Kästchen in verschiedenen Grössen auf einer Seite zu platzieren. Nutzer haben Probleme damit, klickbare Elemente zu finden, falls ähnlich aussehende Objekte miteinander konkurrieren.

TaskRabbit: Buttons müssen im Internet nicht skeuomorph sein – das bedeutet, dass Sie nicht genau wie physische Tasten aussehen müssen. Diese vier Buttons funktionieren, da sie klare Ränder aufweisen, konsistent sind und mit keinen anderen Elementen konkurrieren.

Menagerie Climb: Ist das orangefarbene Kästchen ein Button? Die Antwort lautet: nein. Die Farbe und die Bezeichnung sorgen dafür, dass es wie ein Button aussieht, obwohl es keiner ist.

GNC: Shop by Department und Tools & Resources sehen wie Buttons anstatt Kategorie-Überschriften aus.

Bilder und Grafiken

• Stellen Sie sicher, dass kleine Bilder grösser werden, sobald Sie angeklickt werden.
• Machen Sie alle Elemente (z.B. Bilder, Symbole, Texte), die miteinander verbunden sind, klickbar. Dadurch wird das Ziel vergrössert, was die Wahrscheinlichkeit eines beabsichtigten Klicks erhöht.
• Vermeiden Sie mehrere Handlungsaufforderungen für ein einzelnes Bild, ausser die Optionen werden im Bild deutlich präsentiert – zum Beispiel durch Links in Listenform oder klar bezeichnete Buttons.

Symbole und Icons

• Wenn Sie Icons als Links verwenden, stellen Sie sicher, dass das Symbol sofort erkennbar ist. Falls Sie kein wirklich starkes Resemblance Icon haben (das seine Funktion klar kommuniziert) und kein Icon, das zum Standard wurde, sollte das Symbol immer mit anderen visuellen Hinweisen, wie einem Textfeld, kombiniert werden, um Klickbarkeit zu suggerieren.

Ein Pfeilsymbol könnte auf Klickbarkeit hinweisen, obwohl keine anderen Hinweise auf die Klickbarkeit vorhanden sind. Das ist allerdings der am wenigsten vorteilhafte Zugang, da der Pfeil kein Standardhinweis ist und für einige Menschen zu subtil ist, um erkannt zu werden. Falls Sie sich für diese Methode entscheiden, stellen Sie sicher, dass Sie Pfeile sparsam einsetzen, um Ihre Nutzeroberfläche so einfach wie möglich zu gestalten.

CNN: Die Pfeilsymbole auf dieser Seite signalisieren Klickbarkeit in einem Flat Design. Ohne die Pfeile können Nutzer nicht wissen, dass sie auf die schwarzen Felder klicken können.

Trader Joe’s: Wie erwartet, ist die Liste unter der Überschrift «Announcements» anklickbar. Der blaue Text ist ein starker Hinweis dafür. Doch wie sieht es mit der Liste unter dem Bild aus? Dieselben originellen Icons, die in der zuvor erwähnten Liste zu finden sind, werden auch hier verwendet. Solche Unstimmigkeiten sorgen für Verwirrung.

Schlussfolgerung

Fördern Sie die Interaktion Ihrer Website, indem Sie klickbare Objekte so gestalten, dass sie von Nutzern schnell erkannt werden. Obwohl es in Ordnung ist, sich von traditionellen Linksdesigns, die Klickbarkeit signalisieren, zu verabschieden, ist es problematisch, sich zu weit von altbekannten Mustern zu entfernen.

© Deutsche Version. Institut für Software-Ergonomie und Usability AG. Alle Rechte vorbehalten.