Blick hinter die Kulissen – Navigation & Be­nut­zer­füh­rung

Ein wesentlicher Bestandteil der Neu-Konzeption vom Website-Relaunch für das ISB war eine strukturierte und für User*innen einfach zu bedienende Benutzerführung. Um die tiefgreifenden Hierarchien sinnvoll abbilden zu können, haben wir uns daher für eine Kombination aus verschiedenen Navigationselementen entschieden. 

Bereits in der ersten Phase der Ausschreibung haben wir uns umfassend mit dem Grundaufbau und der Informationsarchitektur der neu zu gestaltenden Website für das Staatsinstitut für Schulqualität und Bildungsforschung München befasst. Um unsere Gedanken und Ergebnisse mit dem Kunden abstimmen zu können, wurden funktionale Wireframes bzw. Prototypen erstellt. Dieser Arbeitsschritt ermöglichte es uns, die Ausrichtung der Website bestmöglich auf die Bedürfnisse vom ISB und deren User*innen anzupassen.

Der Grundaufbau der Website besteht aus vier Bereichen: 

• Header 
• Inhaltsbereich 
• Seitenleiste (optional) 
• Footer 

Durch diese doch sehr klassische Aufteilung ermöglichen wir den User*innen eine klare Orientierung auf der Website. Alle Elemente sind an den typischen, „gelernten“ Positionen zu finden und dienen dazu, die User*innen optimal über die Website zu leiten. 

Header

Der Header besteht aus Logo, Metanavigation, Hauptnavigation und Suche und stellt den zentralen Bestandteil der Orientierung und Benutzerführung auf der Website dar. Das Logo ist mit der Startseite der Website verlinkt und dient den User*innen als globale Verlinkung zur obersten Hierarchieebene. In die tieferen Ebenen kann hingegen über die Hauptnavigation eingetaucht werden. 

Um eine optimale UX zu gewährleisten, haben wir uns für eine Kombination aus Top-Bar und Mega-Menu (Desktop) sowie für ein Burger-Menu (Mobile) entschieden. 

Top-Bar und Mega-Menu

Die Top-Bar ist im Header klar abgesetzt und bietet einen guten Überblick. Sie ermöglicht den direkten Einstieg in die Hauptbereiche der Website. Tiefere Einstiege, bis hin zur vierten Hierarchieebene, sind über das ausklappbare Mega-Menu möglich. Ergänzend zu den einzelnen Menüpunkten bietet jede Ebene im Mega-Menu die Option, ausgewählte Themen über spezielle Teaser hervorzuheben. 

Burger-Menu

In der mobilen Ausprägung der Hauptnavigation werden alle Hierarchieebenen des Seitenbaums ausgegeben. Die User*innen können zu jedem Zeitpunkt in eine tiefere Ebene einsteigen oder zu allen höheren Ebenen zurückkehren. Als besonderen Aspekt für eine optimale Benutzerführung haben wir uns dafür entschieden, dass das mobile Menu sich kontextsensitiv öffnet und somit die Position der User*innen im Seitenbaum widerspiegelt. Das Menu wird daher in der aktuellen Hierarchieebene geöffnet, anstelle von der üblich initial dargestellten obersten Ebene.

Suche

Für den Fall, dass die User*innen in ein spezielles Thema auf der Website einsteigen möchten, ohne sich durch die Hauptnavigation zu bewegen, kann über die OnSite-Search nach dem Thema gesucht werden.

Scroll­ver­hal­ten

Auch im gescrollten Zustand der Website möchten wir den User*innen die Navigation auf der Website einfach ermöglichen. Abhängig vom Viewport (Desktop/Mobile) fixiert sich die Top-Bar bzw. der mobile Header am oberen Bildschirmrand und ermöglicht somit zu jedem Zeitpunkt den Zugriff auf das Mega-Menu bzw. das Burger-Menu. In dieser Ausprägung wird die Suche auf ein Icon reduziert und öffnet bei Klick/Touch das Suchfeld.

In­halts­be­reich

Direkten Einfluss auf die Benutzerführung im Inhaltsbereich haben wir nicht. Alle Inhalte werden über das TYPO3-Backend von den Redakteuren verwaltet. Allerdings bieten wir den Redakteuren diverse Bausteine in Form von Content-Elementen an, die konzeptionell so aufbereitet sind, dass sie die Benutzerführung optimal unterstützen.

Con­tent-Ele­ment: Schulformen

Beispielsweise haben wir ein Content-Element entwickelt, welches den Direkt-Einstieg in die verschiedenen Hauptbereiche der Website vereinfacht. Basierend auf der entsprechenden Schulformfarbe werden farbige Verlinkungen als Buttons im Frontend der Website ausgegeben. Der Redakteur muss in diesem Content-Element ausschließlich die zu verlinkenden Seiten sowie bei Bedarf optionale Button-Labels auswählen.

Teaser

Neben den redaktionellen Content-Elementen stellen wir funktionale Content-Elemente bereit. Diese Elemente dienen dazu, Inhalte automatisch ohne aufwändige redaktionelle Pflege aufzubauen. Speziell für die Querverbindungen innerhalb der Website haben wir einheitliche Teaser-Blöcke konzipiert. Diese Teaser dienen dazu, Inhalte auf der Website anzureißen und den User*innen einen Überblick über die verfügbaren Inhalte zu geben.

Sei­ten­leis­te

Die Seitenleiste besteht aus zwei Modulen und bietet Einstiegsmöglichkeiten zu den weiteren Menüpunkten sowie Kontaktinformationen zur Ansprechperson des aktuellen Hauptbereiches. 

Ebenso wie die Top-Bar und der mobile Header fixiert sich die Seitenleiste, sobald die Website gescrollt wurde.

Farbgebung als visuelle Ori­en­tie­rung

Das ISB stellt eine Vielzahl an Inhalten rund um die Schulbildung für alle verfügbaren Schulformen in Bayern zur Verfügung. Für eine klarere Trennung der Inhalte haben wir uns für den Einsatz von Schulformfarben entschieden. Diese Farbkodierung dient zur visuellen Unterscheidung der einzelnen Schulformen und wurde von uns dezent in die Benutzerführung der Website eingearbeitet. Sie kommt vorwiegend in der Seitenleiste zum Einsatz.

Footer

Auch am Ende der Website möchten wir den User*innen geeignete Einstiege in weitere Themenbereiche der Website ermöglichen. Daher haben wir uns für eine Kombination aus dynamischem und statischem Footers entschieden. Der dynamische Teil stellt abhängig von der Position der User*innen im Seitenbaum, jedoch unabhängig von der Tiefe im Seitenbaum, immer die oberste Ebene (inklusive Untermenüpunkte) der aktuellen Position dar. Dies ermöglicht eine weitere Navigation innerhalb des jeweiligen Themenbereichs. Der statische Teil hingegen verändert sich nicht und gibt den User*innen die Möglichkeit, zu anderen Bereichen der Website zu wechseln.