Vermeiden von schlechten Praktiken im iOS- und Android-Design

Wie viele durchschnittliche Menschen haben Sie gesehen, die gleichzeitig sowohl iOS- als auch Android-Geräte verwenden? Die offiziellen Zahlen laut dieser Studie liegen zwischen 10 % und 20 %, aber die Zahl umfasst auch Mac-Benutzer, nicht nur mobile Benutzer. In der Praxis neigen Menschen dazu, über einen bestimmten Zeitraum hinweg nur ein Telefon oder Tablet zu verwenden. Wenn sie zwei Geräte verwenden, wird meistens auf beiden dasselbe Betriebssystem ausgeführt.

Das bedeutet, dass es nicht notwendig ist, pixelgenaue Kopien des UI-Designs einer App zu erstellen und zu versuchen, beide Plattformen mit Dutzenden von verschiedenen Bildschirmgrößen, Seitenverhältnissen und Auflösungen unterzubringen (lassen Sie uns nicht einmal Kerben, Statusleisten aufführen). , Navigationsleisten, Hardwaretasten usw.).

Im Gegenteil, selbst wenn ein Benutzer dieselbe App sowohl auf iOS als auch auf Android ansieht, besteht die Möglichkeit, dass er es vorziehen würde, das native Gefühl auf beiden zu erleben. Aus diesem Grund ist die Vorgehensweise vieler Projektmanager und Product Owner in der mobilen Entwicklung oft suboptimal und muss angepasst werden.

Warum ist das immer noch ein Problem?

Aber warum treffen Stakeholder und Manager immer noch Entscheidungen, die häufig die Benutzererfahrung beeinträchtigen und so ihre eigenen Produkte untergraben? Zu Beginn des Jahrzehnts, als sich noch alle mit der Entwicklung von iOS und Android beschäftigten, war das verständlich, aber dieses lästige Problem besteht bis heute.

Der Hauptgrund für diese Situation könnte die von Projektmanagern und Mobilentwicklern geäußerte Sorge sein, dass ihre Benutzer verwirrt sein könnten, wenn sie dieselbe App auf einer anderen Plattform sehen und feststellen, dass sie nicht genau dasselbe Gefühl und dieselbe Benutzeroberfläche bietet. Es ist fair zu sagen, dass dieser Gedankengang bis zu einem gewissen Grad sinnvoll ist, da ein gewisses Maß an Ähnlichkeit notwendig und willkommen ist. Es jedoch zu weit zu treiben und in extremen Fällen exakte Klone von Apps für verschiedene Plattformen zu erstellen, schadet tatsächlich viel mehr als es nützt.

Das ultimative Ziel sollte es sein, die richtige Balance zu finden – erzwingen Sie keine pixelgenaue Konsistenz, sondern halten Sie sich an gemeinsame Designideen und halten Sie die Navigationskarte Ihrer App für beide Plattformen ähnlich; bieten die gleichen Funktionen und den gleichen Arbeitsablauf, versuchen Sie jedoch, sich wo immer möglich an das native Verhalten zu halten.

Jeder liebt hier und da eine benutzerdefinierte Schaltfläche oder ausgefallene Animationen, aber native Elemente sind das, woran die Leute gewöhnt sind und die einfacher und intuitiver zu verwenden sind.

Konzentrieren Sie sich auf Benutzer, nicht auf das Erscheinungsbild

Um einen guten Ansatz zu finden, um dieses Dilemma anzugehen, sollten wir am Ende der Fahnenstange beginnen – dem Endbenutzer. Untersuchungen haben uns gezeigt, dass Android- und iPhone-Benutzer sehr unterschiedliche Menschen sind, und wenn wir auf eine optimale UX abzielen, sollten wir versuchen, in ihre Nutzungsmuster einzudringen.

Ausgehend von dem durchschnittlichen Budget, das die Leute pro Monat für Technik ausgeben ( iPhone: 100,88 $, Android: 50,83 $ ) , über die Anzahl der Selfies, die sie pro Tag machen, iPhone: 12, Android: 7 , bis hin zu den SMS, die sie jeden Tag mit dem iPhone senden : 57, Android: 26 , es ist leicht zu erkennen, dass die Unterschiede erheblich sind, bis zu dem Punkt, an dem wir zu dem Schluss kommen können, dass es eine Abweichung im Verhalten gibt, die die Art und Weise beeinflusst, wie Menschen ihre Geräte verwenden.

Worauf sollten wir uns also konzentrieren, wenn wir Anwendungen für beide Plattformen gleichzeitig entwerfen?

Entscheiden Sie sich zunächst nach Möglichkeit für native Elemente. Selbst wenn Sie ein plattformübergreifendes Framework verwenden, basieren die meisten Komponenten auf rein nativen Ansichten. Wenn Sie also nicht wirklich etwas Benutzerdefiniertes brauchen, bleiben Sie bei den Grundlagen. Die Leute verwenden gerne das, woran sie gewöhnt sind, und Sie sparen etwas Entwicklungszeit für wichtigere Funktionen (und Code-Reviews!).

