Navigation & Widgets
So strukturieren Sie Ihre Web-App mit eigener Navigation und den passenden Widgets – und wie sich dieser Aufbau in Ihre mobilen Apps überträgt.
Ihre Web-App basiert auf einer einfachen Idee: einem zentralen Feed mit Inhalten, der links von der Navigation und rechts vom Kontext eingerahmt wird. Diese Anleitung erklärt, wie diese beiden Seiten funktionieren und wie Sie sie so anordnen, dass die Nutzer intuitiv finden, was sie brauchen.
Das grundlegende Layout
Das Zentrum der App ist Ihr Newsfeed – die Startseite, auf der alle Nutzer landen. Er verhält sich wie eine Titelseite: der Stream von Inhalten, den Ihre Nutzer als Erstes sehen sollen.
Von dort aus können die Nutzer über Tabs mit einem einzigen Fingertipp zu anderen Feeds wechseln. Sie können Tabs oberhalb des Newsfeeds platzieren (siehe 2 unten, in den mobilen Apps werden sie zu Slidern!). Oder als fixierte Navigation auf der linken Seite (siehe 1).
Ein Tab kann zu einem Thema, einer Abteilung, einem Projekt oder einem Event-Stream führen – jedem beliebigen Feed, den Sie definieren. Dieselbe Tab-Struktur wird direkt in Ihre iOS- und Android-Apps übernommen. Was Sie einmal einrichten, funktioniert also überall.
Die linke Navigation
Das linke Navigationsmenü ist vollständig anpassbar. Sie bestimmen die Reihenfolge der Einträge, den Typ jedes Elements, das Symbol und den Namen. Nichts ist festgelegt – Sie erstellen das Menü, das zu Ihrer Zielgruppe passt. Sie können es jederzeit anpassen und erweitern.
Eine Struktur, die für die meisten Apps von oben nach unten gut funktioniert:
Newsfeed – ganz oben, fungiert als Startseite. Das Erste, was die Nutzer sehen, wenn sie die App öffnen.
Mix-Listen – wie ein Rubrikenverzeichnis. Sie bieten einen Überblick über das Angebot und ermöglichen es den Nutzern, in einzelne Feeds einzutauchen.
Angepinnte Mixe – eigenständige Feeds, die Sie im Menü hervorheben. Ein angepinnter Mix kann jede Art von Inhalt oder Feed enthalten, den Sie besonders betonen möchten.
Externe Links – direkte Links oder Übersichtslisten mit Links zu anderen Quellen und Systemen, die Ihre Nutzer verwenden.
Chat – falls Sie diesen nutzen möchten.
Nutzerverzeichnis – falls Sie dieses zur Verfügung stellen möchten.
Persönliche Seiten – der eigene Bereich des Nutzers: Profil, eigene Inhalte, eigene Lesezeichen.
Wenn die Liste lang wird, müssen Sie nicht alles auf einmal anzeigen. Einträge können hinter einem „Mehr“-Element verborgen werden, sodass das Menü übersichtlich bleibt und die wichtigsten Ziele sichtbar bleiben.
So sieht das auf Mobilgeräten aus
Die linke Navigation, die Sie für die Web-App erstellen, wird automatisch in die mobilen Apps übernommen. Der einzige Unterschied: Auf Mobilgeräten werden maximal fünf Tabs in der unteren Leiste angezeigt. Alles, was über die ersten fünf hinausgeht, wird in ein „Mehr“-Untermenü verschoben – die Reihenfolge ist also wichtig. Platzieren Sie Ihre fünf wichtigsten Ziele ganz oben.
Sie können jedoch auch Feeds und Navigationen einrichten, die Sie nur in der Web-App und nicht in den mobilen Apps haben möchten (und umgekehrt). Dies gibt Ihnen die volle Freiheit, jeden Kanal an Ihre Bedürfnisse anzupassen.
Die rechten Widgets
Während es auf der linken Seite um Navigation geht, dreht sich auf der rechten Seite alles um den Kontext. Widgets (siehe 3 oben) befinden sich neben den Hauptinhalten und können pro Seite konfiguriert werden – der Newsfeed erhält ein bestimmtes Set, jeder Mix- oder Rubriken-Feed kann ein anderes erhalten.
Im Newsfeed erscheinen die rechten Widgets im ersten sichtbaren Bereich – der prominentesten Position in der gesamten App. Nutzen Sie diese für das, was am wichtigsten ist.
In anderen Mix-Listen, Rubrikenlisten oder Feeds liefern Widgets unterstützenden Kontext, der für diese spezifische Seite relevant ist.
Arten von Widgets
Link zu einem bestimmten Beitrag – leitet Nutzer direkt zu einer wichtigen Karte weiter.
Inhalts-Feed – ein Stream, der aus einem beliebigen Mix gezogen wird. Sie können Nutzer sogar selbst wählen lassen, welchen Feed sie im Widget sehen möchten.
Veranstaltungskalender – anstehende Events auf einen Blick.
Meine Events – die Veranstaltungen, an denen ein Nutzer teilnimmt oder für die er sich angemeldet hat.
Schlagwortliste – eine Reihe von Tags, mit denen Nutzer filtern oder stöbern können.
Externes Embed – betten Sie einen externen Link oder einen Link zu einem anderen System ein.
Spezielle Widgets – Widgets, die eine benutzerdefinierte Logik für fortgeschrittenere Anforderungen anzeigen.
Zusammenfassung
Stellen Sie es sich wie drei Spalten vor, die zusammenarbeiten: links navigieren, in der Mitte lesen, rechts Kontext erhalten. Beginnen Sie mit einem sauberen linken Menü – Newsfeed ganz oben, Ihre fünf wichtigsten Ziele zuerst für Mobilgeräte – und nutzen Sie dann die rechten Widgets, um das hervorzuheben, was auf der jeweiligen Seite am dringendsten benötigt wird.
