Fallstudie: die Gmail-App

Die Entwicklung von Android- und iOS-Apps geht Hand und Hand, wenn sich ein systemunabhängiger Erfolg einstellen soll. Unter App-Designern gelten die beiden Betriebssysteme als Paar, das zwar Gemeinsamkeiten, aber auch jede Menge Ungleichheiten mit sich bringt. Und spätestens bei einer App-Übertragung zwischen beiden Systemen entpuppen sich diese Ungleichheiten als echte Herausforderung.

Wir haben uns die Gmail-App für iOS und Android einmal zur Hand genommen und zeigen, wie eine Übertragung unter Berücksichtigung unterschiedlicher Guidelines, Farben, Typografien und Icons reibungslos funktionieren kann. Einen Gedanken an eine schlichte 1:1-Portierung verschwenden wir dabei erst gar nicht. Mehrere Gedanken an unsere Corporate Identity allerdings schon.

1. Typisch typografisch: systemabhängige Schriften

Apps, deren typografisches Erscheinungsbild auf den Systemschriften von Apple und Android basiert, haben bei einer Übertragung einen enormen Vorteil hinsichtlich des Arbeitsaufwandes. Androids Eigenkreation Roboto und die durch iOS standardmäßig verwendete Helvetica gleichen einander so stark, dass der Wiedererkennungswert für System-Wechsler stets gegeben ist. In ihrer serifenlosen Art und der Weise ihrer hierarchischen Anordnung unterscheidet sich das Schriftbild der Gmail-App in iOS und Android nur latent.

2. Eine Frage der Farbe: Rot oder röter?

An eine Veränderung der Primärfarbe ist bei einer Übertragung zwischen Android und iOS natürlich nicht zu denken, an deren Einsatz allerdings schon. Während die Gmail-App in Android auf großflächigen Rot-Einsatz setzt, empfehlen die Human Interface Guidelines aus dem Hause Apple nur sehr dezente, punktuelle Pinselstriche. Bei der Übertragung der Gmail-App wurde sowohl das minimalistische iOS- Gewand wie auch das oft poppige Android-App-Design bedacht. Letzteres erlaubt sogar die Verwendung unterschiedlicher Töne der Primärfarbe Rot und weiterer Sekundärfarben.

3. Icons: Herzstück und Achillesferse einer App

Gmail macht es richtig. Trotz unterschiedlicher Platzierung in der iOS- und Android-Version hat man es tunlichst vermieden, an der Icon-Darstellung zu schrauben. Das „Email löschen“-Icon beispielsweise wäre der Gmail-App selbst dann noch zuzuordnen, wenn es ausgedruckt und bezugslos auf einem Blatt Papier liegen würde. Icons sind Herzstück und Achillesferse gleichermaßen und sollten mit entsprechender Hingabe gestaltet und plattformunabhängig zumindest ähnlich dargestellt werden.

Eine Ausnahme in Sachen ähnlicher Icons bilden freilich die spezifischen System-Icons, wie beispielsweise „Teilen“, der „Zurück“-Pfeil oder das Action-Overflow-Icon (welches ausnahmslos in Android-Apps Verwendung findet und durch drei Punkte dargestellt wird).

4. Die Nutzerführung beider Systeme

War die Übertragung von Farbe, Typografie und Icons noch mit relativ wenig Aufwand umzusetzen, wird es bei der Nutzerführung etwas diffiziler. Für iOS-Nutzer ist die Usability, die intuitive Apple-Nutzerführung, ein ganz entscheidender Punkt für das Produkt und gegen ein Android-System. Um Gmail für iOS- und Android-Nutzer gleichermaßen benutzerfreundlich zu gestalten, müssen die Kernfunktionen der App auf das jeweilige System angepasst werden.

Schauen wir uns im Detail an, wie Gmail den Eigenheiten der beiden Systeme in der Kernfunktion „Email schreiben“ sowie „Suche“ und „Bearbeiten“ begegnet.

4.1 Die Kernfunktion „Email schreiben“

