Analyse

Die nativen Design-Richtlinien von iOS und Android im Vergleich

(Bild: Shutterstock/Lukmanazis)

Warum App-Designs nativ gestalten, wenn es Frameworks gibt? Weil ihr sonst die Gewohnheiten der Benutzer ignoriert. Das sind die Unterschiede zwischen nativen iOS- und Android-Apps.

Android und iOS sind verschieden. Ja, bei beiden Systemen wird hin und wieder die eine oder andere Funktion kopiert. Dennoch sind sie nicht gleich. Das gilt auch für das Design der darauf laufenden Apps. Die Benutzer sind mit der Navigation, den Gesten und dem Design ihres mobilen Betriebssystems vertraut. Deswegen sollte das Design sich auch nach den Gewohnheiten seiner Benutzer richten. Die sollte der Entwickler oder Designer bei seiner Arbeit kennen und sie auch berücksichtigen.

Die Navigation: Zurück ist nicht gleich zurück

Seit Android 5 (Lollipop) wurde das System an die Google-Design-Richtlinien Material Design angepasst. Seitdem folgen die allermeisten Android-Apps den Vorgaben. Auch wenn das Material Design zusätzlich iOS-, Flutter- und Web-Anwendungen ansprechen soll, wird es bislang überwiegend für Android genutzt. Aus dem Grund bezieht sich der folgende Vergleich der Design-Unterschiede bei Android auch auf die Material-Design-Richtlinien.

Der Zurück-Button der Navigationsleiste (A) funktioniert ähnlich wie der eines Browsers (B): Chronologisch in umgekehrter Reihenfolge. (Grafik: Google)

Der Zurück-Button der Navigationsleiste (A) funktioniert ähnlich wie der eines Browsers (B): Chronologisch in umgekehrter Reihenfolge. (Grafik: Google)

Der offensichtlichste Unterschied besteht wohl in der Navigation. Bei Android gibt es eine globale Navigationsleiste. Auch wenn sie sich bei Android Pie verändert hat, besitzt sie weiterhin den klassischen Zurück-Button. Der Knopf sollte den Benutzer in jeder Situation zum vorherigen Bildschirm führen. Ausgenommen hiervon sind zum Beispiel Spiele, die in der Regel im Vollbild-Modus laufen, weshalb kein komfortabler Zugang nur Navigationsleiste gewährt ist. Bei Android ist es außerdem üblich, die Zurück- beziehungsweise die Schließen-Funktion zusätzlich über einen entsprechenden Button in der Top-Bar zu ermöglichen.

Bei Android ist auch eine Zurück- oder Schließen-Navigation über die Top-Bar üblich. (Grafik: Google)

Bei Android ist auch eine Zurück- oder Schließen-Navigation über die Top-Bar üblich. (Grafik: Google)

Bei iOS fehlt eine globale Navigationsleiste komplett. Aus dem Grund sollten Apps in der oberen linken Ecke des Bildschirms einen entsprechenden Zurück-Button besitzen, der zudem den Titel des vorherigen Bildschirms trägt. Auch die klassische Zurück-Geste sollte funktionieren. Um sie auszuführen, wird vom linken Display-Rand aus nach rechts gewischt.

Im Gegensatz dazu findet die Zurück-Navigation bei iOS innerhalb der App am oberen Bildschirmrand statt. (Grafik: Apple)

Im Gegensatz dazu findet die Zurück-Navigation bei iOS innerhalb der App am oberen Bildschirmrand statt. (Grafik: Apple)

Hamburger-Menü oder Bottom-Navigation

Auch bei der weiteren Navigation innerhalb der App gibt es ein paar Unterschiede. Bei Android gibt es gleich mehrere Lösungen, zwischen Seiten zu navigieren. Eine weitverbreitete Möglichkeit ist das Hamburger- beziehungsweise Drawer-Menü. Über einen entsprechenden Button am oberen linken Bildschirmrand öffnet sich das Menü. Auch eine Wischgeste vom linken Display-Rand nach rechts öffnet es. Hier überschneidet sich die Android-Geste mit der  Zurück-Geste von iOS, weswegen das Hamburger-Menü auch nicht in eine für Apples Betriebssystem geschriebene App gehört. Viele Cross-Plattform-Frameworks berücksichtigen das nicht und so gibt es einige Apps mit dem Android-typischen Drawer-Menü.

Zwei typische Menüs unter Android. Das Drawer-Menü (links) und die Bottom-Navigation-Bar (rechts). (Grafik: Google/t3n)

Zwei typische Menüs unter Android. Das Drawer-Menü (links) und die Bottom-Navigation-Bar (rechts). (Grafik: Google/t3n)

Gibt es jedoch nicht mehr als fünf unterschiedliche Menü-Punkte, so kann statt dem Drawer-Menü auch eine sogenannte Bottom-Navigation-Bar verwendet werden. Die befindet sich, wie der Name schon sagt, am unteren Bildschirmrand. Der Vorteil: Jede Hauptseite kann, ohne ein weiteres Menü öffnen zu müssen, direkt erreicht werden. Gibt es jedoch zu viele Seiten, sollte auf das Drawer-Menü zurückgegriffen werden. Eine weitere Möglichkeit bei Android sind Tabs, die sich dann aber oben befinden. Die sind jedoch nur für maximal zwei Menü-Punkte geeignet.

Bei iOS kommt hauptsächlich die Tab-Bar zum Einsatz. (Grafik: Apple)

Bei iOS kommt hauptsächlich die Tab-Bar zum Einsatz. (Grafik: Apple)

Bei iOS kommt auch eine Art Bottom-Navigation-Bar zum Einsatz. Bei Apple heißt sie zwar Tab-Bar, funktioniert aber im Wesentlichen genauso. Gibt es zu viele Menü-Punkte, hilft ein Mehr-Button ganz rechts, über den die zusätzlichen Ziele erreicht werden können. Die Lösung vermeidet die Überschneidung mit der Zurück-Geste.

Bitte beachte unsere Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

Schreib den ersten Kommentar!

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.