Comment améliorer l’expérience utilisateur et l’interface utilisateur de votre appli

1 Présentation

Le défi

Selon un rapport de comScore sur les applis mobiles aux États-Unis (13 septembre 2016), les utilisateurs d’appareils mobiles consacrent neuf minutes sur dix à leurs cinq applis préférées1. Pour les entreprises qui cherchent à se tailler une place dans ce palmarès, il est important de savoir que, de nos jours, offrir une appli attrayante n’est plus une question de séduction, mais de nécessité.

Un tel climat concurrentiel vous oblige, en tant qu’entreprise en croissance, à ne pas seulement créer des applis très performantes, mais aussi à itérer et à améliorer l’expérience mobile de vos utilisateurs et à favoriser leur engagement et leur fidélité.

Votre objectif

Apprendre comment améliorer l’expérience utilisateur et l’interface utilisateur (IU) de votre appli pour favoriser l’engagement sur votre nouveau marché.

Marche à suivre

Les utilisateurs d’appareils mobiles ont beaucoup d’attentes envers leurs applis. Vous devez notamment penser au temps de chargement, à la facilité d’utilisation et à la satisfaction pendant l’interaction. S’adapter au contexte d’utilisation tout en réduisant au maximum le nombre d’interactions (soit le nombre d’actions nécessaires pour accomplir une tâche) devient rapidement la norme pour bon nombre d’applis. Vous devrez donc penser à ce qui constitue une « bonne expérience » et à la manière de rendre votre interface utilisateur (IU) très fonctionnelle pour pouvoir bien commercialiser votre appli sur de nouveaux marchés. Ce guide vous offre de nombreuses pratiques exemplaires que vous pouvez appliquer partout où vous souhaitez faire grandir votre entreprise.

2 Comment les utilisateurs interagissent avec votre appli

Assurez-vous que les utilisateurs peuvent facilement comprendre votre appli et interagir avec elle. Plus l’interaction avec l’appli sera exempte de friction et de confusion (comme la charge cognitive), plus votre appli aura de chances de garder sa popularité. Voici quelques astuces pour vous aider.

Optimiser le flux d’utilisateurs

Comprendre la manière dont les gens interagissent avec votre appli est essentiel pour bien l’optimiser. Les concepteurs et les développeurs se doivent de cerner les différents objectifs qui surviennent au cours du flux d’utilisateurs afin de mieux repérer les points de friction courants pendant l’accomplissement de différentes tâches.

Voici quelques manières populaires d’optimiser le flux d’utilisateurs :

  • Diviser les grosses tâches. Si une tâche requiert plusieurs actions du côté utilisateur, il est préférable de la séparer en plusieurs sous-tâches. Le parcours que suivent les utilisateurs lors d’un achat dans une appli de commerce électronique est en un bon exemple : le processus peut être séparé en plusieurs étapes pour que chacune d’entre elles ne requière qu’une seule action de l’utilisateur.

  • Utiliser ce qui est déjà connu sur vos utilisateurs. Vous avez déjà probablement beaucoup d’information sur vos utilisateurs. Il suffit de bien savoir l’utiliser. Pensez par exemple à Uber : l’appli ne demande pas à l’utilisateur où il se trouve, elle le détecte automatiquement grâce à des données géographiques. Pour l’utilisateur, il ne reste donc plus qu’à choisir un point de rencontre.

  • Afficher la prochaine étape. Lorsqu’une tâche doit être réalisée en plusieurs phases, gardez l’impulsion du moment en indiquant clairement quelles sont les prochaines étapes.

  • Mettre l’accent sur une seule action principale par écran. En respectant cette règle simple, vous rendrez l’interface plus facile à comprendre et à utiliser. Ajoutez des éléments visuels pour indiquer ce qui est le plus important (par exemple une couleur contrastante pour le bouton d’action principal).

Éliminer l’encombrement

