Attirer le regard de l'utilisateur

1. Objectifs

   • Expliquer le rôle de la hiérarchie visuelle
   • Utiliser la taille, le contraste, la couleur, l'espace et la position pour guider le regard
   • Reconnaître les parcours de lecture en F et en Z
   • Éviter les pièges : bannières, mouvement excessif et surcharge
   • Vérifier une page avec le test du flou et le test des cinq secondes
   • Attirer l'attention de manière honnête et utile

1. Présentation

   • Quand une page s'ouvre, personne ne la lit de haut en bas, mot après mot. L'utilisateur la parcourt rapidement et cherche ce qui l'intéresse. Si l'essentiel ne se voit pas, il peut passer à côté, même si l'information est bien présente.
   • Attirer le regard ne consiste pas à ajouter des couleurs ou des effets. Il s'agit de décider ce qui compte le plus et de le rendre évident. Cette leçon prolonge celle sur la facilité d'utilisation, et prépare la suivante sur la navigation.

• Nous continuons avec BiblioCampus. Pour les activités, créez le dossier 09-attirer-regard/ dans votre dépôt GitHub ui-ux-design-bts.

1. La hiérarchie visuelle

   • La hiérarchie visuelle est l'organisation des éléments d'un écran selon leur importance. Elle suggère à l'utilisateur ce qu'il doit regarder d'abord, puis ensuite :

• Avant de dessiner un écran, répondez à cette question : si l'utilisateur ne devait retenir qu'une seule chose, laquelle serait-ce ?

1. Les moyens d'attirer le regard

   • Plusieurs moyens permettent de créer cette hiérarchie. Nous les illustrons ci-dessous :

1. Exemple 1 : la taille et la graisse

   • Un texte plus grand ou plus gras semble plus important. Encore faut-il que tout ne soit pas grand et gras :

1. Exemple 2 : la couleur et le contraste

   • Une couleur réservée à l'action principale ressort d'autant plus qu'elle reste rare. C'est aussi pourquoi le contraste compte tant, comme nous l'avons vu dans la leçon sur l'accessibilité :

1. Exemple 3 : l'espace

   • Ajouter de l'espace autour d'un élément revient souvent à le mettre en avant, sans ajouter le moindre effet :

1. Exemple 4 : la position et le parcours du regard

   • Sur écran, le haut de la page et le début des lignes reçoivent souvent plus d'attention. Des études d'oculométrie de Nielsen Norman Group ont notamment décrit un parcours en F sur les pages riches en texte :

• L'utilisateur peut suivre un autre parcours selon la tâche et l'écran, notamment sur mobile. Ne cherchez pas à appliquer ces schémas à la lettre : servez-vous-en pour réfléchir à l'emplacement du message.

1. Exemple 5 : le regroupement

   • La loi de proximité (Gestalt) indique que des éléments proches sont perçus comme liés. Un mauvais espacement peut donc tromper l'œil :

1. Exemple 6 : les images

   • Les images attirent facilement l'attention. Choisissez-les pour aider à comprendre le message, pas seulement pour remplir l'espace :

1. Exemple 7 : le mouvement

   • Notre œil réagit facilement au mouvement. Utilisé à bon escient, il confirme une action. Utilisé en continu, il devient une gêne et peut poser un problème d'accessibilité :

1. Exemple 8 : la cécité aux bannières

   • Les internautes apprennent à ignorer ce qui ressemble à de la publicité. On parle de cécité aux bannières. Une information importante doit donc éviter d'en adopter l'apparence :

1. Exemple 9 : tout réunir

   • Voici comment ces principes peuvent transformer un écran d'accueil :

1. Attirer sans manipuler

   • Mettre en avant l'action utile est légitime. Faire croire qu'il n'existe qu'un seul choix, ou masquer un refus, relève d'une conception trompeuse (dark pattern) :

1. Vérifier votre hiérarchie

   • Deux tests simples permettent de vérifier si le message principal se voit bien. Commencez par le test du flou :

1. Activité 1 : prédire l'ordre de lecture

   • Sans réfléchir longtemps, numérotez les éléments dans l'ordre où votre regard les rencontre :

• Vérifier : le plus souvent, le titre du plat est vu en premier, puis le bouton, puis les détails. Comparez vos réponses : quels éléments créent cet ordre ?
• L'information sur le prix est-elle assez visible pour un étudiant qui surveille son budget ?

1. Activité 2 : le test des cinq secondes

   • Montrez l'écran de l'activité 1 ou l'un de vos écrans à cinq personnes pendant cinq secondes. Demandez-leur ce qu'elles ont vu en premier, l'action possible et une information retenue.

