Neue Startseite und Menü für die Wiener Staatsoper: Mehr Orientierung dank optimierter User Guidance

Die Herausforderung

Die Wiener Staatsoper richtet sich an eine Vielzahl unterschiedlicher Zielgruppen wie Opern- und Ballettbesucher:innen, Interessierte an Ausbildungsmöglichkeiten, Pressevertreter:innen und viele mehr. Jede dieser Gruppen bringt eigene Erwartungen und Informationsbedürfnisse mit, die sich in ganz unterschiedlichen User Journeys widerspiegeln. Das machte die Entwicklung einer klaren und zugleich umfassenden Navigation besonders anspruchsvoll: Das Menü sollte allen Nutzer:innen schnellen Zugang zu den für sie relevanten Inhalten bieten, ohne an Übersichtlichkeit zu verlieren.

Dieser Need war beim bestehenden Menü nicht gegeben. Es existierten viele Menüpunkte in einem unpraktischen Interface, welches das Auffinden der gesuchten Informationen sehr schwierig machte.

Problematisch zeigte sich auch die mobile Version. Das Menü war über ein kleines, unauffälliges Hamburger-Icon zugänglich. Auch wenn es erkannt wurde, erwies sich die Bedienung als umständlich: Die Menüstruktur war wenig responsiv, die Klickflächen zu klein und die Navigation insgesamt nicht für eine mobile Nutzung optimiert.

 

Auch die Startseite brachte besondere Anforderungen mit sich: Sie übernimmt die zentrale Rolle des „ersten Eindrucks“. Hier galt es, den Nutzer:innen auf den ersten Blick Orientierung zu geben – klar zu kommunizieren, dass sie sich auf der Website der Wiener Staatsoper befinden, was sie dort erwartet, und welche aktuellen sowie kommenden Produktionen sie nicht verpassen sollten.

Was haben wir gemacht?

→ Datenanalyse (siehe Projekt Spielplan)

→ Card Sorting

→ Konzept

→ Design

Card Sorting

Am Beginn jedes Menü-Projekts steht der Content. Und davon gibt es auf www.wiener-staatsoper.at reichlich. Schon früh war uns klar, dass wir mit mehr als zwei Navigationsebenen arbeiten müssen, um die Vielzahl an Inhalten sinnvoll zu strukturieren.

Im Laufe des Prozesses kamen natürlich immer wieder Fragen auf: Welche Inhalte gehören wohin? Welche Begriffe sind für die Nutzer:innen wirklich verständlich? Um hier mehr Klarheit zu gewinnen und die Navigation konsequent an den Bedürfnissen der User auszurichten, haben wir uns entschieden, ein Card Sorting durchzuführen, um so Licht ins (UX-)Dunkel zu bringen.

Auf Basis der Ergebnisse wurde dann die neue Sitemap kreiert. Diese fasst zusammengehörige Inhalte nicht nur übersichtlich zusammen, sondern strukturiert und betitelt sie auch sinnvoll.

Konzeptionsphase

In der Konzeptionsphase war es vor allem wichtig, alle Anforderungen an die neue Startseite zu sammeln. Aus unserer durchgeführten User Survey waren uns die folgenden Needs bekannt:

• Die Hälfte der User:innen sind auf der Website um ihren Besuch zu planen.
• Für die meisten User:innen ist der schnelle Einstieg in den Kalender (und somit Ticketkauf) relevant.
• User:innen wollen sich aber auch darüber informieren, ob es etwas Interessantes für sie spielt.
• User:innen wollen ein erstes Gefühl für die dargebotenen Inszenierungen bekommen.

Dazu kamen noch redaktionelle Anforderungen, die uns das Team der Wiener Staatsoper nannte:

• Gewünscht waren sowohl Automatismen als auch Flexibilität in der Content-Aufbereitung.
• User:innen sollen einen kurzen Überblick bekommen, was es im Staatsoper Repertoire gibt.
• Sowohl „spontane“ als auch planende Besucher:innen sollen auch schon auf der Startseite abgeholt werden.

