Un guide complet sur la conception d'applications mobiles

( Ceci est un article sponsorisé .) Plus que jamais, les gens interagissent avec leur téléphone dans les moments cruciaux. L'utilisateur américain moyen passe 5 heures par jour sur son mobile. La grande majorité de ce temps est consacrée aux applications et aux sites Web.

La différence entre une bonne application et une mauvaise application est généralement la qualité de son expérience utilisateur (UX). Un bon UX est ce qui sépare les applications réussies de celles qui échouent. Aujourd'hui, les mobinautes attendent beaucoup d'une application : temps de chargement rapide, facilité d'utilisation et plaisir lors de l'interaction. Si vous voulez que votre application réussisse, vous devez considérer l'expérience utilisateur non seulement comme un aspect mineur de la conception, mais comme un élément essentiel de la stratégie produit.

Il y a beaucoup de choses à considérer lors de la conception pour mobile. Dans cet article, j'ai résumé de nombreuses recommandations pratiques que vous pouvez appliquer à votre conception.

Minimiser la charge cognitive

La charge cognitive fait ici référence à la quantité de puissance cérébrale nécessaire pour utiliser l'application. Le cerveau humain a une puissance de traitement limitée, et lorsqu'une application fournit trop d'informations à la fois, elle peut submerger l'utilisateur et lui faire abandonner la tâche.

Désencombrement

Réduire l'encombrement est l'une des principales recommandations des «10 choses à faire et à ne pas faire de la conception mobile UX». L'encombrement est l'un des pires ennemis d'un bon design. En encombrant votre interface, vous surchargez les utilisateurs avec trop d'informations : chaque bouton, image et icône ajouté rend l'écran plus compliqué.

L'encombrement est terrible sur le bureau, mais c'est bien pire sur le mobile (simplement parce que nous n'avons pas autant d'espace sur les appareils mobiles que sur les ordinateurs de bureau et les ordinateurs portables). Il est essentiel de se débarrasser de tout ce qui n'est pas absolument nécessaire dans une conception mobile, car la réduction de l'encombrement améliorera la compréhension. La technique du minimalisme fonctionnel peut vous aider à résoudre le problème d'une interface utilisateur encombrée :

• Gardez le contenu au minimum (présentez à l'utilisateur uniquement ce qu'il a besoin de savoir).

• Gardez les éléments d'interface au minimum. Une conception simple gardera l'utilisateur à l'aise avec le produit.

• Utilisez la technique de la divulgation progressive pour montrer plus d'options.

Décharger les tâches

Recherchez dans la conception tout ce qui nécessite un effort de l'utilisateur (il peut s'agir de saisir des données, de prendre une décision, etc.) et recherchez des alternatives. Par exemple, dans certains cas, vous pouvez réutiliser des données saisies précédemment au lieu de demander à l'utilisateur d'en saisir davantage, ou utiliser des informations déjà disponibles pour définir une valeur par défaut intelligente.

Décomposez les tâches en petits morceaux

Si une tâche contient de nombreuses étapes et actions requises du côté de l'utilisateur, il est préférable de diviser ces tâches en plusieurs sous-tâches. Ce principe est extrêmement important dans la conception mobile car vous ne voulez pas créer trop de complexité pour l'utilisateur à la fois. Un bon exemple est un flux de paiement étape par étape dans une application de commerce électronique, où le concepteur décompose une tâche de paiement complexe en petits morceaux, chacun nécessitant une action de l'utilisateur.

