👌 🥧 🎸 Liste de contrôle UX en 30 points pour les applications mobiles 🧗 👨‍👨‍👦 🧔🏻

Cet article vous rappelle ce dont vous avez besoin pour revérifier la conception de votre application avant de l'envoyer à AppStore / GooglePlay. La liste est divisée en blocs thématiques:

Se connecter / s'inscrire
Première expérience
Interactions quotidiennes
Notifications
Paramètres du compte
Ruban
Chercher
AppStore / GooglePlay

Cet article a été traduit avec le soutien d'EDISON Software, une société qui développe des applications et des sites , et traite également des interfaces utilisateur .

1. Connexion / inscription

1. Économiseur d'écran

Un écran de démarrage s'affiche au démarrage de l'application. C'est la première chose que voit l'utilisateur, cela crée la première impression du produit, même avant le début du travail.

Écran de démarrage avec logo par Gleb Kuznetsov

Rider Launch Transition par Uber

Voici quelques conseils pour créer de bons économiseurs d'écran .

2. Mot de passe oublié

La personne moyenne est inscrite à 90 services en ligne qui nécessitent un mot de passe. Par conséquent, les mots de passe sont souvent «oubliés». Selon les statistiques, 21% des utilisateurs oublient leur mot de passe pendant 2 semaines et 25% oublient un mot de passe au moins une fois par jour. Si votre application nécessite un mot de passe, prenez soin du formulaire de récupération de mot de passe.

Flux de mots de passe oubliés par Emmanuel Torres

2. Première expérience

3. Écran de bienvenue / instruction lors de la première exécution (intégration)

L'intégration est un terme de conception UX qui signifie comment comprendre à l'utilisateur ce qu'il faut faire avec votre application, comment y naviguer, où cliquer. Une bonne intégration augmente la probabilité que les «nouveaux arrivants» deviennent «permanents».

Expérience d'intégration animée par Cuberto

Voici des conseils pratiques pour une bonne intégration .

Voici des concepts créatifs pour l'intégration .

4. Écran avec notification de confirmation réussie des données

De nombreuses applications mobiles demandent une confirmation du courrier / téléphone. Une notification concernant une opération de confirmation de données réussie apparaît une fois que l'utilisateur a terminé tout ce qui est nécessaire.

Écrans de confirmation par Diana Caballero

Pour cet écran, il est primordial de s'assurer:

la possibilité d'envoyer à nouveau un code de confirmation (pour les téléphones)
des instructions sur la façon de trouver un message de confirmation (recherche par titre, recherche dans le spam, etc.) (pour le courrier)

5. Bouts pour "Pas de contenu pour le moment"

Le contenu est ce pour quoi les utilisateurs installent la plupart des applications. Il est important de penser aux endroits où l'utilisateur a réussi à regarder, où il n'y a pas encore de contenu. Ces lieux inexplorés ne doivent pas être vides.

Au lieu de laisser un vide, insérez un tutoriel ou des instructions sur la marche à suivre.

État vide de l'application Symplicity Careers

6. Avatar d'utilisateur par défaut

La plupart des utilisateurs (~ 95% selon Jared M. Spool ) ne modifient pas les paramètres par défaut. Cela signifie que les utilisateurs auront l'avatar que vous avez choisi pour eux.

Avatar d'utilisateur par défaut mignon dans Dropbox

Voici quelques idées sur la façon de créer un avatar par défaut .

3. Interactions quotidiennes

7. Écran de demande de résolution

Lorsqu'un utilisateur ouvre une nouvelle application, la dernière chose qu'il souhaite voir, c'est de nombreuses fenêtres contextuelles demandant:

Autorisez l'application à accéder à votre position.
Autorisez l'application à accéder à vos contacts.
autoriser l'accès de l'application à votre caméra

De telles demandes affectent négativement l'expérience utilisateur et conduisent au fait que l'application peut être supprimée en colère. Ces demandes d'autorisation ont un impact très négatif sur l'expérience utilisateur et entraînent généralement l'abandon de l'application. Par conséquent, il est préférable de demander la permission au moment de l'interaction avec l'utilisateur.

Boîte de dialogue d'autorisation de notification par Anton Tkachuk

Voici plus en détail la demande d'autorisation .

8. Différents états pour les éléments interactifs

Les boutons et autres éléments interactifs ont plusieurs états. Il est très important de réfléchir aux états par défaut / enfoncé / non disponible pour chaque élément interactif de votre application.

Trois états de bouton

