Externe Links kennzeichnen: Ein Pluspunkt für Usability

Eine essentielle Webdesign-Richtlinie in puncto Usability könnte lauten: „Verwirre den User nicht!“ Dennoch wird dieser Aspekt bei der Konzeption einer Website häufig missachtet.

Hintergrund dieser Leitlinie: Durch einfache und intuitive Bedienbarkeit einer Website sollten sich User schnell auf einer ihnen gänzlich unbekannten Website zurecht finden. So können auch Erika und Max Mustermann die Website auf Anhieb verstehen und bedienen.

Vertraute und wiederkehrende UI-Elemente erzeugen immer wieder dieselben Effekte: Das Hamburger-Menü öffnet ein Menü, ein Suchfeld kann zum Suchen auf der Website genutzt werden, eine Lupe auf oder unterhalb eines Bildes öffnet eine vergrößerte Ansicht des Bildes, ein Link – nun, ein Link öffnet eine Unterseite der besuchten Webpräsenz, …oder?

Wir beleuchten heute, warum es sinnvoll sein kann, auch Links mit verständlichen Icons zu versehen und wie man beispielsweise einen externen Link als solchen kennzeichnet.

Überraschung für den User – nicht immer gewollt

Es ist so eine Sache mit den internen und externen Links… Gerne möchte man dem User einen Mehrwert bieten und auf Seiten mit weiterführende Informationen oder zu Produktseiten verlinken. Diese weiterführenden Infos können sich allerdings nicht nur auf der eigenen Website befinden, sondern auch auf einer „fremden“ Internetseite.

Ein Link kann für den User verschiedenste Szenarien bereithalten, beispielsweise:

• interner Link: Eine andere Seite auf ursprungsdomain.de wird angezeigt.
• externer Link: Eine Website auf einer anderen Domain wird geöffnet.

• target=“_blank“: Ein neues Browserfenster bzw. neues Browser-Tab wird geöffnet.
• mailto: Eine E-Mail-Anwendung wird gestartet.
• tel: Eine Telefonanwendung wird gestartet.
• Datei-Download: Das Download-Fenster des Browsers öffnet sich.
• PDF, DOC, XLS: Ein neues Fenster mit einem Dokument öffnet sich direkt oder die jew. Anwendung wird gestartet und zeigt das Dokument an.
• usw…

Je nach Kontext erwartet ein User beim Klicken eines Links bereits eine bestimmte Reaktion der Website. In Abhängigkeit vom erwarteten und tatsächlich eingetroffenen Effekt können Links jedoch eine ganze Bandbreite an Gefühlen beim User erzeugen. Schlimmstenfalls stiftet das Verhalten der Website jedoch so viel Frust oder Verwirrung, dass der User eine Onlinepräsenz frühzeitig verlässt.

? ? ? ? ? ? ? ? ?

Externe Links mittels eigener CSS Klasse kennzeichnen

Bei einem einfachen Link erwartet der User häufig, dass er auf den Unterseiten derselben Domain hin und her springt. Wenn ein interner Link genauso aussieht wie ein externer Link, kann der User beide Link-Arten auf den ersten Blick nicht unterscheiden. Um Verwirrungen zu vermeiden, empfiehlt es sich, einen externen Link also auch als solchen zu markieren. Dafür kann beispielsweise ein kleines Icon hinter dem Link eingefügt werden. Unterschiedliche Link-Farben oder eine andere Typo sind eher nicht zu empfehlen, da sie für jede Website erst neu „gelernt“ werden müssten. Viele User kennen aber bereits den kleinen, nach oben rechts zeigenden Pfeil:

Im bekannten Font Awesome Icon-Set gibt es bereits ein passendes Icon für externe Links.

Mit CSS und Font Awesome lässt sich das beispielsweise so umsetzen:

/* Externer Link mit Font Awesome Icon dahinter */
.external-link:after {
color: #1e4678;
padding-left: 4px;
font: normal normal normal 14px/1 FontAwesome;
content: „f08e“;
}

Ohne Font Awesome könnte man unter Umständen auf einen einfachen Pfeil ↗ zurückgreifen, ob dieser allerdings tatsächlich auf jedem Device dargestellt werden kann, ist nicht gesichert.

/* Externer Link mit Arrow dahinter */
a.external-link:after {
color: #1e4678;
padding-left: 2px;
font: normal normal normal 18px/1 Arial;
content: „02197“;
}

Im Text kann jeder externe Link dann mit der class=“external-link“ versehen werden und das leicht verständliche Symbol erscheint hinter dem Link. Gerade Blogger verwenden in ihren Texten häufig interne und externe Links, beispielsweise zu vorher behandelten Themen, aber auch zu anderen Blogs oder Hersteller-/Produktseiten.

Externe Links ohne CSS-Kenntnisse markieren

Für WordPress (und sicher auch andere CMS) gibt es kleine Plugins, die das Feature ohne viel Programmieraufwand zur Website hinzufügen und automatisch bei externen Links setzen, beispielsweise WP External Links mit einigen Einstellungsmöglichkeiten oder der schlankeren Variante Indicate External Links.

Haben Sie überhaupt keine Möglichkeit, in das Design Ihrer Website einzugreifen (beispielsweise bei einer Baukasten-Seite), können Sie – Ihren Lesern zuliebe – den Link einfach manuell als externen Link kennzeichnen. Beispielsweise, indem Sie einfach selbst einen Pfeil ↗ im Text einfügen. Auch kleine Amazon-Icons neben Affiliate-Links lassen sich schon mal hier und da entdecken. Auch PDF-, Download oder E-Mail-Links können mit sinnvollen und leicht verständlichen Icons gekennzeichnet werden. Dann weiß jeder gleich, was bei dem Link Sache ist!