UX Design & Web Usability : Qu'est-ce qui se cache derrière l'expérience utilisateur ?

Sonja Hoffmann Dernière mise à jour le 21.10.2020
8 Min.
UX-Design-Usability
Dernière mise à jour le 21.10.2020

Conception de l'expérience utilisateur (UX), convivialité, conception de l'interface humaine et conception centrée sur l'homme - ce ne sont là que quelques termes auxquels nous sommes de plus en plus confrontés. Mais qu'est-ce que c'est en réalité ? Pourquoi devriez-vous vous intéresser à la convivialité et à l'expérience des utilisateurs en tant que concepteur de sites web ? Et comment pouvez-vous obtenir une valeur ajoutée grâce à l'UX même si vous n'avez pas de concepteur d'UX dans votre équipe ?

Dans mon dernier article sur la conception harmonieuse de sites web, je vous ai montré comment créer vos propres directives de conception. Toutefois, la conception harmonieuse d'un site web est déterminée par plusieurs facteurs - c'est pourquoi je vous présenterai aujourd'hui l'expérience utilisateur :

UX Design & Web Usability : Qu'est-ce qui se cache derrière l'expérience utilisateur ?

Pourquoi devrais-je m'inquiéter de l'UX ?

Beaucoup de designers de français que je connais ont une solide expérience en matière de design de communication - ils viennent donc de la direction des médias imprimés. Ils y créent des compositions sophistiquées qui présentent un message précis.

Dans le domaine de la conception d'imprimés, la voie de communication est claire : il y a un expéditeur (par exemple, une affiche ou une brochure) et un destinataire (la personne à laquelle le support est destiné). Le destinataire n'a rien d'autre à faire que de recevoir le message, de le comprendre et de prendre ensuite une décision (d'achat).

La conception de sites web, en revanche, est interactive : il ne s'agit pas seulement d'envoyer un message, mais de créer une conversation. 

Expérience de l'utilisateur : l'expérience de l'utilisateur

Depuis les premiers jours de l'internet, les entreprises se sont intéressées aux aspects psychologiques de ces interactions. Cependant, à l'époque, on ne parlait pas de concepteurs de UX, mais de concepteurs d'interactions humaines - et la profession était généralement beaucoup moins répandue qu'aujourd'hui.

Qu'est-ce que l'expérience utilisateur ?

Selon les normes actuelles, l'expérience de l'utilisateur ne commence pas lorsque vous visitez un site web et ne se termine pas lorsque vous le quittez. Elle décrit plutôt l'ensemble de l'expérience qu'un utilisateur a de la marque ou du produit - du premier au dernier contact.

Cependant, je voudrais me limiter au seul sous-domaine qui est directement lié à un site web : la convivialité. Le cheminement à travers notre produit doit donc être aussi agréable et continu que possible. Cependant, vous ne devez pas négliger le budget et les spécifications internes de l'entreprise.

Une bonne ergonomie peut avoir un impact non négligeable sur vos chiffres de vente. Ce qui me motive personnellement, c'est le devoir en tant qu'opérateur de site web de ne pas frustrer l'utilisateur.

Affectations, signataires et retour d'information

En termes simples, l'accessibilité décrit ce qui est généralement possible. Si l'on prend l'exemple d'un écran de bureau, il s'agirait de la possibilité de "cliquer". Comme il serait oisif et frustrant de devoir cliquer au hasard partout sur le site, nous intégrons des signifiants (indicateurs). Elles montrent à l'utilisateur où quelque chose est possible et quoi. 

L'un des signifiants les plus connus est le bouton. Il délimite la zone d'interaction. Nous savons que si nous cliquons ici, quelque chose va se passer. Ce phénomène est généralement renforcé par les effets de survol - ou lorsque le curseur se transforme en index lorsque je le survole. Ce sont également des signifiants.

Qu'est-ce qu'un accord, un signalement et un retour d'information ?

La notion d'accessibilité décrit l'interaction qui est généralement possible. Les indicateurs signalent qu'une interaction est possible. Le retour d'information, d'autre part, permet à l'utilisateur de savoir que son interaction a déclenché quelque chose.

