Begeistern Sie Benutzer mit diesen Best Practices für das Design mobiler Apps

Veröffentlicht: 2022-03-11

Eine mobile App ist eine Sammlung verbundener Erlebnisse. Es ist die Aufgabe eines Designers, diese Erfahrungen zusammenhängend und reibungslos zu gestalten. Das ist keine kleine Aufgabe. UI-Muster und -Komponenten müssen auf allen Bildschirmen einheitlich aussehen und sich verhalten. Interaktionen müssen intuitiv und an den gewünschten Ergebnissen der Benutzer ausgerichtet sein. Die gesamte App muss Barrierefreiheitsrichtlinien enthalten.

Benutzerforschung und -tests sind die besten Möglichkeiten, um die nuancierten Erkenntnisse aufzudecken, die für den dauerhaften Erfolg einer App erforderlich sind. Es gibt jedoch allgemein anwendbare Best Practices, die Ihnen dabei helfen können, mobile Apps zu entwerfen, die die Benutzer begeistern und langfristig binden.

Vereinfachen und optimieren Sie Ihren Onboarding-Prozess

Studien zeigen, dass Benutzer, denen Onboarding-Tutorials präsentiert werden, Aufgaben tendenziell als schwieriger empfinden als diejenigen, die keine Tutorials sehen. In bestimmten Situationen können Onboarding-Bildschirme und QuickInfos effektive Methoden sein, um die wichtigsten Funktionen einer App vorzustellen und Benutzer zu ermutigen, sich im Rahmen ihrer Routine mit der App zu beschäftigen. Es kann jedoch lästig sein, Benutzer zu bitten, mehr als drei oder vier Onboarding-Bildschirme zu überprüfen oder zu viele Informationen im Voraus zu lesen. Benutzer würden die Dinge oft lieber selbst herausfinden.

Im Allgemeinen sollte die Benutzeroberfläche einer App so sofort vertraut und intuitiv sein, dass sie kein Tutorial erfordert. Wenn Sie es jedoch für notwendig halten, Onboarding-Strategien zu verwenden, begrenzen Sie die Anzahl der Schritte in den Tutorials und zeigen Sie sie nach Möglichkeit nur in Kontexten, die sich auf die Aktionen beziehen, die Benutzer bereits ausführen. Beschränken Sie außerdem QuickInfos auf eine Handvoll der wichtigsten Funktionen Ihrer App.

Bieten Sie die gleichen Funktionen für die App- und Desktop-Versionen an

Angesichts des zunehmenden mobilen Internetverkehrs erwarten die meisten Benutzer, dass sie auf ihren mobilen Geräten die gleichen Aufgaben erledigen können wie auf einem Desktop. Während eine Studie zeigt, dass die Mehrheit der Benutzer es immer noch vorzieht, komplizierte Aufgaben auf ihrem Desktop zu erledigen, fand eine Pew-Studie heraus, dass 15 % der amerikanischen Erwachsenen Smartphones als einzige Möglichkeit nutzen, um auf das Internet zuzugreifen. Wenn beispielsweise nicht auf alle Funktionen einer Mobile-Banking-App zugegriffen werden kann, kann dies eine Quelle der Frustration sein, die letztendlich dazu führt, dass Benutzer ihr Geschäft woanders hinführen.

Die Verwaltung der Erwartungen an die Einführung von Funktionen kann den Unterschied zwischen einer guten App-Rezension und einer schlechten App-Rezension ausmachen. Wenn Sie Ihre App vor der Implementierung des vollständigen Funktionsumfangs starten müssen, gehen Sie über das Posten eines „Coming Soon“-Bildschirms hinaus und erstellen Sie eine öffentlich zugängliche Feature-Roadmap, um genaue Erwartungen zu ermitteln.

Verwenden Sie Benachrichtigungen mit Bedacht

Benachrichtigungen gehören zu den leistungsstärksten Tools, um Benutzer zu binden, und bieten rechtzeitige Anstupser, um eine App erneut aufzurufen und sich mit Inhalten zu beschäftigen. Aber es ist wichtig, die Häufigkeit und den Zeitpunkt Ihrer Push-Benachrichtigungen zu berücksichtigen – zusammen mit den angebotenen Inhalten. Der Empfang zu vieler Pings oder unregelmäßiger Bursts kann dazu führen, dass Benutzer Benachrichtigungen vollständig deaktivieren.

