WebMedia Lernblog

… ist eher eine Kunst der unauffälligen Online-Begleitung.

Mir fällt in meinen Kursen immer wieder auf, dass sowohl WebNavigation als auch Design nicht auf den späteren Nutzer, Betrachter ausgerichtet sind, eher in der eigenen Verspieltheit untergehen.

Okay, wir machen Kunst. Und die sollte in erster Linie uns gefallen, bevor wir sie Gästen in einer Online-Vernissage präsentieren. Was aber, wenn wir den Weg zu unseren Werken durch schlechte Beschilderung in ein Labyrinth verwandeln?

Ihr Online-Besucher soll es einfach haben. Mit wenigen Mausklicks zur gewünschten Information gelangen. Und ggfls. wieder zurück an die Stelle, an der sie oder er sich vorher befand. Sie sind leidenschaftliche Künstlerin, charmante Gastgeberin, aber auch die erfahrene Wegweiserin und der taffe Lotse.

Tipps zum Gestalten der Benutzerführung: Blättern von Webseiten und Navigieren durch eine Website:

Benutzer freundlich führen, geleiten, Hilfe anbieten

Ein Nutzer trifft erstmals auf Ihre Startseite - und verschwindet nach 2,83 Sekunden wieder. Ein Einzelfall? Eher Normalfall im Web.

Ein Nutzer sollte sich wohlfühlen, der erste Eindruck zählt. Er möchte geführt werden - und Ihr Ziel ist es, ihn möglichst unauffällig zu geleiten, Hilfe anzubieten, wo er sie braucht. Ihr Ziel: Ein Nutzer sieht sich nahezu alle Webseiten an - und ist so neugierig geworden, dass er wieder kommt, vielleicht sogar in einem Blog den Newsfeed oder einen E-Mailnewsletter abonniert.

Tipp 1: Keine Webseite ohne dezente Navigationshinweise.

Ein “Hier entlang, bitte …” anbieten

Keine einzelne Webseite sollte ohne alles, vielleicht sogar im “black” (Filmsprache) enden.

Tipp 2: Das Ende einer inhaltsschwangeren Webseite, das Ende jeglichen Inhalts, sollte immer mit einem “Weiter mit …” oder “Kennen Sie schon …?” o.ä. enden. Es gibt noch andere Methoden, die wir später kennenlernen.

Zurück zum Ausgangspunkt

Webseiten müssen oft durch Hyperlinks mit anderen Seiten wie einer Kontaktseite verbunden, referenziert werden. Die Kontakseite macht inhaltlich keinen Sinn, vor allem nach dem Ausfüllen und Absenden des Formulars. Meist folgt der lapidare Hinweis “Danke für Ihre Nachricht! Ich werde mich bald …”. Klingt eher wie eine schnöde Anrufbeantworteransage, oder?

Tipp 3: Egal wie Sie sich bedanken - bieten Sie dem Nutzer eine Rücksprungmöglichkeit zu der Stelle, an der er oder sie vorher war. Dies geschieht mit einer Javascript-Anweisung in einem Hyperlink, die in der Browser-Historie x Schritte zurückspringt.

Beispiel:

<a href=”javascript:history.go(-1)”>Einen Schritt zurück</a>

Nehmen wir das Beispiel aus dem Beitrag Mouseover-Effekte in Texten.

Breadcrumbs schützen vor Verirrungen

Brotkrümmel (engl. Breadcrumbs) im “Wald” streuen, damit unsere Nutzer den Weg wieder zurück finden - insbesondere in Websites, insbesondere mit hoher Verschachtelungstiefe.

Was sind Breadcrumbs?

Die Breadcrumbs-Technik wird hier im Lernblog (als Wordpress-Blog-Plugin) im Kopf der statischen Seiten verwendet, um sie zu demonstrieren. Dem Nutzer wird sein bisheriger Weg zur jeweiligen Webseite angezeigt (Historie). Er kann so auch direkt in Teilabschnitte zurück navigieren.

Tipp 4: Bei einer Verschachtelungstiefe > eins Breadcrumbs am Seitenbeginn oder/und am Seitenende anbringen.

Beispiel:

Blättern durch Inhalte

Wenn Sie viel Text, Bilder, also viel Inhalt transportieren möchten, mit kleinen Zusammenfassungen (Extracts, Teaser) auf einer Übersichtsseite mit den ersten ca. 10 Zeilen beginnen, dann einen Hyperlinktext weiter oder weiterlesen anbieten, der eine neue Seite mit dem Gesamtinhalt aufruft. Unter oder über diesen Seiten sollte eine einfache Blättermöglichkeit angeboten werden wie vor, zurück oder nächster Beitrag, vorheriger Beitrag oder in symbolischer Form mit zwei Pfeilen.

Tipp 5: Bei vielen Einzeltexten oder Bildgalerien die Möglichkeit zum Blättern zusätzlich zu Übersichten anbieten.

Nicht verstanden.
Nochmal lesen, bitte!

Am Ende - teilweise auch in Abschnitten - von längeren Webseiten sollten Sie Ihrem Benutzer einen ‘Sprunglink’ zum Seitenanfang gönnen, der schlicht Top oder Seitenanfang lautet. Kann auch symbolischer Pfeil nach oben sein, siehe Ende dieser Webseite im Lernblog. Siehe Bild.

Tipp 6: Bei langen Webseiten einen Sprung zum Seitenanfang anbringen, da am Seitenbeginn meist die Gesamtnavigation und mehr Information steht. Oder etwa, weil der Leser den Inhalt nochmals lesen möchte?

Syntax:

<a href="#">Seitenanfang</a>

Das Doppelkreuz referenziert auf die gerade aufgerufene Seite.

PS: Das Lernblog ist nicht perfekt, vor allem entsprechen Design und Typographie u.v.a. nicht meinen Vorstellungen. Aber ein Anfang an der HGB ist damit geschafft, apropo: Hier geht es zum Seitenbeginn