Benutzerdefinierte Ansichten können Ihrer App definitiv Charakter und Einzigartigkeit verleihen, solange sie die gleichen allgemeinen Ideen und das gleiche Nutzungsgefühl wie die generischen Ansichten beibehalten – zu wenig und Ihre App ist langweilig, zu viel und sie ist unnötig auffällig und schwer zu verwenden.

Manchmal kann sogar eine kleine Berührung mit einer etwas anderen benutzerdefinierten Ansicht ein Game-Changer für Ihre App sein, aber wenn Sie alle Bildschirme mit neuen Elementen füllen, die die Benutzer erkunden können, werden sie möglicherweise überfordert und verlieren sich bei der Suche nach wichtigen Informationen. Es ist kein Zufall, dass diese kleinen Details „Politur“ genannt werden!

Wie man sich verschiedenen Designkomponenten nähert

Denken Sie als Faustregel immer daran, dass jede Plattform ihre eigenen Designrichtlinien hat. Die Ansätze von Android setzen auf Material Design, während Apple auf Human Interface Design vertraut. Um auf die spezifischen Komponenten einzugehen, die wir bei der Planung unseres Designs berücksichtigen sollten, gibt es mehrere Hauptteile, auf die wir uns konzentrieren müssen:

1. Allgemeiner Stil: Sofern wir nicht über eine plattformübergreifende Anwendung sprechen, sollten wir in Betracht ziehen, die allgemeinen Stilrichtlinien für jede Plattform zu befolgen. Insgesamt neigen iOS-Designs dazu, flacher zu sein, während Android einen mehrschichtigen Ansatz verfolgt.

   Historisch gesehen beeinflussen sich mobile Plattformen seit einem Jahrzehnt oder länger gegenseitig, und Sie können leicht einige Android-Konzepte in iOS und umgekehrt erkennen. Als beispielsweise Fingerabdrucksensoren in der mobilen Welt auftauchten, experimentierten ( und tun dies immer noch ) Hersteller mit der Größe und Position des Sensors, um ihn für so viele Benutzer wie möglich bequem zu machen. Gleichzeitig passten sich auch Designer und Entwickler an die neue Funktion an, sodass letztendlich die visuellen Elemente und das Feedback auf beiden Plattformen größtenteils identisch sind (abgesehen von einigen exotischen Ansätzen).

2. Hardware-Besonderheiten und Navigationsmuster: Dies ist wahrscheinlich eines der auffälligsten Beispiele für die Nachteile des direkten Klonens Ihrer App. Die meisten Android-Geräte verfügen nach wie vor über den Komfort einer zusätzlichen Navigationsleiste (egal ob Hardware oder Software auf unterschiedlichen Geräten), inklusive Zurück-Button. Da iOS dies nicht bietet, müssen Anwendungen überlegen, wo und wann sie die Zurück-Schaltfläche bereitstellen, normalerweise in der oberen linken Ecke jedes Bildschirms.

   Die Menüschaltfläche (in diesem Beispiel die quadratische Schaltfläche) kann auch zusätzliche Funktionen für Android-Apps bereitstellen. Wo ist das relevant? Zum Beispiel beim Öffnen des Einstellungsmenüs oder einer ähnlichen Navigationsfunktion.

   

   Bis vor kurzem verfügten iPhones auch über den traditionellen Home-Button von Apple, aber seit der Einführung des iPhone X wurde er an den Rand gedrängt und der Ablauf in iOS basiert nun auf Gesten. Wenn das Wischen ein wichtiger Bestandteil Ihrer App ist, stellen Sie sicher, dass zwischen dem Rand des App-Containers und dem Wischbereich, den Sie zulassen, genügend Abstand vorhanden ist, um knifflige Wischkoinzidenzen zu vermeiden.

   Falls Ihre App auf hardwarespezifischen Funktionen wie Bluetooth, NFC oder kabelgebundenen Kopfhörern basiert, sollten Sie immer die Bandbreite der verschiedenen Hardwarespezifikationen berücksichtigen, die Sie unterstützen. Versuchen Sie, dem Benutzer ein angemessenes Feedback zu geben, wenn er versucht, mit einer bestimmten Funktion zu interagieren. Wenn Sie aus irgendeinem Grund eine hardwarespezifische Funktion nur für eine der beiden Plattformen bereitstellen müssen, informieren Sie Ihre Benutzer unbedingt über den Unterschied.