• Vérifier : vos résultats comportent les réponses réelles et une conclusion pour chaque question.

1. Activité 3 : réaliser le test du flou

   • Faites une capture de la page d'accueil de trois sites que vous connaissez. Floutez-les avec un outil d'image, ou plissez simplement les yeux.
   • Pour chacune, notez ce qui domine, puis comparez avec l'objectif de la page.
   • Vérifier : chaque réponse indique si l'élément dominant aide réellement l'utilisateur.

1. Activité 4 : choisir un message principal

   • Pour chaque page, choisissez l'élément à mettre en avant et justifiez votre choix :
     • la fiche d'un produit dans un site marchand ;
     • la page d'une alerte de sécurité sur un compte ;
     • la page d'accueil d'un restaurant universitaire à midi ;
     • la page de résultat d'un examen.
   • Vérifier : par exemple le prix et l'achat ; le problème et l'action de sécurité ; le menu et l'affluence ; le résultat lui-même. Votre réponse doit partir de la tâche de l'utilisateur.

1. Activité 5 : refaire une page surchargée

   • Redessinez cette page. L'objectif principal est de faire inscrire une équipe avant la date limite :

• Vérifier : votre maquette présente un titre clair, la date limite, l'action d'inscription et une couleur principale. Le test du flou doit faire ressortir le titre et le bouton.

1. Activité 6 : hiérarchiser des boutons

   • Sur un écran de paiement, classez ces actions et proposez un style : « Payer 15 DT », « Retour au panier », « Annuler la commande », « Aide ».
   • Vérifier : « Payer 15 DT » est l'action principale ; « Retour au panier » reste secondaire ; « Annuler » et « Aide » restent visibles sans se confondre avec le paiement.
   • Pourquoi deux boutons principaux sur le même écran poseraient-ils un problème ?

1. Activité 7 : réécrire pour le balayage

   • Réécrivez ces phrases pour placer l'information importante au début :
     • « Nous avons le plaisir de vous informer que votre candidature a été acceptée. »
     • « En raison de travaux, et afin d'assurer votre sécurité, la salle 2 est fermée jusqu'à lundi. »
     • « Il est rappelé aux étudiants qu'ils doivent rendre leurs livres avant le 30 juin. »
   • Vérifier : par exemple « Candidature acceptée », « Salle 2 fermée jusqu'à lundi » et « Livres à rendre avant le 30 juin ».

1. Activité 8 : repérer les manipulations

   • Pour chaque cas, indiquez s'il s'agit d'une mise en avant utile ou trompeuse :
     • Un bouton « Enregistrer » plus visible que « Annuler ».
     • Une case d'assurance payante cochée par défaut.
     • Un minuteur annonçant une fausse fin d'offre.
     • Un message rouge signalant une vraie erreur de saisie.
     • Le bouton de refus des cookies caché derrière plusieurs écrans.
   • Vérifier : les cas 1 et 4 sont des mises en avant utiles ; les cas 2, 3 et 5 sont trompeurs.

1. Activité 9 : évaluer une page réelle

   • Choisissez une page importante d'une application et remplissez une grille comme celle de la leçon.
   • Proposez trois corrections, puis dessinez la page corrigée.
   • Vérifier : les corrections sont liées à une observation, et la nouvelle hiérarchie sert bien l'objectif de la page.

1. Activité 10 : déposer votre travail sur GitHub

   • Regroupez vos réponses dans 09-attirer-regard/README.md et ajoutez les images de vos maquettes, puis envoyez le tout :

git add 09-attirer-regard
git commit -m "Ajoute la leçon sur l'attraction du regard"
git push

• Vérifier : le fichier README.md et vos images apparaissent bien sur la page GitHub du dépôt.

1. Erreurs fréquentes

1. À retenir

   • La hiérarchie visuelle indique ce qu'il faut regarder d'abord.
   • La taille, le contraste, la couleur, l'espace, la position, le regroupement, l'image et le mouvement peuvent guider le regard.
   • Les parcours en F et en Z sont des tendances, pas des règles fixes.
   • L'important doit ressortir : si tout est mis en avant, plus rien ne se distingue.
   • Le test du flou et le test des cinq secondes permettent de vérifier rapidement une page.
   • Attirer l'attention doit aider l'utilisateur, jamais le tromper.

Attirer le regard, ce n'est pas crier plus fort que les autres éléments : c'est faire silence autour de ce qui compte.