Entwickeln für Android vs. iOS: Navigationsmuster

In dem Artikel der letzten Woche haben wir mit einem Ansatz auf hoher Ebene begonnen, bei dem wir die Unterschiede zwischen den Designsprachen von iOS und Android beschrieben haben: Flaches Design bzw. Materialdesign.

Wenn Sie Flat vs Material noch nicht gut verstehen, empfehle ich Ihnen, sich vor dem Lesen dieses Artikels darüber zu informieren.

In den nächsten Wochen werden wir uns mehr mit der Entwicklung von Natives und Hybriden Handys und anderen Unterschieden zwischen Android- und iOS-Plattformen befassen.

Lassen Sie uns diese Woche über Navigationsdesignmuster sprechen.

Wenn Sie darüber nachdenken, wie Ihre Nutzer in Ihrer mobilen App navigieren, sollten Sie sich folgende Fragen stellen:

  • Wie soll der Benutzer durch die verschiedenen Bereiche meiner App navigieren?
  • Soll ich eine Navigationsleiste oder Registerkarten verwenden?
  • Sollten sich meine Registerkarten oben oder unten auf dem Bildschirm befinden?
  • Wie lasse ich meinen Benutzer von seiner aktuellen Ansicht zurückkehren?

Wir beantworten diese Fragen sowohl für die iOS- als auch für die Android-Plattform (mit Fallstudien einiger sehr beliebter Apps). Wenn Sie dies noch nicht getan haben und ein Update erhalten möchten, wenn diese nächsten Artikel veröffentlicht werden, abonnieren Sie bitte unsere Mailingliste (ich verspreche, kein Spam). Wenn Sie Unternehmer / Entwickler im mobilen Bereich sind und planen, Ihre mobile App sowohl auf iOS als auch auf Android zu veröffentlichen, ist es unerlässlich, dass Sie die Besonderheiten der einzelnen Ökosysteme und der Nutzerbasis kennen, um eine bessere Software bereitzustellen.

Warum sollte man sich mit Navigation beschäftigen?

Die Navigation ist einer der (wenn nicht der) wichtigsten Bestandteile einer mobilen App. Da die Bildschirme von Mobilgeräten im Vergleich zu Laptops recht klein sind, können Sie in der Regel nicht alle Funktionen Ihrer App auf einem einzigen Bildschirm anzeigen. Es ist daher wichtig, dem Benutzer zu erklären, wie er von einem Abschnitt zum anderen navigiert. Wenn Sie intelligentere Entscheidungen zur Benutzererfahrung treffen (und aufzeichnen, wie Benutzer darauf reagieren), kann dies die Verwendung (oder den Abbruch) Ihrer App durch Benutzer erheblich beeinflussen.

Tabs

Wenn Ihre App einige Hauptabschnitte enthält und Sie möchten, dass der Benutzer schnell zwischen diesen wechselt, sind Registerkarten eine gute Wahl. Mithilfe von Registerkarten können Sie die Hauptansichten Ihrer App organisieren und den Inhalt in jeder App schnell durchsuchen.

iOS

Unter iOS befinden sich die Registerkarten am unteren Bildschirmrand. Es ist ein sehr bekannter und vertrauter Ansatz für das Navigationsdesign, der von vielen erfolgreichen Produkten wie Facebook, Twitter und Instagram verwendet wird. iOS-Registerkarten haben in der Regel sowohl ein Symbol als auch einen Text.

Registerkarten in der iOS-App von TwitterDie Registerkartenleiste in Trellos iOS-App

Eine typische Verwendung von Registerkarten umfasst jeweils einen Abschnitt Ihrer Anwendung:

  • Home (Hauptinhalt) Tab
  • Suchen (falls Inhalt gesucht werden soll)
  • Registerkarte "Verfassen / Erstellen"
  • Registerkarte Benachrichtigungen
  • Registerkarte "Profil"
Darüber hinaus weisen Registerkarten häufig Symbole oder Zahlen auf, die darauf hinweisen, dass dem Benutzer neue Inhalte zur Verfügung stehen

Es gibt eine Konvention und eine Beschränkung für die Verwendung von bis zu 5 Registerkarten. Normalerweise sollte Ihre Anwendung nicht mehr als 5 "große" Aufgaben ausführen (dies ist im Allgemeinen nur eine gute UX-Erfahrung).

