Fermer

avril 23, 2024

Modèle en forme de F et comment les utilisateurs lisent —

Modèle en forme de F et comment les utilisateurs lisent —


On lit rarement sur le web. Nous scannons principalement. Il s’agit d’une stratégie fiable pour trouver rapidement ce dont nous avons besoin lorsque nous sommes confrontés à plus d’informations que nous ne pouvons en gérer. Mais scanner signifie aussi que nous avons souvent ignorer les détails clés. Ceci est non seulement inefficace, mais peut également être très préjudiciable à votre entreprise.

Explorons comment les utilisateurs lisent (ou numérisent) sur le Web et comment nous pouvons empêcher les modèles d’analyse nuisibles.

Cet article est une partie de notre série en cours sur modèles de conception. C’est aussi une partie à venir de la vidéothèque de 10h sur Modèles de conception d’interface intelligente 🍣 et le prochaine formation UX en direct aussi. Utiliser du code OISEAU pour économiser 15 % de réduction.

Modèles d’analyse sur le Web

L’un des modèles de numérisation les plus courants est le Motif en forme de F. Les utilisateurs commencent en haut à gauche, lisent quelques lignes, puis commencent à numériser verticalement. Mais ce n’est pas le seul modèle d’analyse disponible sur le Web. Être conscient des différents modèles est la première étape pour mieux aider les utilisateurs naviguer dans votre contenu.

Différents modèles de numérisation, y compris le modèle en forme de F
Différents modèles décrivent la manière dont les utilisateurs analysent le contenu sur le Web. Le motif en forme de F est probablement le plus connu. Par Nemanja Banjanin. (Grand aperçu)

Différents modèles décrivent la manière dont les utilisateurs analysent le contenu sur le Web. Le motif en forme de F est probablement le plus connu.

  • Modèle F
    Les utilisateurs lisent d’abord horizontalement, puis lisent de moins en moins jusqu’à ce qu’ils commencent à numériser verticalement. Les premières lignes de texte et les premiers mots de chaque ligne reçoivent plus d’attention. Cela s’applique également aux interfaces LTR, mais le F est inversé.
  • Modèle de gâteau en couches
    Les utilisateurs parcourent de manière cohérente les titres, avec des sauts délibérés dans le corps du texte entre les deux. Le moyen le plus efficace de numériser des pages et de trouver les détails clés du contenu.
  • Modèle de coup de foudre
    Les utilisateurs sont souvent des « satisfaisants », recherchant ce qui est assez bon, pas assez exhaustif. Dans les résultats de recherche, ils se concentrent souvent sur un seul résultat.
  • Modèle de tondeuse à gazon
    Dans les tableaux, les utilisateurs commencent dans la cellule supérieure gauche, se déplacent vers la droite jusqu’à la fin de la ligne, puis descendent jusqu’à la ligne suivante, en suivant le même schéma.
  • Motif tacheté
    Sauter de gros morceaux de texte et se concentrer sur des modèles. Cela se produit souvent lors d’une recherche lorsque les utilisateurs recherchent des mots, des formes, des liens, des dates spécifiques, etc.
  • Modèle de marquage
    Les yeux se concentrent au même endroit lorsque la souris défile ou qu’un doigt glisse. Plus courant sur mobile que sur ordinateur.
  • Modèle de contournement
    Les utilisateurs sautent délibérément les premiers mots de la ligne lorsque plusieurs lignes commencent par le même mot.
  • Modèle d’engagement
    Lire l’intégralité du contenu, mot par mot. Cela se produit lorsque les utilisateurs sont très motivés et intéressés. Fréquent chez les personnes âgées.

Balayage en forme de F et manque de rythme

Sur le web, on discute souvent du pli, et s’il existe bel et bien, ça n’a vraiment pas d’importance. Comme l’a dit Christopher Butler : «la longueur n’est pas le problème – le manque de rythme l’est.

Le pli traversant le milieu de l'écran, l'attention des utilisateurs étant située dans la partie inférieure de l'écran.
Le pli existe, mais généralement ça n’a pas vraiment d’importance. Par Christophe Butler. (Grand aperçu)

Le travail principal d’un designer est de attirer l’attention intentionnellement. La numérisation est une attention partielle. La lecture est une attention concentrée. Un écran sans rythme intentionnel perdra l’attention lors de sa numérisation. Un avec rythme contrôlé non seulement retiendra l’attention, mais elle l’approfondira.

