RECHERCHER UN KITGRAPHIQUE

auteur: categorie: mot clé: item #:  
graphismes et web design

Respecter les standards

  • Pas de textes soulignés : sur le web, un mot ou une expression soulignée est un lien. N'utilisez jamais le soulignement dans un autre but. Jouez plutôt sur la couleur, sur la taille ou sur le gras et l'italique.
  • Des colonnes étroites : l'oeil se fatigue s'il doit parcourir des kilomètres pour suivre le texte. Vos colonnes doivent faire 15 cm de large au maximum. Des colonnes de 10 cm sont idéales.
  • Des textes lisibles : ce conseil à l'air stupide. On voit malheureusement énormément de sites qui proposent du texte jaune sur fond gris, par exemple. Le texte le plus lisible et le moins fatigant est le texte noir sur fond blanc. Vous pouvez vous éloigner légèrement de ce standard à condition de toujours garder un bon contraste entre le fond et le texte.
  • Oubliez les gadgets : animations flash, gifs animés et autres gadgets n'apportent rien à votre site. Ils fatiguent les yeux et distraient les visiteurs de votre véritable contenu. On se moque éperdument de savoir qu'on est le 300ème visiteur du jour sur votre site depuis le 2 janvier 1980. Les compteurs sont truqués sur la plupart des sites et tout le monde le sait.
  • Une taille de texte confortable : beaucoup d'internautes ont une vue basse ou moyenne. Les sites utilisant des caractères microscopiques sont fatiguants.
  • Un affichage rapide : les visiteurs sont pressés. Ils s'impatientent très, très vite. Vos pages ne doivent pas peser plus de 30 à 50 Ko tout compris (avec les images et les animations). Ce point est absolument essentiel.
  • Des titres de page : Où suis-je ? D'où vins-je ? Où vais-je ? Evitez à vos visiteurs de se perdre dans ces questions philosophiques ! Donnez leur des repères !
  • Des sous-titres et une mise en page aérée : Segmentez vos informations en chapitres clairement identifiés. Vos visiteurs doivent pouvoir choisir ce qu'ils veulent lire ou zapper.
  • Des menus simples : vos visiteurs ne passeront pas plus de 10 secondes à essayer de comprendre l'architecture de votre site. La norme consiste à placer :
    - Les chapitres principaux en haut de la page
    - Les sous chapitres à gauche de la page
    - Les renvois, les publicités, à droite de la page
    - Les références (bibliographie) en bas de la page
    En respectant ces habitudes, vous faciliterez la navigation sur votre site.
  • Des caractères standards : pour être sûr que vos visiteurs pourront voir vos pages comme vous les voyez, vous devez absolument rester dans les grands standards de caractères : arial, times, verdana.

Quelques principes de mise en page

La communication écrite existe à grande échelle depuis plus de 500 ans. Cette longue expérience a permis de dégager des règles universelles qui s'appliquent toujours et pour tout le monde. Pourquoi diable le web s'obstine-t-il à les ignorer ???

La mise en page doit être conçue comme une pyramide. Cette pyramide va fonctionner comme un entonnoir qui va "aspirer" les lecteurs dans vos pages.

  • Le titre : Court, explicatif, accrocheur. 50% des lecteurs quitteront votre page si le titre est absent ou peu intéressant.
  • Le chapeau : Situé sous le titre, ce texte court (en caractère gras ou de taille moyenne) permet aux lecteurs de vérifier que la page correspond bien à leurs attentes. Il doit résumer l'essentiel de votre page en 2 à 5 lignes. Ce texte doit donner envie à vos visiteurs de lire le reste du texte !
  • Les paragraphes : Vous devez développer une seule idée par paragraphe. Une fois votre texte terminé, demandez-vous si les paragraphes ne pourraient pas être ré-ordonnés de façon plus logique. N'hésitez pas à supprimer les paragraphes qui n'apportent rien à votre propos.
  • Les sous-titres : Capter l'attention, c'est bien. La conserver, c'est mieux. Le sous-titre vous permet de rattraper un lecteur qui allait quitter la page.

