S'inscrire |

 
ReV
TEAM
Avatar de ReV
ReV est déconnecté ReV est un Homme 06/04
XP de ReV 555 Nombre total de messages de ReV
---------
  #1 (permalink)  
Vieux 26/03/2011, 21h01
Www Directions visuelles dans le Design Web

Directions visuelles dans le Web Design

L'un des grands secrets dans le design est d'apprendre à guider le regard des utilisateurs. Ce principe est souvent oublié, même par les designers expérimentés. Les directions visuelles permettent de contrôler les mouvements des yeux de l'utilisateur, ce qui peut être effectué en sélectionnant avec attention vos images et en plaçant de manière adéquate (alignement) vos éléments de design.

/** J'ai trouvé ce tutorial aujourd'hui, très simple, et pourtant, j'ai appris des trucs étonnants ! En fait, beaucoup de choses auxquelles je n'aurait pas pensé. Donc je me suis dit, autant en faire profiter d'autres que moi ! Vous pouvez trouver la version originale ici : Visual Direction in Web Design | Webdesigntuts+ **/

Il est déjà bien établi que le mouvement par défaut des yeux sur une page Web (pour une structure LTR - Gauche à droite) est d'en haut à gauche vers le bas à droite :



Cependant, c'est quelque fois assez loin de la réalité, en changeant la disposition des éléments de la page, le designer peut facilement contrôler et forcer le mouvement des yeux sur la page. Par exemple, les yeux vont se déplacer le long de lignes droites ou de pointillés, ou ils vont se déplacer le long de chemins plus compliqués comme par exemple : de petits vers de gros éléments, d'éléments foncés aux éléments clairs, de zones colorées vers des zones sans couleurs, de formes inhabituelles vers des formes classiques, ...

1. Controller la direction avec des images

Les images peuvent facilement contrôler comment les utilisateurs voient votre design, ci-dessous se trouvent des exemples explicites qui peuvent être utilisés comme contenu dans votre design pour guider les visiteurs le long de vos pages :






Bien sûr, les directions pointées par ces images sont vraiment évidentes, cependant beaucoup d'images peuvent indiquer des directions de manière moins évidente :







2. Guider les yeux

C'est l'une des erreurs principale des web designers et des éditeurs de contenu, une règle simple est de jamais faire pointer vos images vers l'extérieure de votre page. Les images, surtout les images avec des visages et donc des yeux, doivent pointer vers le centre de votre design.

Regardez les exemples ci-dessous venant des sites de CNN et de la BBC :




Dans l'exemple de la BBC, les deux images en haut à gauche sont tournées vers l'extérieur de la page. Cela mène l'utilisateur à ne pas voir des informations importantes qui sont normalement disposées le long du chemin de lecture normal :




1. Vous commencez en haut à gauche, par habitude.
2. Vous arrivez sur la première image, elle pointe vers l'extérieur, donc votre regard est dirigé en dehors de la page.
3. Vos yeux commencent à revenir sur la page.
4. Vous voyez la seconde image qui pointe vers l'extérieur, votre regard part une nouvelle fois à l'extérieur de la page.
5. Enfin, votre regard revient vers le centre de la page, cependant, les images ont créées un gros "angle mort" dans votre design, signalé par le "?".

Maintenant, regardez la version corrigée de la page de la BBC :



En regardant cette version, vous verrez que vos yeux ne sortent plus de la page, les visages des personnes regardent vers l'intérieur de la page, ce qui vous aide à regarder dans la même direction.

3. Formulaires

Regardez l'exemple ci-dessous qui montre deux types de disposition pour les étiquettes de formulaire qui peuvent affecter grandement la façon dont les utilisateurs remplissent votre formulaire :



Sur la gauche vous avez des étiquettes au-dessus des éléments de formulaire, ce qui entraine une lecture plus simple et plus rapide du formulaire. C'est simplement parce que cette disposition nécessite deux fois moins de mouvements d'yeux que celle de droite. Les étiquettes organisées comme à gauche, permettent aux utilisateurs de bouger vers la fin du formulaire selon une seule direction, et non plus deux, comme celui de droite.

La disposition ne contrôle pas seulement comment les yeux bougent, mais elle contribue à rendre for design plus facile à utiliser, même d'un point de vue inconscient.

4. Les directions du design