3. Globale Elemente (Statusleisten, Kopfzeilen usw.): Komponenten, die auf allen Seiten Ihres Designs erscheinen, wie die Statusleiste, die Navigationskopfzeile usw., sollten streng darauf abzielen, ein natives Gefühl zu vermitteln, also sollten wir uns nicht ändern die Höhe und den Stil dieser Balken. Es gibt geringfügige Unterschiede in der Gestaltung der globalen Elemente auf beiden Plattformen. Beispielsweise verwendet Android linksbündigen Text, während iOS einen zentrierten Titel verwendet. Die Statusleiste ist eine native Komponente, sodass Sie sich darüber keine Gedanken machen müssen, aber denken Sie bei der Planung des oberen Bereichs Ihrer App an unterschiedliche Kerben und Bildschirmseitenverhältnisse.

   

   

4. Navigation: Die guten alten Material Design-Richtlinien von Google schlagen vor, in Android-Anwendungen auf die Schubladenmenü-Navigation zu setzen, wobei die untere Navigation zurückbleibt, aber immer noch eine praktikable Option ist. iOS neigt dazu, sich ausschließlich für eine Tab-Leiste zu entscheiden, was Ihre Navigationsoptionen auf oberster Ebene einschränken kann, aber eine klare Sicht auf alle auf einmal bietet. In diesem Fall bieten beide Betriebssysteme ähnliche Komponenten, die je nach Komplexität Ihrer App verwendet werden können, aber der visuelle Unterschied in den beiden Systemen sollte Sie natürlich leiten – zum Beispiel die globale Navigationsleiste in Android und ihr Fehlen in iOS.

   Die rasante Entwicklung mobiler Hardware in den letzten Jahren hat viele Variablen und Unbekannte eingeführt: All-Screen-Telefone, Kerben in verschiedenen Formen und Größen, verstärkte Verwendung von Gesten für die geräteweite Navigation und so weiter. All diese Änderungen bieten dem Benutzer eine beispiellose Leistung, können jedoch mühsam sein, wenn wir versuchen, alle Anwendungsfälle eines bestimmten Bildschirms in unserer App herauszufinden. Angesichts dieser Bedenken wäre ein guter Ansatz, um Verwirrung für unsere Benutzer zu vermeiden, die Navigationsmuster einfach und konsistent zu halten, ohne die App mit zu vielen Gesten, Balken und Wischoptionen in mehrere Richtungen zu überladen.

   

5. Typografie: Beide Plattformen haben ihre Standardschriftarten – San Francisco für iOS und Roboto für Android. Sofern Sie sich nicht für eine benutzerdefinierte Schriftart entscheiden, die eng mit Ihrem allgemeinen App-Stil übereinstimmt, sollten Sie sich an die Standardeinstellungen halten. Denken Sie daran, dass Benutzer ihre Standard-Systemschriftart ändern können und dies keine Auswirkungen auf Ansichten hat, die Sie mit einer bestimmten Schriftart angepasst haben.

   Beispielsweise haben legasthenische Benutzer möglicherweise nicht die beste Zeit in Ihrer App, wenn sie die Standardschriftart durch eine Schriftart ersetzt haben, die speziell ihren Anforderungen entspricht. Wenn Sie Benutzer unterstützen, die möglicherweise nicht-lateinische Schriftarten (wie Kyrillisch, Arabisch usw.) verwenden, stellen Sie sicher, dass Ihre benutzerdefinierten Schriftarten diese zusätzlichen Zeichen ebenfalls bereitstellen. Wenn Sie sich für Spiele interessieren, haben Sie wahrscheinlich diese Bestenlisten mit Highscores gesehen, die von russischen Spielern erzielt wurden, deren Namen aufgrund ihrer unterschiedlichen Schriftart auffallen. Dies ist nur ein kleiner Fehler, der während der Entwicklungsphase gemacht wurde, kein „Feature“ für bestimmte Spieler, und obwohl es wahrscheinlich nicht dazu führen wird, dass Benutzer Ihre App fallen lassen, kann es definitiv zu einer verschlechterten Benutzererfahrung oder zu Beschwerden oder schlechten Bewertungen führen.

   

6. Andere Komponenten: Schaltflächen, Bildschirmübergänge, Animationen, Mikrointeraktionen, Aktionsblätter, Warnungen und alle anderen Arten von Ablaufsteuerungen würden den Rahmen dieses Artikels sprengen, aber sie sollten dem allgemeinen Prinzip folgen, das wir bisher auf andere Designelemente angewendet haben – beide Plattformen raten von übermäßigen benutzerdefinierten Elementen ab, da sie den Benutzer ablenken und verwirren könnten; Beim Thema Design ist der erste Eindruck für viele Nutzer meist der letzte und deshalb ist es so wichtig, die Aufmerksamkeit der Nutzer von Anfang an zu erregen und ihnen sozusagen das Gefühl zu geben, zu Hause zu sein.

