👨‍🏫 🛁 🐩 30-Punkte-UX-Checkliste für mobile Apps 😈 👨🏻‍💼 👂🏻

Dieser Artikel erinnert Sie daran, was Sie beim Entwurf Ihrer Anwendung überprüfen müssen, bevor Sie sie an AppStore / GooglePlay senden. Die Liste ist in thematische Blöcke unterteilt:

Einloggen / Registrieren
Erste Erfahrung
Tägliche Interaktionen
Benachrichtigungen
Kontoeinstellungen
Farbband
Suche
AppStore / GooglePlay

Dieser Artikel wurde mit Unterstützung von EDISON Software übersetzt, einem Unternehmen, das Anwendungen und Websites entwickelt und sich auch mit Benutzeroberflächen befasst .

1. Anmelden / Registrieren

1. Bildschirmschoner

Beim Start der Anwendung wird ein Begrüßungsbildschirm angezeigt. Dies ist das erste, was der Benutzer sieht, dies schafft den ersten Eindruck des Produkts, noch vor Arbeitsbeginn.

Logo-Begrüßungsbildschirm von Gleb Kuznetsov

Rider Launch Transition von Uber

Hier sind einige Tipps, wie Sie gute Bildschirmschoner erstellen können .

2. Passwort vergessen

Die durchschnittliche Person ist in 90 Online-Diensten registriert, für die ein Passwort erforderlich ist. Passwörter werden daher oft „vergessen“. Laut Statistik vergessen 21% der Benutzer ihr Passwort für 2 Wochen und 25% vergessen mindestens einmal am Tag ein Passwort. Wenn für Ihre Anwendung ein Kennwort erforderlich ist, kümmern Sie sich um das Kennwortwiederherstellungsformular.

Passwortfluss von Emmanuel Torres vergessen

2. Erste Erfahrung

3. Begrüßungsbildschirm / Anweisung beim ersten Start (Onboarding)

Onboarding ist ein UX-Design-Begriff, der bedeutet, wie man den Benutzer versteht, was mit seiner Anwendung zu tun ist, wie man darin navigiert und wo man klickt. Gutes Onboarding erhöht die Wahrscheinlichkeit, dass „Newcomer“ dauerhaft werden.

Animiertes Onboarding-Erlebnis von Cuberto

Hier finden Sie praktische Tipps für ein gutes Onboarding .

Hier finden Sie kreative Konzepte für das Onboarding .

4. Bildschirm mit Benachrichtigung über erfolgreiche Bestätigung der Daten

Viele mobile Anwendungen fordern eine Bestätigung von Mail / Telefon an. Eine Benachrichtigung über einen erfolgreichen Datenbestätigungsvorgang wird angezeigt, nachdem der Benutzer alle erforderlichen Vorgänge ausgeführt hat.

Bestätigungsbildschirme von Diana Caballero

Für diesen Bildschirm ist Folgendes wichtig:

die Möglichkeit, erneut einen Bestätigungscode zu senden (für Telefone)
Anweisungen zum Auffinden einer Bestätigungsnachricht (Suche nach Titel, Suche in Spam usw.) (für E-Mails)

5. Stubs für "Noch kein Inhalt"

Für Inhalte installieren Benutzer die meisten Anwendungen. Es ist wichtig, über die Stellen nachzudenken, an denen der Benutzer einen Blick werfen konnte und an denen noch kein Inhalt vorhanden ist. Diese unerforschten Orte sollten nicht leer sein.

Fügen Sie ein Tutorial oder Anweisungen ein, was als Nächstes zu tun ist, anstatt eine Lücke zu hinterlassen.

Symplicity Karriere App leeren Zustand

6. Standardbenutzeravatar

Die meisten Benutzer (~ 95% laut Jared M. Spool ) ändern die Standardeinstellungen nicht. Dies bedeutet, dass Benutzer den Avatar haben, den Sie für sie ausgewählt haben.

Netter Standardbenutzer-Avatar in Dropbox

Hier sind einige Ideen, wie Sie einen Standard-Avatar erstellen können .

3. Tägliche Interaktionen

