Die Sidebar- beziehungsweise versteckte Navigation ist in iOS-Apps inzwischen das Maß aller Dinge. App-Designer schwören auf die elegante Art der Navigationsdarstellung in Listenform und Nutzer haben das stellvertretende Hamburger-Icon (s.u.) längst verinnerlicht.
Und obwohl dieses Navigations-Element in den Human Interface Guidelines weder Erwähnung noch Definition erfährt, akzeptiert Apple dessen Einsatz – ein Ablehnungsgrund für deine App sind Hamburger und versteckte Navigation also nicht. Ein möglicher Grund für das Scheitern deiner App allerdings schon – denn dort, wo es an Regeln fehlt, regiert das Chaos.

In 5+1 Beispielen erfährst du, wie man die Sidebar-Navigation besser nicht nutzt und wann schmackhafte Hamburger zu wässrigen Suppen verkümmern.

Überrasch‘ mich: Navi erwartet, Overlay geliefert

Versteht mich nicht falsch, ich bin ein riesiger Fan der „Zite“-App und nutze sie nahezu täglich um Blog-News zu verfolgen. Verwirrend ist allerdings, dass sich hinter dem Hamburger-Icon, der in User-Köpfen nun mal als eindeutiger Navigationsstart verankert ist, ein halbtransparentes Listen-Overlay auftut. Und Schreck lass nach, was macht denn die Tab Bar da unten? Wir wollten doch navigieren!

Zweimal anschnallen bitte: die Doppelmoppel-Navigation

Anders als „Zite“ versteckt die „AirBerlin“-App hinter dem Hamburger-Icon tatsächlich eine Sidebar-Navigation. Das ist schon einmal beruhigend. Allerdings findet sich dort in den ersten vier Navi-Punkten nichts, was es nicht auch schon auf der Startseite gegeben hätte. Ob die Abflug-Zeiten hier andere sind? Die Sidebar-Navigation ist hier eigentlich überflüssig und vielleicht hätte man besser auf eine Tab Bar oder die Baumstruktur gesetzt. (Mehr zum Thema Navigationsmodelle unter: https://mobilbranche.de/2013/09/iphone-navigation/39025)

Herr Ober, einen Kabel-Salat bitte!

Ganz unten im Nährwertbereich befinden wir uns mit der Navigation von „Flipp“. Zum einen hat das Hamburger-Icon eine völlig andere Funktion, denn statt zu navigieren, können User hier filtern, und zum anderen wechselt die Bezeichnung des Hamburger-Icons je nach Auswahl. Entsprechend dem User-Gusto schmeckt der Hamburger also nach Auto, T-Shirt oder Kabeln. Ein Filter-Icon wäre hier sicherlich besser platziert gewesen.

Fehlgeleitet: Navi-Button in Yahoo News Digest

Die iOS-App „Yahoo News Digest“ ist klasse. Die Funktion des Hamburger-Buttons aber ein Desaster. Rechts oben platziert beherbergt der Button keine Navigation, sondern einen halb transparenten, animierten Countdown bis zum nächsten News-Feed. Über die Gestirn-Symbole unterhalb können News vergangener Tage betrachtet werden. Mit der erwarteten Navigation in Listenform hat das alles aber herzlich wenig gemeinsam.

QuizUp: Rate mal, wie ich funktioniere!

Die kniffligste Frage von „QuizUp“ lautet: Wie funktioniert meine Navigation? Antwort: seltsam.

Nun gut, zumindest bringt der Hamburger-Button von QuizUp eine Sidebar-Navigation zum Vorschein. Allerdings ist das Icon rechts oben platziert und an üblicher Stelle – nämlich links oben – befindet sich stattdessen ein „Zurück“-Button, der wiederum auf der ersten Navigationsebene den ersten Punkt der Sidebar öffnet, also stets den Startbildschirm. Verwirrt?

Instapaper – der Bic Mac unter den Hamburger-Buttons

Stellvertretend für „Autoscout“, „Booking.com“ oder auch „Headspace“ liefert die iOS-App „Instapaper“ ein Positiv-Beispiel dafür, wie Hamburger-Icons und Sidebar-Navigation eingesetzt werden sollten, um intuitive Bedienung zu ermöglichen.

Der Button befindet sich stets links oben und öffnet bei Betätigung eine Navigation in Listenform. Und das ohne Filter, App Bars oder andere Haare in der Suppe. Auch der zuletzt besuchte Screen ist teilweise noch sichtbar und schafft Orientierung. Der Button ist unverfremdet, eindeutig und völlig klar in seiner Funktionsweise. Hier schmeckt der Hamburger noch so, wie man ihn als User kennen und lieben gelernt hat.

“So klappt’s auch mit der iOS Sidebar-Navigation” ist ein Gastbeitrag von Melinda Albert – Mobile Design Berlin (Autor) und Christian Bösel – Wort, Web & Bild (Redaktion).

Erfolg ist alles – egal ob iOS- oder Android-App! Wie Sie Downloads Ihrer App pushen und das Design optimieren, erfahren Sie von App-Designerin Melinda Albert im Seminar „iOS vs. Android Usability“ am 30. April 2015 in Berlin. Teilnehmer lernen Design- und Nutzer-Basics und entwickeln einen interaktiven Prototyp für die jeweilige Plattform. Jetzt anmelden und Frühbucherrabatt sichern!