Wenn Sie eine Benachrichtigung anzeigen, halten Sie sie kontextbezogen; Fragen Sie beispielsweise um Erlaubnis, auf die Kamera zuzugreifen, wenn Benutzer versuchen, ein Foto aufzunehmen. Fügen Sie granulare Benachrichtigungseinstellungen hinzu, auf die Sie leicht zugreifen können, damit Benutzer Benachrichtigungen an ihre Bedürfnisse anpassen können. Bitten Sie Benutzer auch nicht, Benachrichtigungen zuzulassen, bis sie zum dritten oder vierten Mal mit Ihrem Produkt interagieren, nachdem sie Gelegenheit hatten, Ihre App und den Wert, den sie bietet, zu erleben.

Eine der wichtigsten Best Practices für mobiles Design ist die sparsame und durchdachte Verwendung von Benachrichtigungen, um Ihre Benutzer nicht zu verärgern. Illustration von acht Quadraten, die Komponenten darstellen. Drei haben Nummern, die Benachrichtigungen anzeigen. Einer hat die Nummer 3. Ein anderer hat die Nummer 50. Und einer hat 481.
Zu viele Benachrichtigungen können dazu führen, dass Benutzer sich von Ihrer App trennen oder sie im schlimmsten Fall ganz löschen.

Halten Sie Ihre Webansichten frustfrei

Webansichten ermöglichen es Entwicklern und Designern, schnell und kostengünstig zu iterieren – und zwischen App-Updates Änderungen vorzunehmen. Wenn sie geschickt eingesetzt werden, können sie Entwicklungszeit sparen und UX vereinfachen, indem sie Benutzer in einer App halten und gleichzeitig eine vorgegebene Seite anzeigen.

Auch Webansichten kommen den Benutzern zugute. Beispielsweise erleichtern sie einer App den Zugriff auf die Hardware eines Geräts, z. B. eine Kamera. Außerdem verwenden viele Apps Webansichten, um Benutzer zu authentifizieren, die sich mit ihrem Passwortmanager anmelden und dann nahtlos zurück zur App umgeleitet werden können.

Benutzer werden jedoch keine Reibungen tolerieren, wenn es um den Kontextwechsel zwischen einer nativen App und Webansichten geht. Zwischen der App und einem Browser hin und her wechseln zu müssen, um eine Aufgabe abzuschließen, ist eine schlechte Benutzererfahrung.

Optimieren Sie Ihre App für schlechte Konnektivität

Jede App, die nicht für die Bewältigung der kritischsten Aufgaben bei schlechter Konnektivität optimiert ist, ist unterdurchschnittlich. Wenn Benutzer beispielsweise Reisepläne buchen oder E-Commerce-Zahlungen tätigen, stellen Sie sicher, dass ihre Aktionen gespeichert und dann ausgeführt werden, sobald die Verbindung wiederhergestellt ist.

Wenn Ihre App jederzeit Konnektivität erfordert, teilen Sie den Benutzern mit, dass sie eine Verbindung benötigen, um fortzufahren, anstatt sie mit einem endlosen Spinner oder, schlimmer noch, nichts zu präsentieren. Benutzer, die befürchten, doppelt belastet zu werden, werden das Vertrauen verlieren und Ihre App schließlich verlassen.

Foto eines Mannes, der mit einer Hand einen U-Bahn-Stab und mit der anderen ein Mobiltelefon hält. Eine der wichtigsten Best Practices für Mobile UX besteht darin, sicherzustellen, dass wichtige Funktionen auch bei geringer oder gar keiner Internetverbindung weiterhin funktionieren.
Der durchschnittliche Amerikaner verbringt 5-6 Stunden am Tag mit seinem Smartphone, daher ist es unvermeidlich, dass er gelegentlich die Verbindung verliert. Stellen Sie sicher, dass sie weiterhin wichtige Funktionen in Ihrer App ausführen können. (Ketut Subiyanto)

Halten Sie Ihre Muster und Komponenten konsistent

Visuelle Konsistenz ist ein Muss, wenn es um digitale Produkte geht. Das Versäumnis, visuelle Richtlinien umzusetzen und aufrechtzuerhalten, vermittelt einen Mangel an Professionalität und kann das Vertrauen der Benutzer untergraben. Der erfahrungsbezogene Zusammenhalt ist ebenso entscheidend. Beispielsweise sollten Komponenten und Muster wie Schaltflächen, Formulare, Menüs und Dashboards nicht nur einheitlich gestaltet sein, sondern sich auch unabhängig vom Seitentyp in Ihrer gesamten App konsistent verhalten.

