Aujourd'hui, nous allons discuter de l'importance de diriger intentionnellement l'attention des utilisateurs sur les parties de la page qui le méritent le plus. Nous discuterons de la propension des gens à lire une page et de la manière dont nous pouvons maîtriser cette tendance.
Nous examinerons également un produit génial qui vous permettra d’obtenir un aperçu rapide de la façon dont un utilisateur typique visualisera vos conceptions afin que vous puissiez commencer à améliorer vos mises en page immédiatement.
Prédire les mouvements oculaires de l'utilisateur
Établir une hiérarchie visuelle consciente et intentionnelle est quelque chose dont je discute constamment sur Design Shack. Être capable de structurer une page de manière à ce que l'utilisateur reçoive les informations que vous souhaitez est essentiel au succès du graphisme.
Chaque fois que vous créez quelque chose, vous devez analyser en permanence où et comment vous dirigez l'attention de l'utilisateur. Si vous négligez cette étape, le résultat peut être qu'un utilisateur typique emprunte un chemin plutôt indésirable que vous avez configuré de manière non intentionnelle. Par exemple, quelque chose dans le pied de page de votre site pourrait attirer l’attention de l’utilisateur avant tout, puis le faire disparaître de la page, ce qui entraînerait une perte d’attention de la personne et la progression plutôt rapide.
Plus vous prenez des décisions conscientes pour considérer la hiérarchie visuelle, mieux vous maîtriserez ce principe. Vous apprendrez à prendre instinctivement des décisions qui maximisent le message que vous essayez de transmettre et à encourager les interventions, le cas échéant.
En fin de compte, toutefois, l'intuition est une chose délicate. Le simple fait de "ressentir" n'est pas toujours le pari le plus sûr, surtout si ce concept est nouveau pour vous. Alors, comment pouvez-vous être sûr que votre conception est visualisée comme vous le souhaitez?
Astuce: vous êtes une source peu fiable
La première étape du processus consistant à déterminer comment un utilisateur peut lire votre conception consiste à analyser comment vous le lisez. Un exercice dans lequel je m'engage généralement est de regarder quelques secondes à l'extérieur de mon moniteur pour éclaircir mon esprit, puis de regarder en arrière le motif et de laisser mes yeux s'égarer là où ils vont. Réfléchissez bien à ce qui, dans la conception, attire votre attention et pourquoi. Cela vous donnera une idée décente des éléments sur lesquels les gens tendent à graviter.
Malgré le fait que je pense que vous devriez effectuer cette tâche de manière répétée tout au long du processus de conception pour chaque projet de mise en page dans lequel vous vous lancez, la vérité sans surprise est que cette expérience est fortement compromise par vous, concepteur.
Quand je peins une pièce, je ne vois que des erreurs
Lorsque vous visualisez quelque chose que vous avez créé personnellement, vous n'avez presque aucune chance de le voir comme tout le monde. Cela ne m'est jamais plus évident que lorsque je peins une pièce de ma maison.
Une fois que j'ai fini avec la salle, je fais un pas en arrière et regarde autour de moi pour regarder mon travail. Inévitablement, c'est le moment où je suis très découragé. Mes yeux ne voient pas une pièce joliment peinte, mais sautent d'un endroit à l'autre, en ciblant les endroits où je sais que j'ai commis la plus infime erreur: ce point où la peinture murale saignait légèrement jusqu'au plafond ou où la garniture a un léger goutte à goutte.
En fait, je ne suis pas un peintre horrible, je suis simplement plus enclin à voir les petites erreurs parce que je sais qu'elles sont là. Quand quelqu'un d'autre entre dans la pièce, il voit une pièce joliment repeinte et doit chercher sans relâche pour trouver les erreurs que je ne peux pas ignorer.
Quelques semaines plus tard, je me suis habitué à la pièce peinte. Quand je rentre, je ne regarde pas autour et ne remarque pas les erreurs, en fait, je regarde à peine la qualité du travail ou même la couleur de la peinture. Au lieu de cela, il y a simplement un changement subtil dans l'ambiance ou la sensation lorsque je pénètre dans la pièce. C’est bien entendu le but ultime du projet, j’étais simplement incapable de le vivre correctement tant que je n’étais pas détaché du travail.
Retour à la conception Web
Ne craignez rien, il y a vraiment un sens à cette histoire au vent. Tout comme moi avec la pièce peinte, vous ne pouvez pas voir et analyser honnêtement un dessin lorsque vous le créez. Même si vous êtes fier du travail et que vous n'y trouvez aucun inconvénient, vos yeux auront toujours tendance à regarder vos composants préférés: ce logo que vous avez passé des heures à perfectionner, la texture que vous êtes si fier d'avoir créée. à partir de zéro ou le titre que vous avez soigneusement conçu avec un crénage de pixel parfait.
Votre implication personnelle fait de vous un mauvais exemple de la façon dont un utilisateur lira un dessin. Alors, quelle est l'alternative alors?
Méthodes d'essai
La meilleure façon de voir comment un utilisateur type verra un dessin est d’attirer l’attention de certaines personnes. Si vous travaillez dans un bureau, vous serez tenté de demander à votre entourage, mais les concepteurs en général ont tendance à regarder un dessin différemment. À moins que ce ne soit votre public, vous avez toujours besoin d'un avis extérieur.
Évidemment, la meilleure façon de procéder consiste à créer un groupe de discussion, à configurer un logiciel / matériel de suivi oculaire et à effectuer autant de tests que possible pour voir comment les utilisateurs réagissent à la conception. Ensuite, vous collectez les données, établissez une moyenne, créez des cartes thermiques et vous avez une idée parfaite de la façon dont quelqu'un lira votre dessin.
Vous voulez que je fasse quoi!?
Je peux déjà voir ce que vous pensez. C'est un peu ridicule n'est-ce pas? Sauf si vous concevez une nouvelle page d'accueil pour une entreprise de plusieurs millions de dollars, il est impossible que vous ayez le temps, le budget ou les ressources nécessaires pour suivre les conseils donnés ci-dessus pour chaque projet. La simple suggestion de le faire est totalement risible!
La bonne nouvelle est que vous pouvez obtenir des résultats similaires sans tous les tracas. Comme les gens ont tendance à se concentrer sur certains éléments, nous pouvons utiliser un logiciel pour prédire avec assez de précision comment une personne peut lire le dessin. Donc, fondamentalement, certaines personnes intelligentes enseignent à une application comment afficher une page comme un humain, puis vous montrez votre conception à l'application pour recevoir des commentaires.
Rencontrez Feng-Gui
Cela fait un moment que je cherche une solution décente pour suivre l'œil simulé sans succès. Puis j'ai entendu Paul Boag mentionner un produit qui semblait vraiment être ce que je cherchais: le Feng-Gui.
Feng-Gui permet une série impressionnante d’outils destinés à vous aider à analyser votre conception d’un point de vue parfaitement objectif. Si jusqu'ici vous avez été légèrement intimidé par toute cette discussion, ne vous inquiétez pas, ces outils sont si faciles à utiliser que tout le monde peut les utiliser.
Analyser un dessin
Pour voir un exemple du type d'informations que vous pouvez obtenir de produits tels que Feng-Gui, jetons un coup d'œil à la page d'accueil Apple. Après tout, si tout se passe bien, ce devrait être l’incroyable équipe de design d’Apple. Voici la page dans son état actuel:
Une fois la capture d'écran obtenue, nous pouvons télécharger le fichier sur le tableau de bord Feng-Gui présenté ci-dessous. Il existe quelques commandes de base pour ajuster les paramètres et un outil pour sélectionner certaines parties de l’image et les désigner comme des «zones» uniques. La photo ci-dessous est prête à fonctionner. Il suffit de cliquer sur le bouton «Analyser».
La carte thermique
Une fois que vous avez cliqué sur le bouton Analyser, Feng-Gui décolle et fait son travail. En une minute ou deux, vous disposez de quelques ressources extrêmement utiles. Le premier et certainement l’un des plus utiles est un bon vieux heatmap. Cela permet de voir immédiatement quelles parties de votre conception attirent le plus l’attention.
Jetez un coup d’œil à notre exemple de projet ci-dessus et nous pouvons immédiatement tirer des conclusions intéressantes. Tout d’abord, le titre annonçant l’iPhone 4S a définitivement attiré l’attention. Cela est parfaitement logique, car nous avons tous appris à attirer instinctivement les grands titres en tant que source d'informations importante.
Un autre concurrent majeur est une zone située à droite de la photo prise par les héros des trois iPhones. Cela constitue un élément de compréhension très précieux. La zone mise en surbrillance n'est pas tant l'iPhone lui-même mais l'image du téléphone: le visage d'une petite fille. Rappelez-vous toujours que les visages sont magiques lorsqu'il s'agit d'attirer l'attention de l'utilisateur. Nous ne pouvons tout simplement pas nous en empêcher, quand il y a un visage sur une page, nos yeux sont attirés par elle.
Remarquez comment la hiérarchie semble prendre forme. Nous voyons que la majeure partie de notre attention est dirigée vers le titre, celui-ci est ensuite déplacé un peu vers la photo du produit héros et est ensuite abaissé par une image colorée d’un iPod Touch dans le pied de page. Cette page semble vraiment bien lire de haut en bas.
Nous pouvons voir cette même information d'une manière différente en cliquant sur l'onglet Opacité. Ici, tout a été noirci et rétabli conformément aux valeurs de la carte thermique. Cette vue vous donne vraiment une image parfaite de ce qu'un utilisateur peut absorber après un rapide coup d'œil sur la page (qui correspond généralement à tout ce que vous obtenez).
Le complot du regard
Comme je l'ai déjà indiqué à plusieurs reprises, il est non seulement important de savoir ce que voit l'utilisateur, mais également dans quel ordre il voit ces informations. Cela vous aide à construire la page de manière à maximiser la compréhension et la conservation des éléments importants.
Le Feng-Gui répond à ce besoin sous la forme d'une parcelle de regard. Cela montre la meilleure estimation du logiciel sur la manière dont un utilisateur peut lire la page. Le résultat semble assez fou, ce qui est bien, car nos mouvements oculaires ont tendance à être assez sporadiques lors de la lecture d'une page.
Il est important de noter que votre inclination naturelle est de lire une page selon un motif en “z”: de gauche à droite, de haut en bas. Cependant, en tant que concepteurs, nous pouvons casser cette inclination naturelle. Notez que dans l'exemple ci-dessus, le premier point AF est situé en haut à droite de la page. Il y a certainement un schéma de va-et-vient notable, bien que vos yeux essayent de revenir à ce qui est naturel. Selon Feng-Gui, chaque point de focalisation sur cette image dure «environ 200 ms lors de la lecture d'un texte linguistique et 350 ms lors de la visualisation d'une scène». Ainsi, même s'il peut sembler que toute cette activité visuelle prendrait un moment, en réalité cela se passe en quelques secondes!
En pensant à ces résultats, nous pouvons encore une fois dire que la page Apple est assez bonne. Nous commençons par le titre, sautons aux héros du produit, baissons les yeux sur le pied de page, puis commençons à lire les caractères les plus fins sur la page. C'est une progression parfaitement logique, ce qui indique que Feng-Gui se comporte plutôt bien.
Est-ce que cela aide vraiment?
Pour beaucoup de designers, cela va sembler être un exercice inutile. Après des années en tant que designer professionnel, beaucoup d’entre nous auraient pu parvenir à des conclusions similaires par leurs propres moyens. Cependant, je vous exhorte à ne pas négliger la valeur de produits comme celui-ci.
Pour commencer, tous les concepteurs ne sont pas conçus pour penser de la sorte. L'utilisation de simulateurs de suivi du regard dans votre flux de travail standard vous aidera à vous rappeler d'analyser de manière critique une conception pour déterminer si elle répond à vos objectifs. De plus, même si vous avez la théorie en bas, il est vraiment agréable de voir un point de vue objectif. Un logiciel ne sera jamais aussi performant qu'un groupe de discussion composé de cinquante utilisateurs, mais c'est certainement une bonne alternative pour ceux qui manquent de temps et d'argent.
Enfin, que vous ayez ou non besoin d'un outil pour vous aider à voir ce que voit l'utilisateur, vous pouvez parier que votre client n'est pas aussi bien formé (sinon, pourquoi auraient-ils besoin de vous?). Cela rend les cartes thermiques, les tracés de regard, etc. similaires, extrêmement utiles pour créer des rapports client qui justifient vos décisions de conception. Armés de ceux-ci, vous aurez l'air infiniment plus professionnel dans une présentation! Vous pouvez même regrouper un tel rapport en tant que complément optionnel pour vous aider à augmenter vos bénéfices.
Conclusion
En résumé, la mise en page est beaucoup plus complexe que de simplement disposer les éléments de manière esthétique.Il s’agit de structurer volontairement un message et une expérience utilisateur répondant à un ensemble d’objectifs établis. Trop souvent, les concepteurs insèrent des éléments là où ils semblent correspondre, sans aucune réflexion sur la manière dont ils pourraient perturber le flux d'informations sur la page.
Des outils tels que Feng-Gui sont une aide précieuse dans votre quête pour apprendre à structurer vos conceptions de manière logique et efficace. Avez-vous essayé un autre service similaire? Comment ça se compare? Faites le nous savoir dans les commentaires!
Crédits d'image: Micky, Karpacious, laboratoire d'interaction City University