L'état actif du bouton m'indique en retour que quelque chose s'est produit lorsque j'ai cliqué dessus. Ces trois processus s'imbriquent l'un dans l'autre et peuvent servir de questions de base pour rendre votre site web plus convivial en premier lieu.

  1. Quelles sont les interactions généralement possibles ?
  2. Comment puis-je montrer à mes utilisateurs qu'ils sont possibles ?
  3. Comment savent-ils qu'ils ont fait la "bonne" chose ?

La possibilité d'interaction est souvent définie par le dispositif utilisé pour accéder au site web : Il n'est pas possible de glisser et de toucher sur un ordinateur de bureau (standard), tandis qu'il n'y a pas d'effet de survol sur les appareils mobiles.

C'est exactement ce qu'il faut prendre en considération lors du choix des signifiants. Par exemple, les liens ne sont-ils clairs que lorsque je les survole avec la souris ? Alors un visiteur mobile ne reconnaît pas du tout qu'une interaction est possible. 

Les utilisateurs interagissent physiquement et numériquement

Les moyens et les significations peuvent également aller au-delà de l'interface de votre site web. Votre visiteur peut être influencé par des circonstances extérieures ou utiliser certaines interactions différemment de ce qui était prévu à l'origine. Par exemple, le bouton "Précédent" du navigateur est une circonstance externe à votre site web. 

Si le visiteur a accidentellement navigué vers une partie de votre site où il ne peut pas trouver ce qu'il veut, il y a de fortes chances qu'il utilise le bouton "retour" - au lieu des liens de votre site. 

Comment les interactions sont délibérément utilisées "incorrectement" - un exemple

Je réserve souvent des vols par l'intermédiaire d'un prestataire de services étranger dont la page n'est affichée par défaut ni en allemand ni en anglais. Je n'arrivais pas à trouver les paramètres linguistiques via la version mobile. Cependant, je me suis souvenu que j'avais déjà accédé au site web via l'application, où tout était alors affiché en anglais par défaut. Depuis, je n'accède au site web mobile que par le détour de l'"app", parce que je m'en souviens et parce que je préfère faire deux clics de plus que de cliquer par frustration sur une page mobile.

Vous devez également être conscient que vous ne pouvez pas "rééduquer" vos utilisateurs. Vous ne pouvez pas les empêcher de faire les choses de la mauvaise manière, mais vous pouvez prévoir ce comportement et vous assurer qu'il existe suffisamment d'alternatives.

Un autre bon exemple qui nous a tous causé des maux de tête est l'utilisation - malheureusement encore très répandue - de navigateurs obsolètes ou d'Internet Explorer. Certaines mises en page n'ont pas la même valeur créative que celles de Firefox ou de Chrome, par exemple. Même si cela est ennuyeux, nous devons concevoir et programmer tout autant pour ces utilisateurs.

Car, pire que l'accès au site via l'application, par exemple, ou l'utilisation du bouton retour, c'est lorsque le visiteur du site abandonne complètement - que ce soit parce que l'utilisation de notre site crée trop de frustration ou parce qu'il y a trop peu d'alternatives de traitement des erreurs.

Pourquoi des tests d'utilisabilité ?

D'ailleurs, le meilleur moyen de découvrir de tels comportements est l'observation. La personne qui teste le site web est relativement peu importante. Il n'est pas nécessaire de trouver des personnes qui utilisent effectivement le site par la suite. Parce que des erreurs d'utilisation vraiment grossières se produisent chez presque tous les utilisateurs. 

Il est important de ne pas dire au testeur ce qu'il doit faire ou comment se rendre à tel ou tel endroit. L'essentiel est d'identifier et de noter les éventuels obstacles et complications afin de rendre votre site web plus convivial. Moins vous en dites à la personne interrogée, plus les résultats sont impartiaux.

Les 4 différents indicateurs

Quels signaux pouvez-vous placer sur votre page pour mettre en évidence les interactions ? Nous distinguons quatre catégories différentes, que je vais vous présenter brièvement.

1. signifiant explicite