Considérez la numérisation en forme de F comme un comportement de repli de l’utilisateur si la conception ne les guide pas suffisamment bien à travers le contenu. Alors évitez-le chaque fois que vous le pouvez. Donnez au moins aux utilisateurs des points d’ancrage vers lesquels se déplacer Numérisation en forme de Eet au mieux, dirigez leur attention vers les sections pertinentes avec Numérisation de Layer-Cakes.

Diriger l’attention et fournir des points d’ancrage

Un bon formatage peut réduire l’impact de la numérisation. Pour structurer l’analyse et guider la vue d’un utilisateur, ajoutez des titres et des sous-titres. Pour l’engagement, alternez les tailles, l’espacement et les motifs. Pour les pages de destination, alternez les points d’intérêt.

Les utilisateurs passent 80 % du temps à consulter la moitié gauche d’une page. Ainsi, lorsque vous structurez votre contenu, gardez à l’esprit que l’attention horizontale se penche vers la gauche. C’est également là que vous souhaiterez peut-être positionner la navigation pour faciliter l’orientation.

Une capture d'écran montrant l'attention des utilisateurs est concentrée dans la moitié gauche de l'écran, où un grand nombre de listes déroulantes agissant comme des filtres en haut
Où les utilisateurs regardent avec un grand nombre de listes déroulantes agissant comme des filtres en haut. Du recherche sur le suivi oculaire par NN/g. Grand aperçu)

En général, c’est une bonne idée de regrouper visuellement de petits morceaux de contenu connexe. Pour proposer des ancres, pensez titres à chargement frontal avec des mots-clés et les points clés – cela aidera les utilisateurs à comprendre rapidement ce qui les attend. L’ajout de visuels utiles peut également donner aux utilisateurs des points d’ancrage.

Une autre façon de guider les utilisateurs à travers la page consiste à ajouter quelques accents visibles pour guider l’attention. Vous aurez besoin de titres et de sous-titres visibles et bien structurés qui se démarquent des autres contenus de la page. En fait, en ajoutant sous-titres tout au long de la page pourrait être la meilleure stratégie pour aider les utilisateurs à trouver des informations plus rapidement.

Contenu riche en données comme les grandes tables complexes nécessitent une attention et des soins supplémentaires. Pour aider les utilisateurs à conserver leur position lorsqu’ils se déplacent sur la table, laissez les en-têtes flotter. Ils fournissent un point d’ancrage quel que soit l’endroit où les yeux de votre utilisateur se concentrent et facilitent la visualisation et la comparaison des données.

Points clés à retenir

  • Les utilisateurs passent 80 % de leur temps à regarder la moitié gauche d’une page.
  • Ils lisent horizontalement, puis passent au contenu ci-dessous.
  • La numérisation est souvent inefficace car les utilisateurs manquent de grandes parties du contenu et ignorent des détails clés.
  • Bon formatage réduit l’impact du F-scanning.
  • Ajouter un titre et des sous-titres pour une analyse structurée.
  • Afficher les mots-clés et les points clés tôt dans vos titres pour améliorer la numérisation.
  • Pour les fiançailles, tailles alternatives, espacement, motifs.
  • Pour les pages de destination, points d’intérêt alternatifs.
  • Visuellement groupe petit des morceaux de contenu connexe.
  • Garder en-têtes flottants dans des tableaux de données volumineux et complexes.
  • Ajouter visuels utiles pour donner aux utilisateurs des points d’ancrage.
  • Horizontal l’attention se penche à gauche: privilégiez la navigation haut/gauche.

Ressources utiles

Rencontrez les modèles de conception d’interface intelligente

Si vous êtes intéressé par des informations similaires sur l’UX, jetez un œil à Modèles de conception d’interface intelligentenotre Cours vidéo de 10h avec des centaines d’exemples pratiques tirés de projets réels — avec une formation UX en direct plus tard cette année. Tout, des méga-listes déroulantes aux tableaux d’entreprise complexes, avec 5 nouveaux segments ajoutés chaque année. Accédez à un aperçu gratuit.

Modèles de conception d’interface intelligente
Rencontrer Modèles de conception d’interface intelligentenotre cours vidéo sur la conception d’interfaces et l’UX.

100 modèles de conception et exemples réels.
Cours vidéo de 10h + formation UX en direct. Aperçu gratuit.

Merci beaucoup pour votre soutien à tous – et bonne conception ! 🎉🥳

Éditorial fracassant
(il, ouais)




Source link