Proposer un bon concept d’IU consiste à fournir l’information nécessaire (signal) et à éviter celle qui ne l’est pas (bruit).

En surchargeant votre interface, vous donnez trop d’information aux utilisateurs : chaque bouton, image et icône supplémentaire rend l’écran encore plus complexe. L’encombrement est désagréable sur un ordinateur, mais il l’est encore plus sur un appareil mobile, où il y a peu de marge de manœuvre.

Astuce

Si vous souhaitez réduire l’encombrement sur un écran qui fait partie du flux d’utilisateurs, n’affichez que ce qui est pertinent pour l’étape actuelle du processus. Par exemple, lorsqu’un utilisateur doit faire un choix, donnez-lui suffisamment d’information pour prendre sa décision et ajoutez les détails supplémentaires sur la ou les pages suivantes.

Proposer une navigation qui va de soi

Le contenu et les fonctionnalités les plus incroyables au monde n’ont aucune utilité si personne ne peut réussir à les trouver. Voici quelques règles à adopter pour la navigation :

  • Ne pas la dissimuler. Évitez la navigation cachée, comme celle réalisée par les gestes : la plupart des utilisateurs auront de la difficulté à découvrir quoi faire.
  • Être constant. Certains développeurs d’applis cachent le menu sur certaines pages. Évitez de le faire : vos utilisateurs pourraient être confus ou déboussolés.
  • Indiquer la position actuelle. Ne pas indiquer la position actuelle dans l’appli est un problème courant. Être en mesure de répondre à la question « où suis-je? » est l’un des éléments les plus importants pour assurer une bonne navigation.

Astuce

Il est préférable d’utiliser des schémas de navigation standards, comme la barre d’onglets (pour iOS) et le tiroir de navigation (pour Android). La majorité des utilisateurs connaissent les deux schémas de navigation. Vous n’avez pas besoin de réinventer la roue.

Optimiser les interactions selon l’appareil

Les téléphones ne sont pas une version miniature d’un ordinateur. Ils ont leurs propres particularités et limites. Pensez à la manière dont cela influence l’interaction des utilisateurs.

3 Effets du concept sur les utilisateurs

Cohérence entre le concept et le comportement

Une IU mobile doit indiquer clairement quels éléments sont interactifs et lesquels ne le sont pas.

Contrairement aux ordinateurs, qui permettent une fonction de survol pour trouver ce qui est interactif, les appareils mobiles forcent les utilisateurs à vérifier l’interactivité en touchant chaque élément. Les utilisateurs doivent donc être en mesure de prédire correctement le comportement des différents éléments de l’interface en un seul coup d’œil.

Zones adaptées au toucher d’un doigt

Lorsque vous créez des éléments interactifs dans une interface mobile, assurez-vous que vos cibles sont assez grandes pour que les utilisateurs puissent les atteindre sans difficulté. En général, assurez-vous que les commandes peuvent être activées dans une zone de 7 à 10 mm, un format qui permet une certaine exactitude avec le doigt. Une telle cible affichera ses limites lorsqu’un utilisateur la touche. Ce dernier pourra donc voir s’il atteint la cible ou non.

Assurez-vous également de ne pas placer des éléments trop près les uns des autres. Prévoyez suffisamment d’espace entre deux cibles pour éviter les mauvaises saisies.

Zone du pouce

Les grandes cibles ne sont pas suffisantes lorsque vous créez un concept pour le pouce; vous devez aussi penser à la manière dont l’appareil est tenu.

Un pouce peut balayer la majorité de l’écran sur la plupart des appareils mobiles, mais seul un tiers de l’écran ne requiert vraiment aucun effort. Cette zone s’appelle la zone naturelle du pouce. Les autres parties de l’écran exigent d’étirer le pouce ou même de changer sa prise de l’appareil. Selon la main utilisée (gauche, droite ou les deux), voici à quoi ressemble la zone confortable sur un appareil mobile moderne (zone en vert sur l’image).