7. Bildschirm für die Auflösungsanforderung

Wenn ein Benutzer eine neue Anwendung öffnet, werden viele Popups als letztes gefragt:

Ermöglichen Sie der App, auf Ihren Standort zuzugreifen.
Ermöglichen Sie der App, auf Ihre Kontakte zuzugreifen.
Ermöglichen Sie der Anwendung den Zugriff auf Ihre Kamera

Solche Anfragen wirken sich negativ auf die Benutzererfahrung aus und führen dazu, dass die Anwendung in einem Ärger gelöscht werden kann. Solche Berechtigungsanfragen wirken sich sehr negativ auf die Benutzererfahrung aus und führen normalerweise zum Abbruch der App. Daher ist es besser, die Erlaubnis zum Zeitpunkt der Benutzerinteraktion einzuholen.

Benachrichtigungserlaubnisdialog von Anton Tkachuk

Hier ausführlicher über die Erlaubnisanfrage .

8. Verschiedene Zustände für interaktive Elemente

Schaltflächen und andere interaktive Elemente haben mehrere Zustände. Es ist sehr wichtig, über die Standardzustände / gedrückt / nicht verfügbar für jedes interaktive Element in Ihrer Anwendung nachzudenken.

Drei Tastenzustände

Material Design Button von Vadim Gromov

Hier finden Sie Tipps zum Entwerfen von Schaltflächen .

9. Symbol gesetzt

Es ist besser, wenn Ihre Symbole den gleichen Stil haben.

Registerkartensymbole in der Twitter-App für iOS

Hier ist eine Checkliste für die Symbole .

10. Fehlermeldungen

Die beste Fehlermeldung ist eine, die überhaupt nicht angezeigt wird. Eine bessere Möglichkeit, Fehler zu vermeiden, besteht darin, den Benutzer im Voraus ordnungsgemäß zu unterweisen. Wenn dennoch ein Fehler aufgetreten ist, lehrt eine kompetente Fehlermeldung den Benutzer nicht nur, wie er ihn in Zukunft verhindern kann, sondern macht dem Benutzer auch klar, dass er behandelt und nicht ignoriert wird.

Fehlerinteraktion von Dwinawan

In den folgenden Fällen müssen Sie über Fehlermeldungen nachdenken:

Keine Internetverbindung. Überlegen Sie, was der Benutzer sehen soll, wenn keine Verbindung besteht.
Der Benutzer hat die Daten falsch eingegeben.
Systemfehler

Hier ist ein Artikel mit Anleitungen zum Erstellen guter Fehlermeldungen .

11. Der Startvorgang

Obwohl die sofortige Reaktion der Anwendung die beste ist, muss Ihre Anwendung in manchen Fällen „tauchen“. Eine schlechte Internetverbindung kann zu einer langsamen Reaktion führen, oder der Vorgang selbst kann lange dauern. In solchen Fällen müssen Sie den Benutzern versichern, dass die Anwendung an ihrer Anforderung arbeitet, um den Stress der Benutzer zu minimieren. Wenn eine Anwendung Benutzer nicht benachrichtigen kann, dass das Ausführen einer Aktion einige Zeit in Anspruch nimmt, denken Benutzer häufig, dass die Anwendung die Anforderung nicht erhalten hat, und versuchen es erneut. Aufgrund des fehlenden Feedbacks kann der Benutzer alle Tasten fest drücken.

Eine animierte Fortschrittsanzeige ist die häufigste Form, um Benutzern den Systemstatus bereitzustellen, wenn etwas passiert oder geladen wird.

Smile Loader für AI-Produktdesign von Gleb Kuznetsov

Hier finden Sie einige Tipps zum Erstellen von Ladeindikatoren .

12. Die Nachricht, dass Sie alles richtig gemacht haben

Erfolgszustände sind Bildschirme, die wir Benutzern zeigen, wenn sie Aufgaben erledigen. Designer sollten die folgenden Arten von Erfolgsbedingungen berücksichtigen:

