Le blog de Maxime Viry

Il est parfois déroutant pour un webmaster de créer un site internet qui soit beau et ergonomique à la fois. Pourquoi ? Tout simplement parce que le graphisme tout comme l’érgonomie nécessitent bon nombre de compétences autant techniques qu’artistiques qui peuvent prendre des centaines d’heures (années ?) à acquérir… Néanmoins il est essentiel de commencer votre travail sur de bonnes bases. Je vais essayer de réunir quelques principes de bases qui pourront vous aider dans la mise en place de sites web sur les sujets du design et de l’ergonomie.

Le design

C’est la partie visuelle de votre site. Le design (ou graphisme) doit être particulièrement soigné, équilibré car il reflète l’image de votre activité. C’est ce que l’on appelle dans le commnément « l’identité visuelle« .

A la conception de votre design via Photoshop, Illustrator… ou GIMP (pour les pauvres ou les honnêtes), vous devrez garder en tête que le support que vous allez créer devra accueillir du contenu. Evident ? Au premier abord oui, pourtant c’est un concept assez difficile à assimiler chez certain créateurs… Simplement parce qu’on a tendance intrinsèquement à dissocier le design du contenu, alors que ces deux éléments doivent former un tout homogène : le site. Donc un bon design est un design réfléchi en fonction du contenu qu’il va accueillir, pour ça, préparez votre design en faisant des schémas, une esquisse peut suffire parfois.

Et en pratique ?

Les couleurs

C’est le premier truc auquel je réfléchis. Personnellement j’essaye de trouver des couleurs qui s’associent bien : jaune/violet, noir/couleurs vives… Les couleurs devront êtres choisies en fonction du type d’activité du site web que vous créez. Si vous avez du mal à trouver des nuances harmonieuses voici un site qui pourra vous aider.

Généralement pour moi c’est 3 couleurs, sélectionnées en fonction des désirs du client principalement, sinon, en fonction de son activité, les couleurs de son logo… Il faut s’imprégner de l’univers du thème choisi par l’intermédiaire de photos ou de supports de communication existants, c’est une étape plutôt subjective.

Voici la manière qui met permet de déterminer les couleurs nécessaires à la réalisation d’un design : exemple, je dois designer un site vitrine (environ 10 pages) pour un fabricant de portes; nombre de couleurs ? 3, lesquelles ? marron (pour le bois), gris (pour l’acier) plus une troisième couleur qui pourrait très bien être du rouge, vert, bleu ou jaune qui relèverait les deux couleurs précédentes et qui pourrait se rapprocher par la même occasion du panel de couleurs proposées par le fabricant.

Attention, choisir 3 couleurs ne signifie pas que je ne peux pas en utiliser plus ou moins. Pour un site e-commerce je pourrais garder mes 3 couleurs dominantes, puis en utiliser d’autres pour donner une identité à chaque catégories de produit par exemple. Le tout est qu’il faut 2-3 couleurs dominantes qui structurent visuellement votre design et le rende homogène.

Les formes

Comme pour les couleurs, c’est assez instinctif, néanmoins je respecte quelques règles. Pour le site de notre fabriquant de portes, je choisirais un design globalement carré et structuré (pour le côté serieux, hé oui, si vous achetiez une porte à 3500 balles vous souhaiteriez au moins qu’elle soit droite et bien cadrée dans l’ouverture prévue à cet effet…) et une ou plusieurs courbes dans le header, pour la douceur et en fonction des photographies mises à disposition. Comme vous l’aurez remarqué les formes varient d’un site web à un autre, mais structurellement c’est souvent identique, petit rappel rapide :

• Une page web centrée dans une largeur comprise généralement entre 800 et 1100px (pour convenir aux principales résolutions d’écran),
• Un header en haut de page, présentant votre logo (souvent à gauche et cliquable pointant vers l’index) composé de photos ou des formes abstraites (souvent en dégradé depuis la mode 2.0) d’une hauteur variable (qui tend à l’augmentation depuis la mode 2.0 et la hausse des résolutions d’écran…),
• Un corps, soit une zone centrale dédiée au contenu, adaptable en hauteur,
• Un footer (pied de page) sur lequel on retrouve généralement le logo de l’entreprise, et le texte nécessaire à la SEO.

A partir de cette structure simple peuvent se décliner un tas de formes, pour que votre site soit clair visuellement évitez la surcharge de formes inutiles, surtout dans la partie centrale qu’occupe le contenu. Les formes et contours de votre design doivent diriger naturellement les visiteurs vers le contenu qu’il souhaite voir sur votre page. Les choses doivent se faire simplement et la surcharge d’éléments visuels que l’on peut constater, par exemple, sur de gros portails d’informations, embrouille le visiteur. Un visiteur perdu c’est du taux de rebond garanti !

Pour avoir une bonne appréhension des formes il faut un sens esthétique qui n’est pas forcément inné chez tout le monde, travaillez le en regardant attentivement des sites de références dans le domaine. Voyez ce qui vous choque esthétiquement sur un site puis ce que vous trouvez agréable à regarder.

Petit exercice pratique, regardez ceci :
http://yvettesbridalformal.com/index.htm

