Viele Wege führen zum Ziel – Navigationslösungen

5. Oktober 2017 at 19:20

Navigationslösungen für Webseiten im Gesundheitswesen

Bei dem Relaunch einer Webseite kommen viele Verbesserungsideen und Wünsche zusammen. Gerade bei Webseiten, bei denen kein eindeutiges Zielvorhaben für den Nutzer definiert werden kann, wie zum Beispiel das Kaufen eines Produktes oder das Abschließen eines Vertrages, sind die inhaltlichen, funktionellen und gestalterischen Anforderungen oft vielfältig und komplex. Dies ist eine Herausforderung vor der ich in meiner Arbeit als Konzepterin/ UX Designern vor allem mit Websites für Unternehmen aus dem Gesundheitswesen immer wieder stehe.

Die inhaltliche Herausforderung

Bei Webseiten von Klinikkonzernen, Krankenhäusern und weiteren Einrichtungen des Gesundheitswesens gibt es in der Regel nicht eine relativ gut einzugrenzende Zielgruppe, sondern stellt sich häufig die Anforderung, verschiedene Zielgruppen mit je unterschiedlichen Nutzerbedürfnissen anzusprechen und zu bedienen.

Zu den Zielgruppen können gehören:

  • Patienten
  • Besucher
  • Bewerber
  • Ärzte
  • Öffentlichkeit / Journalisten
  • Mitarbeiter

Neben diesen Zielgruppen und Ihren individuellen Bedürfnissen nach adäquat aufbereiteten und verorteten Informationen und Funktionen, kommen häufig auch repräsentative Anforderungen interner Stakeholder hinzu. Es ist oft gewünscht, interne organisatorische Strukturen komplett abzubilden, sodass jede Einrichtung des Unternehmens die Möglichkeit erhält, ihre Angebote und häufig gut aufbereiteten Inhalte nach außen zu präsentieren.

Dabei ist bereits die organisatorische Struktur relativ komplex; übergeordnete Krankenhäuser oder Klinika beinhalten verschiedene Kliniken, Zentren oder Institute.

So entstehen vielschichtige und breite Informationsstrukturen die das Potential haben, für den Nutzer unübersichtlich zu werden. Denn Seitenstrukturen von fünf Hauptnavigationspunkten und bis zu 6 Unterebenen bei Webseiten aus dem Gesundheitswesen sind keine Seltenheit:

6 Unterebenen bei Webseiten

Um so komplexe und tiefgreifende Inhaltsstrukturen nutzerfreundlich, erreichbar und nachvollziehbar abzubilden, gibt es verschiedene Lösungen mit verschiedenen Vor- und Nachteilen.

Den richtigen Weg wählen

Vorneweg: Es gibt viele verschiedene Lösungen für die Umsetzung einer Navigationsstruktur und noch mehr Variationen davon. Es ist nicht Anspruch dieses Artikels einzelne Lösungen im Detail zu Besprechen. Vielmehr soll er einen Überblick über grundlegende und häufig verwendete oder beliebte Lösungen für tiefe Navigationsstrukturen (mehr als 4 Ebenen) geben. Zudem liegt der Fokus hier auf Lösungen für Desktop Computer, da der zusätzliche Raum der bei größeren Bildschirmen inhaltlich zur Verfügung steht, größeren Lösungsspielraum erlaubt und der Erfahrung nach mehr Kopfzerbrechen bereitet, als eine mobile Navigationslösung.

Horizontale Hauptnavigation und vertikale Subnavigation

Eine relativ klassische Lösung von tiefen Navigationsstrukturen, ist die Kombination einer horizontalen Hauptnavigation (zum Abbilden der ersten Ebene) mit einer zusätzlichen vertikalen Navigation (zum Abbilden der weiteren Unterebenen).

Horizontale Hauptnavigation und vertikale Subnavigation

Vorteile:

  • Gelernte Funktion: Die Mehrzahl der Nutzer ist mit dieser Art von Navigation vertraut.
  • Übersichtlich, da viele Ebeneninhalte sichtbar und immer erreichbar bleiben.
  • Hauptnavigationspunkte, das heißt die übergeordneten Inhalte bleiben dank der horizontalen Navigation immer sichtbar und schnell erreichbar. Das heißt der Nutzer kann schnell zwischen Themen wechseln.
  • Erreicht der Nutzer die Seite über ein Suchmaschine und steigt direkt in einer tieferen Ebene ein, erhält er einen inhaltlichen Kontext zum Thema und Angebot der Seite.

Nachteile:

  • Der Inhaltsbereich wird stark begrenzt, da die Subnavigation Raum einnimmt.
  • Wenn die vertikale Subnavigation nicht sticky ist, d.h. nicht beim Scrollen immer an derselben Stelle bleibt, kann der Platz unterhalb der Subnavigation schlecht genutzt werden.

