UX/UI- & App-Design: Die ergonomisch optimierte Campus-Navigation FLOW

Die Herausforderung: Kognitive Barrieren im mobilen Interface auflösen

In weitläufigen Gebäudekomplexen wie dem FH Campus Hagenberg führt Orientierungslosigkeit schnell zu Stress. Mobile Navigations-Apps bieten hier theoretisch Abhilfe – in der Praxis scheitern viele digitale Schnittstellen jedoch an mangelnder Ergonomie, unzureichenden Kontrasten oder unlogischen Bedienstrukturen.

Die Aufgabe für flott.design im Rahmen der FLOW-Plattform: Die systematische ergonomische Analyse und vollständige UI/UX-Überarbeitung der mobilen Campus-App. Das Ziel war eine radikal nutzerzentrierte, barrierefreie Anwendung, die kognitive Belastungen reduziert und eine absolut intuitive Mensch-Computer-Interaktion (HCI) bietet.

Die Methodik: Evidenzbasiertes Design durch den Praxistest

Um typische Konstruktionsfehler im digitalen Interface-Design zu vermeiden, haben wir die bestehenden Interfaces einer strengen heuristischen Evaluation unterzogen und in realen Nutzungsszenarien getestet:

• Ergonomische Daumenbereich-Analyse: Über 80 % der Smartphone-Nutzung erfolgt einhändig. Mittels farbiger „Thumb Zone“-Overlays haben wir die Reichweite des Daumens analysiert. Das Ergebnis: Zentrale Action-Buttons wurden konsequent aus der oberen Dehnungs-Zone in den leicht erreichbaren, komfortablen unteren Bildschirmbereich verlegt.

• Beseitigung von Kontrast-Defiziten: Viele Apps priorisieren Ästhetik über Zugänglichkeit. Durch eine systematische Kontrastanalyse nach internationalen Barrierefreiheits-Standards haben wir Schwachstellen eliminiert. So wurde beispielsweise der Kontrastwert des zentralen Hauptbuttons durch die Anpassung des Rot-Tons um über 138 % gesteigert (von 3,37:1 auf einen Spitzenwert von 8,02:1).

Die Design-Säulen der optimierten App-Gestaltung

Die überarbeitete Version der App erfüllt die strengen Kriterien für digitale Barrierefreiheit (WCAG Richtlinien Level AA) sowie die offiziellen iOS und Android Interface Guidelines:

• Visuelle Klarheit & Typografie: Alle Fließtexte wurden auf eine Mindestgröße von 16 Pixeln standardisiert und sind ohne Layoutverlust flexibel skalierbar. Wichtige Statusmeldungen werden grundsätzlich redundant vermittelt – das bedeutet niemals rein über Farbe, sondern immer in einer klaren Kombination aus Text, Symbolik und eindeutiger visueller Hierarchie.

• Intuitive 3D-Indoor-Navigation: Das Karten-Interface orientiert sich an vertrauten mentalen Modellen wie Google Maps. Nutzer können Etagen nahtlos umschalten und gezielt barrierefreie Routenoptionen ohne Stufen oder enge Durchgänge wählen. Suchleisten und POI-Markierungen (z.B. für Lifte, Mensa oder WCs) sind prominent platziert.

• Touch-optimierte Dimensionierung: Um Fehlbedienungen in der Bewegung oder unter Zeitdruck zu verhindern, wurden alle interaktiven Schaltflächen, Eingabefelder und Symbole mit einer komfortablen Mindestgröße von 44x44 Pixeln ausgelegt und mit ausreichend Weißraum gruppiert.

• Kontextueller Hilfe-Chat: Die KI-gestützte virtuelle Assistenz („Mika-Chat“) wurde aus versteckten Untermenüs gelöst und in einen eigenständigen, übersichtlichen Screen überführt. Er bietet Besuchern und Studierenden proaktiv Hilfe, Wegbeschreibungen oder wichtige Live-Updates zu Termin- und Raumänderungen.