Image alt text

Plus l’écran est grand, plus la proportion accessible facilement est petite.

Image alt text

  • Pensez à toutes les zones différentes lorsque vous créez un concept pour un appareil mobile :
  • La zone en vert est l’endroit optimal pour les options de navigation et les interactions fréquentes (comme les boutons d’action).
  • La zone en rouge est quant à elle l’endroit idéal pour les options « dangereuses » (comme supprimer ou effacer), puisque les utilisateurs sont moins à risque de les activer accidentellement.

Concept qui tient compte des interruptions

Nous vivons dans un monde d’interruptions. Il y a toujours quelque chose pour nous distraire et attirer notre attention ailleurs.

Les utilisateurs pourraient par exemple utiliser votre appli en attendant le train. Il est donc essentiel de le considérer lorsque vous concevez une appli mobile. Assurez-vous que l’utilisateur n’aura aucun problème à retourner à votre appli après une interruption.

Twitter est un bon exemple de concept prévu pour les interruptions : l’écran de notification, qui affiche toutes les notifications récentes, ne se met pas à jour tant que l’utilisateur demeure sur la page. Il ne fait qu’indiquer le nombre de nouvelles notifications en haut de la liste. Les utilisateurs peuvent donc retourner facilement là où ils en étaient rendus même s’ils ont été interrompus un certain temps.

4 Créer une expérience utilisateur optimale

Expérience multicanal

Les applis mobiles ne sont pas isolées du reste du monde.

Par exemple, les utilisateurs consultent généralement un site de commerce électronique sur leur appareil mobile puis se rendent sur leur ordinateur pour passer leur commande. Cette transition doit passer inaperçue.

Gestes intuitifs

Utilisez seulement les gestes qui sont les plus naturels pour les applis de votre catégorie.

Pourquoi? Parce que les gestes sont des commandes cachées.

Comme le mentionne Thomas Joos dans son article « Beyond The Button: Embracing The Gesture-Driven Interface » 2, le plus grand inconvénient de l’utilisation des gestes dans une interface utilisateur est la courbe d’apprentissage. Chaque fois qu’une commande visible est remplacée par un geste, la courbe d’apprentissage pour l’appli augmente. Cela s’explique par le fait que les gestes sont plus difficiles à détecter : ils sont toujours cachés et les gens doivent d’abord être capables de les repérer. Il est donc essentiel de seulement utiliser des gestes très répandus (ceux que les utilisateurs s’attendent à voir dans votre appli).

Par exemple, un geste approprié pour une appli contenant un fil d’actualité est le balayage vers le bas pour rafraîchir la page.

Écrans squelettes

Idéalement, votre appli doit être rapide et réactive, mais ce ne sera pas toujours possible.

Par exemple, la connexion Internet pourrait être trop lente. Si vous ne pouvez pas réduire l’attente, vous pouvez au moins la rendre plus agréable. Il peut donc s’agir du moment parfait pour afficher des écrans squelettes (c’est-à-dire des boîtes d’information temporaires).

Un écran squelette est la version vierge d’une page sur laquelle l’information se charge graduellement. Contrairement aux indicateurs de chargement animés, qui signalent à l’utilisateur que les données sont en cours de chargement, les écrans squelettes attirent l’attention de l’utilisateur sur le progrès plutôt que sur le temps d’attente.

Première expérience

Comme un humain, votre appli n’a qu’une seule chance de faire une bonne première impression. Si vous n’arrivez pas à charmer les utilisateurs, vous pouvez parier (avec 80 % de chances d’avoir raison)3 qu’ils ne reviendront pas.

Présentation d’accueil

La règle qui est probablement la plus importante pour bien accueillir les utilisateurs sur votre appli est d’éviter les généralisations et de créer une présentation qui leur sera utile.

