Controlling 21

Dr. J. Schuhmacher

vg

Link-Gestaltung
(einzeln und gruppiert)

Links sind heute nicht mehr standardisiert. Deshalb wird es bei der Link-Gestaltung sehr schwierig.

Farbe

Grundsätzlich sollte sich die Farbe der Links von derjenigen des Fließtextes und der Überschriften auf allen anvisierten Zielgeräten deutlich unterscheiden. Nicht jeder Nutzer fährt mit seinem Mauszeiger über alle Flächen des Monitors, um per Zufall anhand der sich verändernden Form des Mauszeigers auf einen Link zu schließen. Ein derartiges Erraten der Linkposition oder Absuchen nach Links muss unter ergonomischen Gesichtspunkten vermieden werden.

Trotz aller Freiheit muss für eine ergonomische Orientierung eine für jeden Auftritt standardisierte Linkfarbe existieren. Etabliert haben sich Links in der Farbe Blau. Standards sollte man nicht unbegründet verlassen. Der Einsatz anderer Farben sollte deshalb genau bedacht werden, da die Verwendung neuer Linkfarben zu einem zusätzlichen Lernaufwand beim Nutzer führt. Dennoch ergaben Untersuchungen, dass die meisten Farben, sofern sie konsequent eingesetzt sind, nur wenig schlechter erkannt werden als Blau.

Die drei grundlegenden Navigationsaufgaben für jeden Nutzer lauten: wo bin ich jetzt, wo war ich bereits und wohin kann ich gehen? Dies lässt sich ideal mit drei konsequent eingesetzten Linkfarben ergonomisch umsetzen.

