Was ist eigentlich Navigation?

Und noch wichtiger: wie gestaltet man die perfekte Navigation einer Website? Beim Online-Workshop “Designing The Perfect Navigation” des Smashing Magazine haben wir an zwei Abenden diese und weitere Fragen geklärt.

UX-Guru Vitaly Friedman führte die Gruppe aus internationalen Teilnehmer*innen durch sein gigantisches Archiv aus Positiv- und Negativbeispielen, die er über die Jahre hinweg gesammelt hat. Anhand von Screenshots und Videoaufnahmen haben wir unterschiedliche Lösungen und Umsetzungen von Hamburgern, Slidern, Carousels uvm. in der Gruppe diskutiert und auch bewertet.

Navigation ist überall

Was wir beim Gestalten einer Navigation immer im Hinterkopf behalten sollten: User kommen mit einer bestimmten Absicht auf eine Seite. Als Designer*in kennt man diese vielleicht – vielleicht aber auch nicht! Daher müssen wir versuchen, jede mögliche Absicht zu unterstützen, Antworten zu bieten und durch das Design zum Handeln zu ermutigen. Navigation ist vielseitig und auf keinen Fall nur das, was wir unter der Hauptnavigation, also dem Menü einer Seite, verstehen. Navigation besteht nicht nur aus Hamburger-Menüs oder Dropdowns – alles, mit dem man im Web interagieren kann, ist eine Art von Navigation. Alles, was User von einem Screen zum nächsten bringt, ist Navigation. Sie muss nicht auf allen Seiten gleich aussehen oder ähnlich funktionieren, wichtig ist nur, dass sie hervorsticht.

Der Banana-Test

In den Beispielen von Vitaly wird schnell klar: Selbst ohne Kenntnis chinesischer Schriftzeichen ist es zumindest möglich, zu verstehen, dass man sich auf einer chinesischen Shop-Seite befindet. Auf dieser gibt es eine Suchfunktion, Kategorien und nummerierte Slider. Anhand dieser bekannten Elemente bekommen wir als User eine Vorstellung davon, was auf dieser Website passiert und wie sie funktioniert.

Um dieses blinde Verständnis im Gestaltungsprozess zu prüfen, starten wir den Banana-Test. Hört sich skurril an – ist aber umso effektiver! Bei einer Website oder einem Prototypen ersetzen wir dazu einfach alle Texte mit “Banana”. So wird getestet, ob ein User alleine durch Design, Platzierung oder Anordnung versteht, was für eine Funktion die unterschiedlichen Elemente haben. Gelingt der Test, können wir uns sicher sein, dass die Seite auch ohne Worte verstanden wird.

Die Erwartungen der User

Für die Navigation müssen wir allgemein beachten, welche Funktion die User von bestimmten Elementen erwarten. Zeigt ein Pfeil bei einem Slider nach rechts, erwarten die User natürlich, dass sich der Slider auch nach rechts bewegt. Ein “X” steht bekanntlich für schließen und ein Plus-Symbol für ausklappen oder zum Warenkorb hinzufügen. Sind solche einst gelernten Funktionen plötzlich anders belegt oder funktionslos (bspw. als Deko-Element), führt das zu Frust.

Ein Versuch

So berichtete Vitaly von einem Versuch, bei dem Menüpunkte mit unterschiedlichen Icon-Text-Kombinationen getestet wurden. Zur Auswahl standen die Varianten “> Menü” und “Menü >”. Dabei wurden die Erwartungen der Versuchsteilnehmer*innen ausgewertet und es wurde beobachtet, wohin sie klicken. Das Ergebnis: Die meisten rechneten damit, dass sich das Menü ändert und nicht, dass man auf eine neue Seite kommt. War das Icon links vom Menüpunkt platziert, klickten fast 100% der Teilnehmer*innen auf den Text, weil sie dem Icon in dieser Anordnung nicht vertrauten. Die Teilnehmer*innen nahmen das Icon nur als Deko-Element wahr und vermuteten stattdessen eine Funktion hinter dem Text.

War das Icon rechts vom Menüpunkt platziert, wurde es nicht mehr “ignoriert”, sondern angeklickt. Hier nahmen die Teilnehmer*innen also an, dass auch das Icon eine Funktion hat. Der beste Fall wäre natürlich, dass beide Varianten zum Ziel führen. Denn Icon und Text sollten immer als Einheit funktionieren und ihnen sollten auf keinen Fall unterschiedliche Funktion zugewiesen werden.

Was genau ist nun also Navigation?

Im Grunde geht es dabei immer um bekannte Muster, die von Usern intuitiv erkannt werden. Nun könnte man vermuten, dass es doch die einfachste und sinnvollste Lösung wäre, auf allen Seiten des Internets immer die gleiche Navigations-Logik anzuwenden. Aber wäre das nicht furchtbar langweilig? Es wäre doch schlimm, wenn es nichts Neues und Überraschendes mehr zu entdecken gäbe? Für uns als Digitalagentur wäre dies ein Graus. Denn wir sind stets auf der Suche nach optisch herausstechenden Navigationen, die logisch aufgebaut sind und perfekt funktionieren – wir sagen User-Frust den Kampf an!