Impact de l'analyse des yeux sur la hiérarchie visuelle dans la conception UX
Alors que des millénaires d'art, des vases grecs aux chapelles italiennes, ont façonné notre compréhension de la beauté, la technologie relativement récente derrière le suivi oculaire ajoute une nouvelle dynamique à notre perception visuelle du monde. Plus précisément, cette nouvelle science passionnante nous aide à mieux comprendre - et à mieux concevoir - des sites Web à la fois efficaces et esthétiques.
Le design Web (en tant qu'art visuel) suit nombre des mêmes règles que les formes d'art plus traditionnelles. Dans cet article, nous exposerons brièvement l’importance de l’organisation visuelle, puis nous expliquerons comment les résultats du suivi oculaire peuvent améliorer la présentation des interfaces Web.
Créer une organisation visuelle
Il n’est pas surprenant que l’aspect d’un site Web influe sur son succès, mais il est important de déterminer les raisons de ce succès. Dans son journal Communication avec la hiérarchie visuelle , Luke Wroblewski, auteur et directeur principal de la conception de produits chez Yahoo !, explique que la présentation visuelle d'une interface Web est essentielle pour:
Orientation
Une interface bien conçue peut guider les utilisateurs d’une action à l’autre sans se sentir envahissante. Indépendamment de ce que vous pensez de leurs pratiques commerciales, il ne fait aucun doute que Uber est un exemple de site Web incroyablement lisse mais structuré. Les propositions de valeur sont en haut du rouleau, suivies d’un curseur amusant pour en savoir plus sur les différentes options de voiture et pour finir avec la prochaine étape logique: trouver des manèges dans votre ville.
la communication
En comparant des informations différentes des informations, l'interface utilisateur peut former des liens dans l'esprit de l'utilisateur, en communiquant des messages sans rien dire. Regardez le site Web de conception populaire Abduzeedo : les grandes catégories sont en haut, le contenu en vedette au centre et les catégories détaillées en bas de page.
Créer un impact émotionnel
Ne faites pas l'erreur de penser que votre site Web est simplement un outil mécanisé. Les sites Web ont le potentiel de créer des liens émotionnels, et si ce n'est pas le cas, la volonté de vos concurrents. En fait, les gens peuvent être plus enclins à pardonner les défauts de votre interface si vous produisez un résultat positif. réponse émotionnelle . MailChimp est un exemple parfait de site avec une interface utilisable, légère et amusante à utiliser.
L'oeil humain prévisible
Parfois, il semble que vos yeux ont leur propre esprit. Des années d’évolution nous ont donné l’instinct de repérer les objets et les mouvements que nous jugeons importants, qu’il s’agisse d’une promenade sexy à travers la rue ou d’un ours en peluche faisant de la publicité. Alors que le poids relatif que nous accordons à ce qui est important peut varier d'une personne à l'autre, les mécanismes sur lesquels ils se comportent sont constants. À grande échelle, la majorité des gens suivent les mêmes tendances lors de la consultation d’une page Web.
Parmi ces tendances, il y en a deux dont nous discuterons en détail. Dans un article sur les principes visuels , Alex Bigman, rédacteur de conception pour 99Designs, montre comment, pour les cultures qui lisent de gauche à droite, ces deux modèles sont les plus courants - et les plus utiles - lors de la conception d'un site Web.
Le premier, le F-Pattern, est principalement utilisé pour le texte (mais peut être adapté à d'autres fins). Le second, le Z-Pattern, peut être utilisé pour n'importe quelle disposition visuelle. Nous allons expliquer les différents avantages et inconvénients pour chacun ci-dessous.
F-Pattern
Le F-Pattern est la tendance visuelle qui se dégage des pages fortement chargées de textes, généralement des blogs, des sources d'informations, des articles, etc.
Face à un bloc de mots, la plupart des lecteurs numériseront d'abord une ligne verticale sur le côté gauche du texte, recherchant généralement des mots-clés ou des points d'intérêt dans les phrases initiales du paragraphe. Finalement, le lecteur trouve quelque chose qu'il aime et commence à lire normalement, formant des lignes horizontales. Le résultat final est quelque chose qui ressemble aux lettres F ou E.
Jakob Nielson, du Nielson Norman Group, a mené une étude de lisibilité sur 232 utilisateurs analysant des milliers de sites Web. De ses recherches, il a enregistré ce qu'il croit être les implications pratiques du motif F:
- Les utilisateurs liront rarement chaque mot de votre texte.
- Les deux premiers paragraphes sont les plus importants et devraient contenir votre crochet.
- Lancez des paragraphes, des sous-titres et des puces avec des mots clés attrayants.
Comme toujours, le coin supérieur gauche est le plus important, car c'est là que commencent toutes les cultures de lecture de gauche à droite. L'utilisateur lit généralement horizontalement à travers l'en-tête, alors voici un bon endroit pour une barre de navigation et / ou un appel à l'action. Ensuite, l'utilisateur analyse verticalement le côté gauche jusqu'à trouver le contenu qui l'intéresse. Enfin, l’utilisateur se termine sur le côté droit de la page, un lieu idéal avec un appel à l’action ou une publicité. Ne laissez pas la barre latérale submerger le contenu.
Mais le F-Pattern n'est pas un modèle - en réalité, ce n'est pas une pratique exacte, mais plutôt un guide informel compilé à partir des tendances de la majorité des utilisateurs. Gardez cela à l'esprit parce que le F-Pattern perd son efficacité après les premières lignes du F.
Kickstarter utilise une présentation de carte pour afficher les projets de fonctionnalités et ne pas devenir visuellement ennuyeux après les 500 premiers pixels.
D'autre part, iZettle adopte une approche plus conventionnelle du F-Pattern sur leur page d'accueil. Cependant, ils parviennent à éviter un aspect structuré en superposant la copie principale («Développez votre entreprise avec iZettle») et l’appel à l’action sur une grande image de fond. Nous considérons cela comme le strict minimum pour adapter ce modèle de lecture à la disposition de votre interface.
Z-Pattern
De plus, le Z-Pattern est le modèle le plus simple et le plus universel, couramment utilisé sur toute page Web basée sur du texte. Le lecteur scanne d'abord horizontalement à travers le haut, descend et retourne à gauche puis scanne à nouveau horizontalement à travers le bas.
Il est important de comprendre le Z-Pattern polyvalent , car il répond aux exigences essentielles du site Web, telles que la hiérarchie, la stratégie de marque et les appels à l'action. Sa beauté réside dans sa simplicité et sa disposition idéale pour les sites axés sur un appel à l'action. Cependant, pour un contenu plus complexe ou excessif, le motif Z peut être trop simple.
Pensez que le Z-Pattern convient à votre page? Voici quelques bonnes pratiques pour optimiser les avantages:
- Arrière - plan - Conservez l'arrière-plan auquel il appartient: en arrière-plan. Vous ne voulez pas distraire votre lecteur.
- Point # 1 - Comme point de départ, c'est généralement là que vous voulez placer votre logo.
- Point n ° 2 - Alors que l'appel à l'action principal devrait intervenir plus tard, voici un bon endroit pour un appel à l'action secondaire, ponctuant une barre de navigation horizontale. (Un joli curseur graphique ou une image aidera à séparer le haut et le bas de la page, encourageant le lecteur à rester sur le chemin prévisible du motif Z.)
- Point n ° 3 - C’est un endroit agréable pour attirer l’attention sur d’autres liens, ou bien pour orienter la vue de l’utilisateur vers l’objectif final: le point n ° 4.
- Point n ° 4 - En tant que "ligne d'arrivée", c'est l'endroit idéal pour votre appel à l'action principal.
La première chose que vous voulez faire est de hiérarchiser les éléments de votre page pour que vous en connaissiez les plus importants et les moins importants. À partir de là, il ne s'agit que d'une simple question d'attribution aux "points chauds" appropriés.
De plus, le motif Z peut être répété et étendu sur toute la page. Il suffit de regarder comment Evernote zig-zags par des appels à l'action et des points de vente.
DropBox adopte une approche visuellement plus simple de ce motif zig-zag en supprimant les images d'arrière-plan. Au lieu de cela, davantage de fonctionnalités sont intégrées dans la mise en page, car un appel à l'action "En savoir plus" permet de connecter chaque section du motif de bobinage au fur et à mesure que votre œil descend la page. Cela aide également les lecteurs avertis à cliquer sur la page suivante sans avoir à lire toute la copie en premier.
Vue en prévision
Un design d'interface de qualité doit être comme une main invisible qui guide le lecteur à la vitesse de la pensée. L'important résultat des tendances F-Pattern et Z-Pattern est que vous pouvez placer votre contenu le plus important lorsque le lecteur le "trouvera" naturellement, au lieu d'essayer de le forcer à le regarder.
La subtilité est un grand avantage pour toute mise en page, et ces modèles peuvent faire la différence entre suggérer quelque chose à votre lecteur et le pousser dans sa gorge.
Image vedette, utilise image de l'oeil humain via Shutterstock.