Les éléments qui indiquent l'orientation de votre page influence de manière forte "l'humeur" de votre design, mais prendre une décision volontaire pour orienter vos éléments dans une direction dominante peut avoir une influence importante sur l'atmosphère de votre création.

Les lignes horizontales dans les designs ci-dessous donnent un sentiment de calme, de stabilité et de tranquillité.





Dans le second groupe de designs ci-dessous, le placement en diagonal des éléments renforce le sentiment de mouvement et d'action.





Le troisième groupe de designs a une direction dominante verticale ce qui donne une influence d'ordre assez statique ainsi qu'un sentiment assez formel.





Le même changement de caractère peut être remarqué dans ces photos. Le sujet est le même dans chacune d'entre elles, la direction principale crée une différente atmosphère.





L'accentuation des directions principales dans la première image donne un sentiment d'ordre formel. La seconde image (directions horizontales) semble plus calme et stable alors que la troisième donne plus l'impression d'être active et animée.

Conclusion

Garder toujours à l'esprit comment vous souhaitez que votre audience se sente, choisissez ensuite l'atmosphère de votre design en choisissant une des orientations.

Quand vous êtes amenés à faire des formulaires ou des designs à base de textes, comprenez bien comment vos visiteurs bougent leurs yeux le long du design, ceci devrait augmenter l'accessibilité de votre contenu !
Réponse avec citation
Les 7 membres suivants remercient ReV pour ce message :
TEAM
Avatar de ::ubyk
::ubyk est déconnecté ::ubyk est un Homme 10/04
XP de ::ubyk 158 Nombre total de messages de ::ubyk
Team IK
  #2 (permalink)  
Vieux 27/03/2011, 00h06
::

intéressant en effet. faut-il savoir que l'on parle de fondamentaux. on parle souvent d'ergonomie ou d'agencement typographique vulgairement axé écriture certes pour beaucoup mais on oublie qu'il s'agit également d'esthétisme (!).

n'oublions pas les grilles (css);
n'oublions pas la règle d'or (fibonacci);
n'oublions pas le modulor (design);
n'oublions pas la sémiotique (image);

n'oublions pas ces grandes lignes directrices qui sont, applicables dans leur métier respectif, mais aussi dans le webdesign!

le webesign est très complexe; par définition, ce sont les métiers de la création graphique qui nécessitent les fondamentaux qu'il faudrait apprendre en premier lieu. c'est comme les plans d'une maison qu'il faut maîtriser avant les fondations et les matériaux d'une maison.

c'est très bonne base de discussions, merci rev! tu nous exposes un sujet très important!

Dernière modification par ::ubyk ; 27/03/2011 à 00h11.
Réponse avec citation
TEAM
Avatar de Exta
Exta est déconnecté Exta est un Homme 10/04
XP de Exta 504 Nombre total de messages de Exta
Super Moderateur
  #3 (permalink)  
Vieux 27/03/2011, 00h12
tres bon article merci
Réponse avec citation
ReV
TEAM
Avatar de ReV
ReV est déconnecté ReV est un Homme 06/04
XP de ReV 555 Nombre total de messages de ReV
---------
  #4 (permalink)  
Vieux 27/03/2011, 00h19
Merci pour le commentaire Ubyk !

Je dois t'avouer que je n'ai pas entendu parler de certaines choses dont tu parles :

