Pourquoi n'ai-je jamais acheté que des macs, et depuis les années 1990, alors que les PC users se sont rarement fait défaut de me rappeler que je pouvais disposer de davantage de fonctionnalités pour bien moins cher ? Plus même, pourquoi, à l'instar de la plupart des mac users, ai-je toujours été un prosélyte de la marque à la pomme ? Parce que j'ai plaisir à utiliser un mac.

Il en est de même pour quelques applications Web : RememberTheMilk, Picnik ou MailChimp.

L'importance du plaisir utilisateur dans la conception des applications Web a été remarquablement soulignée dans un article paru en début d'année et dont je pense qu'il mérite un écho plus large : Emotional Interface Design: The Gateway to Passionate Users.

Son auteur, Aarron Walter, présente sous forme de pyramide les quatre niveaux dans la conception d'une application Web :

Une application doit en premier lieu être fonctionnelle : elle doit faire ce qu'elle se propose de faire. C'est la base, et le plaisir qu'on éprouve à l'utiliser ne saurait le pallier. Ainsi, je me suis récemment enthousiasmé pour le nouveau Seesmic Web. L'équipe de Loïc Le Meur a réalisé un fantastique  travail. Je m'apprêtais - enfin ! - à abandonner mon sempiternel va-et-vient entre Linkedin, Facebook et Twitter pour une application unique et élégante, quand je me suis aperçu qu'elle ne relayait pas les notifications de réactions à mes commentaires sur Facebook. Je ne pouvais donc pas entièrement m'affranchir de Facebook . Je leur ai twitté le problème et, aussi longtemps qu'il ne sera pas résolu (je ne vais pas empirer mon problème en utilisant quatre applications au lieu de trois !), je n'utiliserai pas vraiment Seesmic Web .

Une application doit ensuite être fiable. Un site trop bogué, instable, ou qui plante régulièrement pour des problèmes de traffic (Twitter, can you hear me?) découragera rapidement ses utilisateurs.

En troisième lieu, il y a l'ergonomie, qui semble être la finalité de la conception Web. Et certes, ce n'est déjà pas un mince succès que de faire en sorte que non seulement toutes les fonctions d'un site soient présentes et fiables mais qu'elles soient proposées judicieusement, c'est à dire selon le contexte dans lequel se trouve l'utilisateur. En ce sens, par exemple, l'interface de Google Adwords est d'un niveau de conception et de finition rares.

Toutefois, ce n'est pas tout selon Aarron Walter : au-delà de la satisfaction de ces besoins triviaux, il y a le plaisir de l'utilisateur, qui est le but que doit se fixer le web designer. S'arrêter aux seuls trois premiers niveaux, c'est comme se contenter que votre cuisine soit comestible.

Mais comment mettre en pratique cette ambition ? Il propose pour cela un concept : la personnalité. Celle-ce se manifeste soit par la mise en scène de l'auteur du site, comme dans le cas de ce développeur, soit par le truchement d'une mascotte : le singe de MailChimp, la vache de RememberTheMilk, le logo de Google, etc. Je pressens que c'est plus une bonne solution que la panacée mais, de fait, cela fonctionne bien.

Comment ensuite faire jouer cette personnalité ? En envoyant des messages positifs à l'utilisateur, comme ici dans Flickr.