Pensez à la présentation comme une occasion d’initier les gens qui utilisent votre appli pour la première fois. D’un autre côté, proposez seulement une présentation lorsque cela est vraiment nécessaire pour la première utilisation.

État zéro

Pensez à créer un état zéro, c’est-à-dire ce qui apparaît lorsque rien ne s’est encore produit. Il ne devrait pas s’agir d’une page blanche, mais d’une page qui aide à bien commencer à utiliser l’appli.

Animations pour améliorer l’interaction et les transitions

Les animations contribuent à résoudre bon nombre de problèmes fonctionnels dans les interfaces et de rendre le processus vivant et réactif.

Il s’agit également du meilleur outil pour indiquer l’état d’une transition. Les animations aident les utilisateurs à comprendre les changements qui ont été apportés dans la disposition de la page, l’élément qui a motivé la transition et la façon de répéter l’événement à l’avenir.

Affichage de l’état du système

Lorsque votre appli est en train d’effectuer une tâche, faites savoir à vos utilisateurs qu’elle n’est pas gelée en affichant l’état du système. Des indicateurs visuels de progrès donnent à l’utilisateur un sentiment de contrôle.

Réactions visuelles

Dans le monde matériel, tout fonctionne selon un principe d’action-réaction. Les gens s’attendent à la même chose des commandes numériques de votre IU.

De bonnes « réactions » visuelles rendent l’interaction plus agréable pour les utilisateurs. Tous les éléments interactifs, comme les boutons, doivent donc réagir parfaitement sur le plan visuel.

Expérience numérique personnalisée

La personnalisation est actuellement l’une des caractéristiques les plus importantes des applis mobiles. Il s’agit d’une bonne occasion pour entrer en contact avec les utilisateurs et leur offrir ce dont ils ont besoin de manière naturelle.

Starbucks en est un très bon exemple. Son appli utilise les renseignements fournis par les utilisateurs (par exemple le type de café qu’ils commandent généralement) pour leur proposer des offres spéciales.

Notifications de valeur

Les notifications dérangeantes sont la raison principale pour laquelle les gens désinstallent des applis mobiles (71 % des répondants). (Source : Enquête Appiterate)

Avoir la possibilité d’envoyer des notifications poussées ne justifie pas toujours de le faire. Chaque notification doit proposer de la valeur et être envoyée au bon moment. Voici quelques éléments à considérer lorsque vous concevez vos notifications poussées :

  • Évitez d’envoyer trop de notifications dans un court laps de temps

Un nombre trop élevé de notifications en peu de temps peut empêcher l’utilisateur de bien les comprendre et l’inciter à tout simplement arrêter de les lire. Essayez de regrouper différents messages pour limiter le nombre de notifications.

  • Envoyez vos notifications au bon moment

Ce que vous voulez dire est important, mais le moment où vous le dites l’est tout autant. N’envoyez pas de notifications poussées à des heures étranges (comme au beau milieu de la nuit). Le meilleur moment pour les envoyer est pendant le pic d’utilisation des appareils mobiles, soit entre 18 et 22 heures.

  • Pensez à utiliser d’autres canaux

Les notifications poussées ne sont pas la seule manière d’envoyer un message à vos utilisateurs. Utilisez les courriels, les notifications dans l’appli et le fil d’actualité pour informer vos utilisateurs des événements importants tout en tenant compte de l’importance du message et du type de contenu que vous souhaitez partager.

Conclusion

Les professionnels disent souvent qu’un bon concept est invisible : les utilisateurs peuvent se concentrer sur leurs propres objectifs et non sur l’interface. Ainsi, cherchez vous aussi à créer une interface invisible afin de bien répondre aux besoins de vos utilisateurs et de leur offrir une expérience utilisateur et une IU de qualité. Vous pouvez appliquer ce principe, peu importe la langue ou la région de déploiement. Il est donc important de bien le faire, et ce, dans tous les marchés que vous ciblez.

5 Sources