Cela permet d’offrir une idée générale et tout de même assez précise d’un projet. Un seul document pour expliquer un bonne partie de la fondation. Simple et efficace

Voir le moodboard en format original sur Flickr

Qu’est-ce qu’un moodboard? Wikipédia l’explique très bien:

A mood board is a type of poster design that may consist of images, text, and samples of objects in a composition of the choice of the mood board creator. Designers and others use mood boards to develop their design concepts and to communicate to other members of the design team. The mood board may be used as a frame of reference during the design process in a variety of abstract disciplines, for example:

Source: http://en.wikipedia.org/wiki/Mood_board

La prochaine fois que vous me présenté un petit projet, voici surement l’un des documents sur lequel nous baserons beaucoup de nos discussions!

• permet de donner son opinion sur la discussion sans écrire en un clic
• permet que la discussion à devenir plus efficace pour la communauté
• permet de filtrer les commentaires par leur pertinence et donc, économiser du temps

Bien sûr, ce n’est qu’une idée mais n’est-ce pas là une utilisation intéressante du fameux concept «The Wisdom of Crowds» que plusieurs mettent en place depuis des lustres? J’aimerais retrouver cela dans ules blogs où l’on retrouve habituellement plus de 50 commentaires par billet.

Enfin, moi j’aimerais bien l’implanter et mesurer son succès. Pas vous?

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

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

Ê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

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

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

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

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

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

Vous voulez un exemple?

Vous habitez sur la rive-sud de montréal et vous désirez vous informer sur le prochain Spectacle de Robert Charlebois. Vous avez entendu à quelque part qu’il proposait quelques dates dans votre région. Mais où? Après une recherche sur le web, vous vous retrouverez sur un article qui parle de notre Robert national et qui inclus une liste de ses prochains spectacles.

Vous êtes de St-Lambert? Vous cliquerez sur le logo ou le nom de la salle la plus prestigieuse. Vous êtes de St-Bruno? Vous cliquerez sur la carte géographique. Vous êtes de Longueuil? Vous regarderez les places disponibles et le prix. Petite note: vous êtes le même utilisateur type, seul votre localité change.

Je devine un peu la raison, mais ce qui en ressort est beaucoup plus étonnant: j’ai du contenu mais je n’ai pas à gérer comment je le présente. Je dois mettre en place des pages dynamiques qui s’adaptent à l’utilisateur selon une variable supplémentaire: sa localité.

Première rencontre. J’ouvre Mindjet, je prends un café et je discute avec la directrice marketing. À la fin de cette rencontre, cinq personnas ressortent clairement. On copie-colle rapidement des images en noir et blancs et on les nommes: Julie, Cécile, Jonathan, Steeve et Bianca. J’envoi le tout à ceux qui travaillent régulièrement avec le public et j’attends. Dès le lendemain, déjà plusieurs commentaires se sont ajoutés dans le projet que je mets à la disposition de tous sur Basecamp. Une petite analyse, une simple mise à jour et hop, j’envoi le tout à la directrice qui accepte rapidement.

La semaine suivante, j’ouvre une feuille de calcul sur Google Docs, je prends un autre café et je mets à la place de Julie. Je me raconte une histoire sur ce que Julie fait sur le site web, ex.: Elle ouvre son ordinateur, prends ses courriels, surf, trouve le site web, le consulte et le sauvegarde dans ses favoris. Je sépare le tout en colonnes, j’ajoute une ligne et je me pose des questions: Sait-elle combien de temps elle passera sur ce site? Lit-elle tout ses courriels? Est-ce qu’elle trouve le contenu pertinent? Est-elle une lectrice assidue de ce site web? Quels mots-clés as-t-elle utilisé pour trouver le site web?

J’ajoute une troisième ligne, je prends la voix de Julie et j’énonce mes anxiétés, ex.: Ouvrir, me connecter et lire mon courriel est déjà très long. Je reçois déjà beaucoup de spam et je n’aime pas ça. Chaque fois que j’imprime une page, ça marche pas. Je n’aime pas donner mes informations personnelles. Combien d’étapes dois-je remplir avant de soumettre ce formulaire?

