Comment diriger les yeux des utilisateurs sur un site Web

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?

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

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:

• Eye Tracking: meilleure façon de tester la convivialité d'une application riche
• Lignes directrices pour la conception de formulaires Web: une étude révolutionnaire
• Une étude de suivi des yeux révèle 12 tactiques de site Web
• Une question StackOverflow sur la configuration de votre propre tracker oculaire avec une webcam

Services de suivi oculaire:

• GazeHawk
• SimpleUsability
• UserCentric
• UserVision

Voici un petit conseil: incluez une image d'une personne regardant ou pointant vers votre objet cible (par exemple un produit, un bouton d'abonnement). Voici un exemple d'une annonce, mais j'ai vu la même tactique sur les pages Web:

(Source: http://www.grokdotcom.com/2007/10/04/how-a-pretty-face-can-push-visitors-away/ )

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.