Plus fort encore, le message dans Picnik est en contexte (j'écris cet article en soirée).

Par l'humour également. C'est par exemple le cas de la barre de progression de chargement de l'application Picnik.

Il y a enfin les surprises, ce que l'on appelle dans l'informatique, les easters eggs, farces cachées par les développeurs. Récemment, Google a célébré le 30e anniversaire du jeu Pacman de la plus plaisante des façons : en invitant ses utilisateurs à y jouer !

Enfin ? Ce dernier exemple indique un élément que l'auteur de l'article a oublié : la dimension ludique, le jeu, le game play. Une des principales raisons du succès de Foursquare, par exemple, est d'avoir stimulé le désir de jouer et de gagner de ses utilisateurs grâce à son système de badges, récompenses décernées après avoir déclaré un certain nombre de visites à un lieu.

Tout cela est bel et bon me direz-vous peut-être, mais quelles sont les retombées business ? Cela permet de se différencier de la concurrence. Combien de sites de gestionnaires de taches, de photos ou de mailing list ? Mais il n'y a qu'un RememberThemilk, Picnik et MailChimp.

Cela permet aussi de fidéliser ses utilisateurs, au point même de vous faire pardonner quelques imperfections ou bugs grâce à ce capital sympathie gagné. Plus même : vous en faite des évangélistes, des personnes qui vont spontanément et sans relâche promouvoir et défendre votre produit.

Bien sûr, c'est à manier avec prudence, en particulier lorsqu'il de l'humour : on le trouve chez les gens en quantité et en qualité diverses. Aussi la possibilité proposée par MailChimp de désactiver le babil du singe est-elle une bonne initiative. Il ne faut pas aussi que ces éléments viennent polluer l'expérience utilisateur.

Cela étant, il n'est pas douteux que se fixer pour but le plaisir de l'utilisateur - sans, encore une fois, avoir ignoré les aspects fonctionnels, la fiabilité et l'ergonomie - peut permettre à une startup d'attirer à elle une communauté d'utilisateurs passionnés.

Web design et plaisir utilisateurs : le nouveau Graal is a post from: Le blog de Madmagz

Quand on développe un logiciel en ligne, rien n'est important comme la compréhension de l'usage qu'en font ses utilisateurs. C'est pourquoi, parmi les différents types de tests, les tests utilisateurs jouent un rôle clé. Des experts comme Steve Krug et Avinash Kaushik les recommandent, et Google en a fait une habitude.

Mais comment observer de façon régulière un groupe d'utilisateurs quand on a peu de moyens (il faut généralement payer les testeurs) et que l'ont n'a pas encore de locaux ? Il y a une réponse, et c'est Userfly.Comme disent les Américains, don't tell, show! Aussi je vous invite à essayer Userfly maintenant !

Impressionnant non ? Userfly enregistre les mouvements des visiteurs d'un site : souris, clics, saisie de caractères… Tout se passe comme si vous étiez au-dessus des épaules de l'homme invisible ! Et il ne vous faut pas dix minutes avant de voir les résultats ! Cela se passe en quatre étapes :

• vous souscrivez à l'offre gratuite (limitée à l'enregistrement de dix visites)
• vous copiez le marqueur (ce sont quelques lignes de javascript)
• vous le collez dans le code de vos pages Web
• dès que vous recevez un e-mail de Userfly, vous pouvez consulter les enregistrements.

Je trouve cette méthode supérieure à celle où l'on observe physiquement l'utilisateur car, dans ce cas, un biais est crée par le fait que celui-ci se sait observé. D'expérience, quelque précaution que l'on prenne, l'utilisateur tend à craindre qu'on le juge.

