Dans l'univers du web, il est crucial de comprendre que les utilisateurs ne lisent pas le contenu d’un site comme ils liraient un livre. En réalité, les internautes ne lisent qu’environ 20 % du texte présent sur une page web. En plus de cela, seulement 10 à 20 % d'entre eux atteignent la fin de la page.

Cela signifie que la majorité se contente de survoler l'information.

Dans cet article, issu d’une présentation sur l’UX design que j’ai faite lors d’une conférence sur le design et l’UX à Oslo l’année dernière, je vais vous expliquer comment les utilisateurs parcourent les pages web, pourquoi ils le font de cette manière et comment vous pouvez capter leur attention malgré tout.

Les utilisateurs ne lisent pas, ils scannent : pourquoi ?

Dès lors que l’on parle de comportement sur le web, il faut d’abord comprendre une vérité fondamentale : les utilisateurs ne prennent pas le temps de tout lire. Ils scannent. Pourquoi ?

Les raisons sont multiples, mais elles peuvent être regroupées en plusieurs grandes catégories :

• Surcharge d'information : Chaque jour, les internautes sont confrontés à une masse gigantesque de données et d’informations. Ils ont développé une capacité à scanner rapidement les pages pour trouver l’essentiel.

• Limitation du temps : Nous vivons à l’ère de l’instantanéité. Les visiteurs d'un site web décident en quelques secondes si une page vaut leur temps. S’ils ne trouvent pas rapidement ce qu’ils cherchent, ils partent.

• Comportement adaptatif : Sur Internet, le cerveau fonctionne différemment de lorsqu’il est face à un texte imprimé. Il cherche des repères visuels : titres, mots-clés, images. Il scanne, il ne lit pas ligne par ligne.

Comment le cerveau lit-il en ligne ?

Le cerveau humain a une capacité étonnante à s’adapter. Il est capable de reconnaître des mots même lorsqu’ils sont partiellement déformés, comme dans l’exemple "J4m41s 1l n3 f4ut p3rdre l'3sp01r d4ns l4 v13".

Sur le web, ce principe est poussé encore plus loin. Nous ne lisons pas chaque lettre, mais plutôt la forme générale des mots, en particulier ceux qui nous sont familiers.

Prenons par exemple les publicités que vous voyez sur les réseaux sociaux. 

Elles défilent rapidement, et souvent, votre cerveau enregistre l’essentiel sans que vous ayez à lire chaque mot. 

À l’inverse, une mauvaise application de ce principe serait l’usage abusif d’abréviations ou de termes techniques qui rendraient la compréhension plus difficile et augmenteraient le taux de rebond.

Les différents schémas de balayage des pages web

Le comportement des utilisateurs en ligne varie en fonction de plusieurs facteurs comme la tâche à accomplir, la familiarité avec le site, ou la complexité de la page. Voici les principaux schémas de balayage identifiés :

1. Le pattern "F"

C'est sans doute le schéma le plus répandu. Il a été mis en évidence par des études de suivi oculaire. Les utilisateurs commencent par lire les premières lignes, puis leur regard descend verticalement, faisant des arrêts horizontaux là où leur attention est attirée par des titres ou des points clés.

Prenons l'exemple d'une fiche produit sur un site de e-commerce. Un bon agencement pourrait proposer une grande image du produit en haut, un titre accrocheur, puis des informations clés sous forme de points ou de listes. Ce schéma suit une forme de "F", facilitant le balayage rapide par l'utilisateur. Le F pattern que vous avez sans doute le plus vu sur le web sans vous en rendre compte est celui du résultat de recherche de Google.

2. Le pattern "Z"

Ce modèle suit un parcours visuel en forme de "Z", où les utilisateurs scannent d’abord la ligne supérieure, se déplacent en diagonale vers le coin opposé et terminent sur une ligne horizontale en bas. Ce schéma fonctionne bien pour les pages plus simples, comme les landing pages ou les pages d’accueil, où le design est épuré et centré sur l'appel à l’action en bas à droite.

