Utility-Navigation: Was es ist und wie sie gestaltet wird

by Susan Farrell (deutsche Übersetzung) - 04.10.2015

Nutzertools

Utility-Elemente bestimmen, wie Menschen mit Ihrem Unternehmen, Ihrer Website und Ihren Inhalten interagieren. Platzieren Sie Utility-Elemente, wo sie Nutzer erwarten und brauchen.

Tools, die von Websites angeboten werden, haben zwar unterschiedliche Grössen und Ziele, doch viele Bereiche der Utility-Navigation enthalten:

• Kontakt
• Folgen Sie uns
• Regionsauswahl / Sprachinstrumente
• Login / Registrieren
• Drucken
• Speichern
• Teilen
• Abonnieren
• Funktionen, um die Schriftgrösse zu ändern
• Einzelseitenansicht

Da der Warenkorb eine Hauptfunktion von e-Commerce Websites ist (man könnte ihn auch als die Kernfunktion bezeichnen), ist das Warenkorbsymbol normalerweise auch in der Utility-Navigation zu finden. Wie wir alle wissen, können Usability und Konversionsrate verbessert werden, indem gewohnte Funktionsweisen befolgt werden. Auch die Suche, eine weitere Kernfunktion, wird häufig im wichtigsten Utility-Bereich platziert.

Obwohl die meisten Funktionen der Utility-Navigation sekundärer Art sind, sind sie in bestimmten Situationen wichtig. Da sie sekundär sind, können sie auch an einer sekundären (weniger auffälligen) Stelle platziert werden, sofern geltende Internet-Gepflogenheiten eingehalten werden, damit Nutzer eine benötige Funktion schnell finden können.

Platzierung

In der Vergangenheit wurden die Objekte der Utility-Navigation im Inhaltsbereich angezeigt, in der Seitenleiste platziert oder in eine Navigationsleiste inkludiert. In den letzten Jahren wurden viele dieser Tools in die obere rechte Ecke von Websites verschoben. Diese auffällige Platzierung macht sie immer sichtbar und sorgt dafür, dass sie schneller bemerkt werden. Wir beobachten häufig, dass Nutzer in diesem Bereich nach Funktionen suchen – vor allem nach Login, Suche und Mein Konto.

IBM: Die Utility-Navigation der Startseite ist vor allem im oberen Bereich zu finden. Die „Folgen“-Funktionen wurden in der Mitte platziert, während der Link Kontakt im unteren Bereich zu finden ist.

IBM: Vergrösserung des oberen rechten Bereichs

Informations-Websites (und Bereiche von Websites, die sich Nachrichten und Artikeln widmen) teilen die Utility-Elemente häufig auf. Die Instrumente für die ganze Website werden oben rechts platziert, während die Instrumente für den Artikel in der Mitte des Inhaltsbereichs zu finden sind. Abonnement-Funktionen (Newsletter, RSS, soziale Medien etc.) werden häufig im unteren Navigationsbereich platziert. Instrumente zum Teilen des Artikels erscheinen häufig am Ende der Seite und/oder des Texts, Rezepts, der Liste und anderer Informationsseiten, die Menschen mit grosser Wahrscheinlichkeit teilen möchten.

(Auf den ersten Blick kann es verwirrend erscheinen, die Utility-Navigation auf 4 verschiedene Bereiche aufzuteilen. Bedenken Sie aber, dass nur Informationsarchitektur-Geeks diese Dinge als „Utility-Navigation“ - im Gegensatz zu anderen Arten der Navigation - betrachten. Für den durchschnittlichen Nutzer gehören Instrumente, die verschiedene Funktionen haben, komplett anderen Spezies an, die logischerweise in verschiedenen Bereichen des Zoos zu finden sind.)

Open Culture: Die Utility-Navigation wird in typischen Bereichen der Website gruppiert.

Einige Unternehmen versuchen, die Utility-Navigation hinter Hamburger-Menüs (3 horizontale Linien) oder anderen Click-to-Display Elementen, wie Rädchen-Symbolen und Slide-Outs, zu verbergen. Diese Idee eines aufgeräumten Bildschirms kann allerdings nach hinten losgehen, weshalb Sie das Design testen und kontrollieren sollten, um sicherzustellen, dass Ihre Nutzer die neuen Interaktionsfunktionen tatsächlich verwenden und dass Sie wichtige Instrumente nicht zu gut versteckt haben. Es ist eine schlechte Idee, Designprinzipien zu ignorieren – auch wenn das grosse Unternehmen tun.

Empfehlungen