Finalement, en bas de chaque colonnes, j’énumère toutes les actions possibles et je les déposent dans une cellule chacunes. Les colonnes commencent à être de plus en plus imposantes. En voici des exemples: Julie ouvre son courriel. Julie fait le ménage de ses courriels. Julie inscrit l’adresse du site web. Julie recherche le site web sur un moteur de recherche. Julie envoie l’article à une amie, etc.

Je partage, tous commentent et à la fin de la semaine, nous avons tracé la carte des besoins et des fonctions à mettre en place et ce, par ordre d’importance. Voilà donc un exemple simple, efficace et très terre-à-terre qui prouve sans aucuns doutes, l’utilisation des personnas. À vous de faire les premiers pas!

Faire des affaires, c’est bien. Parler Facebook, Linkedin et réseau sociaux, ben cool. Où sont les débats qui m’intéressent moi comme ceux sur l’expérience usager, sur les raisons pour lesquelles les pages d’accueils ne sont pas belles, sur les façons de créer un formulaire qui fonctionne? Au South By South West, j’y trouverai quelques réponses. Mais le Texas, c’est loin.

l faut pouvoir mettre les concepteurs web ensemble, autour d’un caffé latte des les bistros de notre province dès demain, c’est critique! La culture des québécois est souvent bien différente sur plusieurs aspects non?. L’exemple des micro-sites de bière où les femmes sont beaucoup moins «poupounes» par rapport aux états-unis et la france démontre bien que notre culture diffère. Nous avons le Publi-Sac et en Ontario, ils ne démordent pas de leurs circulaires dans les journaux. Mais est-ce que le design web diffère aussi?

Je côtoie un groupe qui gère environ 30 produits web locaux purement québécois et qui possède dans ses rangs aucun designer certifié web, qui mange web et transpire web. Euhhh… ah bon. Vous avez naviguer sur des sites de commerce électronique québécois? J’imagine que notre génétique de coureurs des bois se traduit sur le web par une incroyable force brute qui nous empêche de souffrir lorsqu’on fait face à une page d’accueil dense et compliquée, remplie de fioritures où on cherche le panier d’achat. Nous sommes tellement fait fort que même le gouvernement nous offre des sites dédiés au aînés avec des caractères de 9 pixels. Le budget normal alloué au design (utilisabilité, scénarios de navigation, focus group, pertinence visuelle, …) aux développement des sites web dans les grands portails québécois est d’environ 15%.

Parlons-en!

Présentement, la question qui me turlupine plus fortement que d’habitude est «pourquoi un redesign demande de jeter à terre toutes les fondations parce que c’est la technologie qui doit être changée?». L’ancien visuel fonctionnait-il? Peut-être pas. Mais la question est plutôt: qu’est-ce qui fonctionnait? J’ai vu plusieurs sites web changer leur «branding» seulement parce que l’idée dese renouveler permettait d’appliquer une longue liste de souhaits accumulés lors des périodes de «surfing» du thé de 16hrs.

Qu’en est-il des bonnes pratiques accumulées depuis la première version? Est-ce que les liens «Lire tout l’article» sont plus efficace en bleu ou comme avant avec un beau gros bouton bleu? Est-ce le lien rose «Get the recipe» ou le titre «Recipe: veggie chili» qui génère le plus de revenu? Quel est le lien à cliquer? Lequel est le plus efficace? Lequel permet vraiment de capturer l’attention afin que l’utilisateur reste encore plus longtemps? Après recherche, il semble que ce ne soit ni l’un ni l’autre mais la photo qui est la plus cliquée. Hmmm. L’expérience usager est bien différente depuis le nouveau redesign et par conséquence l’approche marketing aussi. Pourtant, impossible de mesurer l’impact sur les ventes de publicités car bien sûr, l’ajout d’une seule bannière supplémentaire à modifié les chiffres de façon spectaculaires.

Les magazines papiers doivent se créer une nouvelle vie en ligne et ce nouveau défi n’est pas le fruit de la nouvelle technologie, mais celui du besoin de communiquer différemment. Avant de partir dans un redesign, assurez vous de documenter le type de relation que vous avez avec vos utilisateurs, plutôt que le type de technologie que vous posséder ou aimeriez posséder.

