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

Prototype de la page d'accueil : http://bit.ly/13SFx4

Enfin, plus exactement, sa maquette fonctionnelle… Au delà du teasing (de bonne guerre en matière de buzz marketing), ce que je souhaite exposer ici c'est la méthode suivant laquelle Bertrand, l'ergonome de l'équipe, et moi avons élaboré cette page d'accueil.

Cette méthode se déroule en trois étapes :

• définition de l'objectif de la page
• hiérarchisation des éléments concourant à la réalisation de l'objectif
• traduction spatiale de l'ensemble.

Avant de détailler ces étapes, et afin d'aider mon propos, voici de nouveau la maquette, mais avec ses principaux blocs numérotés :

Blocs du prototype de la page d'accueil : http://bit.ly/2YfUn5

Définition de l'objectif de la page d'accueil

La page d'accueil est un vendeur, et tout vendeur se doit d'avoir un objectif. Cette étape est donc fondamentale. C'est l'objectif qui va déterminer les choix ergonomiques et graphiques. Ici, c'est recruter des touristes pour Palerme. Il se traduit par la promesse "Visitez Palerme gratuitement !"

Hiérarchisation des éléments de la page d'accueil

Notre vendeur a désormais un objectif, mais ce n'est pas suffisant : il lui faut un message clair, fort et solide pour convaincre sa cible. L'image suivante va nous aider à l'élaborer. C'est la schématisation d'une négociation commerciale, avec ses étapes et ses objections

Négociation commerciale et objections types : http://bit.ly/2mNI1Q

Le premier point est de construire l'argumentaire de vente. Il doit répondre aux questions suivantes :

1. quels avantages tiré-je de votre service ? (Réponse : Your Benefit… c'est à dire ➃)
2. comment faire pour en profiter (Réponse : The Product Works because… c'est à dire ➅) ?
3. pour quel résultat ? (Réponse : Proof c'est à dire ➆)

Le deuxième est de fournir des garanties et des éléments de réassurance (Qualifications, Testimonials, Guarantee). Ici, c'est une présentation vidéo par le Parrain lui-même ainsi que les habituels éléments en pied de page (Mentions légales, Qui sommes-nous ?…). Enfin, il faut proposer un accélérateur de décision (Scarcity, Urgency). Dans notre cas, c'est la gratuité. Tout le reste, qui est susceptible de détourner l'attention, doit être marginalisé (blog, identifiez-vous…) ou éliminé.

Organisation spatiale des éléments de la page d'accueil

Elle est fonction des conventions du Web et du comportement de lecture de l'Internaute. Les conventions sont nombreuses : logo dans le coin supérieur gauche, identification dans le droit, etc. Le comportement de lecture d'une page Web a fait l'objet de plusieurs recherches dont une des plus fameuses est celle de Jakob Nielsen. Selon lui, et comme le montrent les images suivante, nous lisons "en F".

C'est selon ces deux dimensions que nous avons organisé la page d'accueil. Nous n'avons pas hésité à répéter des éléments décisifs, comme la promesse et l'accélérateur de décision.

Est-ce tout ?

Non, bien sûr. Il faut encore confronter cette construction à la réalité. Pour cela, il faut se préparer à mesurer, analyser, tester et améliorer continuellement. Là encore, le web analytics joue un rôle central car grâce à ses outils - questionnaires, mesure d'audience, hitmap tools, A/B testing, multivariate testing… - il va nous permettre de comprendre l'utilisation de notre page d'accueil par notre cible. Tout bon vendeur sait adapter son discours à sa cible !

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