• 8 heures
  • Moyenne

Ce cours est visible gratuitement en ligne.

course.header.alt.is_video

course.header.alt.is_certifying

J'ai tout compris !

Mis à jour le 08/10/2018

Maintenez l’attention

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

Avez-vous déjà cherché longtemps votre stylo ou vos lunettes alors qu’ils étaient sous votre nez ? Avez-vous déjà passé de looooongues minutes à trouver un rayon particulier dans un supermarché ?

Ce chapitre va vous expliquer pourquoi.

Généralités sur l’attention

Tout d’abord avant de commencer, je vous propose de faire ce petit test rapide et ludique.

Comptez le nombre de passes entre les joueurs en blanc dans cette vidéo :

Alors ? Avez-vous vu tout ce qu’il y avait à voir ? :-)

Autre vidéo qui se joue de votre attention, je vous laisse regarder (c’est en anglais mais vous allez tous pouvoir comprendre) :

C’est la même chose lorsque vous concevez une interface, vous présentez un certain nombre d’informations sur vos écrans. Mais sont-elles réellement toutes perçues ?

Tout dépend de la façon dont vous allez envisager les capacités attentionnelles limitées de vos utilisateurs.

Tout d’abord, l’attention est la capacité à se concentrer sur un ou plusieurs éléments présents dans l’environnement. Notre attention est nécessairement limitée. Nous ne pouvons en effet pas raisonnablement nous concentrer en même temps sur tous les stimuli suivants : la personne qui parle devant nous, l’horloge qui défile juste au-dessus, l’oiseau qui chante au loin, la sensation de faim, la posture de notre corps, le bruit des voitures qui passent à côté, etc.

Notre attention est donc un réservoir limité qui ne peut accueillir qu’un nombre limité d’informations à la fois. C’est ce que nous appelons l’attention sélective.

Pour ce faire, et afin de pouvoir se concentrer sur un ensemble limité d’informations, nous filtrons l’information.

Nous appliquons donc des filtres pour orienter notre attention. Et ces filtres sont déterminés par notre interprétation du monde : nos modèles mentaux.

Par exemple, vous arrivez sur un site marchand, vous décidez d’acheter un produit, mais vous ne trouvez pas le bouton “ajouter au panier”. Vous le cherchez partout sur la page. Or, il s’avère que (fantaisie du concepteur ?) il n’y a pas de bouton pour accéder au panier, mais un lien Web. Vous vous attendiez à trouver un bouton, et puisque vous avez appliqué un filtre “bouton” à partir de votre modèle mental, vous n’avez pas pu prendre pas en compte les liens pour mettre un produit dans le panier.

En tant qu’UX designer, nous devons connaître les différents filtres de nos utilisateurs. Comment faire ? C’est simple, il faut que vous connaissiez leurs habitudes d’usage.

L’attention est sensible aux distractions

Notre attention est très sensible à la distraction. Notre niveau d’attention varie bien entendu en fonction des capacités de chacun et de nos conditions physiques et environnementales : fatigue, heure tardive, environnement bruyant…

Il faut le prendre en compte dans vos designs en essayant au maximum de limiter les sources de distraction et de guider l’attention de vos utilisateurs vers le but à réaliser.

Faites le test de l’effet Stroop :

Ce test nous montre qu’il existe deux types de processus cognitifs :

  • les processus automatiques, comme la lecture. Ce sont des processus qui sont automatisés et qui nécessitent très peu de ressources cognitives.

  • les processus contrôlés, comme la dénomination des couleurs. Ces processus sont coûteux car ils demandent un effort mental pour être activés.

Dans le cas de l’effet Stroop, il est difficile de dénommer les mots car nous avons d’abord la tendance “naturelle” à lire les mots. Il faut donc, avant même de dénommer la couleur, inhiber le processus de lecture. Et cela est très coûteux d’inhiber un processus automatique.

C’est donc cela qui provoque l’effet de distraction, comme l’exemple suivant :