Im Hochformat ist horizontal auf iOS-Geräten nur so viel Speicherplatz verfügbar. Wenn Sie also einen sechsten Tab setzen, ist kein Platz für alle vorhanden, und das System „floppt“ sie in einen weiteren Tab. Wenn Sie auf diesen gepunkteten Tab tippen, wird eine Liste anderer Tab-Optionen geöffnet, die nicht in die Tab-Leiste aufgenommen wurden.

Ein Beispiel für die Registerkarte

Android

Unter Android befinden sich die Registerkarten oben und werden in der Regel als Text oder Symbole (anstelle von Text und Symbolen) dargestellt, es sei denn, Sie rufen eine untere Navigationsleiste auf (siehe unten).

Tabs in der Android App von Twitter

Android-Registerkarten konzentrieren sich in der Regel eher auf app-spezifische Bereiche als auf iOS und weniger auf „sekundäre“ Bereiche wie Suchen, Erstellen / Verfassen und Profilieren, da Android über andere Navigationselemente verfügt, um diese Funktionen zu erfüllen.

Wischen

Mit Android-Apps (wie Backdrops) können Benutzer in der Regel horizontal über den Bildschirm streichen, um zwischen den Registerkarten zu navigieren.

Navigationsleiste unten

Die untere Navigationsleiste ist ein relativ neues Android-Designmuster, mit dem versucht wird, die Verwendung von Registerkarten in iOS nachzuahmen. Während ich persönlich argumentiere, dass ein unterer Tab in Android albern ist (da er zu nahe an der ikonischen Navigationsleiste von Android liegt), sagt Google Folgendes zu Tabs vs. Bottom Navigation:

Mithilfe von Registerkarten können Sie ganz einfach zwischen verschiedenen Ansichten und wechseln

Mit den unteren Navigationsleisten können Sie auf einfache Weise die Ansichten der obersten Ebene durchsuchen und zwischen ihnen wechseln.

Seitennavigationsfach

Wenn Ihre App mehr als eine Handvoll Hauptabschnitte (oder „Nebenabschnitte“ wie Einstellungen und Feedback) enthält, ist ein Navigationsfach ein weiteres sehr beliebtes Entwurfsmuster. Sie können dem Benutzer eine Liste von Abschnitten zur Verfügung stellen, die er verstauen kann, wenn er sie nicht benötigt.

iOS

Unter iOS sind Navigationsschubladen kein natives Entwurfsmuster. Sie kamen mit der Weiterentwicklung des iOS-Designs auf die Plattform, sind aber immer noch ein wichtiger Bestandteil der Navigation in vielen Anwendungen.

Da Apple keine API zur Implementierung von Navigation Drawers bereitstellt, verwenden Entwickler in der Regel Bibliotheken von Drittanbietern (hier eine unvollständige Liste).

Android

Unter Android sind Navigationsschubladen ein systemeigenes Entwurfsmuster. Daher stellt Google Ihnen die APIs zur Verfügung, die Sie zum Erstellen einer Navigationsschublade benötigen, ohne nach APIs von Drittanbietern suchen zu müssen.

Falls zutreffend, werden am oberen Rand einer Navigationsleiste in der Regel benutzerspezifische Informationen angezeigt.Im unteren Bereich einer Navigationsleiste können untergeordnete Abschnitte angezeigt werden.

Top Bars

iOS

Unter iOS wird die oberste Leiste als Navigationsleiste bezeichnet. Zu den Navigationsleisten gehören normalerweise:

  • Der Titel des Abschnitts, in dem sich der Benutzer gerade befindet
  • Eine Zurück-Schaltfläche links, wenn es einen Bildschirm gibt, zu dem Sie zurück navigieren können
  • Ein Inhaltssteuerelement auf der rechten Seite, falls zutreffend (wie Search)
Navigationsleiste der iOS-App von TwitterDie Navigationsleiste der iOS-App von Twitter mit einem Zurück-Button

Die Hauptaufgabe der Navigationsleiste besteht darin, dem Benutzer die Navigation durch eine Reihe hierarchischer App-Bildschirme über die Schaltfläche "Zurück" zu ermöglichen.

Android

Unter Android wird die oberste Leiste als Symbolleiste bezeichnet. Die Symbolleiste von Android ist standardisierter als iOS und enthält normalerweise:

  • Der Titel des Abschnitts, in dem sich der Benutzer gerade befindet
  • Eine Aufwärts-Schaltfläche links, wenn es einen Bildschirm gibt, zu dem Sie zurückkehren können
  • Eine Navigationsschubladen-Schaltfläche, wenn keine Aufwärts-Schaltfläche vorhanden ist
  • Menütasten und Überlaufmenü mit mehr Optionen