Beispiele von Webseiten aus dem Gesundheitswesen die diese Navigationslösung gewählt haben, sind unter anderem das UKE in Hamburg (https://www.uke.de/patienten-besucher/aufenthalt/vorbereitung-aufnahme/index.html) oder die Uniklinik-Köln (https://www.uk-koeln.de/patienten-besucher/pflege-patienten-service/ )

Das Hamburger Menü

Das sogenannte Hamburger Menü (drei horizontale Streifen, könnten symbolisch auch für obere Brötchenhälfte, Fleischbulette, untere Brötchenhälfte stehen) ist vielen Nutzern gerade von mobil genutzten Webseiten bekannt. Dabei sind die Inhalte dem Nutzer auf den ersten Blick verborgen, werden aber bei Klick auf das Symbol in einem vollflächigen Layer sichtbar.

Vorteile:

  • Wirkt sehr aufgeräumt, keine unruhigen Navigationspunkte im Inhaltsbereich.
  • Öffnet der Nutzer die Navigation, liegt der Fokus nur hier, sodass der Nutzer nicht abgelenkt wird.
  • Der Nutzer kann sich effektiv durch die Ebenen klicken, wenn er eine neue Seite aufrufen möchte, schließt sich die Navigation und der Nutzer ist inhaltlich ganz bei der aufgerufenen Unterseite.
  • Einfache Umsetzung, da mobil und Desktop Variante identisch sein können.
  • Es können beliebig viele Navigationspunkte relativ gut untergebracht werden, da es nicht, z.B. wie bei einer horizontalen Navigationsleiste (siehe vorheriger Beispiel) einen begrenzten Raum gibt.

Nachteile:

  • Nutzerstudien zeigen dass hier gilt „aus den Augen aus dem Sinn“. Sieht der Nutzer Inhalte nicht, neigt er weniger dazu sich durch die Seite zu navigieren. Studien hierzu hat zum Beispiel die Nielsen Norman Group veröffentlicht: https://www.nngroup.com/articles/hamburger-menus/
  • Die Verortung von Unterseiten im Gesamtkontext der Seite ist weniger gut nachvollziehbar, da immer nur eine Ebene sichtbar ist und die Navigation generell erstmal aus dem Blickfeld ist.

Beispiele von Webseiten aus dem Gesundheitswesen die diese Navigationslösung gewählt haben, sind unter anderem das Krupp Krankenhaus (https://www.krupp-krankenhaus.de), oder die Wicker Gruppe (https://www.wicker.de/)

Horizontale Hauptnavigation und abgesetzte horizontale Subnavigation

Bei dieser Variante erscheint bei Aufrufen einer Unterseite, häufig ab der 3. Ebene, eine abgesetzte zweite horizontale Navigation welche die weiteren Inhalte der Unterebenen enthält. In diesem Wireframe sind Navigation der ersten Ebene und Subnavigation ab der 3. Ebene durch ein Element, z.B. eine Stage welches ein Bild enthält, optisch getrennt. So wird das Interface, also die Gestaltung, etwas aufgelockert. Es gibt aber auch Anwendungen, bei denen die zweite horizontale Navigation direkt unterhalb der ersten andockt. Diese Lösung hat ähnliche Vorteile wie die erste vorgestellte Lösung, eine horizontale Navigation in Kombination mit einer vertikalen Navigation.

Horizontale Hauptnavigation und abgesetzte horizontale Subnavigation

Vorteile:

  • Übersichtlich, da viele Ebeneninhalte sichtbar und immer erreichbar bleiben.
  • Hauptnavigationspunkte, das heißt die übergeordneten Inhalte bleiben dank der horizontalen Navigation immer sichtbar und schnell erreichbar. Das heißt der Nutzer kann schnell zwischen Themen wechseln.
  • Erreicht der Nutzer die Seite über eine Suchmaschine und steigt direkt in einer tieferen Ebene ein, erhält er einen inhaltlichen Kontext zum Thema und Angebot der Seite.

Nachteile:

  • Werden die beide Navigationen durch ein Element (z.B. ein Bild) getrennt, dann muss dies häufig auf allen Seiten so umgesetzt werden. Das bedeutet, das jede Unterseite der Webseite an dieser Stelle ein passendes Bild bekommen muss. Dies kann erheblichen redaktionellen Aufwand bedeuten.
  • Durch diese optische Trennung wird viel Raum des sichtbaren Bildschirms verbraucht. Der Nutzer muss früh runterscrollen, um die eigentlichen Inhalte zu erreichen.
  • Ist keine optische Trennung (wie im Wireframe) eingesetzt und dockt die zweite horizontale Navigation direkt unter der ersten an, kann dies schnell das Interface überfrachten und den Nutzer überfordern. Hier ist ein gutes Design (UI) dann wichtig.

Beispiele von Webseiten aus dem Gesundheitswesen die diese Navigationslösung gewählt haben, sind unter anderem das Luzerner Kantonsspital ( https://www.luks.ch/standorte/standort-sursee ) oder die Salus gGmbH  (https://www.salus-lsa.de/kliniken-einrichtungen-leistungen/tageskliniken-ambulante-angebote/dessau-rosslau/tagesklinik/ )

Unterseiten spezifische Navigation / Nutzerführung

 Es ist möglich, und kann gerade aus der Perspektive des Nutzers sinnvoll sein, immer nur kontextbezogene Informationen anzuzeigen. Dies würde bedeuten, dass abhängig von der Unterseite auf welcher der Nutzer sich befindet, ihm nur bestimmte bzw. begrenzte Navigationsmöglichkeiten zur Verfügung stehen. Im Vergleich zu den anderen vorgestellten Lösungen steht dem Nutzer hier nicht zu jedem Zeitpunkt ein Überblick über alle Inhalte der Webseite zur Verfügung. Angenommen der Nutzer befindet sich zum Beispiel auf einer Unterseite einer Einrichtung, stehen ihm dort nur Inhalte zur Verfügung, die von unmittelbarer Relevanz sind. Da dies schwierig in einem Wireframe abzubilden ist, sehen Sie sich einige Beispiele an, wie zum Beispiel bei der Helios Gruppe (https://www.helios-gesundheit.de/kliniken/bad-schwartau/) oder das Navigationskonzept eines amerikanischen Konzerns, Aurora Health Care (https://www.aurorahealthcare.org/) .

 Voraussetzungen:

  • Interne Stakeholder Anforderungen, das heißt repräsentative Anforderungen, stehen im Hintergrund.
  • Zielgruppen werden eingeschränkt und Nutzerbedürfnisse sind bekannt.
  • Es werden klare Ziele für jedes Bedürfnis definiert und entsprechend mit Nutzerbedürfnissen abgeglichen.

Vorteile:

  • Sehr übersichtlich
  • Klare Struktur
  • Absolut zielführend
  • Nutzer finden schnell, wozu sie auf die Seite gekommen sind.
  • Sehr nutzerführend

Nachteile:

  • Sind Nutzerbedürfnisse nicht ausreichend abgedeckt, kann dies zu Frustration führen, da Nutzer Inhalte nicht finden können.
  • Seitenstruktur nicht rein logisch nachvollziehbar, nur „erfahrbar“.
  • Ändern sich Nutzerbedürfnisse oder Zielgruppen, muss das Gesamtkonzept grundlegend abgepasst werden.
  • Nutzer hat wenig Kontrolle.

Reine vertikale Navigation

Obwohl nicht mehr sehr häufig verwendet, ist eine reine vertikale Navigation auch ein gute Navigationslösung für tiefe Strukturen, die gerade in den Anfängen der Webentwicklung häufig Verwendung fand.

Reine vertikale Navigation

Vorteile:

  • Übersichtlich, da viele Ebeneninhalte sichtbar und immer erreichbar bleiben.
  • Hauptnavigationspunkte, das heißt die übergeordneten Inhalte bleiben dank der horizontalen Navigation immer sichtbar und schnell erreichbar. Das heißt der Nutzer kann schnell zwischen Themen wechseln.
  • Erreicht der Nutzer die Seite über eine Suchmaschine und steigt direkt in einer tieferen Ebene ein, erhält er einen inhaltlichen Kontext zum Thema und Angebot der Seite.
  • Ähnliche Logik wie eine mobile Umsetzung der Navigation.
  • Nutzer hat volle Kontrolle und Übersicht.

Nachteile:

  • Kann Unübersichtlich sein.
  • Viele Optionen können überfordern.
  • Wenig Nutzerführung.
  • Inhaltsraum wird eingeschränkt.
  • Kann altbacken oder ungewohnt wirken.

 Beispiele von Webseiten aus dem Gesundheitswesen die diese Navigationslösung gewählt haben, sind unter anderem das AKH Celle (http://www.akh-celle.de/)  oder Casa Reha (http://www.casa-reha.de/unternehmen/).

Fazit

Wie Sie vielleicht bemerkt haben, sind bei vielen der Navigationslösungen die Vorteile fast identisch. Es sind meistens die Nachteile und die Feinheiten der Navigation die bei der Entscheidungsfindung helfen können. Denn weitere wichtige Fragen und Feinheiten bei der Navigation können sein:

  • Welcher Klick verursacht einen Page-reload, bzw. mit welchem Klick öffnet der Nutzer nur eine neue Ebene oder ruft eine neue Seite auf?
  • Was sind die meistgenutzten Funktionen (diese können sein: Kontakt, Anfahrt, Notfall, Suche, Termin vereinbaren etc.) und wie können wir sie in der gewählten Lösung unterbringen?
  • Welche Lösung unterstützt die wichtigsten Nutzerziele am effektivsten?
  • Wie funktioniert die Navigation mobil?

Dies sind alles wichtige Fragen bei der Wahl einer Navigationslösung und abhängig von individuellen Anforderungen kommen weitere hinzu.

Die eingangs erwähnten Anforderungen an eine Navigationslösung werden in allen vorgestellten Ideen mehr oder weniger gut bedient. Daher kann abschließend zusammengefasst werden: Die einzig richtige Navigationslösung gibt es nicht, es ist immer notwendig an der einen oder anderen Stelle Kompromisse einzugehen.

Die Autorin des aktuellen Blogbeitrages, Alina Niemann, ist Konzepterin/ UX Designerin in unserem Berliner Büro