Les trophées de l’ergonomie du JDN

Trophées de l'ergonomie JDN

Benchmark group, l’entreprise qui édite le site Le Journal du Net a décerné ses trophées de l’ergonomie 2009. Il s’agit des sites les plus réussis d’un point de vu utilisabilité et ergonomie. Le choix des gagnants a donc été basé sur des critères tel que la clarté et la lisibilité de l’information, la simplicité d’utilisation et chacun de ces sites avait été préalablement nominé dans sa catégorie.

site de vente en ligne

Vainqueur: Sarenza.comAutres nominés: Fnac.com, Promod.fr, Dpam.com, Materiel.net

site de marque

Vainqueur: Samsung.com Autres nominés: Citroen.fr, Nivea.fr, Bledina.com, Garnier.fr,

site iphone

Vainqueur: Metro Paris Autres nominés: France Football, Pages Jaunes, Shazam, L’Oréal Paris,

site corporate

Vainqueur: Danone.com Autres nominés: Novartis.fr, Bonduelle.com, Ferrero.fr

Je trouve que c’est un bon truc ce genre de trophée. On peut ne pas être tout à fait d’accord avec le choix de la rédaction du JdN, et d’ailleurs je ne sais pas si le code des pages a été vérifié et validé selon les normes d’accessibilité en vigueur (w3c). Mais cette initiative montre le bon chemin et a le mérite de donner des exemples des bonnes pratiques ergonomiques.

Leçon d’ergonomie ou le bouton à 300 Millions de Dollars

J’ai entendu parlé récemment de l’histoire d’un e-commerçant qui a augmenter considérablement son revenu annuel en opérant une simple modification sur le processus d’achat de son site web.

Auparavant, l’internaute devait créer un compte ou se connecter avec ses identifiants au début du processus. La page proposait un formulaire avec les champs « email » et « mot de passe » ainsi que deux boutons « Se connecter » et « S’inscrire ». Beaucoup d’internautes étaient découragés en voyant qu’ils devaient renseigner le formulaire pour créer un compte ou se loguer obligatoirement avant de réaliser leur achat.

Un grand nombre de commandes n’étaient donc pas finalisées et les clients potentiels abandonnaient à cette étape du processus.

Après quelques études et tests, les designers ont trouvé une solution simple au problème, remplacer le bouton « S’inscrire » par un bouton « Continuer » avec le message d’explication suivant:

Vous n’avez pas besoin de créer un compte pour poursuivre vos achats, veuillez simplement cliquer sur le bouton « Continuer » pour procéder à votre paiement. Pour accélérer vos achats futurs vous pourrez créer un compte pendant le processus de paiement

Le taux de transformation du site s’est alors envolé et les achats ont augmenté de 45%.

Cette anecdote nous montre bien l’importance de l’ergonomie et de l’utilisabilité d’un site web, et tout particulièrement dans le cas d’un site e-commerce. Il faut veiller à détecter le moindre frein à l’achat et pratiquer des tests d’utilisabilité qui permettront de pencher sur les points à améliorer pour optimiser au mieux le site.

Lire l’artice « The $300 Million Button« 

Quels outils pour réaliser une maquette web?

iPlotz pour créer des maquettes web

La réalisation d’un projet web implique quelques prérequis indispensables souvent estampillé sous l’appellation « cahier des charges » ou « spécifications » qui permettent de formaliser les besoins et les expliquer aux différents acteurs concernés .

La maquette du site (on pourra aussi appeler ça mock-up, story board ou prototype) est alors un élément important qui permet une représentation ergonomique du futur produit et de ses spécifications fonctionnelles. On utilise généralement des outils assez généralistes comme Powerpoint, Adobe Photoshop ou Illustrator, Visio pour réaliser cela.

J’ai découvert et testé rapidement cette semaine un outil qui pourra faciliter le travail du chef de projet. Il s’agit de iplotz.com. Un service en ligne qui propose de gérer et réaliser les prototypes de sites web grace à une palette de composants adaptés. iplotz propose une offre gratuite limitée à un seul projet, une version premium permet un nombre de projets et stockage de vos maquettes illimité.

Après une petite recherche j’ai également trouvé d’autres solutions semblables mais qui restent payantes:

  • Axure, il s’agit d’un logiciel payant (licence de 589$/an) téléchargeable pour les plateforme Windows uniquement.

Axure permet la réalisation et la gestion de mockups mais aussi de diagrammes de flux, de prototypes et des spécifications au niveau du contenu.

  • Protoshare est une application qui coute 26$/mois (pour la version personnelle limitée), qui permet en plus de collaborer en ligne sur un même projet avec par exemple des designers ou développeurs…

Un peu d’innovation dans l’affichage des commentaires

Améliorer l'ergonomie d'un blog et l'affichage de ses commentaires

On retrouve systématiquement l’affichage des commentaires en-dessous du billet (ou de l’article) d’une page web et il y a peu d’innovation sur cet aspect de tout site laissant la possibilité de commenter le contenu.

Je découvre aujourd’hui via un billet de Frederic Cavazza le blog de Sam Rayner qui propose une manière originale et encore peu rencontrée d’afficher ses commentaires. Ils sont présentés à droite du contenu, ce qui je trouve, donne une manière esthétique et équilibrée de présenter ce qui fait un point essentiel du blog.

Peut-être une piste à explorer en matière d’ergonomie pour les blogs fournis en commentaires et souhaitant leur donner un peu plus d’importance.