En plus des éléments indispensables énoncés ci-dessus, vous pouvez utiliser des jokers ! Ces attrape-lecteurs vont vous permettre de gagner quelques points d'audimat :

  • Les images : Illustratives, explicatives, humoristiques, surprenantes : tous les coups sont permis !!! Vous devez intégrer au moins une image par page pour reposer l'oeil de vos lecteurs et capter leur intérêt. Attention au poids !!! Vous devrez trouver des images de petites dimensions parfaitement lisibles. Plus une image est simple, moins elle "pèsera" lourd et mieux elle jouera son rôle d'illustration.
  • Les légendes d'images : Si votre image est illustrative, il faut absolument lui attribuer une légende ! Les légendes des belles images sont lues même par les visiteurs pressés !
  • Les encadrés : Un petit texte amusant ou anecdotique, ou un complément d'information peuvent être ajoutés à votre page sous la forme d'un encadré. L'encadré peut éventuellement avoir un fond légèrement plus foncé que le reste de la page. Les encadrés permettent de "casser" les mises en page trop rigides et apportent un côté un peu "fun" aux pages sérieuses.

Importance du contraste

L'oeil et l'esprit ont une sensibilité instinctive aux contrastes. Puisque votre but et de capter, puis de garder l'attention des lecteurs, vous allez devoir doser savamment vos contrastes en tenant compte de deux règles fondamentales :

  • Le contraste doit attirer l'attention sur les zones les plus intéressantes de votre page.
  • Trop de contraste tue le contraste !

Voici quelques possibilités pour créer des contrastes sur vos pages :

  • Changement de couleur : dans le texte, dans les cadres, dans les fonds
  • Changement de luminosité : dans les fonds, dans les images
  • Changement de forme : dans la mise en page du texte. Vous pouvez changer les dimensions ou le nombre des colonnes, créer des encadrés, dégager des zones sans texte
  • Changement de taille : pour le texte
  • Changement de police de caractère, de style (gras, italique)
  • Mouvements : les gifs animés ou les animations flash

Toutes ces variations peuvent apporter un "plus" quand elles sont correctement utilisées... ou perdre le lecteur si elles sont employées à tort et à travers.

Le plus simple consiste à créer des pages neutres, équilibrées et homogènes, et à ne rajouter les contrastes qu'en fonction du contenu de la page (et après une bonne réflexion). En d'autres termes, le fond doit dicter la forme et non l'inverse !

Le zapping

Télévision, radios, journaux et sites web : tous les média sont touchés par le phénomène : les lecteurs/auditeurs/spectateurs zappent de plus en plus.

N'allez pas croire que vous pouvez lutter contre ce phénomène en réalisant un site formidable ! Il faut désormais accepter le zapping, c'est-à-dire respecter le choix des lecteurs et les accompagner dans leurs habitudes. C'est même l'une des conditions majeures de la réussite d'un site Internet.

  • Les boutons "Page précédente", "Page suivante" et "Haut de page" facilitent la navigation des zappeurs.
  • Le début de vos pages doit se présenter sous la forme d'un résumé qui permettra aux lecteurs pressés de lire l'essentiel en peu de temps. Ils décideront ensuite s'ils continuent ou s'ils en restent là.
  • La segmentation en paragraphes regroupés par chapitres (avec des sous-titres) donne la possibilité de sauter les parties jugées inintéressantes.

Un jugement en un clin d'oeil

Si l'on en croie cette étude de l'université de Carleton, les internautes jugent de l'intérêt d'une page en 50 millisecondes. Cette conclusion est issue de l'expérience suivante : une série de pages a été montrée à 2 panels d'internautes. Pour le premier panel, le temps d'affichage de chaque page était de 500 millisecondes (1/2 seconde). Pour le deuxième, le temps d'affichage était de 50 millisecondes. A chaque fois, une partie du panel a eu l'occasion de revenir sur les sites examinés pour confirmer son jugement. Les jugements de tous ces groupes ont été extrêmement proches. Cela peut amener à conclure que le jugement d'un internaute est déjà établi au bout de 50 millisecondes.

La lecture "en diagonale" est en réalité une lecture en "F"