Citation:
Envoyé par ::ubyk Voir le message
n'oublions pas les grilles (css);
n'oublions pas la règle d'or (fibonacci);
n'oublions pas le modulor (design);
n'oublions pas la sémiotique (image);
En fait, les 3 dernières (je connais bien fibonacci...mais bon je vois pas l'application ici).

Je sens qu'il va falloir se renseigner
Réponse avec citation
TEAM
Avatar de Booster2000
Booster2000 est déconnecté Booster2000 est un Homme 03/03
XP de Booster2000 1 268 Nombre total de messages de Booster2000
| Traducteur |
  #5 (permalink)  
Vieux 27/03/2011, 10h01
+1 pour le ce papier, c'est le genre d'articles que j'adore lire, il y en a pas assez comme ca a mon gout.
Réponse avec citation
TEAM
Avatar de ::ubyk
::ubyk est déconnecté ::ubyk est un Homme 10/04
XP de ::ubyk 158 Nombre total de messages de ::ubyk
Team IK
  #6 (permalink)  
Vieux 27/03/2011, 11h58
::

Citation:
Envoyé par ReV Voir le message
Merci pour le commentaire Ubyk !

Je dois t'avouer que je n'ai pas entendu parler de certaines choses dont tu parles :



En fait, les 3 dernières (je connais bien fibonacci...mais bon je vois pas l'application ici).

Je sens qu'il va falloir se renseigner
fibonacci a élaboré la suite des nombre d'or:
suite de Fibonacci et le nombre d'or

le nombre d'or est très appliqué dans le print ou les réalisations nécessitant la disposition harmonieuse des éléments ou des formes graphiques sur une page. elle donne une dynamique et une disposition intelligente pour orienté le regard sur une composition. elle n'est malheureusement pas mis en avant dans le websdesign. en revanche, du côté outre-atlantique, les designers appliquent de plus en plus cette pratique à en voir les showcases sur le net des best design par exemple.

le modulor a été mis au point par le très célèbre designer architecte "le corbusier" étant basé sur les hauteurs et surfaces harmonieuses d'un intérieur. lui-même basé sur le nombre d'or qui découle lui-même de l'homme de vitruve de vinci. à ratio, on peut l'appliquer dans le webdesign.

en ce qui concerne la sémiotique (image et construction de l'image), voici un lien:
image, sens et pdagogie




tous ces procédés sont très utilisés dans les mises en pages typographiques.
Réponse avec citation
ReV
TEAM
Avatar de ReV
ReV est déconnecté ReV est un Homme 06/04
XP de ReV 555 Nombre total de messages de ReV
---------
  #7 (permalink)  
Vieux 27/03/2011, 12h12
Merci pour ces précision Ubyk Je savais plus que l'on pouvais trouver le nombre d'or par la suite de fibonacci ! J'apprends des trucs tous les jours.

Je vois donc le lien maintenant avec la disposition des documents;
Réponse avec citation
TEAM
Avatar de ::ubyk
::ubyk est déconnecté ::ubyk est un Homme 10/04
XP de ::ubyk 158 Nombre total de messages de ::ubyk
Team IK
  #8 (permalink)  
Vieux 27/03/2011, 12h19
::

Citation:
Envoyé par ReV Voir le message
Merci pour ces précision Ubyk Je savais plus que l'on pouvais trouver le nombre d'or par la suite de fibonacci ! J'apprends des trucs tous les jours.

Je vois donc le lien maintenant avec la disposition des documents;
j'ai mis le lien pour ceux qui souhaitent apprendre le principe
Réponse avec citation
Avatar de gggrrreee
gggrrreee est déconnecté Sexe Non renseigné 08/11
XP de gggrrreee 2 Nombre total de messages de gggrrreee
Nouveau iker
  #9 (permalink)  
Vieux 02/08/2011, 15h06
Merci.
Très intéressant, pour moi qui découvre tout ça.
Je vais aller jeter un œil sur mes pages en construction.
Réponse avec citation
Avatar de yzyfr
yzyfr est déconnecté Sexe Non renseigné 09/11
XP de yzyfr 2 Nombre total de messages de yzyfr
Nouveau iker
  #10 (permalink)  
Vieux 25/09/2011, 21h34
Merci pour ce tuto très intéressant.
On ne soupçonne pas la quantité de choses à prendre en compte pour réaliser un design digne de se nom...
Merci également à Ubyk pour ses précisions.
Réponse avec citation
Réponse

Outils de la discussion

Config des règles de ce forum
Règles de messages
Vous ne pouvez pas créer de nouvelles discussions
Vous ne pouvez pas envoyer des réponses
Vous ne pouvez pas envoyer des pièces jointes
Vous ne pouvez pas modifier vos messages

Les balises BB sont activées : oui
Les smileys sont activés : oui
La balise [IMG] est activée : oui
Le code HTML peut être employé : non
Trackbacks are oui
Pingbacks are oui
Refbacks are oui


A propos d'IK

Infographik alias IK est un forum d'entre-aide dans le domaine de l'infographie numerique
Depuis plus de 10 ans ce forum propose des tutoriaux un espace communautaire francophone.

We need You !

Faire un don permet de régler les frais de fonctionnement du site tel que l'hebergement, le ndd etc...
Faire un don

Fuseau horaire GMT +2. Il est actuellement 21h36.