Beachten Sie, dass in Android-Apps mit Symbolleiste und Registerkarten die beiden Elemente zu einem einzigen Element zusammengeführt werden.Das Überlaufmenü in der Android-App von YouTube

Die Menüschaltflächen und das Überlaufmenü können sowohl als Alternative als auch als Ergänzung zu einer Seitennavigationsschublade verwendet werden. Ein Überlaufmenü kann möglicherweise die Notwendigkeit einer Seitennavigationsschublade beseitigen, je nachdem, wie viele verschiedene Ansichten Ihre App enthalten muss.

Alternativ können Sie jedem Abschnitt in Ihrer Seitennavigationsleiste ein eigenes Überlaufmenü mit weiteren Optionen zuweisen, mit denen der Benutzer interagieren kann.

Zurück-Schaltflächen (und die Navigationsleiste von Android)

Es ist toll, zu einem Bildschirm zu navigieren, aber es ist auch wichtig, den Benutzern klar zu machen, wie sie zurückkehren sollen.

iOS

Unter iOS kann der Benutzer nur über eine Zurück- / Schließen-Schaltfläche auf der linken Seite der Navigationsleiste zurück navigieren.

Android

Da Android über eine Navigationsleiste auf dem Bildschirm verfügt, wird in der Designdokumentation zwischen der Schaltfläche Nach oben und der Schaltfläche Zurück unterschieden.

Die Nach-Oben-Taste

Die Schaltfläche Nach oben ist normalerweise in einer Symbolleiste enthalten und bringt den Benutzer zurück zum letzten Bildschirm, den er in Ihrer App angezeigt hat (bis er den Startbildschirm der App erreicht).

Die Android-Navigationsleiste und die Schaltfläche Zurück

Die Schaltfläche "Zurück" ist Teil der Navigationsleiste und "navigiert in umgekehrter chronologischer Reihenfolge durch den Verlauf der zuletzt angezeigten Bildschirme". Während die Schaltfläche "Nach oben" die Benutzer nicht aus Ihrer App entfernt, kann die Schaltfläche "Zurück" den Benutzer von der aktuellen App zu der zuvor verwendeten App weiterleiten.

Ein wesentlicher Unterschied zwischen iOS und Android besteht darin, dass der Prior über eine physische Home-Taste verfügt (die auch als Daumenabdruckscanner dient), und die letztere auf eine nach vorne gerichtete physische Taste verzichtet, um einen größeren Bildschirm zu haben (und den Daumenabdruckscanner auf die Tastatur wirft) Rückseite des Telefons).

Auch wenn es sich um ein „System“ -Designmuster und nicht um eine „App“ handelt, kann die Navigationsleiste von Android ausgeblendet werden, und immersive Medien-Apps (wie Youtube, Google Fotos, Netflix usw.) blenden die Navigationsleiste aus, damit sich der Benutzer darauf konzentrieren kann Der Inhalt, den die App präsentiert.

Da die Navigationsleiste eine Schaltfläche "Zurück" enthält, ist es nicht ungewöhnlich, dass Android-Apps keine Schaltfläche "Nach oben" enthalten und der Benutzer die Schaltfläche "Zurück" verwenden muss, da ihre Funktionen sehr ähnlich sind.

Fazit

Das war's für den Artikel dieser Woche zu Navigationsmustern auf iOS und Android.

Im nächsten Artikel werden wir uns mit der Entwicklung von Native vs. Hybrid für mobile Apps befassen.

Wenn Sie ein Update erhalten möchten, wenn diese nächsten Artikel online sind, abonnieren Sie bitte unsere Mailingliste. Wenn Sie Unternehmer / Entwickler im mobilen Bereich sind und sowohl Android als auch iOS ansprechen möchten, erhöhen Sie Ihre Erfolgschancen erheblich, wenn Sie das Design und die Funktionsunterschiede zwischen diesen beiden Betriebssystemen und den Erwartungen der Benutzer verstehen.

Dieser Artikel wurde mitverfasst von:

Jordan Rejaud, ein Berater für Softwaretechnik, der Kunden im mobilen Bereich durch die Entwicklung und das Schreiben der benötigten Software unterstützt.

und

Alex Bush, ein Software-Ingenieur bei SmartCloud. Er bloggt über fortgeschrittene iOS-Themen und Ruby on Rails.