Plusieurs études récentes ont étudié la façon dont l'oeil du lecteur parcours une page Web et ont mis en évidence de façon formelle le type de lecture que pratiquent la majorité des internautes.

Sur le visuel ci-contre, les parties en rouge sont celles sur lesquelles l'oeil des visiteurs s'est attardé le plus longtemps. Les parties jaunes sont celles ayant bénéficié d'une visibilité moyenne et les parties bleues celles qui ont eu droit à un passage bref. Toutes les parties en gris n'ont pas ou quasiment pas été vues par les visiteurs.

On constate que l'oeil explore la page Web en suivi un parcours qui a plus ou moins la forme d'un "F" majuscule. C'est le centre gauche de la page qui bénéficie du maximum de visibilité. L'oeil "accroche" sur les titres et les sous-titres ainsi que sur toutes les parties de la page présentant un contraste fort (couleur ou luminosité) par rapport à la tonalité générale de cette page. L'oeil a également tendance à explorer les éléments situés à droite des titres ou des différents éléments qui sont parvenus à attirer son attention.

Si on s'intéresse à l'ordre dans lequel ce parcours a lieu, on constate que le premier balayage est horizontal et se situe dans la partie supérieure. L'oeil entame ensuite un balayage vertical calé sur le côté gauche du contenu principal avant d'explorer tous les points "d'accroche" à fort contraste.

Si vous souhaitez savoir comment vos propres pages seront vues pas vos visiteurs, vous pouvez utiliser l'outil Feng-Gui qui tente de simuler la façon dont l'oeil humain analyse les pages Web

Gardez ces éléments en mémoire lorsque vous construisez vos futures pages. Ils amènent en particulier à conclure que :

  • La présentation en liste, permet à l'oeil de se caler sur la "puce" de gauche et garanti une meilleure lecture qu'un paragraphe ordinaire.
  • Le titre de votre page ainsi que les deux paragraphes qui le suivent sont essentiels pour accrocher l'intérêt du lecteur.
  • Les sous-titres (en tête de chaque paragraphes) permettent de raccroche le lecteur avant qu'il ne quitte définitivement votre page
  • Les contrastes sont essentiels pour attirer l'oeil du lecteur.

Dans l'une de ses pages de conseils, Google préconise un placement des publicités qui semble s'inspirer de ces parcours. Le cadre rouge représente l'emplacement le plus lu, suivi des cadres orange puis jaunes et blancs.

La prise en compte de ces conseils peut avoir une influence considérable sur les revenus apportés par ces publicités.

L'esthétique

Dans leur immense majorité, les internautes recherchent de l'information pratique, pas des belles images. La recherche esthétique que vous mènerez sur votre site ne doit jamais nuire, en aucune façon, à l'aspect pratique et à la lisibilité du contenu. Attention, en particulier, à ne pas faire exploser le temps de chargement de vos pages par l'emploi abusif d'images ou d'animations.

Gérez vos priorités dans l'ordre suivant : contenu / clarté-ergonomie / rapidité d'affichage / esthétique.

Cela dit, si la chose est possible : autant associer l'agréable à l'utile ! Un design original, esthétique et pratique peut avoir un impact très important sur la façon dont vos visiteurs perçevront votre site et sur la trace qu'il laissera dans leurs mémoires. Nous avons pu constater une hausse de fréquentation de l'ordre de 20% après la refonte de l'esthétique d'un site.

On dit que les goûts et les couleurs ne se discutent pas... c'est faux ! Surtout lorsque l'on s'adresse au plus grand nombre. Votre site doit plaire au maximum de visiteurs, soignez vos accords de couleur.

Dans le doute, inspirez-vous de la page d'accueil de Google et FAITES SIMPLE ! La beauté réside dans la simplicité.

La couleur

La couleur n'a pas seulement une influence sur l'esthétique d'un site. Elle participe pleinement au design dans le mesure où elle peut influencer la lisibilité (l'accessibilité) des pages et modifier la perception de ces pages par les visiteurs.

 

Thèmes : Kits graphiques web design - Wordpress - CSS - illusions optiques - logos - template - Templates Joomla

 

 
kit graphique webdesignkit graphique 20071019kits graphiques webdesign