Bouton de conception de matériaux par Vadim Gromov

Voici des conseils sur la conception des boutons .

9. Jeu d'icônes

Ce sera mieux si vos icônes sont du même style.

Icônes de la barre d'onglets dans l'application Twitter pour iOS

Voici une liste de contrôle pour les icônes .

10. Messages d'erreur

Le meilleur message d'erreur est celui qui n'apparaît pas du tout. Une meilleure façon d'éviter de commettre une erreur consiste à informer correctement l'utilisateur à l'avance. Mais si, néanmoins, une erreur s'est produite, un message d'erreur compétent enseigne non seulement à l'utilisateur comment l'empêcher à l'avenir, mais indique également clairement à l'utilisateur qu'il est pris en charge et non ignoré.

Interaction d'erreur par Dwinawan

Voici quelques cas pour lesquels vous devez penser aux messages d'erreur:

Pas de connexion internet. Pensez à ce que l'utilisateur devrait voir lorsqu'il n'y a pas de connexion.
L'utilisateur n'a pas saisi les données correctement.
Erreur système

Voici un article expliquant comment créer de bons messages d'erreur .

11. Le processus de démarrage

Bien que la réponse instantanée de l'application soit la meilleure, votre application devra parfois «plonger». Une mauvaise connexion Internet peut provoquer une réponse lente ou l'opération elle-même peut prendre un certain temps. Dans de tels cas, afin de minimiser le stress des utilisateurs, vous devez garantir aux utilisateurs que l'application travaille sur leur demande. Lorsqu'une application ne peut pas informer les utilisateurs qu'il faut du temps pour terminer une action, les utilisateurs pensent souvent que l'application n'a pas reçu la demande et ils réessayent. En raison du manque de rétroaction, l'utilisateur peut appuyer fortement sur tous les boutons.

Un indicateur de progression animé est la forme la plus courante de fourniture de l'état du système aux utilisateurs en cas de problème ou de chargement.

Chargeur de sourire pour la conception de produits AI par Gleb Kuznetsov

Voici quelques conseils pour créer des indicateurs de chargement .

12. Le message que vous avez tout fait correctement

Les états de réussite sont des écrans que nous montrons aux utilisateurs lorsqu'ils exécutent des tâches. Les concepteurs doivent considérer les types de conditions de réussite suivants:

États étonnants (premier succès). Au moment où l'utilisateur effectue une tâche importante pour la première fois, vous avez une excellente occasion de créer une connexion émotionnelle positive entre lui et votre produit. Faites savoir à vos utilisateurs qu'ils réussissent, en reconnaissant leurs progrès et en célébrant le succès avec l'utilisateur.
Écran de confirmation. Un écran de confirmation est un écran requis pour les applications de commerce électronique. Au moment où l'utilisateur termine l'achat, nous devons afficher un écran qui fournira toutes les informations nécessaires sur l'achat.

Écran de confirmation sur Booking.com

13. Remplissage automatique

Les concepteurs doivent toujours s'efforcer de minimiser le coût de l'interaction en supprimant les actions inutiles. La saisie semi-automatique simplifie la saisie de l'utilisateur en réduisant le nombre de clics que l'utilisateur doit effectuer pour terminer la demande.

Image: Louise Chang

14. Annuler l'opération

Nous faisons tous des erreurs, mais lorsqu'il s'agit d'interagir avec l'utilisateur, il est extrêmement important de fournir une option qui aide l'utilisateur à récupérer des données importantes.

Annuler pour supprimer l'élément. Image: Sashoto Seeam

Annuler pour l'envoi d'un e-mail. Image: Tyler Beauchamp

15. Localisation / Internationalisation

Étant donné que de nombreuses équipes de développement ont des plans pour une portée mondiale, il est important de faire de la localisation / internationalisation une partie naturelle du processus de conception. Les propriétés visuelles des éléments (par exemple la taille) et des copies UX doivent être sélectionnées en fonction de la localisation / internationalisation.

Bouton Upvote dans différentes langues. Image: Chier Hu

16. Aide / Instructions

Lorsque les utilisateurs ont un problème, leur première réaction naturelle sera de trouver une solution dans l'application. Par conséquent, il est judicieux de fournir un lien vers la section d'aide / foire aux questions de l'application.

Aide et commentaires d' Alex Muench

17. Accessibilité

L'accessibilité permet aux personnes ayant toutes les capacités de percevoir, de comprendre et d'interagir avec votre produit. Voici un excellent résumé de Lillian Xiao sur ce que les concepteurs doivent savoir sur la disponibilité des appareils mobiles.

