Le flux visuel guide le spectateur à travers le document de manière à mettre en évidence tous les éléments importants et rien ne vient détourner la vision ou amener le spectateur à perdre le sens de la pièce. Utiliser des éléments de flux évidents, tels que des flèches ou des chiffres, est le moyen le plus courant d’utiliser le flux, mais il existe d’autres types d’éléments qui peuvent être utilisés ou utilisés à mauvais escient pour que les lecteurs se dirigent vers un chemin spécifique. Les étapes de ce didacticiel vous montreront des exemples de flux bon et mauvais et vous aideront à apprendre le vocabulaire de flux visuel dans la conception.
Qu'est ce que le flux visuel?
Le flux visuel peut être obtenu de plusieurs manières:
- Flèches
- Images séquentielles ou éléments de texte
- La perspective
- Dégradés
- Changements de taille
- Courbes
- Mouvement en images
- Visages - surtout les yeux
Les images suivantes vous montreront quelques erreurs courantes dans le flux de pages Web et comment les corriger.
02 de 07Le texte occidental coule de gauche à droite
Si vous avez grandi en lisant une langue occidentale, vous avez l'habitude de penser que le texte doit se déplacer de gauche à droite. Ainsi, lorsque l'œil parcourt une ligne de texte, il se déplace de gauche à droite.
Dans l'image ci-dessus, la cascade coule de droite à gauche et le texte remonte la cascade. Puisque nous savons tous que les chutes d'eau tombent, il y a un décalage dans la direction du flux d'eau avec le flux du texte. L'œil du spectateur se déplace dans la mauvaise direction pour lire le texte.
03 de 07Votre texte doit correspondre aux images
Dans ce cas, l'image a été inversée afin que le texte coule dans le même sens que l'eau. Tous les éléments entraînent le regard du spectateur avec le flux d'eau et le flux de texte.
04 de 07De gauche à droite égale à rapide
Le cheval sur cette photo va de droite à gauche, mais le texte est anglais et donc de gauche à droite. L'impact visuel de la course de chevaux dans une direction ralentit le rythme de l'ensemble du document car il va dans une direction différente de celle du texte.
Dans les cultures occidentales, parce que nos langues se déplacent de gauche à droite, nous en sommes venus à associer une direction visuelle de gauche à droite comme avancée et rapide, tandis que de droite à gauche est plus lente et en arrière. Lorsque vous créez une mise en page avec une connotation de vitesse, souvenez-vous de ceci - et faites en sorte que vos images bougent dans le même sens que le texte.
05 de 07Ne forcez pas le regard du spectateur à ralentir
Lorsque le cheval et le texte vont tous deux dans la même direction, la vitesse implicite est augmentée.
06 de 07Regarde les yeux dans les photos Web
De nombreux sites Web avec des photos font cette erreur - ils ont mis une photo d'une personne sur la page, et la personne est à la recherche une façon du contenu. Cela peut même être vu sur le site Web About.com Web Design dans l'ancien design.
Comme vous pouvez le constater, ma photo est placée à côté d’un texte. Mais je regarde loin de ce texte, j'ai presque le dos tourné. Si vous voyiez ce langage corporel entre deux personnes dans un groupe, il serait facile de supposer que je n'aime pas la personne à qui je suis voisine (dans ce cas, le bloc de texte).
De nombreuses études de suivi oculaire ont montré que les personnes voient des visages sur des pages Web. Et des études connexes ont montré que lorsqu’on regarde des images, les gens suivent alors inconsciemment leurs yeux pour voir ce qu’ils voient. Si une photo de votre site regarde au-delà des limites du navigateur, vos clients le verront ensuite, puis cliquez sur le bouton Précédent.
07 de 07Les yeux dans n'importe quelle photo doivent faire face au contenu
Dans le nouveau design de About.com, la photo est un peu meilleure. Maintenant, mes yeux sont plus orientés vers l'avant et il y a une légère indication que je regarde à ma gauche - où se trouve le texte.
Une photo encore meilleure pour cette position serait celle où mes épaules étaient également inclinées vers le texte. Mais c'est une bien meilleure solution que la première photo. Et, pour les situations où l'image sera à droite du contenu ainsi que à gauche, cela pourrait être un bon compromis.
N'oubliez pas non plus que si les images de visages captent le plus l'attention, il en va de même pour les photos d'animaux. Par exemple, dans cet exemple de disposition, mes chiens regardent à gauche, mais l'image est bien alignée. Donc, ils cherchent en dehors de la page. Cette disposition serait améliorée si je changeais l'orientation des chiens pour qu'ils regardent au centre de l'écran.
