plan de site

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.
Accueil > design-site-web
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 !

soulignementPas 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.

largeur de colonneDes 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.

contraste et lisibilité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.

pas de gadgetsOubliez 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.

sous-titreUne taille de texte confortable : beaucoup d'internautes ont une vue basse ou moyenne. Les sites utilisant des caractères microscopiques sont fatigants.

leger et rapideUn 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 tous compris (avec les images et les animations). Ce point est absolument essentiel.

structure du texteDes 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 !

sous-titreDes 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.

simplicité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.

pas de gadgetsDes 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.


A lire en complément : Ergonomie d'un site Web par Kreatys


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

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

source image : civilization.ca

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.

accrocher le lecteurLe titre : Court, explicatif, accrocheur. 50% des lecteurs quitteront votre page si le titre est absent ou peu intéressant.

ceinturer le lecteurLe 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 !

nourrir le lecteurLes 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.

boucher les fuitesLes 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 :

illustrerLes 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.

expliquerLes 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 !

amuserLes 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 :

pour le meilleur et pour le lireLe contraste doit attirer l'attention sur les zones les plus intéressantes de votre page.
Arrrggghhh !Trop de contraste tue le contraste !

couleurs complémentaires
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 :
la couleurChangement de couleur : dans le texte, dans les cadres, dans les fonds
la lumièreChangement de luminosité : dans les fonds, dans les images
la formeChangement 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
les dimensionsChangement de taille : pour le texte
le jeu de caractèresChangement de police de caractère, de style (gras, italique)
bougerMouvements : 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

zappeur fou
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.

bougerLes boutons "Page précédente", "Page suivante" et "Haut de page" facilitent la navigation des zappeurs.
bougerLe 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à.
bougerLa 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"

parcours de l'oeil
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.

parcours temporelOn 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 :

 

emplacement préférentielDans 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 percevront 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 sélectionner des couleurs et d'apprécier en temps réel leur lisibilité pour différents troubles de la vision (cataracte, protanopie, deutéranopie, 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 :

 

A lire : Création d'une page web par le csrs
L’écran efficace : Une approche cognitive des objets graphiques (fichier PDF de 577 Ko) par l'ADBS
Comment organiser son contenu par redaction.be
La mise en page et ses règles par DismoiTIC
La foire aux designs par lewebmaster.com

ainsi qu'une étude particulièrement intéressante sur la façon dont les internautes parcourent les pages Web
vulgarisée par redaction.be

Pour arriver en première page de google :

Demandez un devis à l’agence SEO.fr (15 ans d’expérience)