Création d’une charte graphique à partir d’une grille de Bataille Navale

14/09/2007

Ce billet est une traduction de l'article intitulé Revenge of the Pixels: The Battle for Screen Real Estate publié par Bryan Eisenberg.

Créer des sites web est un réel défi. Contrairement à la majorité des medias, l'intégrité du modèle conçu est menacée par le fait qu'il existe dans un médium fluide. En d'autres termes, vouloir donner à votre site une certaine mise en forme ne garantit en rien que ce sera bel et bien le cas. En effet, les différents navigateurs, résolutions, tailles d'écran, calibrages d'écrans et de systèmes d'exploitation, sont autant de facteurs qui déforment le résultat perçu.

A force d'expérience j'ai pris une très bonne habitude au fil des ans : apprendre l'art du compromis. Mais trouver un compromis doit se faire intelligemment, et de manière responsable.

L'un des sujets les plus litigieux lors de la conception de sites web est souvent le choix de la situation de chaque élément sur la page, et de la quantité d'espace qu'ils vont occuper. Ceci est particulièrement vrai dans les cas où l'équipe est régie par des relations politiques (entendez : par des relations de pouvoir entre collègues, qui est la personne la plus importante de l'équipe, etc.).

Dans le domaine de l'imprimé, par exemple pour les catalogues, les professionnels évaluent souvent le coût et les bénéfices au centimètre carré. Nous allons adopter une technique semblable.

Au cours des années nous avons développé une méthode qui connaît un grand succès, il s'agit de la Grille de Bataille Navale. Cela consiste en une page que l'on divise pour en faire une grille de lignes horizontales et verticales de la même taille à peu près. (J'expliquerai bientôt pourquoi cette approximation.) Cette technique est principalement utilisée pour générer une discussion au sein de l'équipe. Cliquez sur l'image miniature pour voir un exemple de grille, ici celle pour Dell.com.

Comment fonctionne la grille de Bataille Navale?

Admettons que vous soyez en train de regarder une page avec une résolution de 1024x768. Utilisez Photoshop ou tout autre logiciel graphique équivalent (ou demandez à votre graphiste de le faire pour vous) et quadrillez la page. Dessinez des lignes verticales sur l'écran afin de former dix colonnes de "A" à "J".

Puis dessinez des lignes horizontales sur la page. La première ligne horizontale doit se trouver juste en dessous la barre de navigation du haut. (Faites le comme ça parce que vos visiteurs se concentrent déjà inconsciemment sur le centre de la page, appelée "fenêtre active". C'est pour cette raison que je qualifiais les rangées d'approximativement égales précédemment.) Après avoir créé cette ligne, ajoutez des lignes tous les dix pixels, en les numérotant de 1 à 10.

Dans Photoshop, ajoutez un calque pour pouvoir superposer à la grille différentes couleurs (d'une opacité de 30%, juste assez pour qu'elles soient visibles tout en laissant clairement transparaître les éléments derrière sur la page). Ensuite, commencez à attribuer des valeurs aux différents espaces sur la grille.

Les valeurs que vous attribuerez à chaque espace coloré ne doivent pas être considérées comme absolues, ce sont des valeurs relatives, et doivent être utilisées à titre indicatif seulement. Vous pouvez suivre la démarche que je donne en exemple. Par souci de simplicité, j'ai établi ces valeurs d'après des études de mouvements oculaires, de composition de la page, et de physiologie de la vision.

L'espace auquel j'attribue la plus haute " valeur » est la " fenêtre active" (voir la capture d'écran miniature). Comme l'a souligné Jakob Nielsen dès 2000, "Pendant presque sept ans mes études ont dévoilé le même comportement des usagers : lorsqu'ils découvrent une nouvelle page, les utilisateurs regardent directement le contenu et ignorent les espaces de navigation."

Toutes les études des mouvements de l'oeil auxquelles j'ai participé ont permis d'observer le même comportement de la part des usagers. Il est également important de comprendre la physiologie humaine et la manière dont l'oeil visionne une page. N'importe quel artiste qui a étudié les techniques de composition connaît la règle des tiers.

C'est une bonne base pour comprendre la manière dont l'œil sélectionne naturellement ce qu'il regarde en premier, afin de donner une place stratégique aux éléments sur lesquels vous voulez attirer l'attention naturellement.

C'est pour la même raison qu'il est très important de tester vos gros titres puisqu'il s'agit tout naturellement de la première chose que tout le monde remarque sur votre page. Soignez-les !

Comment se servir de la Grille de Bataille Navale ?

Prenez une capture de la page en question avec une résolution de 1024x768. Superposez la grille dessus. Ensuite mettez vous d'accord avec les autres membres de votre équipe sur les valeurs qui seront attribuées à chaque zone différente. Passez en revue les éléments qui se trouvent dans la "zone immobilière à forte valeur ajoutée". Il s'agit en bref de bien savoir déconstruire la taille, les motifs, et le positionnement des éléments afin d'assurer qu'ils aient un impact maximal sur le visiteur.

Pour chaque élément constitutif du style, il faut vous poser les questions suivantes :

• Combien de place occupe t'il ? Devrait il en prendre plus ou moins ?
• Quels appels à la prise d'initiative figurant sur la page? Sont-ils mis en valeur ?
• La page ne s'étouffe t'elle pas sous son propre contenu? Certains éléments ne feraient-ils pas mieux d'être déplacés pour assurer un maximum d'efficacité ?
• Les éléments visuels sont-ils susceptibles de plaire à différentes sortes de goûts et personnalités ?

Maintenant jetez à nouveau un coup d'oeil à la grille de Bataille Navale Dell.com. Que pensez vous de l'agencement des éléments ? Certaines zones de la page sont elles mal utilisées?

Les Limites : Veuillez vous servir avec discernement de cette méthode, qui ne prétend en rien être scientifique. Cependant elle est toujours bien plus efficace que de construire un site web sans aucune stratégie de design. En fonction du modèle que vous avez choisi, vous pouvez orienter la manière dont les visiteurs réagissent à votre page, en utilisan :

• Des couleurs vives et contrastantes : Peut-être voudrez-vous mettre dans la colonne de droite une figure remplie d'un motif monochrome par exemple ou avec un minimum de couleur comparé au reste du design. Si c'est le cas, essayez de placer un fond d'ombre colorée pour mieux faire ressortir la figure.
• Une image forte ou une image bien cadrée : Les résultats d'études du mouvement de l'oeil révèle que les visiteurs ne consacrent quasiment pas de temps aux images "au naturel" (par exemple un groupe d'hommes d'affaires en train de se serrer la main dans une salle de conférences). Inversement, une seule image formée d'un gros plan du visage de quelqu'un peut attirer beaucoup d'attention. Si vous utilisez cette technique, gardez à l'esprit que la personne dans la photo doit regarder l'action ou le contenu sur lequel vous voulez attirer l'attention. N'utilisez jamais des photos dans lesquelles la personne regarde l'utilisateur en face, cela le perturbera et le déconcentrera.
• Différentes largeurs de colonnes : Pour les personnes qui lisent de gauche à droite, la fenêtre active commence juste après la première colonne de gauche. S'il n'y a pas de colonne de navigation, assurez vous de laisser assez d'espace "tampon" entre le navigateur et la fenêtre active pour permettre au regard des visiteurs de bien cibler les éléments.
• Du texte plus gros pour les titres principaux et des versions plus grandes des éléments visuels essentiels. Assurez vous que le document soit formaté afin de pouvoir facilement être visualisé d'un rapide coup d'oeil. Vos gros titres et titres secondaires doivent ressortir par rapport au corps du texte.

Attention : Il n'est pas conseillé d'annoncer à l'un de vos collègues que vous avez coulé son porte-avions lorsque vous réduisez ou enlevez un de leurs éléments favoris.