Concevoir son site Internet : le design et l'ergonomie

Comment faire en sorte que vos visiteurs se sentent à l'aise sur votre site, qu'ils y trouvent leurs repères et qu'ils aient envie d'y revenir ?

Ces règles simples peuvent vous permettre d'accrocher et de conserver vos lecteurs.

---

Dans cette page : Les standards - Principes de mise en page - Importance du contraste - Le zapping - L'esthétique - La couleur

---

En bref ...

Respecter les standards

Vos visiteurs sont habitués à certains mécanismes, ne les perturbez pas. Ils doivent se sentir comme chez eux !

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. Du texte lisible : ce conseil à l'air stupide. On voit malheureusement beaucoup 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 : Compteurs, animations flash 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 250ème visiteur sur votre site depuis le 4 avril 1950. 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, 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.

---

En détail ...

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 ???

Les légendes des belles images sont lues
même par les visiteurs pressés !

source image : civilization

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 !

Orange sur bleu ou vert sur jaune :
les couleurs complémentaires sont celles
qui présentent le plus fort contraste
pour l'oeil humain.

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

Photo originale :
Philippe Ramakers

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"

Photo originale : UseIt.com

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.

A lire en complément :

UseIt.com :"F-Shaped Pattern For Reading Web Content"
Labnol : "Where should I place Google Ads for high CTR"

Consultez également notre page intitulée "Ecrire pour le Web"

 

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 (voir optimiser les images de votre site)

Gérez vos priorités dans l'ordre suivant : contenu / clarté-ergonomie / rapidité d'affichage / esthétique. Et si cette hiérarchie vous semble discutable, vous pouvez toujours vous forger votre propre opinion en lisant cette discussion concernant les critères de qualité d'un site sur Webmaster-Hub.

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. Le site SmartPixel peut vous aider à choisir la gamme des couleurs de votre site.

Pour le reste, si vous n'êtes pas graphiste vous-même, faites appel aux talents qui se proposent gratuitement sur les forums (4Claverie / Graph-Academy / Black-Widow / Ironway-Design / French-graff, etc.)

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.

Arkantos Consulting propose une réflexion intéressante sur les "effets de la couleur des sites internet sur la mémorisation et l'intention d'achat".

ColorSelector, YoyoDesign et Iamcal : permettent de selectionner des couleurs et d'apprécier en temps réel leur lisibilité pour différents troubles de la vision (cataracte, protanopie, deuteranopie, tritanopie). ColorDoctor et VisCheck simulent les troubles de perception de la couleur pour tout document affiché à l'écran.

Le "journal du net" propose un bon résumé des problèmes liés au daltonisme et des solutions pour y remédier. Il propose également plusieurs outils permettant d'effectuer des tests : Wellstyled et Snook : proposent des accords de couleurs qui préservent une bonne visibilité.

Voici également une liste de ressources liées au thème de la couleur et proposées par Jean-Eric Pelet sur Forum-Marketing :

• La persistence rétinienne : quelques démonstrations des effets de ce phénomène
• L'Art de la Couleur : un cours théorique sur l'usage de la couleur en peinture artistique.
• Contraste et lisibilité : un bref article de Sébastion Billard qui comporte plusieurs références intéressantes
• Criteria for optimal web design (designing for usability) : un résumé des critères de lisibilités (en anglais)
• DezignBox : la symbolique des couleurs
• Le chromlog : un blog consacré à la couleur !
• Colormatters : Symbolique des couleurs, émotions, effets sur le corps, sur la vision, études de cas, enquêtes... (en anglais).