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-uns des termes auxquels nous sommes de plus en plus confrontés. Mais qu'est-ce que c'est en réalité ? Pourquoi la convivialité et l'expérience utilisateur devraient-elles vous intéresser particulièrement en tant que concepteur de sites web ? Et comment obtenir une valeur ajoutée grâce aux UX même si vous n'avez pas de concepteur de UX dans votre équipe ?

Dans mon dernier article sur un webdesign harmonieux Je vous ai montré comment créer vos propres lignes directrices en matière de design. Cependant, une conception web harmonieuse est influencée par plusieurs facteurs - c'est pourquoi je vais vous présenter 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'occuper des UX ?

Beaucoup français de designers que je connais ont une solide expérience en matière de design de communication - ils viennent donc de la direction de la presse écrite. Ils 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 (celui auquel le support est destiné). Le destinataire n'a rien d'autre à faire ici 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 : non seulement un message est envoyé, mais une conversation est créée. 

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

Depuis les premiers jours de l'Internet, les entreprises s'occupent des aspects psychologiques de ces interactions. Toutefois, à l'époque, on ne parlait pas de concepteurs de munitions non explosées 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 lorsqu'il visite un site web et ne s'arrête pas lorsqu'il le quitte. 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.

Toutefois, je voudrais me limiter à la partie du site web qui est directement liée à un site web : la convivialité. Le cheminement à travers notre produit doit donc être aussi agréable et continu que possible. Néanmoins, vous ne devez pas ignorer le budget et les directives internes de l'entreprise.

Une bonne ergonomie peut avoir un impact significatif 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.

Les moyens, les signifiants et le retour d'information

En termes simples, l'accessibilité financière décrit ce qui est généralement possible. En prenant l'exemple d'un écran de bureau, ce serait la possibilité de "cliquer". Comme il serait inutile et frustrant de cliquer au hasard n'importe où sur le site, nous incluons des signifiants. Elles montrent à l'utilisateur où quelque chose est possible et quoi. 

L'un des signifiants les plus connus est un bouton. Cela réduit la zone d'interaction. Nous savons que lorsque nous cliquons ici, il se passe quelque chose. Ce phénomène est généralement intensifié par les effets de survol - ou lorsque le curseur se transforme en index lorsque je le survole (hovere). Ce sont également des signifiants.

Que sont les affordances, les signifiants et les feedbacks ?

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 sont étroitement liés et peuvent contribuer à rendre votre site web plus convivial dès le départ.

  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 : Sur un ordinateur de bureau (standard), il n'est pas possible de glisser et de toucher, tandis qu'il n'y a pas d'effet de survol sur les appareils mobiles.

C'est exactement ce dont il faut tenir compte dans le choix des signifiants. Par exemple, les liens ne deviennent-ils clairs que lorsque je passe la souris dessus ? Alors un visiteur mobile ne reconnaît pas qu'une interaction est même 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 fonction qui se trouve en dehors de votre site web. 

Si le visiteur a accidentellement navigué vers une partie de votre page où il ne peut pas trouver ce qu'il cherche, il est probable qu'il naviguera en utilisant le bouton "retour" au lieu des liens sur votre page. 

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

Je réserve souvent mes vols par l'intermédiaire d'un prestataire de services étranger dont le site n'est pas affiché par défaut en allemand ou en anglais. En utilisant la version mobile, je n'ai soudainement pas pu trouver les paramètres linguistiques. Cependant, je me suis souvenu que j'avais déjà accédé au site web via l'application, où tout était 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 frustrément sur une page mobile.

Mais vous devez également être conscient que vous ne pouvez pas "rééduquer" vos utilisateurs. Vous ne pouvez pas les "dissuader" de ce "mauvais" comportement, mais vous pouvez prévoir ce comportement et vous assurer qu'il existe suffisamment d'alternatives.

Un autre bon exemple, qui nous a déjà causé des maux de tête à tous, est l'utilisation - malheureusement encore répandue - de navigateurs obsolètes ou de l'Internet Explorer. Certaines mises en page ne sont pas affichées de manière aussi créative que dans Firefox ou Chrome, par exemple. Même si cela est ennuyeux, nous devons concevoir et programmer pour ces utilisateurs de la même manière.

Pire que l'utilisation de l'application pour accéder à la page ou du bouton retour, par exemple, c'est lorsque le visiteur de la page abandonne complètement - soit parce que l'utilisation de notre site crée trop de frustration, soit parce qu'il y a trop peu d'alternatives pour le traitement des erreurs.

Pourquoi des tests d'utilisabilité ?

D'ailleurs, la meilleure façon de découvrir ce genre de comportement est de l'observer. La personne qui teste le site web est relativement insignifiante. Il n'est pas nécessaire de trouver des personnes qui utiliseront effectivement le site par la suite. Parce que des erreurs d'utilisation vraiment grossières se produisent chez presque tous les utilisateurs. 

