Comment diriger les yeux des utilisateurs sur un site Web

25

Il existe un principe commun en photographie selon lequel une photo doit guider les yeux du spectateur. Cela est souvent accompli avec une ligne qui traverse la photo. Reconnaître la façon dont l'observateur numérisera votre photo est souvent utile pour composer une photo et la façon dont les yeux du spectateur numérisent la photo peut parfois même changer le sens de la photo.

Que peut-on faire dans la conception Web pour diriger les yeux de l'utilisateur à travers le site dans la direction souhaitée sans que l'utilisateur n'ait à chercher les bonnes parties de la page?

Par exemple, vous souhaiterez peut-être que l'utilisateur voit le logo, puis une brève description du site, puis un article. En plus de mettre ces éléments dans une colonne verticale avec un en dessous du suivant et de supprimer tous les autres éléments de la page, comment dirigeriez-vous les yeux de l'utilisateur de l'un à l'autre?

website-design design-principles Computerish
la source
7
Vous pourriez être intéressé par "Eyetracking Web Ergonomie" (2009) par Nielsen & Pernice: useit.com/eyetracking
Jari Keinänen
2
@koiyu je suis allé et j'ai trouvé l'article "F" et j'allais le poster quand j'ai réalisé que vous l'aviez déjà fait. Je ne saurais trop insister sur l'importance de cette habitude de lecture. Les grands designs s'alignent sur ce flux et les mauvais designs vont à l'encontre de celui-ci.
zzzzBov
1
Je suis un peu contre l'eye tracking. Non pas parce que ce n'est pas utile, mais parce que déjà dans tout projet que je voulais faire un simple test d'utilisabilité, la philosophie du patron et de l'entreprise était de faire tout ce qui était le moins cher possible et le plus rapide possible. Je ne crois vraiment pas que dans la majorité de la situation, vous serez en mesure de convaincre d'acheter un système d'eye-tracking et de pouvoir classer correctement les données sans une instruction appropriée du comportement humain / de la psychologie.
Littlemad

Réponses:

8

C'est une question d'équilibre entre la taille, la couleur et l'alignement. Avec l'expérience, vous saurez quoi et quand utiliser ces astuces pour attirer l'attention. Heureusement, sur le site Web, nous pouvons suivre cette attention et il existe de nombreuses études scientifiques à ce sujet, par exemple, il existe de bonnes données sur le site Web de Jakob Nielsen .

À propos de l'eye tracking Je tiens à dire que pour une question de budget, et la réalité, personne ne va payer pour un appareil d'eye tracking, ni même l'utiliser. (Il est déjà difficile de convaincre votre patron au bureau de faire quelques heures de tests d'utilisabilité à n'importe quelle étape du projet ...) Personnellement, je préfère faire des tests d'utilisabilité avec de vraies personnes pour juger de la composition de ma conception Web. Même si cela signifie prendre un ami d'une personne de ma famille et le mettre devant l'écran en posant une question ou en regardant son comportement.

Le suivi des yeux ne vous dit pas si l'utilisateur recherche ce qu'il comprend ou non. S'ils sont frustrés, ils hésitent ou admirent la composition graphique.

Un excellent livre qui peut vous aider dans ce domaine est la chirurgie des fusées simplifiée de Steve Krug

Littlemad
la source
5

Comme koiyu l'a mentionné dans le commentaire, l' eye tracking est ce que vous devriez rechercher. Vous pouvez créer des conceptions avec l'intention de guider les utilisateurs le long d'un chemin, mais la seule façon de vraiment savoir si vous atteignez vos objectifs est de faire une étude de suivi des yeux.

Cela dit, vous pourriez trouver ma réponse utile à la question, Comment attirer l'attention sur un domaine spécifique d'un design? Ce n'est pas exactement la même question, mais c'est proche.

Plus de ressources de suivi oculaire:

Services de suivi oculaire:

Virtuosi Media
la source
0

Je peux penser à deux façons simples de diriger les yeux des utilisateurs sur un site Web:

  1. Utilisez une numérotation évidente sur les éléments de votre page. Vous pouvez le voir dans un certain nombre de pages d'accueil du site, ou vous pouvez vous référer à ce fichier PDF à partir d'un site Web financier (bien que je pense que ce n'est pas vraiment un excellent exemple).
  2. Utilisez des flèches pour diriger l'attention de votre utilisateur. Cela peut être quelque chose comme un organigramme. Je ne peux penser à aucun exemple en ligne pour le moment.
Gan
la source
Le Web n'est pas un support statique. Les flèches ne guident pas les gens. Vous devez les guider avec différentes tailles et couleurs dans un système pondéré.
dkuntz2
Je ne comprends pas. Pourriez-vous élaborer davantage sur «les flèches ne guident pas les gens» et «les guider avec différentes tailles et couleurs dans un système pondéré»?
Gan