Soweit so gut. Bei der Startseite standen wir schon mal in den konzeptionellen Startlöchern.

Da es mehrere Möglichkeiten gibt, ein Menü umzusetzen, mussten wir uns auf Basis der Sitemap zuerst dazu entscheiden, mit welchem wir ins Rennen gehen. Uns war aber schnell klar, dass wir bei einer Content-Struktur mit drei Ebenen auf ein Mega-Menü setzen würden, weil es die effizienteste und übersichtlichste Lösung für die Vielzahl an Inhalten darstellt.

Das Ergebnis - das neue Menü

Bei der neuen Dropdown-Navigation war es uns besonders wichtig, mit den richtigen Spacings und Gruppierungen zu arbeiten, um die Zusammengehörigkeit einzelner Menüpunkte auf den ersten Blick sichtbar zu machen.

Zusätzlich haben wir den Navigationsbereich bewusst farblich abgesetzt: Ein dunkler Ton, der in starkem Kontrast zum hellen Hintergrund der restlichen Seite steht, sorgt dafür, dass die Navigation als eigenständiges, gut wahrnehmbares Element funktioniert – unabhängig davon, wo sich die Nutzer:innen auf der Seite befinden.

Auch für die mobile Navigation haben wir einen dunklen Farbton zur farblichen Hervorhebung gewählt und uns bewusst für ein klassisches Dropdown-Menü statt eines Slide-ins entschieden. Die sofort sichtbaren Optionen erleichtern die Orientierung, besonders wenn Nutzer:innen noch nicht genau wissen, wohin sie wollen. So gelangen sie schneller ans Ziel und profitieren von einer klaren, effizienten Navigation im mobilen Kontext.

Das Ergebnis - die neue Startseite

Et voilà, so sieht die neue Startseite nun aus. Im Zentrum: ein redaktionell befüllbarer Carousel-Hero, der Raum für kuratierte Highlights schafft und aktuellen Themen eine Bühne bietet.

Warum ein Carousel?

Uns war bewusst, dass Carousels im Header aus UX-Sicht oft kritisch betrachtet werden, insbesondere wegen schwacher Performance und fehlender Barrierefreiheit. Der redaktionelle Bedarf der Wiener Staatsoper nach einem zentralen Präsentationsraum für wechselnde Inhalte war jedoch eindeutig. Deshalb haben wir den Slider so gestaltet, dass er trotz aller Vorbehalte bestmöglich funktioniert: 

-> klare Struktur,

-> optimaler Bedienbarkeit,

-> reduzierte Slide-Anzahl,

-> und barrierefreier Umsetzung

Der Slider ist ein gutes Beispiel dafür, wie sich redaktionelle Anforderungen und UX in der Praxis in Einklang bringen lassen. Denn das ist die Realität: Nutzerzentrierung trifft auf konkrete Anforderungen von Kund:innen.

Für alle, die tiefer eintauchen wollen, öffnet sich darunter ein echtes „Fenster in die Oper“: Ein übersichtlicher Ausblick auf das Repertoire der kommenden Wochen, gefolgt vom aktuellen Newsbereich.

In Kombination mit der neu strukturierten Navigation lässt sich sagen: Hier findet jede:r, was sie oder er sucht. Ob neugierige Erstbesucher:in oder Opernliebhaber:in.

Und zum Glück waren nicht nur wir von dem Ergebnis begeistert:

Ich möchte euch sagen, WIE glücklich wir mit der neuen Seite sind. Es ist so ein großer Sprung in Relation zu allem, was wir bisher hatten. Die Seite schaut super aus, ist informativ und userfreundlich.Susanne Athanasiadis, Leitung Marketing & Kommunikation in der Wiener Staatsoper

The end, but it’s still not over. 😉

Glücklicherweise lässt uns die Wiener Staatsoper nach zwei Saisonen nicht schon wieder ziehen. Es sind tatsächlich schon viele weitere kleine und auch große gemeinsame Projekte in Planung und Umsetzung. Ihr dürft gespannt sein, denn schon bald heißt es: Alles Walzer UX!