Page d’accueil de C Discount
Page d’accueil de Cdiscount

La page d’accueil de Cdiscount présente énormément d’informations qui attirent l’attention. Tout est fait ici pour que vous achetiez autre chose que ce que vous étiez venu chercher au départ. Les catégories de produits sont accessibles, mais peu lisibles par rapport aux promotions du moment

Page d’accueil de El Naturalista
Page d’accueil de El Naturalista

Un design simple et surtout bien ordonné, permet d’attirer tout de suite l’attention de vos utilisateurs sur les produits.

Comment maintenir l’attention de vos utilisateurs ?

Veillez à être bien lisible

Nous avons vu dans la partie 1 comment proposer des interfaces lisibles (chapitre 2) et bien organisées (chapitre 3). Accordez du soin à ces aspects de lisibilité et d’organisation de l’interface pour guider l’œil de l’utilisateur.

Mettez en valeur les informations réellement importantes

Votre utilisateur arrive sur votre page. Qu’est-il venu chercher ?

Il va falloir le guider pour qu’il arrive le plus rapidement possible à son objectif.

Le mieux, est de proposer un call-to-action, c’est-à-dire une action à effectuer, dès son arrivée.

Le site Airbnb propose tout de suite de remplir le formulaire pour rechercher un logement à réserver. Le site étant connu, il n’a pas besoin d’expliquer en quoi consiste son service.

Page d'accueil du site Airbnb
Page d’accueil du site Airbnb

Le site ci-dessous (MailChimp) doit expliquer ce que son service apporte. Mais au lieu de lister l’ensemble de ses fonctionnalités et de ses avantages, il en dit peu et se contente de donner envie aux utilisateurs d’en lire plus.

Page d'accueil de Mailchimp
Page d'accueil de Mailchimp
Page d’accueil de MailChimp

Répétez les informations importantes

La page d’accueil du site Gites de France propose des hébergements en gîtes. On y voit six manières d’accéder à des annonces :

  • Un menu qui propose des séjours thématiques, des bons plans et des idées séjour,

  • Un call-to-action pour rechercher un séjour précis (lieu, dates, capacité),

  • Une recherche géographique visuelle par région,

  • Une recherche géographique textuelle par département,

  • D’autres propositions : locations d’exception, nouveaux hébergements, week-ends...

Page d'accueil du site Gites de France
Page d’accueil du site Gites de France
Zoning de la page d'accueil du site Gites de France
Zoning de la page d’accueil du site Gites de France

Cette page n’hésite donc pas à proposer à ses utilisateurs différentes manières de démarrer une recherche d’hébergement sur le site. Ce qui est particulièrement remarquable c’est qu’ils proposent des logiques de recherche différentes, ce qui permet aux personnes ayant différents buts de s’y retrouver.
Par exemple, on peut vouloir partir dans une région mais sans savoir exactement quel département choisir, ou bien à l’inverse on peut avoir une idée très précise du lieu et des dates auxquelles on veut partir. Ou encore, certains utilisateurs commencent à prévoir leurs vacances et n’ont pas d’idée, ils vont pouvoir flâner sur le site qui va leur proposer des hébergements auxquels ils n'auraient pas pensé.

En résumé

Vous êtes maintenant au clair sur le fait qu’il ne suffit pas de présenter une information pour qu’elle soit perçue. Notre attention est un réservoir qui ne peut accueillir qu’un nombre limité d’informations à la fois. Nous appliquons donc des filtres pour rechercher uniquement les informations pertinentes. Il faut donc bien connaître vos utilisateurs et leurs habitudes.

Un design simple et surtout bien ordonnée, permet d’attirer l’attention de vos utilisateurs sur les informations pertinentes. Il faut bien guider l’œil de vos utilisateurs en mettant en valeur les informations réellement pertinentes. Et éventuellement répéter les mêmes informations sous des formes différentes.

Exemple de certificat de réussite
Exemple de certificat de réussite