In der realen Welt können Sie einige sehr beliebte Ausnahmen von den Regeln sehen, die wir besprochen haben – iOS-Anwendungen, die den Material Design-Richtlinien folgen, und einige Android-Produkte, die sich an Apples Human Interface-Richtlinien halten, aber diese Apps haben ihren eigenen, bewährten Stil. Die Benutzer sind mit den Apps und ihrem Design vertraut, und für sie macht es Sinn, ein etwas individuelleres Gefühl zu vermitteln.

Plattformübergreifender Ansatz richtig gemacht

Wenn Ihr Projekt andererseits auf einer plattformübergreifenden Lösung (wie React Native, Flutter, Xamarin usw.) basiert, sollten Sie überlegen, auf welche primäre Plattform Sie sich konzentrieren möchten, und von dort aus beginnen.

In den letzten Jahren haben diese neuen Frameworks massive Produktivitätssteigerungen in der plattformübergreifenden Anwendungsentwicklung gebracht. Immer mehr Unternehmen wechseln zu diesem Entwicklungsparadigma, da es eine kürzere Markteinführungszeit, eine überlegene Kosteneffizienz und weniger technische Barrieren bietet, wobei die Hauptnachteile in einigen Fällen eine eingeschränkte Funktionsunterstützung und eine suboptimale UX sind.

Während praktisch alle älteren Lösungen für die plattformübergreifende Entwicklung auf Webansichten basierten und daher auf vielen Geräten ernsthafte Probleme mit der Reaktionsfähigkeit hatten, können wir heute selbst in plattformübergreifenden Ansätzen native Komponenten verwenden. Diese bedeutende Verbesserung hat den Markt in vielerlei Hinsicht beeinflusst und alle mobilen Plattformen der Vereinheitlichung des visuellen Benutzererlebnisses auf verschiedenen Geräten und Plattformen einen Schritt näher gebracht.

Wenn Sie sich für eine plattformübergreifende Lösung entscheiden, können Sie wie bei einer standardmäßigen nativen App beginnen, indem Sie das Skelett Ihrer App erstellen. Sobald Sie Ihre Hauptprioritäten eingerichtet und ausgeführt haben (Basisabhängigkeiten einrichten, ein MVP erstellen, projektspezifische Meilensteine ​​erreichen, Ihre erste Version veröffentlichen usw.), können Sie Ihre Hauptdesigns für die beiden Anwendungen mithilfe der Plattform ganz einfach trennen. spezifische Tools, die jedes Framework bereitstellt. Abhängig von der Größe Ihres Teams und dem verfügbaren Zeitrahmen können Sie sogar in Betracht ziehen, diese Optimierungen in Version 1 aufzunehmen, um zukünftige Verwirrung zu vermeiden, wenn die Dinge in einer bestimmten Plattformversion nicht mehr gleich aussehen.

Schließlich sollten Sie prüfen, welche dieser Prinzipien für Ihre App gelten. Wie bei fast allen Unternehmungen in unserer Branche sollten Sie versuchen, die Richtlinien zu befolgen und sie gleichzeitig leicht an Ihre spezifischen Bedürfnisse anzupassen. Wenn beispielsweise die Schubladennavigation für Ihre einfache App mit fünf Bildschirmen wirklich sinnvoll ist, müssen Sie sich keine komplizierten Lösungen für jede Plattform einfallen lassen. Machen Sie es dem Benutzer klar und einfach, Ihre benutzerdefinierten Schaltflächen und Tools zu erkennen, unabhängig davon, ob es sich um Schlüsselkomponenten oder nur um geringfügige Anpassungen handelt.

Gutes Design respektiert Benutzergewohnheiten

Zusammenfassend können wir etwas wiederholen, das wir bereits wissen – gutes Design ist das Design, das die Gewohnheiten der Benutzer in jedem Betriebssystem respektiert. Nur ein wenig Politur am Ende kann den Unterschied zwischen einer durchschnittlichen und einer großartigen App ausmachen.

Oft bietet Ihre App nicht genügend einzigartige Funktionen, um Benutzer nur mit Inhalten zu überzeugen. Die meisten Menschen werden ihre Entscheidung, ein Produkt einem anderen vorzuziehen, mit „einem Bauchgefühl“ beschreiben. Diese Kategorie von Benutzern basiert ihre Auswahl hauptsächlich darauf, wie sie sich bei der Verwendung der App fühlen, indem sie implizit die Reaktionsfähigkeit, die allgemeine Stilauswahl, die Farbpalette und die einzelnen visuellen Komponenten, die sie auf dem Bildschirm sehen, bewerten.

Versuchen Sie daher sicherzustellen, dass Ihr Produkt nicht nur durch seine erstaunlichen Eigenschaften hervorsticht, sondern auch durch eine hochwertige Verpackung, die der Qualität der angebotenen Dienstleistungen entspricht.