Les avis sur Userfly sont élogieux. Toutefois, selon moins, ils passent à côté de son potentiel marketing. Observez donc ces trois vidéos tirées de ce blog même. (La qualité est décevante. Userfly ne permettant pas de partager les enregistrements, j'ai employé un logiciel de screencast : c'est donc une capture écran de capture d'écran…)

Le curieux qui télécharge (1'20)

Le chercheur qui s'abonne

Le chercheur qui abandonne

Dans la première vidéo, on a affaire à un internaute qui souhaite se faire une idée sur le livre blanc que le blog lui propose de télécharger. Il passe sans voir dirait-on l'extrait que je fournis et lit les commentaires. Ceux-ci semblent le convaincre et il décide de télécharger le livre blanc. Cela appelle deux types d'action. Le premier est de favoriser les commentaires, en lançant le débat par exemple. L'autre est d'utiliser des outils comme Scribd ou Slideshare pour permettre au lecteur de consulter le livre blanc au sein même du blog.

Dans la deuxième vidéo, l'internaute vient d'un site qui mentionne cet article sur l'affiliation (Userfly fournit les provenances). Il ne le lit pas : il le parcourt, le goûte dirait-on. Cela ne lui semble pas si mauvais, et décide de goûter à d'autres plats. Convaincu, il s'abonne au flux RSS du blog. Cela souligne l'importance (comme dans le cas précédent du reste) de mettre en évidence le call to action (bouton RSS, lien de téléchargement). Cela m'incite à faciliter ce type de lecture (commun sur le Web) en mettant en gras les points clés ou en résumant les articles à la fin en une phrase ou deux.

Un champion d'échecs disait qu'on apprend plus d'une partie perdue que de cent parties gagnées. La troisième vidéo raconte l'histoire d'un internaute qui a trouvé le blog en tapant "generer trafic web" dans Google. Avec une dizaine d'articles et un livre blanc, on ne peut pas dire que je ne l'aie pas traité ! Il passe plus d'une minute sur cet article et s'en va sans rien faire. Quand j'ai vu cela, je me suis aussitôt dit : pourquoi ne pas ajouter à la fin de ces article des liens vers les articles similaires ?

On le voit, parce qu'on ne décortique plus des abstractions (ratios, KPIs…) dans des tableaux de bords mais parce qu'on observe des personnes, on est d'emblée porté à l'action. On peut par exemple se concentrer sur les personnes qui ne consultent qu'une page (bounce) et ainsi améliorer son site bien plus sûrement qu'avec un outil de web analytics classique. Ceci dit, il ne s'agit pas de se noyer dans les enregistrements. Je pense qu'il faut distinguer des comportements types, comme l'indiquent les titres des captures, et les mettre ensuite en relation avec les objectifs du site.

Depuis que j'ai crée la société, je n'ai pas dépensé un euro en logiciels. Ici, je vais retirer le paquet d'oursins que j'ai dans les poches et m'abonner à Userfly. C'est un des outils de web analytics les plus puissant que je connaisse et je ne comprends pas pourquoi il n'est pas utilisé par tous les e-marketers du globe !

Comment observer ses internautes les yeux fermés is a post from: Le blog de Madmagz

J'ai un faible pour ces bibliothèques. Il y a celle, bien connue, de Yahoo! comme également Pattern Tap, déjà évoqué ou bien encore cette galerie de captures écrans réalisée par un ergonome. J'ai récemment découvert, via ce blog, Quince.

Quince propose de naviguer parmi les motifs de différentes façons : mots-clés, tâche à réaliser, etc. Cependant, son principal intérêt est de discuter chaque motif. Le problème à résoudre et son contexte sont exposés, la solution présentée et discutée et l'implémentation détaillée. C'est une bonne façon d'appréhender les motifs clés du Web. Un défaut cependant : il faut télécharger Silverlight pour consulter le site. Pour un site traitant d'ergonomie, c'est assez… savoureux.

Je parlais de faible en introduction. Ce n'est pas seulement cela. Ces motifs ergonomiques sont autant de solutions à des problèmes et, chose précieuse, des solutions standardisées, donc réutilisables. Si ces formes sont largement usitées, alors il est conseillé de les utiliser. En effet, faire appel à des formes appropriées et familières, c'est sensiblement augmenter les chances d'adoption de son site par ses utilisateurs.

Bibliothèque de motifs ergonomiques : Quince is a post from: Le blog de Madmagz

J'ai évoqué dans un précédent article comme selon moi la vidéo pouvait être problématique dans la conception d'une page Web. En effet, bien souvent à mes yeux, une vidéo dans une page Web est une espèce de star égocentrique, indifférente à ce qu'il y a autour d'elle et voulant concentrer toute l'attention.

Le problème n'est pas simple à résoudre, et c'est pourquoi j'ai été impressionné par une récente trouvaille.

Ce site a tout simplement pris le parti de lui accorder pratiquement toute la scène. La vidéo est clairement le centre d'attraction de la page et elle "prend la parole" sitôt le spectateur dans la salle. Cet effet est renforcé par le décor immaculé et le dépouillement du player (pas de cadre et commandes apparaissant uniquement en mouse over).

Mais ce n'est pas là qu'est l'avancée. Cliquez sur les liens à droite et vous découvrirez qu'ils vous conduisent… à une scène de la vidéo même ! J'avais lu que YouTube permettait depuis peu cette option. Cependant, avant ce site, je n'en connaissais pas qui mette en pratique cette option. (Au demeurant, Je ne suis pas sûr que cette vidéo soit hébergée par YouTube.)

L'impact sur l'internaute est indéniable. C'est plus direct, plus concret : c'est captivant.

Le site n'est cependant pas sans défauts. L'ergonomie est contestable, avec ces onglets qui pointent vers des pages extérieures. Graphiquement, c'est médiocre : ces liens empilés plutôt que présentés et la "saleté" du logo sont d'un bien mauvais effet. Bref, ce n'est pas abouti et je ne serais pas étonné si on m'apprenait que la vidéo a été commandée par un service de communication qui a ensuite chargé un webmestre amateur de la mettre en ligne rapidement…

Aussi, se prend-on à rêver à ce qu'une telle technique donnerait dans les mains de professionnels du web design. On pourrait imaginer une page Web présentée comme un menu de DVD, avec des images de scènes qu'un clic lancerait dans un player géant. Je ne sais pas si cela existe, mais si c'est le cas, je suis curieux de voir cela: wow effect garanti à mon avis !

Vers un site Web vidéo ? is a post from: Le blog de Madmagz

L’ergonomie Web a pour but de prendre en compte l’utilisateur final à toutes les étapes de la vie d’un site Web et dans toutes ses dimensions (contenu, graphisme, référencement…).

Pour l’ergonomie, le site web n’a de sens que du point du vue de son utilisateur et de l’usage qu’il fait du site. D'autre part, l’utilisateur n’est appréhendé que dans son rapport au site.Cette définition est large. Au quotidien, cela implique au moins trois choses.

La première est de se poser continuellement la question : “Est-ce que les choix qui ont été fait pour ce site donné sont réellement adaptés à son utilisateur ?“

Par la suite, il est nécessaire d’avoir des connaissances génériques sur le fonctionnement des êtres humains (psychologie cognitive, vision…) et sur les internautes (on retrouve ici la notion d'expérience utilisateur).

Enfin, il est également nécessaire de maîtriser les outils permettant de donner corps à l’utilisateur cible. En effet, la cible, telle que la définit traditionnellement le marketing, est trop abstraite pour pouvoir être utilisée de façon efficace en ergonomie. Des outils comme les les personas et le profilage sont nécessaires, sur lesquels je reviendrai.

Nota bene

L'article d'origine se trouve ici.

Qu’est-ce que l’ergonomie Web ? is a post from: Le blog de Madmagz

Bertrand Evain, l'ergonome avec qui je travaille sur le projet, tient un blog. Certains de ses articles sont intéressants et je les reprendrai ici. Celui qui va suivre (dont j'ai remanié la forme), traite de l'utilisabilité d'un système informatique, qu'il s'agisse d'un site Internet, d'un logiciel, d'un téléphone…

Qu'est-ce que l'utilisabilité ?

L’utilisabilité (usability en anglais) correspond à la facilité d’utilisation d’un site. D’après la norme ISO 9241-11 :

Un système est utilisable lorsqu’il permet à l’utilisateur de réaliser sa tâche avec efficacité, efficience et satisfaction dans le contexte d’utilisation spécifié.

L’efficacité correspond à la réussite ou l’échec de l’utilisateur pour une tâche donnée, par exemple modifier sa signature personnelle dans Outlook. C’est un critère binaire : réussite ou échec.

L’efficience mesure le degré de difficulté rencontré par l’utilisateur pour accomplir sa tâche. Par exemple, s'il a réussi à modifier sa signature au premier essai, le système sera jugé efficient. Le nombre d’erreurs commises, de clics effectués, de recours à l’aide, le temps passé, le recours à une aide extérieure, etc. sont autant d’indicateurs de difficulté.

La satisfaction est un critère plus subjectif, qui renvoie à un ressenti général.

Contre-exemples illustratifs

Cas d'un manque d’efficacité : le site tinkco.fr

Certains sites requièrent l'acceptation de cookies par votre navigateur pour qu'ils puissent être utilisés.

Dans notre cas, si votre navigateur les refuse, l'ajout au panier ne fonctionne pas et vous aurez beau y ajouter des éléments, il restera vide. Les chances sont alors grandes pour que vous abandonniez le site, soit que vous n'ayez pas aperçu la mention "Problème de panier ?" dans la barre de navigation latérale, soit que tout en l'ayant vue vous n'ayez pas envie de passer du temps à résoudre le problème.

Dans les 2 cas, nous dirons que le système manque d’efficacité : l'utilisateur n’a pas réussi sa tâche et il a quitté le site sans pouvoir acheter.

Cas d'un manque d'efficience : le site de la fédération française de tennis de table

Les joueurs de tennis de table vont sur le site de la FFTT principalement pour deux raisons :

• s'informer, après chaque journée de championnat, des résultats et les classements
• s'informer, une fois par mois, de leur performance personnelle et de l’évolution de leur classement.

La première tâche requiert six clics, à quoi s'ajoutent parfois un défilement (scrolling) et une action sur un bouton de sélection. La seconde requiert neuf clics avant de devoir saisir son nom.

Ce qui est problématique ici, ce n’est pas tant le nombre de clics que le fait que ces clics concernent les tâches les plus fréquemment effectuées par l’une des cibles principales du site.

Cas d'une utilisation peu satisfaisante : le site allocine.fr

Rappelons que la satisfaction est un critère subjectif : l’utilisateur peut très bien avoir réussi sa tâche mais avoir un ressenti général négatif.

C’est le cas du site allociné. Il est facile à utiliser mais, à cause du caractère intrusif de la publicité, il laisse une impression générale négative. Les propos d'une internaute dans un forum sont du reste éloquents :

Vous ne trouvez pas qu’il est insupportable le site d’allocine ? Franchement un pub de 45 secondes à chaque visite de page, c’est relou…. Y’a quoi comme site dans le meme genre mais avec moins de pub ?

Conclusion

Le billet de Bertrand s'arrête sur ces mots mais j'ajouterai une conclusion. Je trouve intéressant que les deux premiers cas relèvent d'un défaut de compréhension des besoins et des contraintes de la cible alors que le dernier relève davantage d'un manque de respect à son endroit. Là, on compromet la conquête ; ici la fidélisation. Mais, en l'espèce, nous touchons au problème de la publicité display sur Internet, sur lequel Bertrand prévoit de revenir… et moi aussi.

L’utilisabilité en ergonomie is a post from: Le blog de Madmagz

Il y a quelques jours, après avoir réinitialisé mon navigateur Safari, j'ai dû ressaisir identifiant et mot de passe sur chacun de mes sites accoutumés. Cette fastidieuse expérience m'a fait prendre conscience d'un bénéfice inattendu de l'ergonomie, et qui pourrait bien être un des secrets de l'affection qu'ont les mac users pour leur machine.

Au moment de me connecter à Box.net, je ne parvenais plus à me rappeler ni quel e-mail j'avais utilisé comme identifiant ni le mot de passe attaché. Voici, à chacun de mes tâtonnements, ce qu'invariablement m'affichait le site.

Invalid login details

C'est tout ce qu'il trouvait à me dire alors que j'étais enlisé dans ce formulaire et qu'il avait les moyens de m'aider ! En effet, le service stockant tous les e-mails servant d'identifiant, il était en mesure de me dire si celui que je saisissais était juste. Cela m'aurait alors permis d'affiner mes essais en les appliquant à l'un des deux champs seulement.

Qu'est-ce que cela signifie sur le plan informatique ? Et bien que cette partie a été programmée selon le schéma logique (simplifié) suivant.

Il m'aurait pourtant été bien plus utile qu'elle l'ait été selon celui-ci (toujours simplifié).

L'inconvénient de cette seconde option est manifeste : cela prend davantage de temps à concevoir, à programmer et cela coûte donc plus cher à l'entreprise. C'est d'autant plus vrai si l'on adopte une telle approche pour tous les formulaires du site.

Pourtant, on sait bien que l'internaute a peu de patience et qu'il a vite fait de jeter aux oubliettes un service qui lui demande trop d'efforts. Pour une entreprise, cela signifie que l'adoption rapide de son site Web est un enjeu de première importance. Ce temps que l'entreprise a voulu s'épargner, elle le fait dépenser à ses utilisateurs : je vous laisse juge si c'est un bon calcul !

Il y a plus. Découvrir que la machine comprend votre faux pas et vous indique comment le réparer, cela peut être perçu par un humain comme de l'attention. Imaginez maintenant cette attention déployée à grande échelle sur un site. Les occasions sont nombreuses. Je songe ici, par exemple, à Flickr qui vous accueille à chacune de vos connexions avec le bonjour d'une langue différente. Imaginez de surcroît des prévenances, c'est à dire des messages vous indiquant comment procéder avant que vous n'abordiez une zone glissante. Je songe ici, par exemple, à ces formulaires qui vous exposent la syntaxe de saisie d'un numéro de téléphone avant de vous le demander. Imaginez enfin de l'humour, comme en fait preuve Picnik pendant le temps de chargement de son éditeur photo. Vous gagnez alors insensiblement l'impression d'un site qui vous comprend, qui se soucie de vous. Cela devient un site familier auquel on finit insensiblement par s'attacher.

Or les productions d'Apple - ordinateurs, baladeur, système d'exploitation, téléphone portable… - sont truffées de ces attentions et de ces prévenances, souvent subtiles. Je pense que, au moins autant que la dimension esthétique, l'ergonomie est une des flèches dont elle se sert pour viser au coeur ses utilisateurs.

L’ergonomie ou la nouvelle flèche de Cupidon is a post from: Le blog de Madmagz

Il n'y a guère de doute que pour une poignée de façons de bien réaliser une idée, il y en a des milliers de la gâcher. L'enjeu dans notre cas est d'autant plus grand que le service est nouveau et que c'est un logiciel en ligne : nous créons un usage et, sur Internet, les utilisateurs ne vous laissent votre chance qu'un instant, avant de vous adopter ou de vous rejeter.

Aussi est-il crucial d'adopter une méthode qui limite la perte de temps liée aux tâtonnements, aux discussions sans fin, et balise le chemin vers la bonne formule. Celle de l'ergonome avec qui j'ai travaillé, Bertrand Evain, est d'une remarquable puissance. Cette méthode repose sur deux outils et une philosophie.Le premier de ces outils est le cahier des charges fonctionnel. C'est un document Powerpoint que nous avons mis en ligne sur Google Documents de façon à pouvoir y travailler conjointement. Son objectif est double : déterminer les contenus et les fonctionnalités du site ; faire le lien avec la maquette fonctionnelle.

Ce document décrit :

1. le projet
2. le produit final (dans son environnement, par ses éléments constitutifs, par ses usages)
3. les utilisateurs du site Internet (qui permet de créer et de consommer le produit final)
4. les tâches utilisateurs (utilisateurs qui sont le producteur et le consommateur du produit final)
5. le contenu du site Internet (dans les grandes lignes seulement : front office, back office, langues, versions du service, droits…)
6. le plan de travail.

De ces différents points, le troisième et le quatrième me semblent particulièrement importants. Une page Web n'existe pas in abstracto : elle est destinée à quelqu'un pour qu'il en fasse quelque chose. Le travail sur les utilisateurs (qui sont-ils ? pourquoi utiliseraient-ils le service ? que doivent-ils faire ?…) est fondamental.

Le second outil est la maquette fonctionnelle (qu'on appelle également prototype, wireframe ou storyboard). La maquette définit les pages Web, leur succession, leur contenu (textes, visuels…) et l'agencement de ces contenus. Bertrand la réalise au moyen d'un progiciel. La maquette fonctionnelle concrétise le cahier des charges.

Le lien entre la maquette et le cahier des charges s'apparente au lien entre le scénario d'un film et sa mise en scène. Cependant, un bon film est-il possible sans un dialogue nourri entre son réalisateur (Bertrand) et son producteur (votre serviteur) ?

De fait, ces outils sont nourris par les discussions auxquels ils donnent lieu. Nos réunions avaient lieu soient par téléphone soit dans nos bureaux. Elles étaient parfois vives, car c'est aussi un débat d'idées. Si elles ont néanmoins été fécondes, c'est que nous avons su éviter deux écueils. Le premier est le compromis, espèce d'accommodement mou se substituant à la confrontation. Le second est d'en faire une affaire personnelle ("je veux avoir raison", "c'est moi l'expert", "c'est moi le client", etc.) : le point n'est pas d'avoir raison ou tort mais de trouver la meilleure solution. Car en définitive, il n'en est qu'un qui a toujours raison et c'est le juge de paix : l'utilisateur.

Chaque discussion donnait lieu à un compte-rendu qui servait de base à une nouvelle mouture du cahier des charges ou de la maquette fonctionnelle. Nous avons ainsi avancé jusqu'à la version finale de la maquette, qu'il fallait désormais tester. Avant de tourner le film, l'on montre le storyboard au public auquel il est destiné afin de recueillir son avis. Mais ceci est une autre histoire…

En conclusion, une des grandes forces de cette méthode est qu'elle fournit des supports concrets, objectifs et complémentaires aux discussions. Celles-ci s'en trouvent singulièrement fécondes, au point qu'elles m'ont fait souvenir d'un mot que je n'avais plus utilisé depuis mes cours de philo en classe terminale : la maïeutique. Selon cette définition, c'est une méthode qui permet, grâce au dialogue, à un esprit d'accoucher de vérités demeurées cachées.

Comment passer de l’idée aux pages Web ? is a post from: Le blog de Madmagz

Au terme de deux mois et demi de conception, Bertrand Evain (l'ergonome de l'équipe) et moi avons abouti à la maquette fonctionnelle du site. Une maquette fonctionnelle (ou story board ou wireframe ou prototype), c'est la représentation des différents écrans du site. (On peut pour cela utiliser Powerpoint ou un outil professionnel comme Axure)

Avant de passer la main à l'équipe technique, il nous fallait franchir cette étape cruciale : les tests utilisateurs. Pour prendre une image, c'est comme pour un architecte de montrer les plans de la maison qu'il a conçue à de probables habitants avant qu'elle ne commence à être construite (développement) et peinte (graphisme). Si les habitants la rejettent, il n'y a plus qu'à recommencer !

Bertrand a pour cela une méthodologie en cinq points. La première est de baliser le parcours en déterminant, pour chaque écran, le point à valider. Cela peut se représenter sous la forme du tableau ci-après.

Il faut ensuite choisir les personnes. Une demi-douzaine suffit, selon Bertrand, pour découvrir 80% des problèmes. L'enjeu pour nous étant surtout de valider la compréhension et, d'autre part, le service étant grand public, nous n'avons pas établi de profil cible.

Vient le moment où l'on présente le test aux personnes. Il est important de les mettre à l'aise et de préciser que le but n'est pas de les juger mais de recueillir leurs réactions. Il n'y a ni bonne ni mauvaise réponse : les torts, s'il y en a, sont nécessairement pour nous. Il est également important de ne pas servir d'aide : la personne doit se débrouiller comme si elle était seule.

Dans la prise de notes, il importe d'être factuel et d'avoir garde à deux choses : le comportement et les propos. Il est frappant de voir comme les comportements varient devant un même écran. Certains passent leur souris sur les boutons comptant voir apparaître une légende, d'autre recherche une FAQ, etc. Quant aux propos (voice of customer), ce sont des pépites qu'il faut recueillir avidement. Ils véhiculent plus que le sens : le sentiment, l'état d'esprit.

Enfin, la synthèse doit faire la part entre les réactions singulières et les leçons.

Les tests utilisateurs ont porté à la lumière des frictions lors du passage de l'étape de création à celle de publication, des termes inexplicites, des incohérences, etc. Ces points étaient toutefois mineurs : toutes les personnes ont compris rapidement le propos du service et la façon de l'utiliser. La conception était validée !

Et l'enjeu n'est pas à mésestimer. Ce qui est gagné ici, c'est un coût d'acquisition inférieur, un taux d'adoption et d'usage supérieurs, des recommandations en plus grand nombre, un service utilisateur moins sollicité, des ajustements techniques éliminés, etc. Autant dire que le travail ergonomique et les tests utilisateurs qui le sanctionnent sont indispensables.

Les tests utilisateurs is a post from: Le blog de Madmagz

Peu après le travail que nous avons conduit avec Bertrand (l'ergonome) sur la page d'accueil, j'ai briefé notre graphiste Cécile.

Quoique je lui aie communiqué notre prototype et en ait développé la logique, je l'ai invitée à ne pas hésiter à s'écarter de nos options si elle le jugeait opportun. Je lui ai en outre indiqué quelques exemples intéressants de page d'accueil en guise de source d'inspiration.

Au terme de quelques jours, elle m'a communiqué une version que je vous laisse découvrir…

Un instant ! La version primitive de la maquette fonctionnelle, pour rappel :

Et maintenant la proposition de Cécile :

C'est sensiblement supérieur ! Je l'ai transférée à Bertrand, qui fut du même avis que moi. Quelles sont les raisons à cela ?

Il me semble que la grande force de cette version, c'est qu'elle est compréhensible sans même qu'il soit besoin de savoir de quoi elle traite. Elle est plus intelligente, qu'il s'agisse de l'organisation, du rythme, des formes, des tailles ou des couleurs.

L'organisation tout d'abord. Si l'on exclut les rituels en-tête et pied de page, les deux étages font davantage sens. Le premier déploie un argumentaire en trois étapes et propose dans la foulée une action. Le second, pour les sceptiques, les curieux, les inquiets, etc. expose le fonctionnement et fait toucher du doigt le bénéfice. Il rassure et motive. Notons au passage que tout cela se déroule dans le sens de la lecture. Autre élément soulignant les priorités : le premier étage occupe toute la largeur de la page quand le second compte deux compartiments.

Le rythme est manifeste, grâce à ce puissant jeu de pavés numérotés et de flèches couronné par l'imposant bouton. Il est, de façon plus globale, dicté par les titres, à qui sont réservés la couleur brune.

Les formes sont logiques : les flèches pour orienter, les carrés pour exposer et le bouton pour agir.

Les tailles sont également employées logiquement. Par exemple, à la promesse "Visitez Palerme gratuitement !" revient la taille de police la plus importante.

Enfin, les coloris font également sens. Ils rencontrent du reste une théorie personnelle. Pas plus de trois couleurs, et avec pour logique :

• une sombre pour définir les cadres, les éléments forts ;
• une claire, la complétant, agissant de façon plus nuancée, contextuelle ;
• une vive, mettant en relief les objectifs de la page.

Parmi mes résolutions personnelles en tant que nouvel entrepreneur, il y avait celle d'écouter autant que possible (pas toujours mon point fort), pour la raison même que j'avais tout pouvoir de décision. Je m'étais également promis de favoriser autant que possible l'expression des points de vues. Cécile est graphiste, c'est à dire qu'un de ses talents doit être de traduire visuellement des idées, des raisonnements. C'est à mon sens ce qu'elle a très bien fait ici.

V2 de la page d’accueil du Palermo Project is a post from: Le blog de Madmagz