Réaligner l’interface d’un article de cyberpresse en 5 étapes faciles.

Nos journaux sont en danger. Le web devient un incontournable. On s’entends sur ce point? Excellent. Alors pourquoi nos grands médias d’informations portent-ils un si faible intérêt à l’expérience de lecture de leur journaux en ligne? Hmmm. J’en profite aujourd’hui pour réaligner l’interface d’un article d’un géant de chez nous afin de démontrer quelques 5 étapes facile et très simple à mettre en place, on peut améliorer le tout de façon substantielle.

Allons-y avec cyberpresse.ca avec un article du jour: Nissan présente la Leaf, sa voiture électrique

Version par défaut

Version par défaut

Supprimer le superficiel

Déjà au premier coup d’oeil, il est difficile de comprendre le d’ajouter de nombreux éléments visuels qui n’apportent rien à la lecture et à la structure. Allons-y pour un petit ménage en supprimant les ailes grises, les lignes qui encadrent l’article et les ceux que l’on retrouve à droite de la photo. Résultats, le contenu est roi:

Première version améliorée

Première version améliorée

Être constant & organisé.

Maintenant, soyons constant avec des titres qui ont le même comportement avec une hiérarchie claire. Cela permet de catégoriser les zones et bien sûr, de diminuer la recherche par l’utilisateur. Chaque secondes est importante. Sur le web, c’est l’attention qui est la monnaie d’échange, ne l’oublions pas. Résultats: plus de satisfaction au temps consacrer au site.

Deuxième version

Deuxième version

Diviser pour mieux règner

Maintenant, pourquoi avoir rassemblé des actions qui n’ont pas le même objectif? On ne mets pas au même endroit l’heure, la poigné et l’interrupteur. L’horloge se retrouve au centre d’un mur, l’interrupteur bien visible et la poigné à la hauteur de la main. Revoyons la zone de partage/impression et profitons pour engager l’utilisateur. Par le fait même, fesons respirer le texte tout en lui donnant un peu de structure dans les titres et dans les citations. Résultat: l’anxiété diminue, le plaisir augmente.

Troisième version

Troisième version

Performer dans les détails

Ensuite, rassemblons les metas-informations (l’auteur et la date) à un seul endroit. Revoyons la date en intégrant le jour afin de se coller un peu plus à l’esprit du journal. Effectivement, l’édition de samedi frappe. L’édition du 03/09/2009 n’est pas très engageant. Ajoutons le EST comme abbréviation ISO pour indiquer de l’heure normale de l’est et supprimons la date de mise à jour lorsque c’est la même que la date de publication. Si la mise à jour diffère, nous pourrons rajouter une ligne pour le souligner cela mais pour le moment, ce n’est pas nécessaire. Résultats: de la pertinence.

Quatrième version

Quatrième version

Partager la bonne nouvelle

Terminons le tout en réalignant la zone de partage en mettant tout autant l’importance sur le texte que sur l’icône et intègrons le tout en ordre d’importance.

Dernière version

Dernière version

Résultats: rincer, recommencer

Voilà donc le résultat surement très apprécié des internautes et cela, en intégrant en quelques minutes les bonnes pratiques connues et reconnues:

Résultat final

Résultat final

Bien sûr, plusieurs autres éléments pourraient être considérer pour améliorer l’expérience:

  • mettre des liens sur les termes clés vers des articles qui en parleraient;
  • mettre un lien sur le nom du journaliste afin de voir tout ses articles;
  • commenter la nouvelle, permettre un dialogue (ouch!);
  • avoir de la publicité pertinente à l’article (environnement et au transport).
Cet article a été publié dans UX (User Experience). Bookmarker le permalien. Laisser un commentaire ou faire un trackback : URL de trackback.

Laisser un commentaire

Votre e-mail ne sera jamais publié ni communiqué. Les champs obligatoires sont indiqués par *

*
*

Vous pouvez utiliser ces balises et attributs HTML : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>