Optimale Wahl von Navigation-Pattern auf mobilen Webseiten


Richard Reh

Präsentation
23. January 2024, 09:30 Uhr, Raum 3.216
Betreuer
Christian Noss
Kooperationspartner
TH Köln
Stichworte
Web, Navigation, UI, UX
Bildrechte
Richard Reh

Abstract

Egal ob Hamburger Menüs, Breadcrumbs, Akkordeons oder einfache horizontale Navigationsleisten: Jede Webseite braucht mindestens eine Form von Navigation, damit Nutzer ihre Inhalte schnell und leicht finden können. Bei der Entwicklung einer Webseite werden dafür sogenannte ,,Navigation-Pattern” als benutzerfreundliche Designlösungen verschiedener Arten von Navigations-Menüs benötigt, die zum Typ und Aufbau einer Webseite passen müssen.

Insbesondere kamen durch das Responsive Web Design eigene Designlösungen für Menüs, um trotz der begrenzten Bildschirmgröße auf mobilen Endgeräten eine benutzerfreundliche und effiziente Navigation zu gewährleisten. Für angehende Webentwickler, die an der mobilen Version ihrer Webprojekte arbeiten, ergeben sich daraus zwangsläufig die Fragen: Welche Navigationsart soll implementiert, und wie kann die Entscheidung für einen bestimmten Navigationstypen getroffen werden?

Das Praxisprojekt widmet sich diesen Fragen, damit Faktoren für die Wahl der Navigation-Pattern bestimmt werden können. Speziell werden in diesem Vortrag relevante Faktoren vorgestellt, die vom Typen des Inhalts und der Informationsarchitektur einer Webseite abhängen.

Dafür wurden aktuelle Navigation-Pattern, die auf mobilen Endgeräten verwendet werden, anhand verschiedener UI/UX-relevanter Kriterien bewertet. Diese Kriterien helfen dabei herauszustellen, für welchen Inhaltstyp einer Webseite die Verwendung bestimmter Navigation-Pattern lohnen würde. Nebenbei werden auch bewährte ,,best practices” für die Implementierung der Navigation-Pattern unter Beachtung der Limitationen mobiler Endgeräte erklärt, die dabei helfen ein benutzerfreundliches Design für die Navigation zu gewährleisten.

Die Informationsarchitektur bildet das Rückgrat aller Abschnitte und Inhalte einer Webseite und verbindet diese miteinander. Daher besteht ein weiterer Schwerpunkt dieser Arbeit darin zu zeigen, welche relevanten Eigenschaften einer Informationsarchitektur die Wahl eines Navigation-Patterns beeinflussen.

Ziel dieses Projekts ist die Aufarbeitung einer Entscheidungsgrundlage für Webentwickler, anhand welcher ein passendes Navigation-Pattern für eine mobile Webseite gewählt werden kann, sodass die Anforderungen der Webseite möglichst getroffen werden.

Material & weiterführende Infos

Navigation-Pattern:

  • https://ui-patterns.com/patterns/navigation/list
  • https://www.nngroup.com/articles/mobile-subnavigation/

  • Einfluss des Responsive Web Designs auf mobile UI:
    • https://www.nngroup.com/articles/mobile-usability-update/
  • Informationsarchitektur:
    • https://www.usability.gov/what-and-why/information-architecture.html
    • https://www.nngroup.com/articles/ia-vs-navigation/

Vorschläge für weitere Arbeiten im Themenfeld

Navigation-Pattern im Kontext von AR

Verwendung von KI zum analysieren und anzeigen von personalisierten Benutzerpräferenzen in einer Navigation

Eye-Tracking als alternative Bedienungsart für Navigation-Pattern als Beitrag zur Barrierefreiheit

Entwicklung einer beispielhaften Leitfaden-Webseite mit implementierten Navigation-Pattern und Erläuterung der besten Implementierungsansätze für Entwickler

Recherche weiterer Einflussfaktoren für die Wahl von Navigation-Pattern.