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 :

Pourquoi s'intéresser à l'UX Design ?

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.

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 une influence non négligeable sur tes chiffres de vente. Ce qui me motive personnellement, c'est le devoir en tant que propriétaire de site web de ne pas frustrer l'utilisateur.

Affectations, signataires et retour d'information

En termes simples, Affordance décrit ce qui est généralement possible. Si l'on prend l'exemple d'un écran de bureau, ce serait la possibilité de "cliquer". Comme il serait inutile et frustrant de devoir cliquer n'importe où sur le site, nous intégrons des indicateurs. Ceux-ci indiquent à l'utilisateur où il est possible de faire quelque chose 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.

L'état actif du bouton m'indique en retour que quelque chose s'est passé lorsque j'ai cliqué dessus. Ces trois processus s'entremêlent et peuvent aider à rendre ton site web plus convivial dès le départ en tant que questions fondamentales.

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 quelque chose de "bien" ?

La possibilité d'interaction est souvent définie par l'appareil avec lequel on accède au site : Sur un ordinateur de bureau (standard), le swiping et le toucher ne sont pas possibles, tandis que sur les appareils mobiles, il n'y a pas d'effet de survol.

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

Mais les affordances et les signes peuvent aussi aller au-delà de l'interface de ton site Web. Ton 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 de retour du navigateur est une donnée qui se trouve en dehors de ton site. 

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 via un fournisseur de services étranger dont la page n'est pas affichée par défaut en allemand ou en anglais. Depuis la version mobile, je n'ai pas pu trouver les paramètres de langue. Je me suis cependant souvenue que j'avais déjà accédé au site via l'application, où tout était alors affiché en anglais par défaut. Depuis, je n'accède au site mobile qu'en passant par l'application, parce que je m'en souviens et parce que je préfère faire deux clics de plus que de cliquer avec frustration sur un site 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 tester l'utilisabilité ?

La meilleure façon de découvrir ces comportements est d'observer. La personne qui teste le site est relativement peu importante. Il n'est pas nécessaire de trouver des personnes qui utilisent réellement le site par la suite. En effet, les erreurs d'utilisabilité vraiment grossières se produisent chez presque tous les utilisateurs. 

Il est important que tu ne dises pas à la personne qui fait le test ce qu'elle doit faire ou comment aller où elle doit aller. L'essentiel est d'identifier et de noter les éventuels obstacles et complications afin de rendre ton site plus convivial. Moins tu dis de choses à la personne testée, plus le résultat sera clair.

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.

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. 

Tout le monde sait par exemple que le fait de cliquer sur le logo renvoie à la page d'index. Ou le fait 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 phénomène de ce type. Nous nous attendons à la trouver à certains endroits sur une page. Nous savons que la barre de navigation nous sert de sommaire et nous guide à travers le site. Une barre de menu qui se transforme en icône hamburger sur les appareils mobiles n'a pas non plus besoin de plus d'explications. 

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).

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 :

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, il est fort probable que cette fonctionnalité ne passe pas inaperçue. Néanmoins, les concepteurs ont développé un plan B : Si tu cliques sur l'image, tu obtiendras une grande vue dans laquelle toutes les interactions possibles seront 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.

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. 

Les appels à l'action supplémentaires - comme dans la version de bureau - n'existent cependant que si tu as réellement cliqué sur l'image. Ils ne sont donc plus des significateurs cachés. 

Ce qui m'a surpris, c'est que Pinterest utilise deux icônes différentes pour la même interaction dans les deux versions. Du point de vue de l'utilisabilité, je ne trouve pas cela recommandable. Si l'utilisateur passe de la version mobile à la version de bureau, ou vice-versa, l'utilisation des mêmes icônes permettrait de s'y retrouver plus rapidement. Cela rend l'utilisation plus fluide. La facilité d'utilisation est ainsi 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 tu utilises par exemple une boîte aux lettres au lieu de la fameuse enveloppe, cela pourrait nuire à l'utilisabilité de ton site web. Pourquoi ? L'utilisateur doit s'arrêter et réfléchir à la prochaine étape. Il doit se demander si ce symbole correspond à ce qu'il veut atteindre.

Conclusion sur l'UX Design & l'utilisabilité web

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.

Lecture recommandée

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" (Ne me fais pas penser) : A Common Sense Approach to Web Usability" par Steve Krug
• "The Design of Everyday Things" par Donald A. Norman
• UX Pin propose des e-books intéressants à télécharger gratuitement