Et voici une liste d'outils pour vérifier le contraste des couleurs .

4. Notifications

18. Notifications d'application / notifications push

Saviez-vous que les notifications pourries sont la principale raison pour laquelle les utilisateurs désinstallent l'application?

Les notifications ennuyeuses sont la raison pour laquelle les gens désinstallent les applications mobiles (71% des répondants disent).

Cependant, vous pouvez transformer cet anti-modèle UX en quelque chose de significatif et utile pour l'entreprise et l'utilisateur. Pour obtenir de bons résultats avec les notifications dans l'application, les concepteurs ont besoin d'une stratégie de publication qui convient le mieux aux appareils mobiles.

Voici un article qui fournit des informations sur la façon de créer de bonnes notifications .

Et voici quelques idées de design inspirantes .

19. Paramètres de notification

C'est toujours un plaisir de donner aux utilisateurs la liberté de choix. Dans le contexte des notifications mobiles, cela signifie pouvoir choisir quelles notifications ils souhaitent recevoir.

Définir les options de notification dans Slack

5. Paramètres du compte

20. Outil pour recadrer la photo de profil

Permettez aux utilisateurs non seulement de télécharger un avatar, mais aussi de le modifier en fonction de leurs besoins directement dans votre application.

Modification d'un avatar par Scott Thomas

21. Écrans de visualisation / modification des données personnelles

Autorisez les utilisateurs à modifier leurs données personnelles directement dans l'application mobile. Créez des écrans pour prévisualiser les informations de livraison / facturation et pour ajouter ces informations à une liste modifiable.

Les adresses personnelles et professionnelles sont modifiables. Sélectionnez une adresse de livraison de Dhiraj S. Karki

22. Déconnectez-vous

Si votre application nécessite une connexion, vous devez également pouvoir vous déconnecter.

Déconnectez-vous sur Facebook pour iOS

23. Conditions d'utilisation

Ajoutez les conditions d'utilisation à votre demande pour éviter toute action en justice.

Image: Cristian Dina / Shutterstock

24. Paramètres de confidentialité

Laissez les utilisateurs voir quelles données ils vous envoient et laissez-les choisir.

Image: Vitaly Friedman

Voici des conseils sur la façon de gérer la confidentialité dans les applications .

25. Envoyer des commentaires

En fournissant un moyen rapide de partager des commentaires sur votre produit, vous collectez non seulement des informations précieuses sur votre produit auprès de vrais utilisateurs, mais vous leur faites également croire que leurs avis sont précieux pour vous.

Skype pour iOS donne aux utilisateurs la possibilité de «Laisser des commentaires», «Signaler un problème» ou «Suggérer une fonctionnalité».

6. Bande

26. Défilement

Les écrans mobiles sont petits. Pour économiser de l'espace sur l'écran, les concepteurs souhaitent souvent optimiser les informations affichées et masquer tout ce qui n'a pas de valeur pour l'utilisateur. C'est pourquoi de nombreux écrans de canaux ont deux états: l'état par défaut (l'écran que les utilisateurs voient lorsqu'ils entrent dans le canal) et l'état de défilement (lorsque l'utilisateur fait défiler vers le haut pour voir plus de contenu).

Notez que la zone de titre s'effondre lors du défilement. Craiglist Animation mobile par Aurélien Salomon

Rechercher dans l'application

27. Le comportement par défaut

Wang doit décider quel sera l'ordre de recherche par défaut. Par exemple, si vous concevez une page de résultats de recherche pour une application de commerce électronique, vous devez décider de trier la sortie en fonction de la meilleure correspondance / prix / délai de livraison.

28. Partager / marquer

Permettez aux utilisateurs de partager et de mettre en signet ce qu'ils trouvent.

Options J'aime, Signet et Partager dans l'App AE de Martin Berbesson

29. Formulaire vide pour «Aucun résultat»

Que verront les utilisateurs s'ils recherchent quelque chose, mais il n'y a pas de résultats de recherche? L'écran «Aucun résultat» ne doit pas signifier la fin. Dites à l'utilisateur quelle étape prendre ensuite.

L'application Google Flights propose aux utilisateurs d'effacer tous les filtres pour trouver des vols

8. AppStore / GooglePlay

30. Icône pour l'application

Vous devez concevoir une icône accrocheuse pour votre application, quelque chose qui reflète l'essence de votre produit et suscite l'intérêt des utilisateurs potentiels.