Par contre, déjà on peut deviner que l’expérience en ligne est bien différente que celle que nous vivons avec le format papier. Lorsque les fans du magazine se retrouvent sur le site web, s’attendent-ils à vivre la même expérience? Veulent-ils vivre la même expérience?

Est-ce qu’un magazine en ligne va chercher la même audience qu’un magazine papier? L’analyse de l’audience sur de tel sites nous informe qu’actuellement, la majorité des visites se font généralement le jour, pendant les heures de bureaux. On peut donc deviner que ce plaisir coupable ne se lit pas de la même façon. Chez le dentiste où à la salle de bain, au bureau où dans un café… tout est bien différent.

Est-ce que les magazines qui affichent clairement leur identité en gros caractère pixelisé clignotant à néon ne nuisent-ils pas à leurs lecteurs? Il est facile de voir par dessus l’épaule de collègue et comprendre qu’il prends du temps sur marthastewart.com. Ce petit détail démontre bien qu’il faut s’assurer qu’un n’importe quel redesign d’un produit tel qu’un magazine en ligne doit intégrer un minimum d’analyse concernant l’expérience usager.

Lorsque vous redesignerai votre prochain magazine web de ce type, assoyez-vous avec votre père, avec votre tante et votre belle-soeur et regardez-les naviguer sur le site. Ne dites rien, mais prenez-des notes.

Est-ce là la meilleure façon d’augmenter ces membres, en leur offrant toujours plus d’offres? Après avoir parler à plusieurs représentants (vendeurs) qui s’occupe d’augmenter toujours plus haut le nombres d’inscrits à leur plateformes, je vous copie-colle quelques beaux extraits parvenant des clients:

• «Il y a plusieurs offres de services, mais je ne sais pas qu’elle est la bonne pour moi!»
• «Est-ce que le catalogue de l’entreprise XYZ est à jour?»
• «Je ne sais pas où trouver la date d’expiration de l’offre!»
• «Ce produit est livrable en combien de jours?»
• «Puis-je avoir des statistiques sur le nombre de visiteurs sur mes produits?»

Remarquez-vous qu’il y a peu de questions sur le nombre de produits ou services offert mais plutôt sur la qualification des besoins?

C’est ici qu’un minimum d’attention sur l’expérience usager aurait pu permettre à plusieurs de ses plateformes de mieux comprendre les besoins et d’offrir à peu de coup, des outils ou une interface leur permettant plus efficacement l’offre disponible.

Enfin, c’est surement moins cher que de donner des rabais à tout les mois sur votre membership.

Lorsqu’on commence la conception d’une interface, on doit se convaincre que tout est possible. J’irais même à dire que tout est magique. C’est une technique que j’utilise depuis longtemps qui me permet de ressortir l’objectif ultime du projet. Si par exemple je désire concevoir un outil en ligne offrant la mettre à jour la liste des prix de mes produits sur un site de ventes au enchères, j’imagine que tout cela se fait par magie: je n’aurais qu’à cliquer sur un bouton et le système irait lui-même chercher le fichier excel sur mon ordinateur, le mettrais à jour et réparait les erreurs automatiquement au besoin… le tout terminant avec un jolie voix féminine qui me dirais: votre catalogue en ligne est synchronisé. Puis-je faire autre chose pour vous?

De ce voyage astral, j’en ressort l’essentiel: l’usager veut un formulaire simple en une seule étape. Il veut aussi qu’on l’accompagne sans le laisser seul s’il y a un problème.

• on retrouvera qu’un seul bouton d’action (submit) qui s’appellera: mettre à jour votre catalogue. Le formulaire n’aura qu’une seule étape ;
• l’interface demandera très peu d’informations à l’usager. Par exemple, s’il y a un champ parcourir (browse), il n’y aura pas de bouton envoyer (send) pour ce champs. C’est avec l’envoi du formulaire que le fichier se téléchargera ;
• l’interface intégrera des messages d’erreurs amicaux avec des trucs et astuces aidant l’usager à corriger la situation, ex.: «Il semble que vous n’avez pas inscrit la date. La date demandée est celle que vous retrouvez près du logo de votre…».

À tout les ergonomes et designers, quand vous commencez une interface, mettez vos lunettes rondes et prenez votre baguette magique.