Les signifiants explicites consistent en une invite sous forme de texte, telle que "cliquez ici". Vous les trouverez souvent en conjonction avec d'autres indicateurs, tels que des formulaires de contact ou des boutons. Celles-ci doivent être aussi claires et concises que possible. En outre, par souci de simplicité, vous devriez vous rabattre sur des phrases familières et éviter les formulations prétendument créatives. 

La valeur de reconnaissance permet à l'utilisateur de savoir avec un certain degré de certitude quel est le résultat à attendre d'une interaction.

"VOIR PLUS" est un exemple de signifiant explicite simple.

UX Design & Web Usability : Qu'est-ce qui se cache derrière l'expérience utilisateur ?
https://www.lonelyplanet.com/portugal/lisbon

2. les modèles de conception : modèles et conventions

Les dessins et modèles désignent des dessins récurrents auxquels nous nous sommes tellement habitués qu'ils ne nécessitent plus d'explication ou de référence supplémentaire. Ils sont relativement nombreux. 

Chacun doit savoir, par exemple, que cliquer sur le logo ramène à la page d'index. Ou que le texte souligné en bleu représente un lien. La barre de navigation d'un site web - telle que nous l'utilisons aujourd'hui - est également un tel phénomène. On s'attend à ce qu'ils soient à certains endroits sur une page. Nous savons que la barre de navigation nous sert de guide de contenu, nous guidant à travers le site web. Une barre de menu qui se transforme en icône de hamburger sur les appareils mobiles ne nécessite pas non plus d'explications supplémentaires. 

Les modèles communs que nous avons appris au cours des dernières années

Ce qui est surprenant, c'est que ces modèles ont souvent une validité internationale. Vous le voyez particulièrement bien si vous voulez vous orienter sur un site dont vous ne parlez pas la langue. Il vaut donc la peine de ne pas réinventer la roue ici. Il est plutôt recommandé pour une meilleure convivialité de votre site, si vous traitez les modèles établis. 

Cela est bien visible sur l'exemple d'une page d'un restaurant (choisi au hasard) à Moscou. Bien que je ne parle pas russe et que je ne sache pas lire le cyrillique, je vois immédiatement comment je peux naviguer dans la page. Je peux voir dans quel point de navigation je me trouve et je suis en mesure de filtrer immédiatement les informations les plus importantes (contact).

UX Design & Web Usability : Qu'est-ce qui se cache derrière l'expérience utilisateur ?
https://bulka.cafe/

3. signifiant caché

Vous ne pouvez les voir qu'en effectuant une certaine action, comme le survol et le défilement. 

Les signifiants cachés ont l'avantage de rendre la mise en page propre et ordonnée. Ils peuvent donc rendre votre conception plus rationnelle. 

Toutefois, ils présentent également certains inconvénients. Ils ne sont trouvés par l'utilisateur que s'il sait qu'ils sont présents ou s'il effectue accidentellement l'interaction déclenchante. Par conséquent, ces signaux ne sont pas adaptés aux appels à l'action importants, mais tout au plus secondaires.

En outre, lorsque vous utilisez des signifiants cachés, vous devez garder à l'esprit qu'il faudra peut-être trouver une solution distincte pour chaque dispositif terminal.

Pinterest en donne un bon exemple :

pinterest

Dans la version de bureau, de nouveaux appels à l'action apparaissent au survol. Comme l'utilisateur clique intuitivement sur l'image pour l'ajouter à sa collection, la caractéristique ne passera probablement pas inaperçue. Néanmoins, les concepteurs ont élaboré un plan B : En cliquant sur l'image, on fait apparaître une grande vue dans laquelle toutes les interactions possibles sont visibles.

Il est intéressant de voir comment l'ensemble est résolu dans la variante à écran tactile. Ici aussi, il y a des interactions cachées - mais à d'autres fins.

UX Design & Web Usability : Qu'est-ce qui se cache derrière l'expérience utilisateur ?

L'image de gauche montre l'aperçu général de la page. Le menu du bas ne se rétracte que lorsque l'utilisateur fait défiler la page vers le haut - ce qui semble inhabituel à première vue, mais qui est aussi très intuitif. Quand on cherche la navigation, on fait généralement défiler vers le haut. 

