Hybride App Entwicklung: 7 Regeln für das App Design
Eine hybride App ist heute kaum noch von nativen Apps zu unterscheiden – vorausgesetzt sie wird richtig gebaut. Für die meisten Projekte bieten hybride Apps Vorteile, die die Entscheidung zwischen nativen und hybriden Apps leicht machen. Schnellere und günstigere Entwicklungskosten und mehr Flexibilität. Doch es gibt Regeln für hybrides App Design, die man beachten sollte.
Inhaltsverzeichnis
- Die 7 wichtigsten Grundlagen für gelungenes App Design
- 1. App Guidelines für iOS und Android einhalten
- 2. Nicht alle Webdesign Regeln gelten für eine hybride App
- 3. Farben und Layout für die hybride App optimieren
- 4. Etablierte Muster für bessere Usability nutzen
- 5. Eine kompakte Navigation für die hybride App einsetzen
- 6. Best Practice für Bedienelemente & Interaktionen nutzen
- 7. Unterschiedliche UI-Elemente für iOS und Android Apps beachten
Die 7 wichtigsten Grundlagen für gelungenes App Design
Native Apps gehen nahtlos in das Design des Betriebssystems über. Funktionen wie Swipe, Tap etc. sind fest in App Design und Usability verankert.
Hybride Apps sind auf Webtechnologien aufgebaut – so auch das Design, dessen Grundlage CSS ist. Anders als bei nativen Apps ist CSS für Desktop Browser optimiert.
Damit ein möglichst nahes App-Feeling erreicht wird, muss also einiges beim App Design beachtet werden.
Hier sind die 7 wichtigsten Regeln für hybrides App Design:
- App Guidelines für iOS und Android einhalten
- Nicht alle Webdesign Regeln gelten für eine hybride App
- Farben und Layout für die hybride App optimieren
- Etablierte Muster für bessere Usability nutzen
- Eine kompakte Navigation für die hybride App einsetzen
- Best Practice für Bedienelemente & Interaktionen nutzen
- Unterschiedliche UI-Elemente für iOS und Android Apps beachten
1. App Guidelines für iOS und Android einhalten
Du solltest dir im Vorhinein im Klaren sein, ob die App für Android, iOS oder beide Plattformen veröffentlicht wird. Daran richtet sich natürlich auch das Design.
Jede Plattform hat eigene Guidelines und Elemente, die User gewohnt sind.
Diese sollten unbedingt miteinbezogen werden. Ansonsten merken User sofort den Unterschied zwischen Web App und nativer App.
Außerdem schreiben Stores wie Google Play oder der App Store gewisse Regeln vor. Ohne Einhaltung dieser Regeln kann es sein, dass die App nicht für den App Store zugelassen wird.
Der Android Store ist nicht ganz so streng wie der App Store – bei letzterem müssen Regeln strikt eingehalten werden.
iOS verwendet die sogenannten Human Interface Guidelines. Sie beschreiben ein einfaches, leicht zu verstehendes und freundliches Design. Es ist angelehnt an detailreiche Texturen und altbekannte Objekte und Strukturen.
Beispiel: Die Textur von frühen Versionen der Kalender App iCal soll von Ledersitzen eines Flugzeuges stammen. Apps mit digitalen Notizbüchern sahen aus wie Ringbücher und Sprachaufnahme-Apps hatten ein Mikrofon auf dem Screen.
Android hingegen setzt auf Material Design. Es ist bunt, mutig, grafisch und selbstbewusst. Animationen runden das Ergebnis ab. Material Design basiert auf materialartige Komponenten wie Flächen, Objekte und Icons.
Auch hier ist die Designsprache von der realen Welt inspiriert. Dieses zeigt sich in der Art und Weise, wie einzelne Bereiche oder Elemente das Licht reflektieren oder Schatten werfen.
iOS Store: iOS Guidelines
Android Store: Android Guidelines
2. Nicht alle Webdesign Regeln gelten für eine hybride App
Gängige CSS Regeln, die für gelungenes Webdesign essentiell sind, sind nicht unbedingt für hybride Apps geeignet.
Das beste Beispiel wäre hier der Zustand „hover“. Üblich auf Webseiten, bei Apps bzw. mobilen Devices hingegen nicht aufrufbar. Man muss also vielmehr an Userinteraktionen wie touch oder tap von Apps denken.
Ein weiterer Punkt fällt Usern – oft unterbewusst – bei hybriden Apps auf: Wenn man mit dem Touchscreen interagiert, dauert es 300ms bis der Event ausgelöst wird. Dies passiert aufgrund der Web View bzw. der Technologie von hybriden Apps.
300ms klingen zwar verdammt kurz, aber man merkt die Verzögerung. Mithilfe der FastClick Library kann man diesen Umstand umgehen.
3. Farben und Layout für die hybride App optimieren
Eine hybride App wird auf Smartphones und Tablets genutzt. Wenig verwunderlich, dass die App also oft unterwegs verwendet wird.
Teilweise bei schwierigen Lichtverhältnissen, wie zum Beispiel starke Sonneneinstrahlung. Daher ist es wichtig, auf einen hohen Kontrast zu setzen. Umso höher der Kontrast, umso besser die Lesbarkeit im Freien.
Auch das Layout der hybriden App muss sorgsam geplant werden. Viele verschiedene Displaygrößen und zusätzlich die Möglichkeit des Portrait- oder Landscape Modus müssen berücksichtigt werden. Kleinere Smartphones werden ein anderes Design bzw. eine andere Anordnung der Elemente benötigen.
Nehmen wir als Beispiel eine Shopping-App:
Auf kleineren Screens sollten auf Grund des knapp bemessenen Platzes nicht mehr als zwei Produkte nebeneinander dargestellt werden. Ansonsten werden die Elemente zu klein und können nur schwer gelesen werden.
Auf einem Tablet hingegen kann man schon drei bis fünf Produkte anzeigen. Außerdem sollten die Schriftgröße und Buttons für die verschiedenen Screens angepasst werden.
Viele Frameworks und Libraries für hybride Apps unterstützen diesen Prozess. Nennenswert sind hier z.B. React, Ionic oder Bootstrap. Sie bieten vorgefertigte Grid-Layouts, UI Elemente, Farbgeneratoren und vieles mehr.
Außerdem haben sie meist eigene Design-Elemente für Android oder iOS.
4. Etablierte Muster für bessere Usability nutzen
Bestenfalls merkt man gar nicht, dass man statt einer nativen eine hybride App in Händen hält. Dies muss man im Designprozess berücksichtigen. Die hybride App sollte so bedienbar sein, wie es User von Android oder iOS Apps gewohnt sind. Dazu gehört eine gut geplante Usability.
Die Bedienung der App sollte intuitiv sein. Das bedeutet, dass die Navigation und Verwendung der App einfach und selbsterklärend sein sollte.
Etablierte Muster von nativen Apps geben dafür Anhaltspunkte. Da der Eindruck einer App immer subjektiv ist, sollte die Zielgruppe zu Beginn festgelegt werden.
Welche User werden die App nutzen? Wie alt werden die User sein? Gibt es ähnliche Apps und wie sind diese aufgebaut? Solche Fragen sollten vor der Konzeption geklärt werden.
Grundsätzlich sollte das hybride App Design aufgeräumt, klar und eingängig sein. Ein sparsamer und behutsamer Umgang mit der Menge der angezeigten Inhalte ist ratsam. Die App sollte nicht überladen wirken und Freiräume (Whitespaces) sorgen für ein stimmiges Design.
Die Funktionen sollten sich auf das Wesentliche reduzieren. Apps werden für bestimmte Einsatzzwecke erstellt und sollten nur diese erfüllen. Eine „eierlegende Wollmilchsau“ mag zwar verlockend klingen, wird User aber mehr verwirren als nützen.
Aufgrund des beschränkten Platzangebotes haben sich kompakte Menüs bei mobilen Apps bewährt.
Dropdown Menüs, Sideslide Menüs oder eine Tab Bar sind Standard bei iOS oder Android Apps. Das Menü sollte immer klar ersichtlich und jederzeit leicht zu finden sein.
Dropdown Menüs sollten übersichtlich und auf das Wesentliche reduziert werden. Zu viele Menüpunkte überfordern User und erschweren eine zielführende Navigation. Besteht die App aus verschiedenen, eigenständigen Funktionen, sollten diese im Hauptmenü untergebracht werden.
Über ein seitenspezifisches Untermenü lassen sich dann weitere Funktionen zugänglich machen. Experten raten, dass jede Funktion der App über maximal zwei Klickwege erreichbar sein sollte. Damit verliert man innerhalb der App nicht die Orientierung.
Nicht zu vernachlässigen ist die Möglichkeit, Icons im Menü einzusetzen. Für Webseiten wird dies weniger genutzt, aber Apps verwenden Icons für alle möglichen Bereiche. Viele Symbole haben sich bereits so etabliert, dass man sofort weiß welcher Inhalt einen erwartet.
Ein Menütitel wird damit schon überflüssig. Bei wenig Platz, zum Beispiel in einer Tab Bar, helfen Icons sehr bei der Navigation.
Die möglichen Menüarten für iOS und Android Apps:
Seitliches Burgermenü
Wird gerne für Apps mit Login-Funktionen oder vielen Elementen verwendet. Meist wird oben das Logo oder ein Avatar angezeigt. Existieren viele Menüeinträge, dann kann man innerhalb des Menüs scrollen.
Auch für eine hybride App eignet sich ein seitliches Burgermenü sehr gut.
Prominente Beispiele: Amazon App, Booking.com
Tab Bar
Diese befindet sich meist am unteren Bildschirmrand, selten auch am oberen. Sie erlaubt einen einfachen Wechsel zwischen Funktionen, ohne erst das Menü öffnen zu müssen.
Das erspart Klickwege, allerdings eignet sich das Menü nur für wenige Einträge.
Prominente Beispiele: Instagram, Facebook, Vinted (vormals Kleiderkreisel)
Dropdowns bzw. Popover (iOS)
Sie werden eher selten als Navigation benutzt. Meist bilden sie Funktionen ab, die nicht ins Hauptmenü passen.
Zum Beispiel Account-Informationen, Sprachauswahl oder Einstellungen.
6. Best Practice für Bedienelemente & Interaktionen nutzen
Interaktive Elemente, wie Buttons, Menüs und Links sollten leicht als solche zu erkennen sein. Außerdem sollten sie eine ausreichende Größe haben und nicht zu nah aneinander liegen.
Das liegt daran, dass ein Finger breiter als eine Maus am Desktop ist. Sind Buttons zu klein oder haben zu wenig Abstand, tippt man schnell mal daneben.
Das frustriert die Nutzer und führt zu einem schlechten Nutzererlebnis.
Nach einer Interaktion sollte umgehend eine Reaktion der App erfolgen. Dabei kann es aber natürlich dauern, bis Prozesse wie Such- oder Ladevorgänge abgeschlossen sind.
Da hilft eine Animation während dem Laden. Sie zeigt dem Nutzer, dass etwas passieren wird und die App nicht einfach abgestürzt ist. Ein Ladebalken oder Spinner sind dafür bestens geeignet.
7. Unterschiedliche UI-Elemente für iOS und Android Apps beachten
Auf Android und iOS existieren bestimmte Design-Elemente, die auf der anderen Plattform nicht vorhanden sind.
Das erschwert natürlich den Ansatz der hybriden Apps – eine Codebasis für mehrere Systeme.
Daher sollte man diese Elemente kennen und entweder vermeiden oder für die Plattformen unterschiedlich anwenden.
Die wichtigsten Unterschiede erklären wir hier:
Call To Action Buttons
Der wichtigste CTA Button befindet sich bei iOS in der rechten oberen Ecke.
Bei Android wird der CTA als FAB (Floating Action Button) dargestellt und ist oft in der rechten unteren Ecke.
Select Felder
Klickt man in einem Formular auf ein Auswahl-Feld, öffnet sich bei iOS ein Auswahlrad am unteren Bildschirmrand.
Bei Android hingegen öffnet sich meist ein Popup, in der man die Auswahl treffen kann.
Tabs
Bei iOS werden die Tabs segmentiert, während bei Android die Tabs einfach gehalten werden.
Cards
Cards sind kleine, abgetrennte Bereiche. Sie werden eingesetzt, um komplexe Inhalte überschaubar darzustellen.
Diese Cards sehen bei iOS etwas anders aus als bei Android. Bei iOS sind die Cards weich gestaltet – kein bis sehr transparenter Schatten und die Kanten sind deutlich abgerundet.
Android setzt auf härtere Kanten. Der Schatten ist kleiner aber dabei deutlicher.
Alerts
Bei iOS werden Alerts in Kopfzeilenbereich, Body und Footerbereich unterteilt. Die Buttons befinden sich innerhalb des Alerts.
Android verwendet ein einfacheres Design. Man erkennt keine Kopfzeile und die Buttons sind nur als Text sichtbar.
Fazit: Hybride Apps sind super, solange man sich an bestimmte Regeln hält
Vor allem wenn man sich mehr mit Webdesign beschäftigt hat, muss man sich zuerst etwas umgewöhnen.
Am kompliziertesten ist es, die Unterschiede zwischen iOS und Android zu kennen und zu berücksichtigen.
Damit man damit nicht unnötig viel Zeit benötigt, sollte man auf Frameworks wie Ionic zurückgreifen. Diese wurden speziell für die Umsetzung von hybriden Apps entworfen und inkludieren schon verschiedene Designs für Android und iOS.
Der große Vorteil dabei: Man muss Elemente nicht für beide Plattformen einzeln stylen, sondern kann sich auf das Wesentliche konzentrieren.
Wie du siehst, ist App Design für hybride Apps keine einfache Sache.
Wenn du dich mehr in die Thematik App Entwicklung einlesen möchtest und wissen willst, was so eine App kosten kann, dann empfehlen wir dir unseren Blog-Beitrag „Eine App entwickeln lassen: Kosten, Schritte & Tipps„.
—
Weitere Tipps findest du hier:
Apple Design Richtlinien
10 Schritte zu besseren hybriden Apps
Eine eigene Native Mobile App entwickeln
Ionic Card Komponente