Als Designer einer mobilen App erstellen Sie mehr als nur eine Sammlung von Ansichten. Sie sind Designer von UI-Systemen. Um Konsistenz zu schaffen, wenn Sie ein neues Projekt starten, experimentieren Sie mit verschiedenen Designsystemen wie den Human Interface Guidelines von Apple und dem Material Design von Google, um festzustellen, welches für die Geräte Ihrer Benutzer am besten geeignet ist.

Reduzieren Sie Rauschen in Ihrer Benutzeroberfläche

Boxig aussehende Benutzeroberflächen sind ein Überbleibsel aus dem Softwaredesign der 90er Jahre. Der Stil sieht nicht nur veraltet aus, sondern weist auch zu viele Linien, Ränder und feste Formen auf, die übermäßiges visuelles Rauschen erzeugen und es den Benutzern erschweren, die Informationen auf dem Bildschirm zu verarbeiten.

Dennoch sind einige unterstützende Strukturen notwendig, um den Benutzern zu helfen, die visuelle Hierarchie der Seite zu verstehen. Auch wenn es keine Zauberformel gibt, sollten Sie sich auf die Seite von weniger irren und unterstützende Strukturen wie Linien, solide Hintergründe und Schlagschatten sparsam verwenden. Bei durchdachter Verwendung kann eine Polsterung eine so klare Unterscheidung wie eine Linie bieten, vorausgesetzt, es gibt genügend Platz innerhalb der Komposition.

Machen Sie Ihre App vollständig barrierefrei

Neumorphismus ist ein Designtrend, bei dem Schnittstellenkomponenten mit subtilen Schatten, Verlaufsüberlagerungen und monochromatischen Farben gerendert werden. Neumorphe Komponenten sollen taktil erscheinen und zur Interaktion einladen, aber ihre Abhängigkeit von monochromatischen Farben und geringem Kontrast kann es schwierig machen, sie klar zu sehen. Neumorphismus ist auch für Benutzer mit Sehbehinderungen weitgehend unzugänglich – was den Trend mit einer wachsenden Nachfrage nach integrativen digitalen Produkten in Konflikt bringt.

Darüber hinaus sind neumorphe Komponenten oft schwer zu codieren, was es schwierig macht, diese Ästhetik mit den visuellen Richtlinien eines Unternehmens zu kombinieren. Wenn Sie sich entscheiden, neumorphe Komponenten zu verwenden, tun Sie dies in Maßen und stellen Sie sicher, dass Ihr Produkt weiterhin den Zugänglichkeitsstandards entspricht.

Zwei Benachrichtigungssymbole. Der bevorzugte zeigt eine weiße Glocke auf blauem Hintergrund. Diejenige, die nicht bevorzugt wird, zeigt einen geringen Farbkontrast zwischen der Glocke und dem Hintergrund.
Die Verwendung von neumorphem Design ist in vielen Zusammenhängen angemessen. Neumorphismus nutzt jedoch auch einen geringen Farbkontrast, was zu Problemen mit der Barrierefreiheit führen kann.

Verpflichten Sie sich zu kontinuierlichem Lernen

Die Einhaltung der Best Practices für das Design mobiler Apps erfordert kontinuierliches Lernen: Lesen von Design-Websites und -Artikeln, Austausch von Tipps und Tricks mit anderen Designern und Bleiben auf dem Laufenden mit neuen Tools und Prozessen. Es bedeutet auch, sich den Herausforderungen zu stellen, die neue Geräte und Plattformen mit sich bringen, und zu erkennen, wann Sie sich auf bequeme Muster und Praktiken verlassen, anstatt das zu entwerfen, was im Moment wirklich das Beste für Benutzer ist.

Anmerkung des Herausgebers: Vielen Dank an Damir Kotoric, Mitglied des Toptal-Netzwerks, für seinen Beitrag zu Designeinblicken zu dieser Geschichte.

Weiterführende Literatur im Toptal Blog:

  • Mobile UX-Designprinzipien
  • Prinzipien der Informationsarchitektur für Mobilgeräte (mit Infografik)
  • Heuristische Prinzipien für mobile Schnittstellen
  • Mobile UX-Designbeschränkungen, Best Practices und Zusammenarbeit mit Entwicklern