Retour au blog

UX design : 7 règles d'interaction pour une bonne expérience utilisateur

L'interaction au sein d'une interface utilisateur joue un rôle primordial dans l'utilisation d'un site web. Des interactions claires et précises permettent à l'utilisateur de se concentrer sur les éléments essentiels de la navigation. Découvrons ensemble quelles sont les principales règles d'interaction à respecter pour proposer une bonne expérience utilisateur.

1. L'Affordance

L'affordance est la capacité d'un objet ou d'un système à évoquer son utilisation et sa fonction. Dans un site web, son rôle est d'informer l'utilisateur qu'une action doit être possible. Par exemple, le fait de souligner un texte est en général synonyme que ce texte est un lien cliquable. Il est donc important d'énoncer à l'utilisateur les différentes actions qu'il lui est possible de réaliser sur une page. 

L'une des bonnes pratiques quand on décide d'utiliser des icônes est d'ajouter un texte sous celles-ci afin que l'utilisateur comprenne clairement les actions possibles.

Source : Think with Google : Usability and Comprehension par Google

2. Le Feedback

Tout aussi important que l'affordance, le feedback permet de fournir un retour sur l’action qui vient d’être effectuée par l’utilisateur.

Pour cela, il est nécessaire d'informer l'utilisateur en lui indiquant l'état du système suite aux déroulements de ses actions. Il convient d'indiquer - avec des termes simples et compréhensibles par tous  - la tâche en cours. Par exemple : chargement en cours, recherche, téléchargement, etc. 

Les feedbacks successifs de ce drag & drop nous permettent de suivre les différentes étapes du téléchargement d'un fichier.

Source : Drag & Drop upload concept par Jakub Antalík (Dribbble).

3. Les Limites

Le fait de limiter les actions de l’internaute permet de simplifier son parcours en lui proposant un chemin à suivre et ainsi éviter toute surcharge d'informations inutiles.

Ainsi, seules les actions les plus pertinentes seront présentes sur la page. On peut décider de mettre en avant certaines actions en utilisant la taille, la proportion et l'emphase sur différents éléments. Cela permet de créer une hiérarchie et influencer les utilisateurs.

La page d'accueil du site Foursquare est un bon exemple pour illustrer cette idée. Elle permet à l'utilisateur de se focaliser sur l'action qu'il souhaite réaliser.

page d'accueil foursquare

 Source : Site fr.foursquare.com

4. La cohérence et les standards

La cohérence des éléments joue un rôle important dans l'utilisation d'une application ou d'un site web. Elle permet à l'utilisateur de reconnaître des chemins (ou patterns) qui lui sont familiers et de faciliter l'usage général d'un produit.

Pour respecter au maximum la cohérence au sein d'un site web, il est nécessaire d'utiliser des composants ayant chacun des fonctions bien spécifiques. Ainsi, il est par exemple important de se limiter à un ou deux (max) type(s) de bouton afin de permettre à l'utilisateur d'en reconnaître instantanément la fonction. Il en va de même pour les autres composants d'un site web, comme les "checkboxes", "radio buttons", "sliders" ou autres "menu dropdown".

De plus en plus de designers optent désormais pour l'usage de "design systems" qui regroupent des composants et des structures réutilisables de projet en projet. Cela permet une uniformité et un respect des standards plus importants qu'auparavant.

Il convient également de respecter les standards du web qui évoluent au fil des nouveaux usages. Grâce à des techniques telles que le "eye-tracking" on peut notamment s'apercevoir que les utilisateurs scannent généralement les pages web avec le même mouvement en "F". On peut donc en conclure que la hiérarchie du site web doit être pensée en amont et que les contenus importants de la page doivent généralement se situer sur la partie supérieure gauche de la page.

Voici le balayage en "F" illustré avec les parties les plus regardées en rouge :

UX design eye tracking

Source : Alertbox de Nielsen : « F-Shaped Pattern For Reading Web Content »

5. Le choix des mots

Lors du développement d'un site, il est nécessaire de garder à l'esprit que les utilisateurs finaux sont souvent des personnes non habituées aux jargons techniques et disposant également d'un temps limité. Il convient donc de les accompagner au mieux en utilisant un vocabulaire clair et précis.

Les messages d'interface regroupant notamment les textes des boutons d'actions, les champs de formulaires et les messages d'erreur sont d'une importance capitale pour rassurer et permettre une compréhension du service auprès de l'utilisateur.

Concernant les messages d'erreur, il est nécessaire d'être le plus exhaustif possible dans la rédaction du texte. Ainsi, pour le cas d'un numéro de téléphone mal indiqué dans un formulaire, il convient de rédiger le message d'erreur en traitant le point spécifique "Il semble que le numéro de téléphone indiqué ne soit pas complet (10 chiffres)" plutôt que de se contenter d'un message générique "Le formulaire comporte des erreurs".

Apple gère très bien le cas d'une demande de réinitialisation de mot de passe en indiquant les différents pré-requis du formulaire.

Source :  www.apple.com/fr

6. Ne pas interrompre l'utilisateur

Lorsque l'utilisateur interagit avec une application ou un site web, il est important de ne pas interrompre sa navigation. Nous avons tous en tête de nombreuses fois où nous avons été dérangés par des "popups" survenus au mauvais moment. Un design et des interactions intrusives peuvent amener l'utilisateur à avoir un avis négatif à propos d'un produit, voire de ne pas revenir vers celui-ci.

Pour favoriser la navigation, il convient de limiter les distractions proposées en réduisant le nombre de choix possibles (cf: Limites). Il est aussi judicieux d'éliminer les tâches qui pourraient sembler rébarbatives. Si cela est possible, il peut être bénéfique de pré-remplir certaines informations de manière automatique. Par exemple, dans un formulaire : renseigner la ville de l'utilisateur en se basant sur sa zone géographique et son adresse IP.

Par exemple, ce genre de "popup" peut paraître intrusif et interrompt l'utilisateur dans sa navigation.

UX design et navigation

Source : www.dwell.com

7. Fournir des sorties de secours

Il faut garder en tête qu'il est impossible de créer un site web où l'utilisateur ne fera aucune erreur. En gardant cette affirmation à l'esprit, il est primordial de permettre aux utilisateurs de pouvoir revenir en arrière sur leurs actions effectuées afin de ne pas générer de frustrations. Quand cela est possible, proposer aux utilisateurs d'annuler leurs récentes actions est un plus non négligeable.

La possibilité de mettre en pause une opération peut également être bénéfique. Par exemple : le fait de sauvegarder automatiquement le remplissage d'un formulaire lorsque celui-ci est fastidieux permet à l'utilisateur de faire des pauses ou de revenir plus tard. Aujourd'hui, avec l'avancée des différents clients mails, il est naturel pour un utilisateur de commencer la rédaction d'un message et d'espérer que ce message soit sauvegardé en tant que brouillon en cas d'interruption.

A titre d'exemple, Google Drive permet d’annuler la dernière action effectuée par l’utilisateur et de restaurer le fichier supprimé.

Conclusion

Toutes ces règles sont amenées à évoluer et ne sont pas immuables mais elles tendent à rendre l'utilisation d'un produit plus agréable à son utilisateur et ainsi permettre une meilleure adoption du produit. Pour compléter cette lecture, il existe aujourd'hui un bon nombre d'articles traitant des meilleures pratiques dans l'UX à garder à l'esprit lors de la conception d'un produit, en voici quelques-uns :