Toutefois, les appels à l'action supplémentaires - comme pour la version de bureau - ne sont disponibles que lorsque vous avez effectivement cliqué sur l'image. Ainsi, ils ne sont plus des signifiants cachés. 

Cependant, j'ai été surpris que Pinterest utilise deux icônes différentes pour la même interaction dans les deux versions. Du point de vue de la convivialité, je ne pense pas que cela soit souhaitable. Si l'utilisateur passe de la version mobile à la version de bureau, ou vice versa, l'utilisation des mêmes icônes permettrait une orientation plus rapide. Cela rend l'utilisation plus facile. La convivialité est donc positivement améliorée.

4. signifiant métaphorique

Une loupe, qui signale que le champ de recherche se trouve ici. L'enveloppe qui représente l'envoi des messages. Le bouton qui vous signale que vous pouvez appuyer dessus. Tous les principes ont en commun que nous les connaissons du monde réel. 

Leur utilité dans le monde numérique est devenue un modèle de conception. Mais il faut faire attention : Si vous utilisez un indicateur métaphorique avec un symbole modifié, cela pourrait confondre vos utilisateurs.

Si vous utilisez une boîte aux lettres au lieu de l'enveloppe habituelle, par exemple, cela pourrait nuire à la convivialité de votre site web. Pourquoi ? L'utilisateur doit s'arrêter et réfléchir à l'étape suivante. Il doit se demander si ce symbole correspond à ce qu'il veut atteindre.

UX Design & Web Usability : Qu'est-ce qui se cache derrière l'expérience utilisateur ?
Copyright : https://www.iconfinder.com/icons/2296974/email_inbox_letter_mail_mailbox_icon_icon

Conclusion

La convivialité ne signifie pas seulement que vos visiteurs trouvent leur chemin d'une manière ou d'une autre sur le site. La convivialité signifie plutôt que l'accent est mis ici sur le visiteur de manière globale - le "voyage" à travers votre site doit être aussi fluide que possible. 

Chaque interruption, c'est-à-dire chaque fois que l'utilisateur doit s'arrêter et se demander "Qu'est-ce qui est réellement proposé ici ? Que se passe-t-il si je clique dessus ? Est-ce que je reviendrai ? Où suis-je situé ? Comment suis-je arrivé ici ? - est contre-productif à cet égard.

Est-il possible de construire une page de manière à ce qu'il n'y ait pas d'interruption ? Il est fort probable que non. Selon les informations présentées, certaines interruptions, une réflexion dirigée et une légère frustration peuvent même être souhaitables.

Il est important de connaître les différents outils afin de pouvoir les utiliser pour votre propre projet.

Lectures recommandées

L'un des livres les plus célèbres sur la convivialité est"Don't make me think !" de Steve Krug. Le titre dit tout et constitue, en fin de compte, la raison d'être de toute approche de la convivialité.

  • "Don't Make Me Think, Revisited : A Common Sense Approach to Web Usability", Steve Krug.
  • "La conception des choses de tous les jours", Donald A. Norman.
  • https://www.uxpin.com/ propose des livres électroniques très intéressants à télécharger gratuitement
Vos questions sur l'expérience des utilisateurs

Quelles sont vos questions sur la convivialité du web et la conception de l'expérience utilisateur ? Quels processus pouvez-vous recommander ? N'hésitez pas à utiliser la fonction de commentaire. Vous voulez plus de conseils sur la conception et le développement de sites web ? Alors suivez-nous sur Twitter, Facebook ou via notre newsletter.

Après avoir étudié la conception de jeux et la création littéraire dans la ville verdoyante d'Auckland, Sonja Hoffmann s'est spécialisée dans la conception et le développement de sites web et d'applications. Elle se concentre sur la ludification et les causes derrière la motivation et l'expérience des utilisateur·rice·s, et y combine une passion et une curiosité pour les tendances technologiques.

Articles connexes

Commentaires sur cet article

Laisse un commentaire

Ton adresse électronique ne sera pas publiée. Les champs obligatoires sont marqués d'un *.