Un bon exemple de ce pattern est une page d’accueil d'un site où les utilisateurs voient immédiatement un titre accrocheur en haut, une image principale, et un CTA bien visible en bas. Un mauvais exemple serait une page surchargée où l'œil ne peut pas suivre naturellement le parcours attendu.

3. Le pattern "Layer-cake"

Dans ce schéma, les titres et sous-titres sont bien visibles et distincts, permettant aux utilisateurs de scanner rapidement la page et de repérer les sections qui les intéressent. C'est particulièrement efficace pour les articles longs ou les pages à contenu éducatif.

Par exemple, un article expliquant "Comment adopter un mode de vie durable" pourrait être divisé en sections comme "Réduire les déchets", "Favoriser les transports écologiques" et "Choisir des énergies renouvelables". Chaque section serait introduite par un titre bien visible, facilitant la navigation de l’utilisateur.

4. Le pattern "Spotted"

Ce modèle est souvent utilisé sur les réseaux sociaux. Les utilisateurs sautent d’un élément visuel à un autre, cherchant des points d'intérêt, que ce soit des images, des mots-clés ou des éléments mis en avant par des couleurs. Ce schéma convient bien aux plateformes où l'attention de l'utilisateur est particulièrement volatile.

5. Le pattern “Marking”

Ici, les utilisateurs identifient une section ou une partie du contenu qu’ils jugent pertinente et s'y concentrent, en la "marquant" visuellement. Ils ignorent le reste de la page pour se focaliser sur cette partie spécifique. Ce pattern est souvent observé dans les documents techniques ou les fiches produits, où les utilisateurs sont à la recherche de caractéristiques ou de données spécifiques.

Un exemple idéal serait une fiche produit e-commerce avec des détails bien structurés sur les spécifications. Un mauvais exemple serait une fiche produit où les informations importantes sont dispersées, rendant difficile le repérage rapide des données clés.

6. Le pattern "Bypassing"

Dans ce schéma, les utilisateurs ignorent intentionnellement certaines sections de la page qu’ils considèrent comme non pertinentes, sautant directement à ce qui les intéresse. Ils peuvent passer outre des blocs de texte, des publicités ou même des images. Ce comportement est souvent observé dans des pages surchargées ou mal organisées, où l'internaute cherche à éviter tout contenu distrayant.

 Ces schémas de lecture ne sont d’ailleurs pas seulement propre au web, mais à presque tous les autre supports où du contenu est présenté: une affiche, un panneau, une bande dessinée, etc…

Capter l'attention des utilisateurs

Pour réussir à capturer l’attention des visiteurs, il est primordial d’utiliser certaines stratégies efficaces. Voici quelques-unes des approches que je recommande :

1. Raconter une histoire

Le contenu d'une page doit être simple et bien structuré. 

Dès les premières secondes, les visiteurs doivent comprendre la valeur ajoutée du site. Chaque page doit avoir un objectif clair et un message facile à saisir.

Prenons l'exemple d'une startup proposant des outils financiers : si dès l’arrivée sur le site, le visiteur voit un message clair du type "Gérez vos finances facilement et en toute sécurité", il est beaucoup plus susceptible de rester. 

À l'inverse, un site encombré de jargon technique découragera l'utilisateur.

2. Un agencement visuel clair

Un design intuitif, avec des titres bien visibles, des paragraphes courts et des visuels pertinents est crucial. Les images doivent attirer l’œil sans nuire à la clarté du message.

Un bon exemple : celui des articles de magazines comme "National Geographic".

 Les images sont attrayantes, les titres clairs, et les blocs de texte bien délimités. 

En revanche, un site surchargé de publicités et de bannières clignotantes distraira l'utilisateur et réduira sa concentration.

Un autre excellent exemple est celui des pages "FAQ" bien conçues. Elles sont structurées en questions distinctes, souvent regroupées par thématiques. Un mauvais exemple serait une FAQ où toutes les réponses sont mélangées dans un seul long texte sans titres.

