iOS vs. Android App-Design: Zweifache Arbeit?

von Melinda Albert am 26.Februar 2014 in Apps, Mobile Design, News, Seminare

Häufig fragen mich meine Kunden, inwieweit plattformübergreifende Portierungen fertiger App-Designs sinnvoll – und überhaupt möglich – sind. Die Frage liegt auf der Hand, denn wer wochenlang an einem perfekten Android-App-Design gewerkelt hat, möchte mit möglichst geringem Aufwand auch vom iOS-Markt profitieren – und umgekehrt.

Wer „klont“ spart Zeit, aber geht das Risiko ein, Nutzern deren intuitiver Bedienung „ihres“ Systems zu berauben. Mit relativ geringem Mehraufwand lässt sich dieses Problem lösen, denn das Android- und iOS-Framework bieten eine Fülle an Möglichkeiten, plattformspezifische UI-Elemente zu implementieren und zu warten.

In diesem Artikel fühle ich den sechs größten Differenzen auf den Zahn, die es als mobile Designer zu bewältigen gilt, wenn eine Smartphone-Portierung ins Haus steht.

1) Tappfläche

In den „Apple Human Interface Guidelines“ wurde die durchschnittliche Daumengröße von iPhone- und iPad-Nutzern mit 44px definiert – bei normaler Auflösung wohlgemerkt. Android Guidelines dagegen sehen die empfohlene Tappfläche bei 48x48dp, also „density-independent“ pixeln. Ganz klar, dass diese sich unterscheidenden Metriken bei einer Portierung bedacht werden müssen.

iPhoneTappfläche androidtappfläche

2) Listenansichten in iOS- und Android-Apps

iOS-Listen werden meist einzeilig in einer Höhe von 44px ausgegeben und verfügen – sofern sie auf eine hierarchisch tiefer liegende Ebene führen – über einen Weiterführen-Pfeil: den sogenannten Disclosure Indicators. In Android-Apps sucht man diese kleinen Pfeile vergeblich und auch die Zeilenhöhe variiert hier häufiger.

iphoneliste  androidliste

3)  Aufbau von Navigation- und Actionbar

Im Bereich der Navigationsleiste/Actionbar unterscheiden sich Android- und iOS teilweise stark. Im Detail sehen die beiden Systeme eine Aufteilung der Leisten nach folgendem Schema, von links nach rechts zu lesen, vor:

navigation actionbar

Die iPhone-Navigationsbar

  • Zurück-Button (ab 2. hierarchischer Ebene)
  • Zentrierter Screen Titel
  • 1-2 rechtsbündige Controll-Buttons oder –Icons

Die Android-Actionbar

  • Up-Button ab 2. hierarchischer Ebene
  • Icon
  • App-Titel oder View-Control (ggf. Branding-Informationen oder Spinner)
  • Action-Bar Icons (Anzahl in Abhängigkeit der Actionbar-Breite und Ausrichtung)
  • Menu Overflow
  • Im Action-Modus erscheint die sogenannte „Contextual Action Bar“

androidcontextual

4) iPhone vs. Android Tabbar

Einer der grundlegenden Unterschiede in der Darstellung von iOS- und Android-Apps zeigt sich am Beispiel der Tabbar. Während die Android-Tabbar (scrollbar oder fixiert) unmittelbar unterhalb der Action-Bar angesiedelt ist, sieht iOS eine Platzierung am unteren Bildschirmrand mit maximal fünf Tabs (stets mit Icon und Text) vor.

iOStabbar  androidtabbar

5) Plattformspezifische Icons und Elemente

Android und iOS verfügen über ein plattformspezifisches Icon-Set, das die meistverwendeten Funktionen beherbergt. Diese wären beispielsweise: „Share“, „Kontakt“ und „Email“ sowie „Löschen“. Vor allem diese charakteristischen Elemente solltest du bei einer systemübergreifenden Entwicklung stets im Auge behalten.

ios und android-icons

Weitere typische Charakteristika der jeweiligen Systeme sind UI-Elemente wie Page Control, die Radio Buttons, Text-Eingabefelder, Picker etc. Hier ziehst du eine designtechnische – und gedankliche – Trennlinie, denn diese Elemente bleiben dem jeweiligen System vorbehalten. Will heißen: Von einem Android-App-Design lässt du dich hier besser nicht inspirieren, wenn du an einer iOS-App arbeitest.

6) Auflösungen und Screen-Größen

Während sich eine iPhone-App auf die Darstellung der Inhalte in „normaler“ und in Retina-Auflösung beschränkt, fällt die Auswahl bei Android-Apps ungleich größer aus: (LDPI), MDPI, HDPI, XHDPI, XXHDPI, und XXXHDPI.

Zusammenfassung:

iOS und Android weisen für Entwickler teils erhebliche Unterschiede auf, die bei der Konzeption einer App Berücksichtigung finden müssen. Angefangen bei marginalen Unterschieden der „Zurück“-Buttons über Navigation- vs. Actionbar bis hin zur elementaren Gestaltung der UI-Elemente. Die diffizile Unterscheidung der Tab-Bars beider Systeme sowie die Anordnung kontextueller Aktionen finden in Design und Usability einer App für iOS und Android ebenfalls besondere Aufmerksamkeit.

Weiterführendes

Literatur

Artikel zum Thema

“iOS vs. Android App-Design:  Zweifache Arbeit?” ist ein Gastbeitrag von Melinda Albert – Mobile Design Berlin (Autor) und Christian Bösel – Wort, Web & Bild (Redaktion).

App-Design-Seminar-Melinda-AlbertMelinda Albert verrät im mobilbranche.de-Seminar “Optimierung von Usability, Konzeption, Design für iOS und Android Apps” am 14. April in Berlin praktische Geheimtipps für iOS und Android Apps, die zur Ankurbelung der Downloads und der App-Nutzung helfen. Dabei wird die renommierte Mobile App Designerin/Konzepterin auf das Interface, Nutzungsverhalten und conversionoptimierte Designs eingehen. Bis zum 14. März buchen und Frühbucherrabatt erhalten!
weitere Infos zum Seminar: “Optimierung von Usability, Konzeption, Design für iOS und Android Apps”

Wollen Sie über die Entwicklungen im Mobile Business auf dem Laufenden bleiben? Dann abonnieren Sie den kostenlosen Newsletter von mobilbranche.de im Formular oben rechts oder per E-Mail an abo@mobilbranche.de.


Sichern Sie sich jetzt Ihren Wissensvorsprung in Mobile Marketing und Mobile Business und abonnieren Sie die Meldungen von mobilbranche.de ganz bequem per E-Mail. Unser Newsletter erscheint täglich um 13 Uhr und ist kostenlos.


Facebook Kommentare:

Kommentare