🧭 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 im Desktop Browser auf einer einfachen Idee: ein zentraler Feed mit Inhalten, eingerahmt von der Navigation auf der linken und dem Kontext auf der rechten Seite. Dieser Leitfaden erklärt, wie beide Seiten funktionieren und wie Sie sie so anordnen, dass Ihre Nutzer mühelos finden, was sie brauchen.
Der grundlegende Aufbau
In der Mitte der App liegt meist immer Ihr News Feed – die Startseite, auf der alle beim Start landen. Er funktioniert wie eine Titelseite: der News Feed mit allen wichtigen Inhalten, den Ihre Nutzer zuerst sehen sollen bzw. wollen (wenn sie bspw. Personalisierung nutzen).
Von dort führen Tabs mit einem einzigen Tippen zu weiteren Feeds. Diese Tabs können über dem News Feed sitzen (siehe 2 unten) oder als "Sticky Navigation" auf der linken Seite (siehe 1).
Ein Tab kann zu einem Thema, einer Abteilung, einem Projekt oder einem Veranstaltungs-Feed führen – zu jedem beliebigen Content-Stream, den Sie dynamisch über die Plattform festlegen. Dieselbe Tab-Struktur wird direkt in Ihre iOS- und Android-Apps übernommen: Was Sie einmal einrichten, funktioniert überall.
Die Tabs über dem News Feed kann man in den mobilen Apps sehr komfortabel durch swipen nach rechts oder links navigieren.
Wichtig: dabei sind Sie auch unabhängig, d.h. es kann Navigationspunkte und Elemente nur in der Web App oder auch nur in den mobilen Apps geben.
Die linke Navigation
Die linke Navigation ist vollständig anpassbar. Sie bestimmen die Reihenfolge der Feeds, den Typ jedes Elements (siehe unten), das Icon und den Namen. Sie bauen das Menü, das zu Ihrer Zielgruppe, Ihrer Community passt.
Folgende Elemente können Sie dabei nutzen und in Reihenfolge oder Häufigkeit einsetzen:
News Feed – ganz oben, als Startseite. Das Erste, was Ihre Nutzer beim Öffnen der App sehen.
Mix-Listen – wie ein Rubrikenverzeichnis. Sie geben einen Überblick über das Vorhandene und lassen Nutzer in einzelne Feeds eintauchen.
Angepinnte Mixes – eigenständige Feeds, die Sie ins Menü holen. Ein angepinnter Mix kann jede Art von Inhalt oder Feed enthalten, die Sie hervorheben möchten (bspw. Podcasts, Videos, Community-Inhalte)
Externe Links – direkte Links oder Übersichtslisten mit Links zu anderen Quellen und Systemen, die Ihre Nutzer verwenden.
Chats – wenn Sie ihn nutzen möchten.
Nutzerverzeichnis – wenn Sie es bereitstellen möchten.
Persönliche Seiten – der eigene Bereich jedes Nutzers: Profil, eigene Inhalte und Lesezeichen und Merklisten.
Wird die Liste zu lang, müssen Sie nicht alles auf einmal zeigen. Einträge lassen sich hinter einem Eintrag „Mehr“ bündeln, sodass das Menü aufgeräumt bleibt und die wichtigsten Ziele sichtbar sind.
Wie Mixes funktionieren beschreiben wir hier. Jeder Mix kann eigene Einstellungen haben. Sie bestimmen wo und wie er dargestellt wird.
So sieht es in der mobilen App aus
Die linke Navigation, die Sie für die Web-App aufbauen, wird automatisch in die mobilen Apps übernommen. Der einzige Unterschied: Mobil werden maximal fünf Tabs am unteren Rand angezeigt. Alles darüber hinaus wandert in ein Untermenü „Mehr“ – die Reihenfolge ist besonders in den Apps daher wichtig. Stellen Sie Ihre fünf wichtigsten Navigationselemente und Feeds, die die Nutzenden schnell und einfach erreichen sollen nach vorne.
Widgets auf der rechten Seite
Während es auf der linken Seite um Navigation geht, geht es auf der rechten Seite in der Desktop Ansicht der Web App um Kontext. Widgets (siehe 3 oben in der Illustration) stehen rechts neben dem Hauptinhalt in der Mitte und lassen sich pro Seite einrichten – der News Feed kann eigene Widgets enthalten, jeder Feed oder jede Mix-Übersichtsseite einen anderen.
Im News Feed erscheinen die rechten Widgets im sichtbaren Bereich – der prominentesten Position der gesamten App. Nutzen Sie sie für das Wichtigste.
In anderen Mix-Listen, Bereichslisten oder Feeds ergänzen Widgets passenden Kontext zur jeweiligen Seite.
In der mobilen Ansicht der Web App werden diese Widgets so weit möglich im Navigationsmenü angezeigt oder bei Bedarf (einfach weil dort kein Platz ist), ausgeblendet.
Arten von Widgets
Wir bieten verschiedene Standard-Widgets, die News- oder Service-Inhalte mit wichtigen Informationen und Links verbinden können. Dabei haben Sie immer die Wahl und die vollte Kontrolle. Die Widgets im einzelnen:
Link zu einem bestimmten Beitrag – führt Nutzer direkt zu einer wichtigen Karte bzw. einem bestimten Inhalt.
Inhalts-Feed – ein Strom aus einem beliebigen Feed. Sie können Nutzer sogar selbst wählen lassen, welchen Feeds sie in diesem Widget sehen.
Veranstaltungskalender – anstehende Veranstaltungen auf einen Blick.
Meine Veranstaltungen – die Veranstaltungen, an denen ein Nutzer teilnimmt oder zugesagt hat.
Tag-Liste – eine Auswahl an Tags, mit denen Nutzer filtern oder stöbern können.
Externe Einbettung – betten Sie einen externen Link oder einen Link in ein anderes System ein.
Spezial-Widgets – Widgets, die für anspruchsvollere Anforderungen eigene Logik anzeigen.
Zusätzlich zu den Standard-Widgets entwickeln wie für Enterprise-Kunden auch eigene Module und Angebote. Die Plattform ist prinzipiell modular und sehr flexibel angelegt, so dass die Implementierung spezieller Anforderungen meist problemlos realisiert werden kann.
Zusammenfassung
Die wichtigste Entscheidung bezieht sich im ersten Schritt beim Aufbau Ihrer App auf die Navigation auf der linken Seite (Web App Desktop) bzw. die Tab Bar im unteren Bereich (mobile Apps). Wichtiges sollte hier gut sichtbar, mit einem Click erreichbar präsentiert werden. In der Regel findet der News Feed die meiste Aufmerksamkeit, d.h. Inhalte die dort erscheinen werden mit Abstand am meisten genutzt.
Dennoch bieten die weiteren Navigationspunkte nicht nur schnelle Absprünge in andere Feeds oder Formate (wenn Sie bspw. spez. Feeds für Videos, Podcasts oder Community-Inhalte wie Threads bieten), sondern schafft auch Übersichtlichkeit und vermittelt den Nutzenden schnell ein Gefühl der Übersicht und Klarheit.
Mit den verschiedenen Widgets auf der rechten Seite schaffen Sie Kontext und Tiefe. Dabei sollten Sie sich auf den ersten "Viewport", den sichtbaren Bereich im Desktop Browser konzentrieren. Dies bedeutet meist zwei, maximal drei Widgets pro Seite bzw. Feed.
All dies kann dynamisch geändert und angepasst werden. Sie haben die Wahl und unsere Plattform lässt Ihnen hier maximal Freiheit.
Sollten Sie Fragen haben, sprechen Sie uns an. Gerne können wir auch im Rahmen einer Teststellung oder eines Prototypen die verschiedenen Optionen veranschaulichen.