• Zeigen Sie Icons mit Textbeschreibungen an. Menschen mögen Symbole zwar, sie verstehen sie aber häufig nicht und haben Probleme, sich daran zu erinnern. Ausserdem verwenden Websiten Symbole nicht einheitlich. Verlassen Sie sich nicht auf schwebende Texte (Tooltips), die auf Touchscreens nicht angezeigt werden. Verwenden Sie Wörter oder eine Kombination aus Wörtern und Symbolen, um Erreichbarkeit, Verständlichkeit und Übersetzbarkeit zu gewährleisten. Forschung zeigt, dass das Hamburger-Menü öfter verwendet wird, wenn es mit Menü gekennzeichnet wurde und über einen Rahmen verfügt, damit es stärker an einen Button erinnert.
• Testen Sie Verständnis und Interaktion, falls Sie betriebsnotwendige Funktionen hinter Navigationssymbolen verbergen (Hamburger, Ellipsen, Rädchen etc.), da Menschen nicht auf Dinge klicken, die sie nicht verstehen. Diese neuen Gewohnheiten funktionieren am besten auf mobilen Plattformen, auf denen die Nutzeroberfläche nur wenig Ablenkung enthält.
• Gruppieren Sie Funktionen an Stellen, an denen sie Menschen erwarten: entweder in der oberen rechten Ecke oder im Inhalt, auf den sie sich beziehen. Es ist in Ordnung, sie in andere Navigationsstrukturen zu integrieren oder sekundäre Instrumente in der unteren Navigation zu platzieren, da Menschen die Navigationsbereiche genau kontrollieren, während sie nach benötigten Dingen suchen.
• Erstellen Sie Steuerungselemente, die wie Steuerungselemente aussehen, und versehen Sie sie mit typischen Namen.
• Trennen Sie die beiden Arten von Social Media Icons. Trennen Sie Folgen Sie uns von Teilen Sie das, da sie sich ähnlich sehen, aber sehr unterschiedliche Funktionen haben.
• Halten Sie sich mit Sharing-Funktionen und Sharing-Zählern zurück, da Forschung zeigt dass Menschen Dinge häufiger über Ihre eigenen Tools und Methoden teilen. Einige Websiten haben sich komplett von integrierten Social Media Share und Like Tools verabschiedet, da sie die Seite überladen und den Datenschutz der Nutzer beeinträchtigen, was nicht durch das minimale Engagement, das diese Tools zur Folge haben, aufgewogen werden kann.
• Inkludieren Sie Abonnementfunktionen. Machen Sie es Ihren Lesern einfach, Funktionen, Autoren und Feeds zu folgen.
• Befolgen Sie die optimalen Vorgehensweisen für Suchinstrumente.
• Verwenden Sie keine Flaggen zur Sprachauswahl, sofern nicht nur wenige Länder, die dieselbe Sprache sprechen, zur Auswahl stehen (was bedeutet, dass die Flaggen den meisten Lesern bekannt sind). Geben Sie stattdessen den Namen der Sprache in den entsprechenden Schriftzeichen an.
• Platzieren Sie Login und Registrieren nahe zusammen.
• Verwenden Sie Farben und Buttons, um die wichtigsten Aktionen zu betonen und um die Aufmerksamkeit auf den Utility-Bereich zu lenken.

Beispiele für die Utility-Navigation

The Christian Science Monitor

The Christian Science Monitor: Vergrösserung des oberen rechten Bereichs

General Electric (ge.com)

GE: Vergrösserung des oberen rechten Bereichs

New York Times platziert die Utility-Navigation auf der rechten Seite der Website.

New York Times: Vergrösserung des oberen rechten Bereichs

The Age: Utility-Elemente im oberen und unteren Bereich, Abonnements in der Mitte

Washington Post: Oben

Washington Post: Unten

Die Symbole auf Niconico sind zwar süss, es ist aber der Text, der sie verständlich, übersetzbar und in einigen Fällen sichtbar macht.

Testen Sie das Design an Ihren Besuchern

Die Utility-Navigation wird reifer, was ihre Gewohnheiten und Platzierung betrifft. Wenn das im Internet passiert, ist es verlockend, die Vertrautheit von Menschen mit beliebten Websiten zu nutzen, indem deren Beispiel gefolgt wird. Obwohl am Ende die nutzbarste Lösung gewinnen wird, sollten Sie Ihr Design testen, um sicherzustellen, dass Ihre Navigation für Ihre Nutzer funktioniert und dass Sie keine wichtigen Funktionen verbergen.

Wir bieten mehrere Kurse über Nutzertests, Navigation und visuelles Design an, die zur Erreichung des UX-Zertifikats angerechnet werden.

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