Erstaunliche Zustände (erster Erfolg). In dem Moment, in dem der Benutzer zum ersten Mal eine wichtige Aufgabe ausführt, haben Sie eine großartige Gelegenheit, eine positive emotionale Verbindung zwischen ihm und Ihrem Produkt herzustellen. Lassen Sie Ihre Benutzer wissen, dass sie erfolgreich sind, erkennen Sie ihren Fortschritt und feiern Sie den Erfolg mit dem Benutzer.
Bestätigungsbildschirm. Ein Bestätigungsbildschirm ist ein erforderlicher Bildschirm für E-Commerce-Anwendungen. In dem Moment, in dem der Benutzer den Kauf abschließt, müssen wir einen Bildschirm anzeigen, der alle erforderlichen Informationen über den Kauf enthält.

Bestätigungsbildschirm in Booking.com

13. Autofill

Designer sollten sich stets bemühen, die Interaktionskosten zu minimieren, indem sie unnötige Aktionen entfernen. Die automatische Vervollständigung vereinfacht die Benutzereingabe, indem die Anzahl der Klicks verringert wird, die der Benutzer ausführen muss, um die Anforderung abzuschließen.

Bild: Louise Chang

14. Brechen Sie den Vorgang ab

Wir alle machen Fehler, aber wenn es um die Interaktion mit dem Benutzer geht, ist es äußerst wichtig, eine Option bereitzustellen, mit der der Benutzer wichtige Daten wiederherstellen kann.

Rückgängig für Element löschen. Bild: Sashoto Seeam

Rückgängig zum Senden von E-Mails. Bild: Tyler Beauchamp

15. Lokalisierung / Internationalisierung

Da viele Entwicklungsteams Pläne für eine globale Reichweite haben, ist es wichtig, Lokalisierung / Internationalisierung zu einem natürlichen Bestandteil des Designprozesses zu machen. Die visuellen Eigenschaften von Elementen (z. B. Größe) und UX-Kopien sollten basierend auf Lokalisierung / Internationalisierung ausgewählt werden.

Upvote-Button in verschiedenen Sprachen. Bild: Chier Hu

16. Hilfe / Anweisungen

Wenn Benutzer ein Problem haben, besteht ihre erste natürliche Reaktion darin, eine Lösung in der Anwendung zu finden. Daher ist es eine gute Idee, einen Link zum Abschnitt Hilfe / häufig gestellte Fragen in der Anwendung bereitzustellen.

Hilfe und Feedback von Alex Muench

17. Zugänglichkeit

Die Barrierefreiheit ermöglicht Menschen mit allen Fähigkeiten, Ihr Produkt wahrzunehmen, zu verstehen und mit ihm zu interagieren. Hier ist eine großartige Zusammenfassung von Lillian Xiao darüber, was Designer über die Verfügbarkeit mobiler Geräte wissen müssen.

Und hier ist eine Liste von Werkzeugen zur Überprüfung des Farbkontrasts .

4. Benachrichtigungen

18. App-Benachrichtigungen / Push-Benachrichtigungen

Wussten Sie, dass miese Benachrichtigungen der Hauptgrund sind, warum Benutzer die Anwendung deinstallieren?

Lästige Benachrichtigungen sind der Grund, warum Benutzer mobile Apps deinstallieren (71% der Befragten sagen).

Sie können dieses UX-Antimuster jedoch in etwas Sinnvolles und Nützliches für Unternehmen und Benutzer verwandeln. Um mit Benachrichtigungen in der App gute Ergebnisse zu erzielen, benötigen Designer eine Veröffentlichungsstrategie, die sich am besten für Mobilgeräte eignet.

In diesem Artikel erfahren Sie, wie Sie gute Benachrichtigungen erstellen .

Und hier sind einige inspirierende Designideen .

19. Benachrichtigungseinstellungen

Es ist immer eine Freude, den Benutzern die Wahlfreiheit zu geben. Im Zusammenhang mit mobilen Benachrichtigungen bedeutet dies, dass Sie auswählen können, welche Benachrichtigungen Sie erhalten möchten.

Stellen Sie Benachrichtigungsoptionen in Slack ein

5. Kontoeinstellungen