Ergonomisch unerlässlich ist - vor allem ältere Nutzer - die andersartige Kennzeichnung eines bereits besuchten Links. Angeblich halten sich 74% der Internet-Auftritte (vermutlich in den USA) an diese Konvention. (https://www.nngroup.com/ articles/change-the-color-of-visited-links/) Ohne über die "Vergangenheit" und die gegenwärtige Position des eigenen Handelns im Internet Kenntnis zu besitzen, kann man die zukünftige Auswahl nicht genau bestimmen. Mit anderen Worten besteht die Gefahr, dass Nutzer die Orientierung verlieren und immer wieder schon besuchte Seiten aufrufen.
Auch hier wird die ursprüngliche Farbe Violett als zu auffällig im Sinne von störend empfunden. Oft finden sich blassere, mattere, trübere, "ausgewaschenere", dezentere Farbschattierungen des unbesuchten Links (z.B. Hellblau). Im Prinzip braucht nur die Grundregel eingehalten zu werden, dass der unbesuchte Link dem Nutzer als attraktiver, ins Auge springender etc. erscheint, als der bereits besuchte. Ferner sollten die für beide verwendeten Farben in einem für den Nutzer logischen Zusammenhang stehen. Dies wird u.a. durch Schattierung einer Farbe erzielt.

Den Standort der momentan angezeigten Seite muss man im Gesamtzusammenhang des gesamten Internet-Auftrittes verdeutlichen, z.B. dadurch, dass man ihn in der Navigation hervorhebt. Als Farbe für die momentan aktive Seite empfiehlt sich eine Farbe, die mit der Farbe der Hauptüberschrift der Seite korrespondiert. Ferner hat sich in meinen Untersuchungen herausgestellt, dass eine auffallende Farbe vor allem bei komplexen Navigationen sehr hilfreich ist. Überdies sollte es eine Farbe sein, die den Nutzer nicht zum nochmaligen Aktivieren (Anklicken) auffordert. Dies würde nur zu einem erneuten Laden derselben Seite führen: Eine Aktion, die jeden Nutzer verwirrt. Sofern dies technisch möglich und vom Aufwand gesehen vertretbar ist, kann man den Link zur gerade aktiven Seite auch deaktivieren. Allerdings bedarf dies einer peinlich genauen Qualitätssicherung, um tote Links zu vermeiden.

Hover- (Schwebeeffekt) oder sonstige Zusatz-Effekte in Farbe beim Bewegen des Mauszeigers über einem Link ergeben keinen Mehrwert und werden als unergonomisch angesehen, da sie die Seite als überladen erscheinen lassen. Ferner ergaben sich in meinen Untersuchungen, dass manche Nutzer dadurch verwirrt wurden. Die Funktion ist bei weitem nicht allen Internet-Surfern bekannt. (Zur Ausnahme der Unterstreichung siehe Form Hover-Effekte.)

Form

Für die schnelle und fehlerfreie Wiedererkennung ist es ergonomisch erforderlich, dass alle Links einheitlich aussehen (sowohl im Fließtext als auch in den diversen Navigationen).
Überdies dürfen in der Umkehrung auch andere Textelemente (besonders Hervorhebungen) nicht mit Links verwechselt werden können.

Unterstreichungen werden heute oft als nicht mehr den modernen Ansprüchen der Ästhetik gemäß gesehen. In der Tat lenken sie sehr den Blick auf einen einzelnen Link und helfen so diesen in einem Fließtext zu finden, verwirren jedoch in einem Linkcluster (z.B. der Navigation). Dennoch fordern Usability-Päpste wie Nielsen sie auch 2004 noch. (https://www.nngroup.com/ articles/guidelines-for-visualizing-links/) Allerdings räumt er nun meine Forderung ein, dass in einer klar als solchen erkennbaren Navigation und in Link-Listen die Unterstreichung entfallen darf.
Untersteichungen haben sich allerdings als hilfreich für stark sehbehinderte Menschen erwiesen.

Meist verwendet man heute fette Links, die nicht unterstrichen sind. Wichtig ist dann jedoch dass diese Kombination von Farbe mit Fett ausschließlich für Links verwendet wird.

Links müssen immer und überall von der Zielgruppe als solche erkannt werden. Folglich ist es ein Zeichen für ein Ergonomieproblem, wenn - wie vereinzelt zu finden - mit Grafiken (oft Pfeilen) auf Links erst hingewiesen werden muss.

Grafische Links weisen ergonomische Nachteile auf. Die erhöhte Ladezeit, die geringere Lesbarkeit grafisch gesetzter Schrift sowie das fehlende Kennzeichen für bereits besuchte Links. In Untersuchungen wurde nachgewiesen, dass letzteres Phänomen die Nutzer zu einer früheren Aufgabe der Aktivitäten veranlasst, da sie sich nicht im Besitz der erforderlichen Kontrolle sehen. In der Tat klicken sie oft nicht alle vorhandenen Links an, da sie den Unterschied zwischen unbesuchten und besuchten nicht erkennen. (https://www.nngroup.com/ articles/change-the-color-of-visited-links/)
Grafische Links werden - wenn überhaupt - fast nur in der Navigation, jedoch selten im Fließtext verwendet.

Eine Text-link-Navigation ist einfacher für Neulinge zu erfassen als eine grafische. Eine Navigation mit grafischen Icons ist hingegen für Profis, welche die Bedeutung der Icons kennen, schneller benutzbar.

Insbesondere sollte man die Navigation nicht mit Grafiken überladen, da diese Elemente dann teilweise als Werbung missverstanden werden.

Die Größe (Höhe und Breite) und der Abstand der Links voneinander sollten die Eingabegeräte sowie die motorischen Fähigkeiten der Zielgruppe berücksichtigen. Vor allem kleine Links, die dicht gepackt werden, sind oft - nicht nur für alte und sehbehinderte Menschen - kaum lesbar bzw. fehlerfrei bedienbar. Die Größe des Linktextes sollte nicht unter der des Fließtextes liegen! Eher ist es möglich, alle Links zur besseren Kenntlichmachung ca. 1-2 Punkte größer zu formatieren. Allerdings muss man dann auf den Zeilenabstand des Fliestextes achten, ansonsten entstehen evtl. auffällige ungleiche Zeilenabstände.
In diesem Zusammenhang widerspreche ich auch deutlich einigen Usability-Päpsten, die - neben großen - auch kleine Links für weniger wichtige Elemente für zulässig erachten. Dies wäre ein klarer Verstoß gegen die Konsistenz in der Ergonomie. Alle Links müssen in derselben Größe erscheinen, da die Größe eines der Wiedererkennungsmerkmale für den Nutzer ist.

Vorsicht ist bei sehr schmalen Links angebracht. So haben hochgestellte Fußnoten oft nur eine sehr geringe Breite (eine einstellige Zahl) und eine geringe Höhe. Dies gestaltet die Aktivierung für motorisch behinderte Nutzer (Laptop ohne Maus) oft relativ schwierig.

Hover-Effekte, die einen Link beim Darüberbewegen des Mauszeigers als unterstrichen erscheinen erlassen, bewirken zwar keinen merklichen ergonomischen Vorteil, zeigten jedoch auch keine Nachteile. Andere Hover-Effekte gelten zunehmend als unergonomisch, da sie - vor allem bei vielen Links - die Seite als unruhig erscheinen lassen können.
Diese Befehle dürfen jedoch nicht dazu eingesetzt werden, Link-Texte zu ersetzen. Ein Link muss immer auch ohne, dass man mit dem Mauszeiger darüber fährt, als solcher klar erkennbar sein.

Erstaunlicherweise stellte ich in Versuchen immer wieder fest, dass viele Nutzer versuchen, Bilder anzuklicken. Dieser Effekt tritt umso häufiger auf, je kleiner die Bilder sind. Vermutlich hat dies mit dem verbreiteten Einsatz von thumbnails (verkleinerten Bildvorschauen) zu tun. Wenn Sie folglich Grafiken oder Fotos in der Nähe von Links positionieren, dann sollten diese auch sinnvoll verlinkt sein.

Verlinkte Karten (clickable image maps) erweisen sich für Neulinge oft als Problem, da sie erstens nicht erkennen, dass man Teile der Karte anklicken kann, zweitens die Grenzen/Ränder der anklickbaren Felder oft schwer erkennen und drittens angesichts fehlender Bezeichnungen oft im Unklaren über die Folgen eines Klicks bleiben. I.d.R. sollte man eine derartige Karte zusätzlich mit einer normalen Textlinkliste versehen oder zumindest deutlich die Funktion der Karte beschreiben. (Letzteres stellt allerdings einen gravierenden Verstoß gegen die Selbstbeschreibung in der Ergonomie dar. Deshalb sind solche Karten auch nicht sonderlich ergonomisch.)

Bezeichnung des Zielobjektes

Der Name des Links sollte aussagekräftig (selbsterklärend) sein und etwas über den sich dahinter verbergenden Inhalt darlegen. Der Professor für englische Literatur George Landow sprach in diesem Zusammenhang sogar von einer rhetoric of departure (Sprache des Verlassens, im Gegensatz zur Sprache der Ankunft auf den einzelnen Inhaltsseiten auf die Verlinkt wird). Wenig hilfreich sind ohne den passenden Kontext Link-Bezeichnungen wie: "Weitere Details...", "mehr..." "weiter", "hier klicken...", "nächste Seite". Links wie "mehr..." "weiter" sind nur bei den öfter zu findenden kurzen Teaser-Texten bei Zeitungen halbwegs verständlich. Dort sollen sie zum gesamten Artikel führen.

Äußerst verwirrend können Schalter oder Text-Links mit der Bezeichnung "zurück" sein. Dem Nutzer und auch dem Programmierer ist oft nicht klar: "Wohin zurück?" Link-Bezeichnungen mit "zurück" und "weiter" funktionieren nur in linearen Navigationsstrukturen, etwa einer Bildergalirie mit selbständiger - als solche erkennbarer - Sondernavigation.

Sogar der Link "Home"/"Startseite"/"Start" bliebt bei vielen komplexen Auftritten unklar. Führt er den Nutzer zur Startseite des gesamten Auftrittes oder zur Rubrikenstartseite (z.B. der Startseite der Produkte)?

Vor allem am Ende einer längeren Seite sollte ein Link zum Seitenanfang führen, besonders wenn sich dort die Navigation befindet. Ebenso hat sich der Rücksprung-Link "zum Seitenanfang"/ "Zum Inhaltsverzeichnis" bei FAQs etabliert. Er ersetzt das Mühsame Scrollen (auch mit einem Rad auf der Maus) oder den Wechsel der Hand von der Maus zu den Funktionstasten auf der Tastatur.

Die Namen der Seiten und Rubriken sollte man gemäß den Nutzerzanforderungen aus Kundensicht vergeben und Kategorien aus Nutzersicht benennen. Sie sollten keine Kunstnamen verwenden. Grundsätzlich muss man bei Links (in der Navigation und im Text) das Sprachniveau der Anwender beachten. So sind in Informationsauftritten abstrakte Nomen zur Information sinnvoll. Während in Verkaufsauftritten eher aktive Verben, die eine Handlung hervorrufen, das Ziel erreichen.

Vermeiden Sie - vor allem in der Navigation - vorangestellte Artikel oder Firmennamen. Sie ergeben keinen Mehrwert und stören das Scannen (schnelle Überfliegen) der Liste.

Ein Link sollte den Nutzer mit dem Namen bereits verraten, welches Dateiformat sich dahinter verbirgt: eine Textseite (in welcher Sprache), eine Grafik, ein PDF, ein Video, eine Musikdatei etc. I.d.R. erwartet der Benutzer eine weitere HTML-Seite.

Besonders wichtig sind zusätzliche Angaben bei großen Dateien (z.B. Downloads). Hier empfiehlt sich der exakte Dateiname (z.B. "Aufsatz.pdf") und generell die Dateigröße in KB sowie die erwartete Ladezeit mit einem der Zielgruppe angemessenen Referenzanschluss (z.B. "Dateigröße: 200 KB - Ladezeit: ca. 30 Sekunden mit ISDN").

Für den Benutzer hilfreich eingesetzt werden kann bei Links vor allem der Title-Tag, der in einem kleinen Fenster weitere Informationen sichtbar macht. Teilweise bietet sich auch noch der OnMouseOver-Tag an, dessen Informationsangaben in der Statuszeile heute auf den großen Monitoren jedoch oft übersehen werden. Beide erscheinen als Hover-Effekte, wenn der Nutzer seinen Mauszeiger über den Link bewegt. Man sollte maximal 60 Zeichen für diese Kennzeichnung verwenden, da der Hover-Effekt des Browsers den Text nach einigen Sekunden wieder verschwinden lässt! Angesichts der kurzen Zeit sollten Sie auch von komplizierten Wörtern oder Sätzen darin Abstand nehmen, da sie oft nicht schnell genug verstanden werden.

An diesem Beispiel lässt sich erneut zeigen, dass es keine pauschale Ergonomie für alle gibt. Generell ist die Ergonomie zielgruppenabhängig. So finden viele Power-User / erfahrene Internet-Nutzer es hilfreich, wenn bei Links unten in der Statuszeile der wahre Name der Ziel-Datei mit der dazugehörenden Verzeichnisstruktur angezeigt wird. Sie können sich anhand einer statischen Struktur mit sprechenden Namen den Aufbau und Standort der Datei so besser vorstellen. Neulinge und Nutzer von dynamisch generierten Seiten, bei denen nur noch kryptische Codes als Seitenbezeichnung auftreten, empfinden OnMouseOver-Befehle mit verständlichen Hinweisen sinnvoller. Z.B. statt www.firmenname.de/start.jsp?1234ölkj0987yxcv4563lkh654asdf... besser "Informationen über das Produkt xyz, die Serviceleistungen und den Preisen".
Leider werden bei barrierefreien Auftritten und deren Test-Tools OnMouseOver moniert. D.h. man sollte sie für Auftritte, die diese Anforderungne erfüllen wollen, nicht verwenden. Aus diesen Gründen verzichte ich auf meinen Seiten auf diesen Befehl.

Beschriftung des Links

Prägnanz, Eindeutigkeit und gute wechselseitige Unterscheidbarkeit (Unverwechselbar) sind Merkmale, die nicht nur die Optik, sondern auch die textliche Gestaltung guter Links auszeichnen. Z.B. die beiden Wörter "beladen" und "entladen" eignen sich nicht sonderlich als Link-Bezeichner, da sie sowohl akustisch als auch bezüglich der Anzahl der Buchstaben in zu vielen Teilen zu ähnlich sind und sogar übereinstimmen. Hier wären z.B. die Bezeichnungen "Aufladen" und "Entleeren" ergonomischere Gegensatzpaare.

Unergonomsiche Linkbezeichnungen sind:

Für Normalnutzer sollte man kein Englisch und keine Fachwörter als Link-Bezeichnungen verwenden, es sei denn diese führen z.B. zur Erklärung des Ausdruckes, z.B. einem Glossar, Lexikon etc.

Geradezu als vorsätzliche Irreführung werden Links von den meisten Nutzern empfunden, die Ihr Versprechen nicht halten. Hinter einem korrekt bezeichneten Link müssen auch die versprochenen Inhalte angeboten werden.

Ziel des Links

Es mag dem Profi kaum mehr auffallen, aber Neulinge fühlen sich oft unsicher beim Anklicken eines Links, weil sie nicht wissen, wohin sie dieser Link führt. So kann es sich um eine Sprungmarke innerhalb derselben Seite handeln. Als Ergebnis würde sich nur die Position im selben Dokument ändern. Ferner kann es ein Link zu einem anderen Inhalt desselben Auftrittes sein. Schließlich könnte sich ein externer Link verbergen, mit dem der Nutzer den Auftritt verlässt.

Noch schwieriger wird die Orientierung für den Nutzer bei der optischen Zielangabe. Der neue Inhalt kann im selben Browser-Fenster erscheinen, oder es kann sich ein neues (oder sogar mehrere) öffnen. Das neue kann ein Pop-Up sein oder ein vollständiges Browser-Fenster. Es kann das alte teilweise oder völlig überlagern. Vor allem letzteres führt bei vielen Nutzern zu einem Verlust der Orientierung, da sie nicht erkennen, dass nun mehrere Fenster geöffnet sind. Sie scheitern i.d.R. dann beim nicht möglichen Rücksprung!
Grundsätzlich sollte ein Internet-Auftritt nicht zu viele neue Fenster öffnen. Je nach anvisierter Zielgruppe empfiehlt es sich auf das Öffnen eines neuen Browser-Fensters im Vollformat hinzuweisen, und darauf, wie der Nutzer wieder zum alten Fenster zurückkehren kann.

Links auf fremde Seiten sollte man besonders kennzeichnen, damit der Nutzer erfährt, dass er diesen Auftritt verlässt. Hierzu kann man im Title-Tag des Links ganz deutlich schreiben "Sie verlassen unseren Auftritt und gehen zu einem externen Anbieter". Am Besten bietet man in diesem Fall dem Nutzer einen Weg zurück an, z.B. durch Öffnen eines neuen Fensters. Die Kombination von derartigem Hinweistext und neuem Browser schützt Sie auch vor Rechtsstreitigkeiten im Themenumfeld der externen Links!

Mailto-Link

Als Sonderfall gilt der Link, der ein E-Mail-Programm aufruft. Hier ist eine für jeden eindeutige Kennzeichnung als E-Mail-Adresse (am idealsten mit der lesbaren tatsächlichen Adresse) erforderlich. Der Befehl Mailto darf sich nicht hinter einem normalen Link (z.B. Kontakt) versteckt. Dieses Starten des E-Mail-Clients ist für den Nutzer sonst unerwartet und damit störend.

Ein Mailto-Link ist kein Ersatz für ein Kontaktformular. Es ist zu beachten, dass weder alle Nutzer einen E-Mail-Client installiert oder konfiguriert haben, noch dass alle Nutzer (vor allem bei privaten Surfaktionen in Firmen) diese E-Mail-Adresse dafür verwenden wollen.

Qualitätssicherung / Tests

Ein Hauptärgernis der Internet-Nutzer sind nicht funktionierende Links bzw. veraltete Links. Je öfter die Grundannahmen des Nutzers über erwartete Handlungen verletzt werden (z.B. tote Links), desto schwieriger fällt ihm der geistige Aufbau einer Logik über den Gesamtauftritt. US-Untersuchungen zufolge wiesen bis zu ca. 30% der betrachteten Seiten defekte Links auf. (Sullivan, Terry, The Usable Web, 1996). U.a. dank moderner Editoren mit Testfunktion lagen die Werte in selbst durchgeführten Untersuchungen im Jahr 2004 deutlich darunter. Jedoch ist jeder einzelne Verlinkungsfehler bereits als vermeidbar einzustufen.
Tückisch sind bei Tests vor allem Links, die zwar funktionieren, jedoch zu inhaltlich nicht korrespondierenden Seiten / Dateien führen. Dies ist ein Grund, warum man die Qualitätssicherung bei Links nicht (nur) einem automatischen Link-Checker übertragen kann. Solch ein Programm kann nur die Funktion, nicht jedoch die Logik eines Links überprüfen.

Ein ähnliches Phänomen der gelöschten Seite tritt bei der Archivierung von Dateien auf. Wenn man Dokumente archiviert, dann muss man die alte URL beibehalten, um die Links darauf zu erhalten.

Das Gegenstück zu toten Links sind verwaiste Seiten. Hierbei handelt es sich um Seiten, die aufgrund eines Programmierfehlers oder einer bewussten Umstrukturierung des Internet-Auftrittes vorhanden aber nirgends mehr verzeichnet sind. Der Nutzer kann sie per Zufall (z.B. Suchmaschinen) finden, jedoch den Prozess selten reproduzieren. Bisher gibt es keine Software, die derartige ergonomische Probleme löst. Hier hilft nur saubere Pflege und regelmäßige Überprüfung aller Seiten in allen Unterverzeichnissen. I.d.R. muss man jedes Dokument aufrufen und die Verlinkung auf es selbst überprüfen.

Da es sich oft um ältere (veraltete) Dateien handelt, kann man manchmal diesen verwaisten Dokumenten mit einer Auflistung aller Dateien auf dem Server / in der Datenbank nach dem (Erstell-) Datum auf die Spur kommen.

Neben der ergonomischen Komponente sollte man dieses Phänomen der verwaisten Seiten auch aufgrund der potentiellen rechtlichen Dimension ernst nehmen. Sehr häufig handelt es sich um veraltete Inhalte, die man bewusst ersetzt haben wollte.

Grundsätzlich empfiehlt es sich bei Umstrukturierungen, entweder die neue Datei exakt so zu benennen wie die alte, oder die alte Datei mit einer Umleitungsadresse (Refresh) auf das neue Dokument zu überschreiben. Ferner sollten derartige Prozesse der Restrukturierung eines Auftrittes mit einer völligen Löschung der betreffenden Verzeichnisse auf dem Server / aller Datenbankeinträge und der Neueinspielung der nun aktuellen Daten einhergehen.

Hilfe

Ich helfe Ihnen bei der

Optimierung der Ergonomie in Internet-Auftritten

Ergonomie - Optimieren Sie Ihren Erfolg im Internet
Tanzen lernen im Internet
Online Tanzen lernen
Alles zur erfolgreichen Fotografie

Zum Seitenanfang

Controlling21.de - Dr. J. Schuhmacher
Internet und Multimedia in Perfektion