3. Des appels à l'action visibles et intuitifs

Tout site web a un objectif : vendre, générer des inscriptions ou être partagé à d’autres personnes. Pour cela, les appels à l’action - souvent référencés de l’anglais “Call to Action” ou simplement “CTA” - doivent être bien visibles et faciles à comprendre.

Un exemple réussi serait un site de dons à une organisation caritative où le bouton "Faire un don" est proéminent et bien placé. 

À l’inverse, un site où le “call to action” est mal placé ou peu visible manquera l’opportunité de convertir les visiteurs.

Comment concevoir des sites web pour communiquer une quantité optimale d’informations tout en facilitant le parcours de l’utilisateur ?

Pour concevoir des sites web optimaux qui communiquent une quantité adéquate d'informations tout en restant simples pour l'utilisateur, il est important de respecter quelques bonnes pratiques de design centrées sur l'expérience utilisateur. Voici un scénario réussi pour la recherche d'informations sur un site web :

1. L'utilisateur a une question.

2. Il trouve facilement la page avec la réponse.

3. Il comprend l'information trouvée.

4. Il fait confiance à l'information.

5. Il sait comment procéder ou n'a pas besoin de plus d'informations.

Les clés d'une bonne expérience utilisateur incluent :

• L'utilisation d'icônes pour guider visuellement et simplifier la navigation, illustrer rapidement le contenu de la phrase qu’il accompagne - il faut se souvenir que le cerveau est fainéant et cherche sans cesse des raccourcis pour accéder à l’information

• Des sections courtes et clairement séparées, avec des titres résumant chaque paragraphe pour faciliter le scan.

• Limitation de la largeur du texte, pour une meilleure lisibilité et rapidité de lecture.

Bonnes pratiques pour les schémas de lecture

1. Inclure les points les plus importants dans les deux premiers paragraphes d'une page. Les internautes sont impatients et veulent rapidement savoir si le contenu est pertinent.

2. Utiliser des titres et sous-titres visibles. Ils doivent ressortir du reste du texte, de manière à ce que les utilisateurs puissent les identifier rapidement.

3. Commencer les titres et sous-titres avec les mots porteurs d'informations clés. Si un utilisateur ne lit que les premiers mots, il doit déjà comprendre l’essentiel de la section.

4. Grouper visuellement de petites quantités de contenu : cela peut se faire en entourant le contenu avec une bordure ou en utilisant un arrière-plan différent.

5. Mettre en gras les mots et phrases importants.

6. Utiliser des liens porteurs d'informations et éviter les termes génériques comme "cliquer ici" ou "en savoir plus". Utiliser des liens significatifs est particulièrement important pour les utilisateurs qui utilisent des lecteurs d'écran, souvent des personnes malvoyantes. 

7. Utiliser des puces ou des numéros pour lister des éléments ou étapes. Cela rend l’information plus digeste.

8. Éliminer le contenu inutile. Couper ce qui n'apporte pas de valeur ajoutée ou qui pourrait alourdir la page.

L'importance du contenu au-dessus de la ligne de flottaison

Le concept du “fold” ne s’applique également pas qu’au web: les journaux ont été parmis les premiers à utiliser ce concept pour attirer l’attention, avec un gros titre et une image qui invite à découvrir davantage et générer l’intérêt.

Les études montrent que l'œil est naturellement attiré vers le coin supérieur gauche de la page. Il est donc judicieux de placer les informations importantes à cet endroit.

Conclusion : penser comme un utilisateur

Il est primordial de concevoir votre site web en pensant à l'utilisateur. Le contenu doit être structuré, clair et engageant dès les premières secondes. En utilisant des schémas de lecture tels que le "F" ou le "Layer-cake", vous augmenterez certainement les chances que vos visiteurs restent sur votre site et accomplissent les actions souhaitées. 

Si vous souhaitez réellement optimiser votre site, appliquez ces conseils pour capter l’attention et améliorer l'expérience utilisateur.