Puis ceci :
http://www.alsacreations.com/

Quels sont les différences fondamentales entre ces deux sites web ?

Les images

Les images (photographies, représentations, pictogrammes…) vont devoir être travaillées et adaptées pour coller parfaitement à l’ensemble de votre design. Pour cela les logiciels pré-cités vous offriront un panel de possibilités phénoménal, que ce soit en terme de retouche et de manipulation d’images. Dans tout les cas, évitez la surcharge et faites clair. Une image n’a pas assez de contraste ? Remettez en ! Une image est floue ? Mettez plus de netteté ! Vous devez particulièrement faire attention aux détails comme l’agencement de vos photos, la netteté, la luminosité, le contraste, ou encore la déformation car ce sont tout ces détails qui feront la différence !

Quelques trucs à savoir à propos des images :

• Pour un design de site vous travaillez en 72 dpi,
• Gare à l’utilisation d’images trop compressées sinon bonjour la pixelisation !
• Utilisez des images libres de droits (vous en trouverez à très bas prix sur fotolia par exemple),
• Quand vous enregistrez vos designs pour le web, faites bien attention au taux de compression. Le fichier final du design sera un compromis entre qualité (ajustement de la compression, ajustement des niveaux, niveau du flou…) et poids. Plus un design contiendra de couleur et sera net plus il sera long à charger pour vos visiteurs,
• Sur un site web évitez les GIFs animés, ils doivent être utilisés avec parcimonie car le GIF animé va attirer immédiatement l’attention du visiteur et risque de le perdre si il y en a trop sur la page. C’est une erreur typique que l’on retrouve sur les sites internet de débutants, le summum étant l’arrière plan mozaïc animé, :-D
• Attention à l’utilisation du format .PNG car la transparence est mal gérée sur certains navigateurs d’anciennes générations (IE 6 par exemple),
• Quand vous placez une photographie sur un site web pour illustrer un article par exemple, si vous souhaitez que vos visiteurs puissent la visualiser en grand, créez d’abord une vignette de la photo, puis un lien cliquable qui pointera vers la photo en haute résolution. L’erreur généralement commise est d’insérer une photo en grand format et de forcer la taille pour qu’elle soit petite. Car si la taille change, le poids de la photo lui, reste le même.

L’ergonomie

C’est elle qui va répondre aux attentes de vos visiteurs. Elle permet à un visiteur de naviguer le plus naturellement possible, d’atteindre son objectif (recherche d’un produit dans un site e-commerce, recherche du moyen de paiement, l’accès aux coordonnées de l’entreprise etc…) rapidement. Bien sûr l’ergonomie dépend de plusieurs facteurs comme l’âge, le rapport à l’outil informatique, les difficultés liées aux handicaps, le materiel utilisé ou le navigateur. C’est pour ces raisons que vous devez adapter votre site en fonction du plus grand nombre pour que chacun puisse accéder de manière optimale à l’information. Loin de moi l’idée de donner des leçons en terme d’ergonomie web ou d’accessibilité, des tas de bouquin vous en parlerons bien mieux que moi. Néanmoins il est important de prendre en compte ce paramètre dès le début de la création d’un site web. Cela évite les retouches tardives et permet de fidéliser vos visiteurs.

Concrètement pour améliorer l’ergonomie :

• Créer un breadcrumb (chemin de fer ou fil d’Ariane, il s’agit de l’arborescence de votre site, généralement placée sous le header). Cela permet aux visiteurs de se repérer sur votre site (et c’est bon pour la SEO au passage),
• La règle des trois clics doit être respectée autant que possible. C’est à dire que le visiteur doit avoir accès à l’information en maximum 3 clics, exit donc les menus déroulant à 10 niveaux,
• Vos textes doivent êtres clairs, par exemple n’écrivez pas en blanc sur noir, choisissez une typo lisible comme l’arial (l’utilisation du comic sans ms est une faute de goût impardonnable), comprise dans une taille raisonnable (pas la peine de mettre le texte en 20px). Choisissez une bonne hauteur d’interligne et structurez vos textes en paragraphes, avec des titres et/ou sous-titres de différentes couleurs (les couleurs du site). Et n’oubliez pas de mettre vos liens hypertexte en évidence,
• Faites attention au poids de votre page web, elle doit être la plus légère possible. Pour ça, optimisez votre code HTML et vos feuilles de style CSS, optimisez vos images. Pour la vidéo et le son préférez le streaming,
• Ne mettez pas de musique en fond sonore,
• Gardez la même structure de page sur l’ensemble du site, le visiteur doit connaitre le fonctionnement de votre site dès la première page,
• Respectez les normes d’accessibilité W3C.

Conclusion

Sur toute la chaine de conception d’un site web, il vous faudra penser global, le site final comme un tout homogène, le design lié à l’ergonomie elle même liée au code et à l’accessibilité, ainsi qu’a la SEO. La difficulté réside dans la polyvalence que demande la discipline et du fait que le design est un art, donc subjectif. Le seul moyen de s’améliorer est de tester, comparer et recommencer, tout en gardant à l’esprit le but que vous souhaitiez atteindre pour le résultat final de votre site.