uxzentrisch erörtert:
Oh, das scheint noch spannender …

In meinem letzten Beitrag habe ich die Idee der neuen, kontext- und inhaltssensitiven Platzierung der Navigation illustriert. Im zweiten Artikel der Reihe zu Navigationsmuster im responsive Design befasse ich mich mit den inhaltsstarken Seiten indem ich eine Neugestaltung der www.bbc.co.uk/news Website vorschlage.

Artikel 2 von 4: Inhaltsstarke Seiten

Der Nutzer mag und kennt die Seite, er kehrt oft zurück. Es ist ein Thema, das ihn interessiert. Dieses Thema erkundigt er ausführlich, ähnliche Themen könnten seine Aufmerksamkeit erregen. Er wird eher ein Thema vertiefen, statt ein ganz neues, viel breiteres Thema zu erforschen. Der Anbieter verfügt über viel mehr Inhalte als der Bereich, der den Nutzer interessiert. Diese Inhalte sind thematisch bzw. logisch gebündelt. Der Nutzer fühlt sich also in einem der gebündelten Themen – ich nenne sie Knotenpunkte – heimisch. Sowohl für den Nutzer, aber vielleicht noch mehr für den Anbieter, ist es sinnvoll, weitere Themengebiete zu entdecken (der Nutzer) bzw. zu präsentieren (der Anbieter).

Einzelne Inhalte bilden deutlich erkennbare Gruppen. Über einen oder mehrere solcher Knotenpunkte findet der Nutzer seinen Einstieg in ein bestimmtes Thema.

Einzelne Inhalte bilden deutlich erkennbare Gruppen. Über einen oder mehrere solcher Knotenpunkte findet der Nutzer seinen Einstieg in ein bestimmtes Thema.

Deswegen basiert das Interaktionskonzept inhaltsstarker Seiten auf dem Knotenpunkt-Prinzip. Die gebündelten Inhalte werden in einem Knotenpunkt präsentiert. Der Nutzer versteht diesen Knotenpunkt als einen sicheren Hafen und kehrt dahin immer wieder zurück. Der Einstieg hingegen ist beliebig. Jeder Nutzer kann und darf seine Reise an dem Knotenpunkt anfangen, der ihn an meisten interessiert.

Als Beispiel für die Erklärung des Interaktionsprinzips nutze ich die Inhalte der BBC News. Die Inhalte und Informationsarchitektur der Seite werden hier nicht in Frage gestellt, sie dienen mir vielmehr als Grundlage, um eine flexible Navigation für die Seiten dieser Art darzustellen. Die vorgeschlagene Neugestaltung hat also keinen Anspruch auf Vollständigkeit und berücksichtigt nur die angenommene Business-Anforderungen.

Die News-Seite dient als Einstieg in die BBC-Welt.

Die News-Seite dient als Einstieg in die BBC-Welt.

Zunächst wird einer der Hauptknoten als Einstiegs-Knoten für unseren Nutzer definiert. Dieser Knoten beinhaltet mehrere Unterknoten, die verwandt sind. In unserem Beispiel ist der Hauptknoten die News-Seite. Die Unterknoten sind die Themenbereiche: Top-Nachrichten, UK, Europa, US und Kanada, Asien, Afrika, Business, Gesundheit usw. Entweder wird der komplette Inhalt oder nur ein Auszug des Inhalts eines Unterknotens auf der Hauptknotenseite präsentiert. Da es zuerst nicht klar ist, für welchen Themenbereich sich der Nutzer am stärksten interessiert, werden in dem ursprünglichen Zustand nur die neusten bzw. spannendste Inhalte des jeweiligen Bereichs präsentiert.

bbc_001

Hier zeige ich die neue Einordung in der Desktop-Ansicht.
bbc_002

Hier zeige ich die neue Einordung in der Mobile-Ansicht.

Der Nutzer erfährt mehr über einen bestimmten Themenbereich durch ein Klick auf „Mehr“.

bbc_004
Der ausgeklappte Bereich in der Desktop-Ansicht.
bbc_003
Der ausgeklappte Bereich in der Mobile-Ansicht.

Hier findet er weitere Inhalte, aber auch den Zugang zu vertiefenden Themen, passend zum Themenbereich, den er spannend fand (Kinder dieses Unterknotens). Der ausgeklappte Bereich beinhaltet – abhängig von der Anzahl bzw. Gewichtung der Inhalte – entweder nur die Verlinkung zu Unterbereichen oder zusätzlich zu einer eigenen Übersichtsseite. Ob ein Bereich eine eigenständige Übersichtsseite benötigt, sollte sich aus der Analyse der Einstiegswege und der Inhaltsmenge des Bereichs ergeben. Dient dem Nutzer ein bestimmtes Thema wie „UK“ oder „Technologie“ als Einstieg in die BBC-Welt, und bietet es gleichzeitig viele wertvolle Inhalte, hat dieses Thema einen Anspruch auf eine Übersichtsseite. Die beiden Varianten habe ich mithilfe von „Top Stories“ versus „UK“ illustriert.