20. Werkzeug zum Zuschneiden von Profilfotos

Ermöglichen Sie Benutzern, einen Avatar nicht nur hochzuladen, sondern ihn auch direkt in Ihrer Anwendung an ihre Bedürfnisse anzupassen.

Bearbeiten eines Avatars von Scott Thomas

21. Bildschirme zum Anzeigen / Ändern persönlicher Daten

Ermöglichen Sie Benutzern, ihre persönlichen Daten direkt in der mobilen Anwendung zu bearbeiten. Erstellen Sie Bildschirme, um eine Vorschau der Versand- / Rechnungsinformationen anzuzeigen und diese Informationen einer bearbeitbaren Liste hinzuzufügen.

Privat- und Geschäftsadressen können bearbeitet werden. Wählen Sie eine Lieferadresse von Dhiraj S. Karki

22. Melden Sie sich ab

Wenn für Ihre Anwendung eine Anmeldung erforderlich ist, sollte auch die Möglichkeit bestehen, sich abzumelden.

Melden Sie sich bei Facebook für iOS ab

23. Nutzungsbedingungen

Fügen Sie Ihrer Bewerbung die Nutzungsbedingungen hinzu, um rechtliche Schritte zu vermeiden.

Bild: Cristian Dina / Shutterstock

24. Datenschutzeinstellungen

Lassen Sie Benutzer sehen, welche Daten sie an Sie senden, und lassen Sie sie auswählen.

Bild: Vitaly Friedman

Hier finden Sie Tipps zum Umgang mit Datenschutz in Anwendungen .

25. Senden Sie Feedback

Durch die schnelle Weitergabe von Feedback zu Ihrem Produkt sammeln Sie nicht nur wertvolle Informationen zu Ihrem Produkt von echten Benutzern, sondern lassen sie auch glauben, dass ihre Bewertungen für Sie wertvoll sind.

Mit Skype für iOS können Benutzer "Feedback hinterlassen", "Problem melden" oder "Funktion vorschlagen".

6. Klebeband

26. Scrollen

Mobile Displays sind klein. Um Platz auf dem Bildschirm zu sparen, möchten Designer häufig die angezeigten Informationen optimieren und alles ausblenden, was für den Benutzer nicht von Wert ist. Aus diesem Grund haben viele Kanalbildschirme zwei Status: den Standardstatus (der Bildschirm, den Benutzer sehen, wenn sie in den Kanal eintreten) und den Bildlaufstatus (wenn der Benutzer einen Bildlauf nach oben durchführt, um mehr Inhalt anzuzeigen).

Beachten Sie, dass der Titelbereich beim Scrollen reduziert wird. Craiglist Mobile Animation von Aurélien Salomon

Suchen Sie in der Anwendung

27. Das Standardverhalten

Wang muss entscheiden, wie die Standardsuchreihenfolge aussehen soll. Wenn Sie beispielsweise eine Suchergebnisseite für eine E-Commerce-Anwendung entwerfen, müssen Sie entscheiden, ob die Ausgabe nach der besten Übereinstimmung, dem besten Preis und der besten Lieferzeit sortiert werden soll.

28. Teilen / Lesezeichen

Ermöglichen Sie Benutzern, das, was sie finden, zu teilen und mit einem Lesezeichen zu versehen.

Like, Lesezeichen und Share-Optionen in der App AE von Martin Berbesson

29. Leeres Formular für "Keine Ergebnisse"

Was sehen Benutzer, wenn sie nach etwas suchen, aber keine Suchergebnisse vorliegen? Der Bildschirm „Keine Ergebnisse“ sollte nicht das Ende bedeuten. Teilen Sie dem Benutzer mit, welchen Schritt er als Nächstes ausführen soll.

Mit der Google Flights-App können Nutzer alle Filter löschen, um Flüge zu finden

8. AppStore / GooglePlay

30. Symbol für die Anwendung

Sie müssen ein eingängiges Symbol für Ihre Anwendung entwerfen, das die Essenz Ihres Produkts widerspiegelt und das Interesse potenzieller Benutzer weckt.