uxzentrisch erörtert:
Die Lösung der Navigationsproblematik im responsive Design

In dieser Artikelreihe befasse ich mich mit der Übersetzung von komplexer Informationsarchitektur in das responsive Raster. Eigentlich beantworte ich aber die Frage nach der inhalts- und kontextsensitiven Navigation.

Artikel 1 von 4: Die neue Ordnung

Die alte Ordnung

Wir Interaktionsdesigner suchen typischerweise nach einer Lösung des Problems. Zuerst definieren wir das Problem: Wie gebe ich einen extrem tiefen Navigationsbaum auf einem mobilen Endgerät wieder? Dann legen wir die Lösung fest: ein System von Navigation-Patterns, das mobil-tauglich ist.

Und wir vergessen an dieser Stelle die magische Frage „Warum?“ zu stellen. Wir vergessen die Definition des Problems zu hinterfragen.
Warum soll ich einen extrem tiefen Navigationsbaum auf einem mobilen Endgerät wiedergeben?
Weil gute Inhalte tief in der Struktur abgelegt sind.
Warum sind gute Inhalte tief in der Seitenstruktur vergraben?
Weil sie entsprechenden Navigationsknoten zugeordnet sind.
Warum werden die Inhalte dem entsprechenden Navigationsknoten zugeordnet?
Damit Ordnung im Navigationsbaum herrscht.
Wozu brauchen wir Ordnung?
Damit der Nutzer Inhalte besser und schneller findet.

Typischerweise erscheinen die Navigation links und die Inhalte rechts.

Die neue Ordnung

Der größte Fehler, den wir machen: Wir gehen davon aus, dass der Inhaltskonsum von der Navigation getrennt ist. Gerne sagt man: „Dann ist der Nutzer mit der Aufgabe fertig und möchte weiter navigieren.“ Kein Nutzer möchte bewusst „weiter navigieren“. Ich setze mich nicht vor den Rechner und sage: „Ah toll, ich habe die Miete überwiesen, jetzt werde ich in meinem Online-Banking-System ein bisschen weiter navigieren.“ Navigation und Inhalt sollten nicht getrennt werden, weil sie nicht trennbar sind. Sobald der Nutzer nicht mehr in den Inhalt vertieft ist, ist der richtige Moment, ihm weitere, logisch verknüpfte, kontextsensitive, attraktive Optionen anzubieten. Mit einer Aufgabe ist er gerade fertig geworden. Was könnte ihn jetzt interessieren? Was möchte er als nächstes erfahren, erleben oder erledigen? Wenn diese Fragen mit passenden Inhalten bzw. Links zu passenden Inhalten beantwortet werden, herrscht die neue Ordnung – die Ordnung der kontextsensitiven Verlinkung.

Die neue Ordnung

In Rahmen der neuen Ordnung werden Navigationselemente dort angebracht, wo sie am besten ihre Rolle erfüllen – inhaltssensitiv.

Schritt-für-Schritt-Navigation

Die mobilen Endgeräte bieten weniger Platz. Somit gewinnt dieser Platz, sowohl aus der Nutzer- als auch der Anbieter-Sicht an Wert. Die Rechnung, die der Anbieter machen sollte, lautet: Nachdem der Nutzer sich mit dem Inhalt auf dieser Seite bekannt gemacht hat, welches Thema könnte ihn interessieren? Es ist eine Wahrscheinlichkeitsrechnung, die auf Nutzungsdaten und Themenverwandtschaft basiert. Der Nutzer möchte nicht alle möglichen Optionen sehen, er benötigt nur diejenigen, die in seiner jetzigen Situation verlockend sind. Deswegen sollten die passenden Optionen vorsichtig ausgewählt und Schritt für Schritt angeboten werden. Weil die Lage des Nutzers sich mit jedem Schritt ändert.

Der Inhalt als roter Faden

