Drei Konzepte für verbesserte mobile Navigation

Drei Konzepte für verbesserte mobile Navigation

Drei Konzepte für verbesserte mobile Navigation

Die Navigationsleiste – und ihre Vor- und Nachteile

Widmen wir uns zuerst den positiven und negativen Aspekten der Navigationsleiste, die sich in der Regel am unteren Rand des Displays befindet. Einige Vorteile liegen auf der Hand:

Die Leiste ist immer sichtbar. Der Anwender tippt nicht erst auf eine Menütaste und navigiert von dort aus weiter. Außerdem ist es einfach praktisch, diese Leiste am unteren Rand zu haben, denn dort sind auch unsere Daumen zu Hause. Der Nutzer muss also keine Verrenkungen mit den Fingern anstellen.

Tab bar vs. Side drawer (hamburger menu). Image: Google Material Design

Ein paar Nachteile hat eine permanent eingeblendete Leiste aber auch. So ist etwa der Platz an Icons und damit Interaktionsmöglichkeiten begrenzt. Mehr als vielleicht fünf Symbole bekommen Sie dort kaum unter, bevor die Icons einfach zu klein werden. Ebenfalls ein Nachteil ist der Platz auf dem Display, der durch eine kontinuierlich sichtbare Leiste verkleinert wird. Auf mobilen Geräten, wo jeder Quadratmillimeter wertvoll ist, ein echtes Problem.

Die folgenden drei Konzepte versuchen, die Vorteile beider Welten miteinander zu verbinden und damit eine Art Super-Bar zu schaffen, welche die allermeisten Probleme löst.

Konzept #1: eingebettete Navigation

Bild: Hoang Nguyen

Wie bereits gesagt, können Sie schwer mehr als vielleicht fünf Symbole innerhalb einer Navigationsleiste unterbringen. Danach sind die Symbole so klein, dass ein Finger sie nicht mehr problemlos bedienen kann. Zwar mag die genannte Anzahl an Icons für Ihre App in Ordnung sein – aber garantiert nicht für alle. Eine Lösung für dieses Problem sind Symbole, in die weitere Optionen eingebettet sind. In der Realität tippt der Nutzer etwa auf das Symbol eines Aktenordners, aus dem dann vier oder fünf weitere Icons herausspringen. Damit würde unsere einfache Navigationsleiste plötzlich nicht mehr fünf, sondern schon acht oder neun Symbole beherbergen.

Vorteilhaft an dieser Lösung ist die Tatsache, dass es einfach mehr Optionen gibt, obwohl der physikalische Raum dieselbe Größe behält. Ein Nachteil sind eventuell zu designende Animationen, die Geld und Zeit kosten. Außerdem muss der Nutzer sich durch eine kurze Menüstruktur hangeln, was abschreckend wirken könnte.

Konzept #2: Trennung von Buttons und Leiste

Bild: Ketan

Nach dem Tippen auf ein Symbol in der Leiste könnte die Ansicht innerhalb der kompletten App zu einem neuen Ziel wechseln. Die Navigationsleiste wäre ein starres Element am unteren Rand des Bildschirms, während die App im Hintergrund je nach ausgewähltem Symbol den angezeigten Content ändert. So würde der Nutzer sehr genau wissen, wie er innerhalb der App navigieren kann, da diese Leiste eindeutig vom Rest des Inhalts getrennt ist.

Ein Vorteil an dieser Trennung liegt in der sehr klaren visuellen Darstellung des Ausgangspunkts und des Ziels. Der Nutzer weiß immer genau, wo er sich gerade in der App befindet. Allerdings gehen damit meist auch Animationen einher, und diese wiederum könnten langsam sein und damit nach einer gewissen Zeit nerven – besonders, wenn häufig hin und her gewechselt wird.

Konzept #3: Animierte Effekte

Bild: Ramotion

Jede App verliert etwa 80 % seiner Nutzerbasis schon kurz nach der ersten Installation. Ergo ist es entsprechend wichtig, einen bleibenden Eindruck zu hinterlassen, damit der Anwender die App wenigstens noch ein zweites Mal öffnet. Eine Chance, dieses Ziel umzusetzen, sind Animationen. Denn: Normalerweise erinnern sich Nutzer nach der Interaktion mit einer App nicht an das Gesamtkonstrukt, sondern an einzelne Details wie vielleicht ein Maskottchen oder eben eine schöne Animation. Daher eignen sich butterweiche Animationen auf der Leiste, um dem Anwender in Erinnerung zu bleiben.

Vom Designer der App ist hier aber eine Gratwanderung gefragt. Zwar hinterlassen Animationen bei der ersten Nutzung einen normalerweise positiven Eindruck, aber bei langfristiger Verwendung der App stören sie eventuell die „Stammkundschaft“. Eine Option, um die Animationen zu deaktivieren, wäre eine sinnvolle Lösung.

Gerne auch bei uns!

Übrigens: Gerne setzen wir uns auch für Sie für interessante neue Navigationskonzepte in Ihren Apps ein. Kontaktieren Sie uns einfach unverbindlich und wir zeigen Ihnen einige Möglichkeiten, die Kunden begeistern und Ihnen langfristig mehr Aufmerksamkeit garantieren. Wir freuen uns auf Sie!

Mehr Informationen zu Mobile App Entwicklung

Einheitliche Codebasis und plattformübergreifende Entwicklung, das gehört für Orlyapps einfach zusammen. Denn genau das macht Ihre App flexibel und pflegeleicht, egal für welches Endgerät. Oder gleich mehrere.

Beitrag Teilen