La segmentation peut également aider à connecter deux activités différentes (telles que la navigation et l'achat). Lorsqu'un flux est présenté comme un certain nombre d'étapes logiquement connectées les unes aux autres, l'utilisateur peut plus facilement le parcourir.

Utiliser des écrans familiers

Les écrans familiers sont des écrans que les utilisateurs voient dans de nombreuses applications. Des écrans tels que "Gettings started", "What's new" et "Search results" sont devenus des standards de facto pour les applications mobiles. Ils ne nécessitent pas d'explications supplémentaires car les utilisateurs les connaissent déjà. Cela permet aux utilisateurs d'utiliser leur expérience antérieure pour interagir avec l'application, sans courbe d'apprentissage.

Envisagez de lire "Les 11 écrans que vous trouverez dans la plupart des applications mobiles les plus réussies" pour plus d'informations sur les écrans familiers.

Minimiser la saisie de l'utilisateur

Taper sur un petit écran mobile n'est pas l'expérience la plus confortable. En fait, il est souvent source d'erreurs. Et le cas le plus courant de saisie par l'utilisateur consiste à remplir un formulaire. Voici quelques recommandations pratiques pour faciliter ce processus :

• Gardez les formulaires aussi courts que possible en supprimant tous les champs inutiles. L'application ne doit demander que le strict minimum d'informations à l'utilisateur.

• Fournir des masques de saisie. Le masquage de champ est une technique qui aide les utilisateurs à formater le texte saisi. Un masque apparaît une fois qu'un utilisateur se concentre sur un champ, et il formate automatiquement le texte au fur et à mesure que le champ est rempli, aidant les utilisateurs à se concentrer sur les données requises et à remarquer plus facilement les erreurs.

• Utilisez des fonctionnalités intelligentes telles que la saisie semi-automatique. Par exemple, remplir un champ d'adresse est souvent la partie la plus problématique de tout formulaire d'inscription. L'utilisation d'outils tels que Place Autocomplete Address Form (qui utilise à la fois la géolocalisation et le préremplissage d'adresse pour fournir des suggestions précises basées sur l'emplacement exact de l'utilisateur) permet aux utilisateurs de saisir leur adresse avec moins de frappes qu'avec un champ de saisie normal.

• Validez dynamiquement les valeurs des champs. C'est frustrant quand, après avoir soumis des données, vous devez revenir en arrière et corriger des erreurs. Dans la mesure du possible, vérifiez les valeurs des champs immédiatement après leur saisie afin que les utilisateurs puissent les corriger immédiatement.

• Personnalisez le clavier pour le type de requête. Affichez un clavier numérique lorsque vous demandez un numéro de téléphone et incluez le bouton @ lorsque vous demandez une adresse e-mail. Assurez-vous que cette fonctionnalité est implémentée de manière cohérente dans toute l'application, plutôt que pour certains formulaires uniquement.

Anticiper les besoins des utilisateurs

Recherchez de manière proactive les étapes du parcours utilisateur où les utilisateurs pourraient avoir besoin d'aide. Par exemple, la capture d'écran ci-dessous montre une partie où les utilisateurs doivent fournir des informations spécifiques.

Utiliser le poids visuel pour transmettre l'importance

L'élément le plus important à l'écran doit avoir le poids visuel le plus important. Ajouter plus de poids à un élément est possible avec le poids, la taille et la couleur de la police.

Évitez le jargon

Une communication claire doit toujours être une priorité absolue dans toute application mobile. Utilisez ce que vous savez de votre public cible pour déterminer si certains mots ou expressions sont appropriés.

Rendre la conception cohérente

La cohérence est un principe fondamental du design. La cohérence élimine la confusion. Il est essentiel de maintenir une apparence cohérente dans l'ensemble d'une application. En ce qui concerne l'application mobile, la cohérence signifie ce qui suit :

• Cohérence visuelle
  Les polices de caractères, les boutons et les étiquettes doivent être cohérents dans l'application.

• Cohérence fonctionnelle
  Les éléments interactifs doivent fonctionner de la même manière dans toutes les parties de votre application.

• Cohérence externe
  La conception doit être cohérente sur plusieurs produits. De cette façon, l'utilisateur peut appliquer ses connaissances antérieures lors de l'utilisation d'un autre produit.

Voici quelques recommandations pratiques pour rendre un design cohérent :

• Respectez les consignes de la plateforme.
  Chaque système d'exploitation mobile a des directives standard pour la conception de l'interface : les directives d'interface humaine d'Apple et les directives de conception matérielle de Google. Lors de la conception pour des plates-formes natives, suivez les directives de conception du système d'exploitation pour une qualité maximale. La raison pour laquelle il est important de suivre les directives de conception est simple : les utilisateurs se familiarisent avec les modèles d'interaction de chaque système d'exploitation, et tout ce qui contredit les directives créera des frictions.

• N'imitez pas les éléments de l'interface utilisateur d'autres plates-formes.
  Lorsque vous créez votre application pour Android ou iOS, ne transférez pas d'éléments d'interface utilisateur d'autres plates-formes. Les icônes, les éléments fonctionnels (champs de saisie, cases à cocher, commutateurs) et les polices de caractères doivent avoir une sensation native. Utilisez autant que possible des composants natifs, afin que les utilisateurs fassent confiance à votre application.

• Gardez l'application mobile cohérente avec le site Web.
  Ceci est un exemple de cohérence externe. Si vous avez un service Web et une application mobile, assurez-vous que les deux partagent des caractéristiques similaires. Cela permettra aux utilisateurs d'effectuer des transitions fluides entre l'application mobile et le Web mobile. Une incohérence dans la conception (par exemple, un schéma de navigation différent ou un schéma de couleurs différent) peut être source de confusion.

Donnez le contrôle à l'utilisateur

Gardez les éléments interactifs familiers et prévisibles

La prévisibilité est un principe fondamental de la conception UX. Lorsque les choses fonctionnent comme prévu par les utilisateurs, ils ressentent un sentiment de contrôle plus fort. Contrairement au bureau, où les utilisateurs peuvent utiliser des effets de survol pour comprendre si quelque chose est interactif ou non, sur mobile, les utilisateurs peuvent vérifier l'interactivité uniquement en appuyant sur un élément. C'est pourquoi, avec les boutons et autres éléments interactifs, il est essentiel de réfléchir à la manière dont le design communique l'affordance. Comment les utilisateurs perçoivent-ils un élément comme un bouton ? La forme doit suivre la fonction : l'apparence d'un objet indique aux utilisateurs comment l'utiliser. Les éléments visuels qui ressemblent à des boutons mais ne sont pas cliquables confondront facilement les utilisateurs.

Le bouton "Retour" devrait fonctionner correctement

Un bouton "retour" mal créé peut causer beaucoup de problèmes aux utilisateurs. Empêcher les situations où appuyer sur le bouton "retour" dans un processus en plusieurs étapes ramènerait les utilisateurs à l'écran d'accueil.

Une bonne conception permet aux utilisateurs de revenir plus facilement en arrière et d'apporter des corrections. Lorsque les utilisateurs savent qu'ils peuvent revoir les données qu'ils ont fournies ou les options qu'ils ont sélectionnées, cela leur permet de procéder facilement.

Messages d'erreur significatifs

L'erreur est humaine. Des erreurs se produisent lorsque les utilisateurs interagissent avec les applications. Parfois, ils se produisent parce que l'utilisateur fait une erreur. Parfois, ils se produisent parce que l'application échoue. Quelle qu'en soit la cause, ces erreurs et la façon dont elles sont gérées ont un impact énorme sur l'UX. Une mauvaise gestion des erreurs associée à des messages d'erreur inutiles peut frustrer les utilisateurs et pourrait être la raison pour laquelle les utilisateurs abandonnent votre application.

Prenez un écran d'état d'erreur de Spotify comme exemple. Cela n'aide pas les utilisateurs à comprendre le contexte et ne les aide pas à trouver la réponse à la question "Que puis-je faire à ce sujet ?"

Ne présumez pas que les utilisateurs sont suffisamment avertis en technologie pour comprendre les choses. Dites toujours aux gens ce qui ne va pas dans un langage simple. Chaque message d'erreur doit indiquer aux utilisateurs :

• qu'est-ce qui s'est passé et peut-être pourquoi,
• quelle est la prochaine étape que l'utilisateur doit suivre pour corriger l'erreur.

Envisagez de lire "Comment concevoir des états d'erreur pour les applications mobiles" pour plus d'informations sur la gestion des erreurs.

Concevoir une interface accessible

La conception accessible permet aux utilisateurs de toutes capacités d'utiliser les produits avec succès. Réfléchissez à la manière dont les utilisateurs malvoyants, malentendants ou souffrant d'autres handicaps peuvent interagir avec votre application.

Soyez conscient du daltonisme

4,5 % de la population mondiale souffre de daltonisme (soit 1 homme sur 12 et 1 femme sur 200), 4 % souffre de basse vision (1 personne sur 30) et 0,6 % est aveugle (1 personne sur 188). Il est facile d'oublier que nous concevons pour ce groupe d'utilisateurs car la plupart des concepteurs ne rencontrent pas de tels problèmes.

Permettez-moi de vous donner un exemple simple. Les messages de réussite et d'erreur dans les formulaires mobiles sont souvent colorés respectivement en vert et en rouge. Mais le rouge et le vert sont les couleurs les plus affectées par la déficience de la vision des couleurs (ces couleurs peuvent être difficiles à distinguer pour les personnes atteintes de deutéranopie ou de protanopie). Vous avez probablement vu le message d'erreur suivant lors du remplissage d'un formulaire : « Les champs marqués en rouge sont obligatoires » ? Bien que cela puisse sembler peu important, ce message d'erreur combiné au formulaire de l'exemple ci-dessous peut être une expérience extrêmement frustrante pour les personnes ayant une déficience de la vision des couleurs.

Comme l'indiquent les directives du W3C, la couleur ne doit pas être utilisée comme le seul moyen visuel de transmettre une information, d'indiquer une action, de susciter une réponse ou de distinguer un élément visuel. Il est important d'utiliser d'autres signifiants visuels pour s'assurer que les utilisateurs pourront interagir avec une interface.

Rendre les animations facultatives

Les utilisateurs qui souffrent du mal des transports désactivent souvent les effets animés dans les paramètres de leur système d'exploitation. Lorsque l'option de réduction de mouvement est activée dans les préférences d'accessibilité, votre application doit minimiser ou éliminer ses propres animations.

Simplifiez la navigation

Aider les utilisateurs à naviguer devrait être une priorité pour chaque application. Toutes les fonctionnalités intéressantes et le contenu attrayant de votre application n'auront aucune importance si les gens ne peuvent pas les trouver ; De plus, si cela prend trop de temps ou d'efforts pour découvrir comment naviguer dans votre produit, il y a de fortes chances que vous perdiez des utilisateurs. Les utilisateurs doivent pouvoir explorer l'application de manière intuitive et effectuer toutes les tâches principales sans aucune explication.

Utiliser les composants de navigation standard

Il est préférable d'utiliser des modèles de navigation standard, tels que la barre d'onglets (pour iOS) et le tiroir de navigation (pour Android). La majorité des utilisateurs connaissent les deux modèles de navigation et sauront intuitivement comment se déplacer dans votre application.

Pour plus d'informations sur les modèles de navigation, lisez l'article "Modèles de base pour la navigation mobile : avantages et inconvénients".

Prioriser les options de navigation

Priorisez la navigation en fonction de la façon dont les utilisateurs interagissent avec votre application. Attribuez différents niveaux de priorité (élevé, moyen, faible) aux tâches utilisateur courantes. Donnez de l'importance dans l'interface utilisateur aux chemins et aux destinations avec des niveaux de priorité élevés et une utilisation fréquente. Utilisez ces chemins pour définir votre navigation. Organisez votre structure d'informations d'une manière qui nécessite un nombre minimum de tapotements, de balayages et d'écrans.

Ne mélangez pas les modèles de navigation

Lorsque vous choisissez un modèle de navigation principal pour votre application, utilisez-le de manière cohérente. Il ne devrait pas y avoir de situation dans laquelle une partie de votre application a une barre d'onglets, tandis qu'une autre partie a un tiroir latéral.

Rendre la navigation visible

Comme le dit Jakob Nielsen, reconnaître quelque chose est plus facile que de s'en souvenir. Minimisez la charge mémoire de l'utilisateur en rendant les actions et les options visibles. La navigation doit être disponible à tout moment, pas seulement lorsque nous anticipons que l'utilisateur en a besoin.

Communiquer l'emplacement actuel

Ne pas indiquer l'emplacement actuel est un problème très courant de nombreux menus d'applications mobiles. "Où suis-je?" est l'une des questions fondamentales auxquelles les utilisateurs doivent répondre pour naviguer avec succès. Les utilisateurs doivent savoir où ils se trouvent dans votre application à tout moment.

Utiliser l'animation fonctionnelle pour clarifier les transitions de navigation

L'animation est le meilleur outil pour décrire les transitions d'état. Il aide les utilisateurs à comprendre un changement d'état dans la mise en page de la page, ce qui a déclenché le changement et comment initier à nouveau le changement en cas de besoin.

Soyez prudent lorsque vous utilisez des gestes dans l'interface utilisateur

Utiliser des gestes dans le design d'interaction peut être tentant. Mais dans la plupart des cas, il vaut mieux éviter cette tentation. Lorsque les gestes sont utilisés comme option de navigation principale, ils peuvent provoquer une UX terrible. Pourquoi? Parce que les gestes sont des contrôles cachés .

Comme le souligne Thomas Joos dans son article "Au-delà du bouton : Adopter l'interface pilotée par les gestes", le plus gros inconvénient de l'utilisation des gestes dans une interface utilisateur est la courbe d'apprentissage. Chaque fois qu'un contrôle visible est remplacé par un geste, la courbe d'apprentissage de l'application augmente. Cela se produit parce que les gestes ont une possibilité de découverte inférieure - ils sont toujours cachés et les gens doivent être en mesure d'identifier ces options afin de les utiliser. C'est pourquoi il est essentiel de n'utiliser que des gestes largement acceptés (ceux que les utilisateurs attendent dans votre application).

Lorsqu'il s'agit d'utiliser des gestes dans une interface utilisateur, suivez quelques règles simples :

• Utilisez des gestes standards.
  Par "standard", j'entends les gestes les plus naturels pour l'application de votre catégorie. Les gens connaissent les gestes standards, donc aucun effort supplémentaire n'est requis pour les découvrir ou les mémoriser.
• Offrez des gestes en complément, et non en remplacement, des options de navigation visibles.
  Les gestes peuvent fonctionner comme des raccourcis pour la navigation, mais pas comme un remplacement complet des menus visibles. Ainsi, proposez toujours un moyen simple et visible de naviguer, quitte à quelques actions supplémentaires.

Pour plus d'informations sur l'utilisation des gestes dans votre interface utilisateur, pensez à lire "Gestes dans l'application et expérience utilisateur de l'application mobile".

Focus sur la première expérience

La première expérience fait partie intégrante des applications mobiles. Vous n'obtenez qu'un seul coup à la première impression. Et si vous échouez, il y a une énorme probabilité que les utilisateurs ne relancent pas votre application. (Les recherches de Localytics montrent que 24 % des utilisateurs ne reviennent jamais sur une application après la première utilisation.)

Évitez les murs de connexion

Un mur de connexion est une inscription obligatoire avant d'utiliser une application. C'est une source courante de friction pour les utilisateurs et l'une des raisons pour lesquelles les utilisateurs abandonnent les applications. Le nombre d'utilisateurs qui abandonnent le processus d'enregistrement est particulièrement important pour les applications à faible reconnaissance de marque ou celles dont la proposition de valeur n'est pas claire.

En règle générale, ne demandez aux utilisateurs de s'inscrire que si cela est essentiel (par exemple, si les fonctionnalités principales de votre application ne sont disponibles que lorsque les utilisateurs ont terminé l'inscription). Et même dans ce cas, il est préférable de retarder la connexion aussi longtemps que possible - permettez aux utilisateurs de découvrir l'application pendant un petit moment (par exemple, faites une visite guidée), puis rappelez-leur gentiment de s'inscrire. Cela donnera à vos utilisateurs un avant-goût de l'expérience et ils seront plus enclins à s'y engager.

Concevoir une bonne expérience d'intégration

Dans le contexte de l'UX mobile, offrir une excellente expérience d'intégration est la base de la fidélisation des utilisateurs. L'objectif de l'intégration est de montrer la valeur apportée par votre application.

Parmi les nombreuses stratégies d'onboarding, une est particulièrement efficace : l'onboarding contextuel. L'intégration contextuelle signifie que les instructions ne sont fournies que lorsque l'utilisateur en a besoin. Duolingo en est un excellent exemple. Cette application associe une visite interactive à une divulgation progressive pour montrer aux utilisateurs comment l'application fonctionne. Les utilisateurs sont encouragés à se lancer et à faire un test rapide dans la langue de leur choix. Cela rend l'apprentissage amusant et découvrable.

Une autre chose qui peut être très utile lors de l'intégration est un état vide. Un état vide est un écran dont l'état par défaut est vide et oblige les utilisateurs à passer par une ou plusieurs étapes pour le remplir avec des données. En plus d'informer l'utilisateur du contenu à attendre sur la page, un état vide peut également apprendre aux gens comment utiliser une application. Même si le processus d'intégration ne consiste qu'en une seule étape, les conseils rassureront les utilisateurs sur le fait qu'ils font ce qu'il faut.

Envisagez de lire "Le rôle des états vides dans l'intégration des utilisateurs" pour plus d'informations sur l'intégration.

Ne demandez pas d'informations de configuration à l'avance

Une phase de configuration obligatoire crée des frictions et peut conduire à l'abandon de l'application. Lorsque les utilisateurs lancent une application, ils s'attendent à ce qu'elle fonctionne. Ainsi, concevez votre application pour la majorité des utilisateurs et laissez les quelques-uns qui souhaitent une configuration différente ajuster leurs paramètres pour répondre à leurs besoins à tout moment.

Astuce : Essayez de déduire ce dont vous avez besoin du système. Si vous avez besoin d'informations sur l'utilisateur, l'appareil ou l'environnement, interrogez le système chaque fois que possible, au lieu de demander à l'utilisateur.

Évitez de demander des autorisations dès le début

Évitez une situation dans laquelle la première chose qu'un utilisateur voit lors du lancement de l'application est une boîte de dialogue demandant une autorisation. Semblable à un mur de connexion ou à une phase de configuration initiale, la demande d'autorisation au lancement ne doit être effectuée que lorsque cela est nécessaire pour la fonction principale de votre application. Les utilisateurs ne seront pas dérangés par cette demande s'il est évident que votre application dépend de cette autorisation pour fonctionner (par exemple, il est clair pourquoi un éditeur de photos demanderait l'accès aux photos).

Mais pour tous les autres cas, demandez les autorisations en contexte. Les utilisateurs sont plus susceptibles d'accorder une autorisation s'ils le demandent lors d'une tâche pertinente.

Conseils :

• Demandez uniquement ce dont votre application a clairement besoin.
  Ne demandez pas toutes les autorisations possibles. Il serait suspect si une application demande quelque chose dont elle n'a pas de besoin évident. Par exemple, une application de réveil demandant l'autorisation d'accéder à votre liste de contacts serait suspecte.

• Expliquez pourquoi votre application a besoin de ces informations, si ce n'est pas évident.
  Parfois, vous devez fournir plus de contexte pour votre demande. Pour cette raison, vous pouvez concevoir une alerte personnalisée pour demander une autorisation.

Faites en sorte que votre application apparaisse rapide et réactive

Le temps de chargement est extrêmement important pour l'UX. À mesure que la technologie progresse, nous devenons plus impatients et aujourd'hui, 47 % des utilisateurs s'attendent à ce qu'une page se charge en 2 secondes ou moins.

Si une page prend plus de temps à se charger, les visiteurs peuvent devenir frustrés et partir. C'est pourquoi la vitesse doit être une priorité lors de la création d'une application mobile. Mais peu importe la vitesse à laquelle vous créez une application, certaines choses prendront du temps à être traitées. Une réponse lente peut être causée par une mauvaise connexion Internet ou une opération peut prendre beaucoup de temps. Mais même si vous ne pouvez pas raccourcir la file, essayez au moins de rendre l'attente plus agréable.

Concentrez-vous sur le chargement de contenu dans la zone visible de l'écran

Chargez juste assez de contenu pour remplir l'écran lorsqu'une page s'ouvre. Le contenu disponible sur le défilement devrait continuer à se charger en arrière-plan. L'avantage de cette approche est que les utilisateurs seront engagés dans la lecture du contenu initial et, dans certains cas, ne remarqueront même pas que le contenu est toujours en cours de chargement.

Indiquez clairement lorsque le chargement se produit

Un écran vide ou statique que les utilisateurs voient lorsque le contenu est en cours de chargement peut donner l'impression que votre application est gelée, ce qui entraîne de la confusion et de la frustration, et peut amener les gens à quitter votre application. Au minimum, affichez un spinner de chargement qui indique clairement que quelque chose se passe. Pour un temps d'attente plus long (plus de 10 secondes), il est indispensable d'afficher une barre de progression pour que l'utilisateur puisse évaluer le temps d'attente.

Envisagez de lire « Meilleures pratiques pour les indicateurs de progression animés » pour plus d'informations sur le chargement des indicateurs.

Offrez une distraction visuelle

Si une application donne aux utilisateurs quelque chose d'intéressant à regarder en attendant, les utilisateurs accorderont moins d'attention à l'attente elle-même. Ainsi, pour que les gens ne s'ennuient pas en attendant que quelque chose se passe, offrez-leur une distraction. Un fin indicateur d'attente animé peut retenir l'attention des utilisateurs pendant qu'ils attendent.

Astuce : Gardez la longévité à l'esprit. Même une bonne animation peut être ennuyeuse lorsqu'elle est surutilisée. Lors de la conception d'une animation, demandez-vous : "L'animation deviendra-t-elle ennuyeuse à la centième utilisation, ou est-elle universellement claire et discrète ?"

Écrans squelettes

Les écrans squelettes (c'est-à-dire les conteneurs d'informations temporaires) sont essentiellement une version vierge d'une page dans laquelle les informations sont progressivement chargées.

Un écran squelette apparaît au moment où votre application commence à charger des données, donnant aux utilisateurs l'impression que votre application est rapide et réactive. Contrairement à un indicateur de chargement, qui indique simplement que quelque chose se passe, un écran squelette se concentre sur les progrès réels.

Optimiser le contenu pour mobile

Le contenu joue un rôle important dans la conception. Dans la plupart des cas, la principale raison pour laquelle les gens utilisent une application est le contenu qu'elle fournit. Mais il ne suffit pas d'avoir un contenu clair et bien conçu. Le contenu doit être facile à digérer.

Rendre le texte lisible et lisible

Lorsque nous pensons au contenu, dans la plupart des cas, nous entendons la typographie. Comme le dit Oliver Reichenstein dans son essai « Web Design Is 95% Typography » :

"Optimiser la typographie, c'est optimiser la lisibilité, l'accessibilité, l'utilisabilité (!), l'équilibre graphique global."

La clé de la typographie mobile est la lisibilité et la lisibilité. Si les utilisateurs ne peuvent pas lire votre contenu, il ne sert à rien de proposer du contenu en premier lieu.

Tout d'abord, quelques recommandations pratiques sur la lisibilité :

• Taille de police
  Généralement, tout ce qui est inférieur à 16 pixels (ou 11 points) est difficile à lire sur n'importe quel écran.

• Famille de polices
  La plupart des utilisateurs préfèrent une police claire et facile à lire. Une valeur sûre est la police de caractères par défaut du système (Apple iOS utilise la police San Francisco ; Google Android utilise Roboto).

• Contraste
  Le texte de couleur claire (comme le gris clair) peut sembler attrayant sur le plan esthétique, mais les utilisateurs auront du mal à le lire, en particulier sur un fond clair. Assurez-vous qu'il y a beaucoup de contraste entre la police et l'arrière-plan pour une meilleure lisibilité. Les directives d'accessibilité au contenu Web du WC3 fournissent des recommandations de rapport de contraste pour les images et le texte.

Et maintenant, quelques recommandations pour la lisibilité :

• Évitez toutes les majuscules.
  Le texte entièrement en majuscules, c'est-à-dire le texte avec toutes les lettres en majuscules, convient aux contextes qui n'impliquent pas une lecture attentive (tels que les acronymes et les logos), mais évitez-le lorsque votre message nécessite une lecture intensive.

• Limitez la longueur des lignes de texte.
  Une bonne règle de base consiste à utiliser 30 à 40 caractères par ligne pour mobile.

• Ne serrez pas les lignes.
  L'ajout d'espace entre le texte aide l'utilisateur à lire et donne l'impression qu'il n'y a pas autant d'informations à assimiler.

Des images de qualité HD et le bon rapport hauteur/largeur

La montée en puissance des appareils dotés d'écrans haute résolution met la barre haute en matière de qualité des images. Les images ne doivent pas apparaître pixélisées sur les écrans HD.

Les images doivent toujours apparaître dans le bon rapport d'aspect, afin qu'elles ne paraissent pas déformées. Les images qui sont étirées trop larges ou trop longues juste pour tenir dans un espace auront l'air peu attrayantes et déplacées.

Le dernier défi auquel de nombreux concepteurs mobiles sont confrontés est l'optimisation de l'UX pour l'iPhone X. La conception pour l'iPhone X nécessite une taille de plan de travail différente de celle de tout autre iPhone (vous aurez besoin d'images de résolution 375 x 812 points à 3x).

Envisagez de lire "Concevoir des applications pour iPhone X : ce que chaque concepteur UX doit savoir sur le dernier appareil d'Apple" pour plus d'informations sur la conception pour l'iPhone X.

Le contenu vidéo est optimisé pour le mode portrait

La vidéo devient rapidement une méthode standard de consommation de contenu pour de nombreux utilisateurs. Selon YouTube, la consommation de vidéo mobile augmente de 100 % chaque année. D'ici 2020, plus de 75 % du trafic mondial de données mobiles sera constitué de contenu vidéo. Cela signifie qu'il est essentiel d'optimiser le contenu vidéo pour le mode portrait.

Selon ScientiaMobile, 94 % des utilisateurs utilisent leur appareil mobile en mode portrait. Si votre application fournit du contenu vidéo, il doit être optimisé pour permettre aux utilisateurs de le regarder en mode portrait.

Conception pour le toucher

La conception pour le tactile a pour objectif de réduire le nombre de saisies incorrectes et de rendre l'interaction avec une application plus confortable.

Design For Fingers, Not Cursors

When you're designing actionable elements in a mobile interface, it's vital to make targets big enough so that they're easy for users to tap. Mistaken taps often happen due to small touch controls.

When designing a touch target, you can rely on the MIT Touch Lab's study (PDF) to choose a proper size for interactive elements. This study found that the average size of finger pads are between 10 and 14 mm and fingertips are 8 to 10 mm, making 10 by 10 mm a good minimum touch target size.

Not only is the size of the target important, but it's also essential to have the right amount of space between targets. If multiple touch targets are near each other (for example, “Agree” and “Disagree” buttons), ensure that there is good amount of space between them.

Consider Thumb Zone

Designing for thumbs isn't only about making targets big enough, but also about considering the way we hold our devices. A lot of users hold their phone with one hand. Only a part of the screen would be a genuinely effortless territory for their thumbs. This territory is called the natural thumb zone. Other zones require finger stretching or even changing the grip to reach them. Below, you can see what the safe zone looks like on a modern mobile device.

The bigger the display, the more of the screen is less easily accessible.

Consider all zones when designing for mobile:

• The green zone is the best place for navigation options or frequent interactive actions (such as call-to-action buttons).

• The red zone is the best place for potential danger options (such as “Delete” or “Erase”). Users are less likely to trigger this option accidentally.

Feedback on Interaction

In the physical world, objects respond to our interaction. People expect a similar level of responsiveness from digital UI controls. You'll need to provide instant feedback on every user interaction. If your app doesn't provide feedback, the user will wonder if it has frozen or if they missed the target. The feedback could be visual (highlighting a tapped button) or tactile (a device vibration on input).

Humanize The Digital Experience

UX isn't only about usability; it's mostly about feelings. And when we think about what makes us feel great, we often think about well-crafted design.

Personalized Experience

Personalization is one of the most critical aspects of mobile apps today. It's an opportunity to connect with users and provide the information they need in a way that feels genuine.

There are countless ways to improve the mobile UX by incorporating personalization. It's possible to offer personalized content depending on the user's location, their past searches and their past purchases. For example, if your users prefer to purchase particular groups of products each month, an app might track that and offer them special deals on those types of products.

Starbucks' mobile app is an excellent example that follows this approach. The app uses information provided by users (for example, the type of coffee they usually order) to craft special offers.

Delightful Animation

Unlike functional animation, which is used to improve the clarity of a user interface, delightful animation is used to make an interface feel human. This type of animation makes it clear that the people who crafted the app care about their users.

Optimiser les notifications push

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

N'envoyez pas de notifications push simplement parce que vous le pouvez. Chaque notification doit être précieuse et opportune.

Poussez la valeur

Lorsqu'un utilisateur commence à utiliser votre application, cela ne le dérange pas de recevoir des notifications, tant que la valeur qu'il obtient est suffisamment supérieure à l'interruption. Près de 50 % des utilisateurs sont reconnaissants pour les notifications qui les intéressent. Personnaliser le contenu pour inspirer et ravir est essentiel. Netflix est un excellent exemple d'entreprise qui « pousse la valeur ». Il utilise soigneusement les données de visualisation pour présenter des recommandations qui se sentent sur mesure.

Évitez d'envoyer de nombreuses notifications en peu de temps

Un trop grand nombre de notifications envoyées dans un court laps de temps peut conduire à la situation connue sous le nom de notification excessive - où un utilisateur ne peut pas traiter les informations et les ignore simplement. Limitez le nombre total de notifications en combinant différents messages.

Chronométrez vos notifications

Non seulement ce que vous dites est important, mais aussi quand vous le dites. N'envoyez pas de notifications push à des heures bizarres (comme au milieu de la nuit). Le meilleur moment pour les notifications push correspond aux heures de pointe d'utilisation du mobile : de 18h00 à 22h00.

Envisagez d'autres canaux pour transmettre votre message

Les notifications push ne sont pas le seul moyen de transmettre un message. Utilisez les e-mails, les notifications intégrées à l'application et la messagerie du fil d'actualités pour informer les utilisateurs des événements importants, en fonction du niveau d'urgence et du type de contenu que vous souhaitez partager.

Optimiser pour les mobiles

Conception pour l'interruption

Nous vivons dans un monde d'interruption. Quelque chose essaie constamment de nous distraire et de diriger notre attention ailleurs. Sans oublier que de nombreuses sessions mobiles se produisent lorsque les utilisateurs sont en déplacement. Par exemple, les utilisateurs peuvent utiliser votre application en attendant le train. Ces séances peuvent être interrompues à tout moment. Les utilisateurs peuvent être facilement frustrés lorsqu'une application oublie leur progression actuelle dès qu'ils la ferment.

Lorsqu'une interruption se produit, votre application doit enregistrer l'état actuel (contexte) et permettre aux utilisateurs de continuer là où ils se sont arrêtés. Cela permettra aux utilisateurs de se réengager plus facilement avec l'application lorsqu'ils y reviendront après l'interruption.

Profitez des capacités de l'appareil

Les appareils mobiles disposent de nombreux capteurs (caméra, géolocalisation, accéléromètre) qui peuvent être utilisés pour améliorer l'UX. Voici quelques fonctionnalités que vous pouvez utiliser pour ce faire :

• Appareil photo
  Il est possible de simplifier les opérations de saisie de données en utilisant une caméra. Par exemple, vous pouvez utiliser l'appareil photo numérique pour lire automatiquement les numéros de carte de crédit.

• Détection de l'emplacement
  Les applications peuvent utiliser les données de localisation d'un appareil pour fournir un contenu pertinent pour l'emplacement de l'utilisateur ou pour simplifier certaines opérations. Par exemple, si vous concevez une application pour la livraison de nourriture, au lieu de demander à l'utilisateur de fournir une adresse de livraison, vous pouvez détecter automatiquement son emplacement actuel et demander à l'utilisateur de confirmer qu'il souhaite recevoir une livraison à cet emplacement. .

• Authentification biométrique
  Il est possible de minimiser le nombre d'étapes nécessaires pour se connecter à une application en utilisant des fonctionnalités telles que la connexion tactile par empreinte digitale ou l'identification faciale.

Astuce : Vous pouvez trouver des recommandations pratiques sur la façon d'utiliser le Face ID d'Apple dans notre article "Designing Apps for iPhone X: What Every UX Designer Needs to Know About Apple's Latest Device".

Efforcez-vous de créer une expérience multicanal

Ne considérez pas votre application mobile comme une expérience isolée. Lorsqu'il s'agit de créer un parcours utilisateur, l'objectif ultime est de créer une expérience transparente, sur tous les appareils. Les utilisateurs doivent pouvoir passer à un autre support et continuer le voyage.

Selon Appticles, 37 % des utilisateurs effectuent des recherches sur mobile, mais passent au bureau pour effectuer un achat. Ainsi, si vous concevez une application de commerce électronique, les utilisateurs mobiles devraient pouvoir passer à leur ordinateur de bureau ou portable pour continuer le voyage. La synchronisation de la progression des utilisateurs sur tous les appareils est une priorité essentielle pour créer une expérience transparente. Cela donne aux utilisateurs l'impression que leur flux de travail n'est pas interrompu.

Adapter la conception mobile aux marchés émergents

Selon Google, un milliard de nouveaux utilisateurs devraient se connecter au cours des deux prochaines années. Et la grande majorité d'entre eux proviendront des marchés émergents (ou des pays dits axés sur le mobile, comme l'Inde, l'Indonésie, le Brésil et le Nigeria). Ils y auront accès via un téléphone mobile. Ces utilisateurs auront des expériences et des attentes très différentes de ceux qui se trouvent aux États-Unis et en Europe.

Si vous souhaitez devenir mondial, il est important de tenir compte de leurs expériences.

Mauvaise connectivité Internet

Aux États-Unis et en Europe, les utilisateurs sont habitués à une connectivité omniprésente. Mais ce n'est certainement pas vrai dans le monde entier. Les produits des marchés émergents doivent pouvoir fonctionner sur une connectivité lente ou intermittente. Selon l'emplacement d'une personne, le réseau peut passer du Wi-Fi à la 3G puis à la 2G, voire aucune connectivité, et votre produit doit s'adapter à cela.

Si vous envisagez de concevoir pour un tel marché, considérez ce qui suit :

• Assurez-vous que votre produit fonctionne lorsqu'il n'est pas du tout connecté à Internet. Autoriser la mise en cache des données.

• Optimisez votre produit pour un chargement rapide. Minimisez la taille de la page en limitant au minimum les images et autres contenus volumineux ; et réduire la taille de ce contenu.

YouTube Go est un excellent exemple d'application mobile conçue autour des contraintes de connectivité. L'application a été conçue pour être d'abord hors ligne (ce qui signifie qu'elle est utilisable même lorsqu'elle n'est pas connectée à Internet). L'application permet aux utilisateurs de prévisualiser les vidéos en premier et leur permet de sélectionner la taille de fichier d'une vidéo avant de l'enregistrer hors ligne pour la regarder plus tard. Il dispose également d'une fonctionnalité intéressante qui permet aux utilisateurs de partager facilement des vidéos avec leurs amis et leur famille à proximité, sans utiliser de données.

Google News & Weather est un autre excellent exemple d'application conçue autour de mauvaises connexions. L'application dispose d'une fonctionnalité appelée "mode Lite" pour les personnes utilisant des connexions à faible bande passante. Lorsque ce mode est activé, il réduit le contenu à l'essentiel, de sorte que l'application se charge plus rapidement. Selon Google, ce mode utilise moins d'un tiers des données normales et s'active automatiquement lorsque l'application détecte un réseau lent.

Données limitées

Dans environ 95 % des marchés émergents, les gens dépendent presque entièrement des données mobiles prépayées coûteuses. Les gens achètent une quantité fixe de données, et beaucoup ne peuvent se permettre que quelque chose comme 250 Mo de données par mois.

Ces utilisateurs apprécient la transparence lorsqu'il s'agit de comprendre leur consommation de données. Ils apprécient également la possibilité de contrôler si un produit se télécharge via Wi-Fi ou utilise des données.

Ci-dessous, vous pouvez voir un autre exemple de YouTube Go. Après avoir sélectionné une vidéo, les utilisateurs peuvent choisir la qualité de la vidéo. L'application leur permet de savoir à l'avance combien de données ils dépenseront avant de s'engager dans une action.

Capacités limitées de l'appareil

Les smartphones dans les pays où le mobile est prioritaire ont des capacités radicalement différentes des Pixels et des iPhones populaires aux États-Unis. La plupart des appareils des marchés émergents coûtent moins de 100 $ et peuvent avoir une capacité de stockage et de traitement limitée. Assurez-vous que le produit que vous concevez fonctionne avec des appareils et des logiciels plus anciens et bas de gamme.

Esthétique locale

Le design minimaliste, qui est populaire dans le monde occidental aujourd'hui, pourrait être considéré comme trop dépouillé pour d'autres cultures. Si vous voulez que votre produit réussisse sur les marchés émergents, faites attention à l'esthétique culturelle. Vous pouvez vous inspirer des produits régionaux populaires ou embaucher des designers locaux qui connaissent les préférences des utilisateurs. Concevoir selon l'esthétique locale rendra votre produit plus pertinent.

Spécificités de la région

Lorsque Google a adapté Google Maps pour l'Inde, il a considéré que l'Inde était le plus grand marché de deux-roues au monde et que les millions de motocyclistes et de scooters avaient des besoins différents de ceux des conducteurs d'automobiles. Il a publié le mode deux-roues dans Maps. Ce mode affiche les itinéraires de voyage qui utilisent des raccourcis, non accessibles aux voitures et aux camions.

Tests et commentaires

Tous les principes que vous venez de lire peuvent vous aider à concevoir une meilleure expérience pour mobile, mais ils ne remplaceront pas la nécessité de rechercher et de tester les utilisateurs. Vous devrez toujours tester votre solution avec de vrais utilisateurs pour comprendre quelles parties de l'interface utilisateur doivent être améliorées.

Boucle de rétroaction

Encouragez les commentaires des utilisateurs à chaque occasion. Afin de recueillir des commentaires précieux, vous devez faciliter la tâche des utilisateurs. Ainsi, intégrez un mécanisme de rétroaction directement dans votre produit. Cela pourrait être aussi simple qu'un formulaire marqué "Laisser un commentaire". Assurez-vous simplement que cela fonctionne de manière transparente pour vos utilisateurs.

La conception est un processus sans fin

Il est juste de dire que le design est un processus d'amélioration continue. En tant que concepteurs de produits, nous utilisons les analyses et les commentaires des utilisateurs pour améliorer continuellement l'expérience.

Outils et ressources utiles pour les concepteurs

Vérificateur de contraste de couleur

Il est surprenant de voir combien d'applications mobiles ne réussissent pas le test AA. Ne soyez pas l'un d'entre eux ! Il est essentiel de vérifier l'accessibilité de votre contraste de couleur. Utilisez le vérificateur de contraste des couleurs de WebAIM pour tester les combinaisons de couleurs.

Kits d'interface utilisateur pour Adobe XD

Une interface utilisateur bien conçue fera briller votre application. C'est formidable lorsque vous pouvez concevoir votre interface utilisateur non pas à partir de zéro, mais en utilisant une base solide telle qu'un kit d'interface utilisateur. Adobe XD propose cinq kits d'interface utilisateur que vous pouvez télécharger gratuitement. Ces kits stimuleront votre créativité et vous aideront à créer des conceptions d'interface utilisateur visuellement intéressantes.

Conclusion

Un bon design est la combinaison parfaite de beauté et de fonctionnalité, et c'est exactement ce que vous devriez viser lors de la création d'une application. Mais n'essayez pas de créer une application parfaite du premier coup. C'est presque impossible. Au lieu de cela, traitez votre application comme un projet en constante évolution et utilisez les données des sessions de test et les commentaires des utilisateurs pour améliorer constamment l'expérience.

Cet article fait partie de la série de conception UX sponsorisée par Adobe. Adobe XD est conçu pour un processus de conception UX rapide et fluide, car il vous permet de passer plus rapidement de l'idée au prototype. Concevez, prototypez et partagez, le tout dans une seule application. Vous pouvez découvrir d'autres projets inspirants créés avec Adobe XD sur Behance, et également vous inscrire à la newsletter de conception d'expérience Adobe pour rester à jour et informé des dernières tendances et informations sur la conception UX/UI.