Nutzern des iPhones springt die wichtigste Funktion der App direkt in der Navigationsleiste – der Navigation-Bar – entgegen. Als einziger Button wird er durch seine Gestaltung in der Primärfarbe der App hervorgehoben. Damit folgt Gmail exakt den Ratschlägen der Apple Human Interface Guidelines (HIG).

In Googles Android setzt Gmail auf einen sogenannten Floating Action Button. Das Icon ist bis auf den formgebenden Kreis dasselbe, der über dem Inhalt liegenden Funktion wird aber eine prominentere Stelle eingeräumt.

4.2 Die Suche nach der „Suchfunktion“

Für iOS-Jünger nichts Ungewöhnliches: Die iPhone-App weist unmittelbar unter der Navigationsleiste ein offenes, direkt zu bedienendes Eingabefeld auf, um eine schnelle und komfortable Suche zu ermöglichen. Ein einfacher iOS-Klon in eine Android-Version der App würde zu latenten Orientierungsschwierigkeiten unter eingeschworenen Androiden führen. Das vertraute kleine Lupen-Icon ist schließlich das Erste, wonach Android-Nutzer suchen, um zu suchen.

4.3 Der Bearbeitungsmodus

Die Gmail-App setzt in iOS auf eine für Apple eher untypische Bearbeitungsfunktion über Checkboxen. Nach iOS-Standard ist hier für gewöhnlich ein expliziter „Bearbeiten“-Button in der Navigationsleiste untergebracht. Erst mit dem Setzen eines Häkchens offenbart Gmail die Bearbeitungsfunktionen im Zusammenhang mit den (auch mehrfach) ausgewählten Emails. Das sind beispielsweise „Löschen“ und „Archivieren“.

Die Android-Version von Gmail kommt gänzlich ohne Checkboxen und auch ohne einen „Bearbeiten“-Button aus, denn über einen long Press aktiviert, öffnen sich die Bearbeitungsmöglichkeiten in der Aktionsleiste – der Contextual Action Bar. Über die Jahre hinweg hat sich der lange Druck auf Bildschirmelemente zu einer intuitiven, typischen Bedienungsmöglichkeit unter Android-Nutzern gemausert. iOS-Nutzer würden bei einer 1:1-Portierung der Gmail-App nicht zwingend wissen, wie sich eine Email archivieren ließe.

5. Fazit

Gmail ist es trotz plattformspezifischer Eigenheiten hervorragend gelungen, eine starke Nutzerführung unter iOS wie auch unter Android zu schaffen. Notwendigerweise wurde auf ein „Klonen“ der App von einem auf das andere System verzichtet und ein starker Wiedererkennungswert, deren Corporate Identity, konnte unter Zuhilfenahme von typografischen und farblichen Merkmalen sowie einer einheitlichen Icon-Gestaltung umgesetzt werden.

“iOS vs. Android: App-Design übertragen und dabei die Corporate Identity bewahren” ist ein Gastbeitrag von Melinda Albert – Mobile Design Berlin (Autorin) und Christian Bösel – Wort, Web & Bild (Redaktion).

Seminartipp

Warum eine 1:1-App-Portierung zwischen iOS und Android niemals eine gesunde Grundlage für den App-Erfolg bilden kann, erfährst Du im mobilbranche.de-Seminar “Mobile Usability für Android & iOS” am 23. & 24.11. in Berlin. Usability-Expertin Melinda Albert zeigt eingängige Beispiele und bietet konkrete Problembehandlung, so dass Du Deine Android- und iOS-App in puncto Design & Usability verbessern kannst. In einem Interview mit mobilbranche.de gibt Melinda Albert einen persönlichen Ausblick auf das Seminar. Darin sagt sie:

„Wir werden Detail-Fragen behandeln, tieferes Verständnis für Usability sowie die Eigenheiten der jeweiligen Plattformen vermitteln und einen stärkeren Fokus auf praktische Übungen legen. Auch die effiziente Konzept-Übertragung zwischen Smartphone und Tablet wird dieses Mal Thema sein.“

Melde Dich an und sichere Dir jetzt Dein Seminarticket >>