Den Ort, an dem der Nutzer sich befindet, beschreiben am besten die Inhalte (die Objekte), die ihn umgeben. Der Nutzer „steht“ vor einem O’Neill Neoprenanzug. Was sagt uns das über ihn? Entweder surft er, kitesurft oder reitet Wellen. Der Sport gefällt ihm gut, da er bereit ist, in einem Neoprenanzug von O’Neill zu investieren. Das bringt uns zum logischen Schluss, dass er entweder gerade mit dem Sport ernsthaft anfängt oder sein alter Neopren abgenutzt ist. Nehmen wir an, dass wir ihn zusätzlich dank GPS orten können. Abhängig davon, in welchem Kontext er zum O’Neill Neoprenanzug gelangt ist – befindet er sich in einem Onlineshop oder auf der Webseite einer Surfschule – können ihm jetzt passende Optionen angeboten werden.

Der springende Punkt ist, den Ort immer weiter zu verfolgen. Der Nutzer bleibt nicht lange vor dem Neoprenanzug stehen. Sogar mit dem Scrollen der Seite gibt er uns bereits ein Signal, dass ihn ein anderes Objekt interessiert. Die größte Frage bleibt, welche Optionen (Objekte und Objekt-Kategorien) sich mit der Bewegung des Nutzers verändern und welche als sicherer Hafen immer gleich verortet bleiben sollten. Ich bin der Meinung, dass heutzutage nur wenige Optionen im sicheren Hafen verankert bleiben und 99% der Optionen kontextabhängig angezeigt werden sollten. Diese Entwicklung hat zwei Ursprünge. Einerseits hängt sie mit der Unmenge an Daten (Objekten) und der sich daraus ergebenden Unmenge an Kategorien zusammen. Andererseits zwingen uns die erfolgreichsten und unter den Nutzern beliebtesten Geräte – Smartphones und Tablets – Platz zu sparen und sowohl Inhalt als auch Navigation zu priorisieren. Im Extremfall wäre der einzige „stabile“ Punkt des Auftritts das Logo als Link zur Startseite.

Drei Seitentypen

Wie bereits gesagt sollte die Entscheidungsgrundlage für die Gestaltung der Navigation nicht die Tiefe der Navigation bzw. die Anzahl der Kategorien sein. Viel mehr geht es um die Frage: Wo steht der Nutzer und was sind seine nächsten Schritte. Nutzen wir die Immobilien-Metapher. Der Platz ist eingeschränkt bzw. teuer. Ein Kunde bummelt in einer Mode-Gasse eines Einkaufszentrums. Er schaut sich Schuhe an. Plötzlich taucht zwischen zwei Schuhläden ein Fisch-Stand auf. Nicht nur der Geruch, vielmehr die unerwartete Anwesenheit eines Fischladens irritiert den Kunden, der nach klassischen, dunkelbraunen Stiefeln sucht. Die Einordung der Läden wird durch den Inhalt (Modeartikel, Schuhe) vorgegeben. Auch die Navigation einer Webseite sollte sich aus den Inhalten ergeben. Der Konzepter sollten die Inhalte ehrlich bewerten. Wie zahlreich sind sie? Von welcher Qualität? Inwieweit helfen sie dem Nutzer, begeistern und inspirieren ihn? Welche Inhaltstypen sind das? Handelt es sich um Inhalte, die man liest, die man bearbeitet, umgestaltet, entwirft oder kauft?

Abhängig von den Antworten lassen sich drei Seitentypen unterscheiden:
• Inhaltsstarke Seiten
• Inhaltsschwache Seite
• Produktstarke Seiten (E-Commerce)

Unter inhaltsstarken Seiten verstehe ich die Seiten, die dem Nutzer spannende, nützliche und aktuelle Inhalte bieten. Solche Seiten frequentiert der Nutzer oft, um Neuigkeiten zu erfahren. Es handelt sich prinzipiell um Nachrichtenseiten; inhaltsgetriebene Portale wie Facebook – auch eine Art Nachrichtenseite; große Blogs. Als Beispiel werde ich bbcnews.com nutzen.

