🧭 Navigation und Widgets in der Web-App

In der tchop Web-App dreht sich alles um deinen News Feed in der Mitte. Er ist die Startseite deiner App und zeigt die wichtigsten Inhalte an erster Stelle. Links davon führt dich eine Navigationsleiste zu allen weiteren Feeds und Bereichen, rechts ergänzen Widgets die jeweilige Seite mit zusätzlichem Kontext. Beide Seiten kannst du frei an deine App anpassen.

Das Grundprinzip: News Feed plus Tabs

Der News Feed steht im Zentrum - hier landen deine Nutzer, wenn sie die App öffnen. Über Tabs in der linken Navigation springen sie mit einem Klick zu anderen Feeds, Bereichen oder Funktionen. Dieselbe Logik greift in den mobilen Apps: Was du in der Web-App als Navigation anlegst, findet sich auch auf dem Smartphone wieder.

[ Screenshot: Grundaufbau der Web-App - News Feed in der Mitte, Navigation links, Widgets rechts ]

Die linke Navigationsleiste

Die Navigationsleiste am linken Rand lässt sich vollständig anpassen. Du bestimmst die Reihenfolge der Einträge, welche Arten von Elementen erscheinen, welche Icons sie tragen und wie sie heißen. Als bewährter Aufbau hat sich folgende Reihenfolge etabliert:

• News Feed ganz oben - er dient als Startseite und erste Anlaufstelle.

• Mix-Listen als Bereichsnavigation - sie geben einen Überblick über deine Inhalte und führen tiefer in einzelne Feeds.

• Angepinnte Mixes als eigenständige Feeds - sie können jeden beliebigen Inhalt oder Feed enthalten, den du hervorheben willst.

• Externe Links oder Übersichtslisten - Verknüpfungen zu anderen Quellen und Systemen.

• Chat - falls du die Chat-Funktion nutzen möchtest.

• Nutzerverzeichnis - falls du deinen Nutzern ein Verzeichnis anbieten willst.

• Persönliche Seiten wie Profil, Meine Inhalte oder Lesezeichen.

Wird die Liste zu lang, kannst du einzelne Einträge hinter einem Mehr-Eintrag bündeln. So bleibt die Navigation übersichtlich, auch wenn deine App wächst.

[ Screenshot: Linke Navigationsleiste mit News Feed, Mix-Listen, angepinnten Mixes und persönlichen Seiten ]

So verhält sich die Navigation auf dem Smartphone

Die linke Navigation der Web-App wird in den mobilen Apps als Tab-Leiste übernommen. Auf dem Smartphone lassen sich allerdings nur fünf Tabs direkt anzeigen. Alle weiteren Einträge wandern automatisch in ein Untermenü hinter dem Mehr-Tab. Es lohnt sich daher, die fünf wichtigsten Ziele bewusst an den Anfang zu stellen.

[ Screenshot: Mobile App mit fünf Tabs und dem Mehr-Menü ]

Widgets auf der rechten Seite

Auf der rechten Seite kannst du pro Seite Widgets platzieren. Sie sind kontextabhängig: Jede Seite - der News Feed ebenso wie einzelne Mix- oder Bereichslisten - kann ihre eigenen Widgets erhalten.

Im News Feed, also auf deiner Startseite, erscheinen die Widgets besonders prominent im ersten sichtbaren Bereich. Nutze diesen Platz für das, was sofort ins Auge fallen soll. In anderen Mix-Listen und Feeds dienen Widgets eher dazu, zusätzlichen Kontext zu geben und passende Inhalte anzubieten.

[ Screenshot: Widgets im News Feed, prominent im ersten Viewport ]

Welche Widgets es gibt

Für die rechte Seite stehen dir verschiedene Widget-Typen zur Verfügung:

• Link zu einem bestimmten Beitrag - verweist direkt auf einen einzelnen Post.

• Content-Feed - zeigt Inhalte aus einem beliebigen Mix; auf Wunsch können Nutzer selbst wählen, welchen Feed sie im Widget sehen.

• Veranstaltungskalender - eine Übersicht anstehender Termine.

• Meine Veranstaltungen - zeigt jedem Nutzer seine eigenen Termine.

• Tag-Liste - eine Auswahl an Tags zum schnellen Filtern und Entdecken.

• Einbettung externer Links oder Systeme - bindet Inhalte oder Verknüpfungen von außerhalb ein.

• Spezial-Widgets - zeigen individuelle Logik und maßgeschneiderte Inhalte an.

Zusammengefasst

Die linke Navigation bestimmt, wie sich deine Nutzer durch die App bewegen - vom News Feed über einzelne Bereiche bis zu persönlichen Seiten. Die Widgets auf der rechten Seite geben jeder dieser Seiten den passenden Kontext. Beide Seiten sind frei konfigurierbar, sodass du deine App genau auf deine Inhalte und deine Zielgruppe zuschneiden kannst.