L'important est que vous ne devez pas dire au testeur ce qu'il doit faire ou comment se rendre à tel ou tel endroit. Le plus important est d'identifier et de noter les obstacles et complications possibles pour rendre votre site web plus convivial. Moins vous en dites à la personne testée, plus le résultat est impartial.

Les 4 différents indicateurs

Quel type de signaux pouvez-vous mettre en place sur votre site 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". Souvent, on peut les trouver 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é, il convient de se rabattre sur des formulations familières et d'éviter les formulations prétendument créatives. 

La valeur de reconnaissance permet à l'utilisateur de savoir avec un degré élevé de certitude quel résultat il peut 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 ou modèles désignent des dessins ou modèles 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 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 un autre phénomène de ce type. Nous nous attendons à ce qu'il apparaisse à certains endroits sur une page. Nous savons que le Nav Bar nous sert de table des matières et nous guide à travers le site web. Une barre de menu qui se transforme en icône de Hambourg sur les appareils mobiles n'a pas non plus besoin 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 dessins et 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. Pour une meilleure convivialité de votre site, il est plutôt recommandé de traiter les modèles établis. 

Cela est clairement visible dans l'exemple d'un côté d'un restaurant (choisi au hasard) à Moscou. Bien que je ne parle pas russe et que je ne puisse 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 capable de filtrer les informations les plus importantes (contact) au premier coup d'œil.

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

3. les signifiants cachés

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 design plus mince. 

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 aux appels secondaires (call to action).

Lorsque vous utilisez des signifiants cachés, vous devez également garder à l'esprit qu'il peut être nécessaire de trouver une solution distincte pour chaque dispositif terminal.

Un bon exemple est Pinterest :

pinterest

Dans la version de bureau, de nouveaux appels à action apparaissent au survol. Comme l'utilisateur clique intuitivement sur l'image pour l'ajouter à sa collection, l'élément ne passera probablement pas inaperçu, mais 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 version à écran tactile. Ici aussi, il y a des interactions cachées - mais à des fins différentes.

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

Dans l'image de gauche, vous pouvez voir 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 à action supplémentaires - comme dans la version de bureau - ne sont disponibles qu'après avoir cliqué sur l'image. Ils ne sont donc plus des signifiants cachés. 

Ce qui m'a surpris, cependant, c'est 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 ce soit recommandable. Si l'utilisateur passe de la version mobile à la version de bureau, ou vice versa, l'utilisation des mêmes icônes lui permettra de s'orienter plus facilement. Cela rend l'utilisation plus facile. La facilité d'utilisation est positivement améliorée.

4. les signifiants métaphoriques

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

Leur utilisation dans le monde numérique a évolué vers un modèle de conception. Cependant, il faut être prudent ici : L'utilisation d'un indicateur métaphorique avec un symbole modifié pourrait semer la confusion chez vos utilisateurs.

Par exemple, si vous utilisez une boîte aux lettres au lieu de l'enveloppe habituelle, cela pourrait nuire à la convivialité de votre site web. Pourquoi ? L'utilisateur doit faire une pause 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 ?
Droits d'auteur : https://www.iconfinder.com/icons/2296974/email_inbox_letter_mail_mailbox_icon_icon

Conclusion

La convivialité ne signifie pas seulement que vos visiteurs trouveront leur chemin d'une manière ou d'une autre sur le site. La convivialité signifie que l'accent est mis sur le visiteur dans son ensemble - 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 lorsque je clique dessus ? Est-ce que je reviendrai alors ? Où me trouver ? Comment suis-je arrivé ici ? - est contre-productive.

Est-il possible de construire une page de manière à ce qu'il n'y ait pas d'interruption ? Très probablement pas. En fonction des informations affichées, certaines interruptions, une réflexion ciblé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 de manière appropriée pour votre propre projet.

Lectures recommandées

L'un des livres les plus célèbres sur la convivialité est "Ne me faites pas réfléchir !" par Steve Krug. Le titre est le programme ici et, en fin de compte, c'est ce dont il s'agit dans toute approche de convivialité.

  • "Ne me faites pas réfléchir, revisité : une approche de bon sens de l'utilisation du Web", 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 ? Veuillez utiliser la fonction de commentaire. Vous voulez plus de conseils sur la conception et le développement de sites web ? Alors suivez-nous sur TwitterFacebook ou sur notre Newsletter.

Après avoir étudié la conception de jeux et la création littéraire dans la région verdoyante d'Auckland, il s'est spécialisé Sonja Hoffmanndans la conception de sites web et d'applications et leur développement. Elle se concentre sur la ludification et l'exploration de la motivation et de l'expérience des utilisateurs, associées à une passion et une curiosité pour les tendances technologiques.

Articles connexes

Commentaires sur cet article

Ecrire un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont marqués par * .