Unter inhaltsschwachen Seiten verstehe ich die Seiten, die hauptsächlich zur Darstellung der Marke und weniger zur Befriedigung eines bestimmten Nutzerbedürfnisses entstanden sind. Solche Seiten werden entweder selten, oder relativ oft, aber nur von sehr engen Nutzergruppen besucht. Es handelt sich prinzipiell um Konzernauftritte. Als Beispiel werde ich carlsberggroup.com nutzen.

Unter produktstarken Seiten verstehe ich Seiten, die dem Nutzer Zugang zu interessanten Produkten oder Services anbieten und auf denen üblicherweise Transaktionen stattfinden. Es handelt sich prinzipiell um E-Commerce-Seiten. Als Beispiel nehme ich amazon.com.

In einer kleinen Serie aus folgenden Blogbeiträgen erkläre ich ausführlich wie die neue Ordnung der kontextsensitiven Verlinkung diese drei Seitentypen neu formt. Scrollen als Zeichen für Suche nach weiteren Informationen bzw. Optionen gilt als übergreifendes Interaktionsprinzip für alle drei Seitentypen.

Über den Autor

Iwona Markuszewska ist Senior Beraterin bei der nexum AG in Köln. Aktuelle Trend-Themen, wie responsives Design, sieht sie gerne durch analytische Brille der allgemein geltenden Prinzipien wie »Nutzer steht im Vordergrund« und »Content ist König«. Sie mag es Nutzer- und Kundenprobleme, am liebsten beide gleichzeitig, zu lösen.

4 Kommentare

David Hellmann vor 1 Jahren

»Scrollen als Zeichen für Suche nach weiteren Informationen bzw. Optionen gelten als übergreifendes Interaktionsprinzip für alle drei Seitentypen.«

Hier fängt es doch schon an… Scrollen wir ja nach wie vor noch als ganz böse angesehen. Above the Fold… Waaaaa!

Ich bin bei dir mit dem scrollen denn dafür hab ich mein Mausrad oder mein Touchpad und es funktioniert super leicht und super schnell. Nur das kapieren die Kunden ja nicht. Hier geht es immer noch darum viel Inhalt in engen Raum zu quetschen.

Wenn man den Inhalt mehr verteilt, Navigation kann hier gern mit einfließen, wird ja sofort wieder in den Raum geworfen: »Der User muss so viel scrollen«.

Interessantes Thema, vielleicht :) Mal schauen was noch kommt.

Iwona Markuszewska Autor vor 1 Jahren

Hi David,

das »Above the Fold« Prinzip kann heutzutage nicht funktionieren, da wir einfach nicht mehr wissen, wo der »Fold« genau ist :-) Es gibt ja einen auf meinem Arbeitsrechner, und einen auf meinem iPad Mini, und einen auf meinem iPhone, einen weiteren auf dem Diensthandy. Also welcher ist der richtige? Scrollen ist gesetzt.
Zusätzlich muss ich sagen, dass Scrollen eine angenehme Art der Interaktion ist, eine sehr sanfte und leichte (Touch-) Bewegung.

VG,
Iwona

Peter Smyczek vor 1 Jahren

Sehr schöner Artikel mit sehr gut dargestellten, ganz klaren, logischen Vorteilen der »integrierten, kontextsensitiven Navigation«. Hehe, besonders die Analogie mit der Ladenzeile und dem Fischgeschäft kann man sich bildlich und geruchlich gut vor Augen und Nase führen.

Jedoch gibt es, und das gebe ich selber ungern zu, Anwendungsfälle wo eine klassische Sub-Navigation mit dem schnöden Navigationsbaum Sinn macht, im eCommerce zum Beispiel. Dann aber auch möglichst mit Funktionen wie Filtern oder Facetten gekoppelt, die dem User die »Macht« geben zu entscheiden was er grade sehen will. Hehe, ja da wären wir dann irgendwie wieder bei der »kontextsensitiven« Sache :)

Grüß
Peter

Trackbacks und Pingbacks