web-dev-qa-db-fra.com

Mise en page - recherche faisant autorité sur le flux naturel de texte, de tableaux et d'images

J'ai essayé, sans succès, de trouver une recherche sur la meilleure façon de mettre en page des pages d'une manière qui convient au flux d'un lecteur typique. Autrement dit, comment ils regardent naturellement une page, où leurs yeux coulent par défaut, etc.

Je recherche une recherche faisant autorité, pas seulement un blog en ligne ou similaire (sauf si la personne qui l'écrit est un expert reconnu dans ce domaine).

[MODIFIER]

Je serais plus intéressé par les différences (le cas échéant) entre les différents canaux. Par exemple. Serait-ce différent pour un livre par opposition à un site Web?

Les différences pour différents groupes linguistiques seraient également utiles. Par exemple. Si la recherche montre qu'une voie est préférée pour les groupes de langues de lecture de gauche à droite, l'inverser serait-il la meilleure approche pour les langues de lecture de droite à gauche?

3
Little Eden

Il n'y a pas une seule façon dont les gens regardent une page. Ce que vous demandez est un peu comme "quelle est la meilleure voiture". Ça dépend. Si vous recherchez un cas spécifique, essayez de trouver des cartes thermiques de suivi des yeux liées à cette situation.

Cependant, il y a quelques choses qui affecteront les utilisateurs et peuvent être utilisées comme directives approximatives.

Quel est le plus visible?

Il y a une raison pour laquelle tous les en-têtes sont plus gros et plus audacieux. Ils créent des blocs plus grands et plus de contraste. Cela attire l'œil. Sûr les mêmes lignes; une image se démarquera du texte (et vice versa) car il s'agit d'un autre type de visuel. Et bien sûr, un peu de couleur dans une mer de gris attirera également l'œil. Tout dépend de ce contraste!

Et si quelque chose bouge, nous le remarquerons beaucoup plus rapidement. Vous ne savez jamais si c'est une fenêtre contextuelle vous indiquant que le téléchargement est terminé, ou si c'est secrètement un tigre dans votre moniteur qui veut vous tuer. Probablement ce dernier, alors restez vigilant!

Exemples:

directives de contraste WCAG basé sur les normes ISO et ANSI.

De nombreux articles sur la théorie de la Gestalt tels que celui-ci .


Rapide! Concentrer!

Si quelqu'un nous montre un objet, nous le regarderons directement pour obtenir la mise au point de l'objet le plus rapidement possible. Ensuite, nous laissons nos yeux darder pour recueillir plus d'informations sur l'objet. Un objet peut être une feuille de papier, un écran, une fenêtre sur cet écran ou même un objet plus petit (comme une fenêtre contextuelle) dans cet écran. Fondamentalement, tout ce qui est présenté comme nouveau attire notre attention.

Exemples: aucun auquel je peux penser en ce moment. Donc celui-ci est sans doute retiré de mes fesses. Mais considérez la logique; nous ne pouvons voir que net au milieu de notre vision, et nous devons voir ce qui est quoi avant de pouvoir décider quoi faire avec le nouvel objet.


Nous avons été formés pour regarder dans certains modèles.

Dans (presque?) Toutes les sociétés occidentales, nous lisons le texte en haut à gauche en bas à droite. Donc, étant donné une page de texte, nous suivrons cette direction. Si vous lisez dans une société/langue de droite à gauche, comme l'arabe, vous commencerez bien sûr à lire en haut.

Exemples:

Norman Nielsen: modèle en forme de F pour la lecture de contenu Web

Norman Nielsen: l'attention horizontale se penche vers la gauche


Pouvons-nous le reconnaître?

Si une image est reconnaissable, comme un visage, nous allons parcourir les points clés que nous avons appris importants et nous dire quelque chose sur ce que nous regardons. Pour un visage qui signifie regarder les yeux, la bouche, le nez, les oreilles. Pour une voiture, une calandre (parce que cela ressemble à un visage), des roues, etc.

Cela fonctionne donc pour les grandes catégories d'articles sur un site, comme "marteau, tournevis, vis", mais pas tant pour les choses qui se ressemblent, comme "vis 25 mm, vis 30 mm" et autres.

Exemples:

https://www.youtube.com/watch?v=faMmrU6dyX

https://www.youtube.com/watch?v=1rAl9BiCtKQ


Qu'est-ce que je regarde actuellement?

Même si deux choses peuvent être tout aussi perceptibles en termes de contraste et d'animation, cela ne signifie pas qu'elles sont les mêmes aux yeux du spectateur. Si une liste (par exemple, la barre des questions connexes) est actualisée, je ne la remarquerai peut-être pas, car mon attention se porte sur la question actuelle que je lis. Mais si je passe ma souris sur un menu, et qu'il se dilate ... bon sang, mes yeux regardent ça! Ce sont de nouvelles choses proches et probablement liées à ce qui m'intéresse actuellement!

Exemple: https://www.youtube.com/watch?v=vJG698U2Mvo

3
PixelSnader

La raison pour laquelle vous avez échoué est probablement parce que la recherche qui existe indique qu'il n'y a pas de flux universel. Les yeux des gens sautent partout sur la page. Tout dépend de ce qui attire leur attention en premier.

La plupart des recherches de ce genre Nielsen Norman Group indiquent un flux en forme de F, mais il s'agit de recherches du début des années 2000 si fortement influencées par la configuration principale de la journée qui avait la majorité de la configuration fonctionnelle dans en haut à gauche suivi des titres des principaux articles.

Cela est également fortement influencé par l'endroit où les utilisateurs commenceront à lire. Dans l'ouest, c'est traditionnellement le coin supérieur gauche, mais il y a des groupes linguistiques qui commenceront en haut à droite. Soyez conscient de votre public et de son parti pris culturel.

3
Ralph Marchant