Google foisonnent de résultats pour la moindre recherche, mais qu’est-ce qui fait qu’un site retient notre attention et nous donne envie d’y revenir ? Travaillant beaucoup et depuis pas mal de temps sur la conception de site internet, je vous propose un thème qui me tient à cœur : l’ergonomie web !

Nombreux encore sont ceux qui restent persuadés qu’il suffit d’avoir une présence sur le net avec un site affichant du contenu sans se soucier de la mise en page, de la navigation, de la hiérarchisation du contenu… sans se soucier des habitudes des internautes.

Un bon référencement ne suffit pas ! L’internaute est impatient, fainéant, il veut tout et tout de suite. Cela ne veut pas dire que le design n’a pas son importance. Un savant mélange de webdesign et d’ergonomie permet de créer des sites qui permettent à l’internaute, non seulement de trouver facilement l’information qu’il recherche, mais aussi de leur donner envie de revenir, de parcourir le site pour y trouver autre chose, et de faire du buzz autour du site.

Travaillant en agence, je sais bien à quel point il est difficile de concilier webdesign et ergonomie. Enfin pour être plus transparent, je vais plutôt dire à quel point il est parfois pénible de se faire entendre par les créas qui restent souvent convaincus que seul leur travail graphique permet de faire vivre un site.

Souvent les sites ressemblent à une chaise design, sauf qu’une fois assis dessus on a très vite mal au dos, les fesses en compote et on ne reste dessus pas plus de 10 minutes. Combien de fois vous êtes-vous fait la remarque « superbe ce site ! par contre c’est galère pour trouver l’info, j’y comprends rien… » ou « j’ai voulu créer un compte sur ce site mais ça ne marche pas et je ne sais pas pourquoi ».

Tout cela relève de l’ergonomie web. Il suffit d’avoir une vision d’ensemble lors de la conception et se placer le plus souvent possible à la place de l’internaute, et non uniquement contenter un client, souvent pressé d’avoir sa présence sur le net.

Quelques grands points d’ergonomie web :

• Afficher des textes lisibles (taille suffisante) et clairs (fort contraste)
• Organiser les éléments sur la page et garder une cohérence entre les pages
• Une navigation claire, accessible, fonctionnement simple et intuitif
• Aérer les contenus, différencier des éléments (liste, citation…)
• bien gérer l’affichage des liens, les « charter » (style, couleur, souligné…) et bien les renseigner
• des formulaires simples, efficaces, qui accompagnent l’internaute en cas d’erreur
• …

La liste est un peu longue mais cela reste une question de pratique du net, de bon sens et de soucis des habitudes des internautes.

Je vous propose pour cela de consulter ma nouvelle sélection Ergonomie Web / Accessibilité dans la rubrique Tutos & Ressources avec quelques liens et références de livres qui vous aideront à comprendre et intégrer la notion d’ergonomie liée à internet.

C’est un thème que j’affectionne dans mon métier, je pense que d’autres billets suivront sur le même sujet.

Et vous, qu’est-ce qui vous rebute sur un site au point de ne plus y retourner, alors que le service ou le thème vous intéresse ?

Afin de produire une nouveau template HTML utilisé pour de l’email marketing, j’ai fait ce matin une recherche sur la gestion des CSS par les différents clients mail du marché. Je pensais qu’avec le temps les standards seraient de plus en plus pris en compte, mais ce n’est hélas pas toujours le cas.

Au cours de ma recherche (vive Google… pas essayé avec Cuil ) je suis tombé sur un excellent article de Stéphane Truphème sur son blog Kinoa.

Il nous présente « 10 astuces pour réussir vos campagnes d’e-mail marketing » qui me semblent pertinents même si il est parfois difficile de respecter certains points comme le n°3 « Testez vos emails sur divers clients de messagerie« . Il est assez difficile de tester le résultat car nous n’avons pas toujours accès à tous ces clients mail mais il faut effectivement au moins le tester sur les principaux (Yahoo, Windows Live, Gmail, Outlook, Outlook Express, Apple Mail et Thunderbird).

Dans cet article on trouve aussi un lien fort intéressant vers le site email-standards.org qui répertorie les clients mail les plus utilisés et fait un état de leur interprétation des CSS. On constate qu’à ce jour nous avons encore 4 mauvais élèves :

• Apple .MAC
• Google Gmail (grosse déception)
• Lotus Notes 8
• Outlook 2007 (pas de surprise)

Au final à ce jour, si on ne veut avoir aucune mauvaise surprise, il faut encore s’en tenir à une mise en page avec des tableaux et n’utiliser que des balises HTML classiques pour le texte. Un peu triste tout de même quand on connait la puissance de mise en page grace aux CSS.

Sources :

• Article « 10 astuces pour réussir vos campagnes d’e-mail marketing«  sur Kinoa
• Site email-standards.org (en anglais)

Je savais bien qu’il allait arriver sous peu, mais là je dois bien avouer que j’ai été un peu surpris ce matin de voir que la nouvelle version de WordPress, la 2.6, venait de sortir « dans les bacs » (en tout cas pour le VO).

J’ai encore ma clé de 12 et les mains pleines de camboui à travailler sur cette nouvelle version de Katrinet sous WP. Je me dis qu’il reste un peu de temps avant la sortie de la version française, mais à la vitesse où vont les choses sur le net, il suffira d’attendre peut-être qu’un jour ou deux. Cela me permettra d’avoir mon blog pleinement fonctionnel sur cette dernière version qui apporte son petit lot de nouveautés bien sympathique :

• Post Revisions : permet d’avoir un historique des modifications sur les articles / pages. On peut comparer des versions et revenir sur une version antérieure.
• Press This : petit lien magique qui permet, à partir de n’importe quel site et en un clic, de créer un nouveau billet avec déjà du contenu correspondant. Par exemple sur une page youtube, le fait de cliquer sur « Press This » crée un nouvel article avec la vidéo intégrée (quelle bande de feignasses ces blogeurs ;o))
• Gears : nouveau système de cache pour les javascripts et CSS du blog. Cela permet de gagner en temps d’affichage du blog.
• Theme preview : comme son nom l’indique, il est maintenant possible de prévisualiser simplement un thème avant de l’appliquer sur son blog.
• Image caption : enfin l’intégration visuelle d’une légende avec les photos d’un article.
• Word count : lors de l’édition d’un article, un compteur affiche en temps réel le nombre de mots de celui-ci (allez… arrivé à 300 mots j’arrête !)
• et toute une liste de petites nouveautés…

La liste complète est visibles sur le site de WordPress avec une petite vidéo en prime.

Bon allez, j’ai encore du boulot moi !