bbc_006
»Top Stories« verfügt über keine dedizierte Übersichtsseite.
bbc_005
»UK« besitzt als Thema eine dedizierte Übersichtsseite.

Das ist das bemerkenswerteste Prinzip dieses Systems. Jedes Thema darf einen Knotenpunkt bauen. Jedes Thema hat rein theoretisch den Anspruch auf eine eigene Übersichtsseite. Dies erlaubt dem Anbieter eine große Flexibilität beim Bündeln von Themen inklusive einer auf Tags basierenden Informationsarchitektur. Um eine Flut von Übersichtsseiten zu verhindern, sollte natürlich immer abgewogen werden, ob ein Thema genügend Inhalte und Bedeutung für eine eigene Übersichtsseite bietet. Gleichzeitig wird der klassische, hierarchische Aufbau der Seiten, oder besser gesagt der Angebote, beibehalten. Der größte Unterschied entsteht durch die eingeschränkte Erreichbarkeit der thematisch weiter entfernten Knotenpunkte.

Die neue Ordnung

Der Nutzer kann von dem Knotenpunkt 111 den Knotenpunkt 11, also die Elternebene, erreichen. Die Elternebene 1 kann er aber erst vom Knotenpunkt 11 aus erreichen

Diese Lösung resultiert aus dem Gedanken der nah gelegenen Knotenpunkte. Wenn der Nutzer sich ursprünglich für UK-News interessiert und über diesen Knotenpunkt in die BBC-Landschaft einsteigt, wird er sich höchstwahrscheinlich auch für eines der engeren UK-Themen (England, Wales, Schottland); für verwandte Themen wie UK-Wetter, Reisen in UK; und vielleicht, aber mit niedrigerer Wahrscheinlichkeit, für Nachrichten über andere Regionen (Europa, US & Kanada, Asien) interessieren. Deswegen kann er vom UK-Knotenpunkt die BBC-News-Seite direkt erreichen. Erst von der BBC-News-Seite kann der Nutzer aber zur BBC-Services-Seite navigieren. Da die BBC-Services-Seite die höchste Ebene der BBC-Landschaft bildet, kann der Nutzer von hier aus nur tiefer navigieren.

bbc_008
Am Beispiel vom »BBC-Services« zeige ich die erste Navigationsebene.
bbc_007
Am Beispiel vom »BBC-News« zeige ich die zweite Navigationsebene.
bbc_009
Am Beispiel vom »Magazin« zeige ich die dritte Navigationsebene.

Der wichtigste und am häufigsten genommene Weg ist der von einer Übersichts- zu einer Detailseite. Der Nutzer entdeckt eine spannende Nachricht und möchte mehr darüber erfahren. Nachdem er die komplette Nachricht gelesen hat, kann er sich in das Thema vertiefen, wird aber höchstwahrscheinlich zur Übersichtsseite zurückkehren und sich eine neue spannende Nachricht aussuchen.

Hin- und Zurück.

Der meistgenutzte Weg ist von der Übersicht zum Artikel und zurück.

Dieser natürliche Weg von einem Knotenpunkt zur Nachricht und zurück wird durch sauberen Aufbau der Detailseite, die außer dem Artikel und weiterführenden Links nur noch den Zurück-Knopf beinhaltet, gewährleistet. Wenn der Zurück-Knopf aus dem sichtbaren Bereich verschwindet, erscheint er wieder, sobald der Nutzer erneut scrollt.

bbc_010
Von der Übersicht…
bbc_011
…zum Artikel und zurück.

Zusammengefasst erfordert eine erfolgreiche Navigation auf einer inhaltsreichen Seite folgende Punkte:

Flexible Übersichtsseiten,
o die als Knotenpunkte einen Einstieg in ein Thema bieten
o die zu einem Oberpunkt der globalen Hierarchie gehören
o die in beliebiger Anzahl und vorzugsweise automatisch erstellt werden.

Klare Verbindung zwischen Übersichts- und Inhaltsseite, also zwischen dem Thema und den einzelnen Artikeln.

Zwei- bzw. mehrstufige Progressive Disclosure bei der Vertiefung eines Themas.
o Im ersten Schritt werden mehr Inhalte angezeigt („Mehr“-Element); im zweiten Schritt die Übersichtsseite verlassen und ein verwandtes Thema zur Vertiefung angeboten.

Die neue Ordnung der kontextsensitiven Verlinkung strukturiert die Inhalte um und platziert die Navigationselemente inmitten der Inhalte.

Im nächsten Beitrag beschäftige ich mich mit inhaltsschwachen Seiten.