En tant que designers, nous mettons souvent en place des systèmes qui nous semblent logiques et « couler de source ». Mais, le nez collé sur nos échéances et sur nos contraintes, influencés par notre propre expertise de l’internet, nous pouvons facilement perdre de vue que nous ne sommes jamais (ou quasi jamais) représentatifs des utilisateurs finaux du site que nous concevons. Dès lors ces questions se posent:

• Comment savoir si les utilisateurs cibles d’un site peuvent réaliser les tâches qu’ils souhaitent de la manière qui leur semble la plus efficace et la plus naturelle possible?
• Comment « mesurer » une expérience de manière à pouvoir déceler les éventuels problèmes et émettre des recommandations d’utilisation?

Tels sont les objectifs de la technique d’évaluation de l’expérience utilisateur que je me propose de vous exposer dans cet article.

Ze mission

Il s’agit d’inviter des utilisateurs représentatifs du public visé à naviguer sur le site (ou un prototype du futur site) après lui avoir demandé d’y réaliser certaines tâches. (En moyenne, 1 à 5 utilisateurs-tests par public-cible identifié devraient suffire).

On lui demande également de penser tout haut, d’expliciter à chaque instant ce qu’il est en train de faire ou de chercher à faire.

Son parcours sur le site est enregistré via un logiciel de capture de navigation (« screencast » ou « screen capture » en englishe), un micro (idéalement un micro-casque; la qualité du son est meilleure) et, bonus, une webcam qui permet de lire les expressions de son visage tandis qu’il ou elle navigue. On s’intéresse particulièrement aux émotions (satisfaction, frustration, sentiments de confusion ou d’être « perdu », etc.).

Le kit

Cette technique pose plusieurs exigences :

• avoir un ordinateur, idéalement un portable muni d’une webcam
• avoir un logiciel de capture de navigation performant
• un casque-micro
• développer sa capacité de remise en question et à se mettre dans la peau de l’utilisateur final
• pouvoir « lire entre les clics ».

Personnellement, un petit macbook blanc et silverback constituent l’arme ultime, fiable et performante.

Préparation d’un test utilisateur

1. Déterminer un scénario comprenant la ou les tâches à effectuerInclure toute fonction critique (pouvoir se connecter via un écran de login, pouvoir utiliser le menu de navigation principal de manière à se rendre jusqu’à l’écran testé, etc.)
2. Configurer et tester la configuration matérielle et logicielle
   • vérifier la disponibilité de mémoire RAM et d’espace disque suffisante pour un enregistrement vidéo de 60 minutes.
   • installer le logiciel de capture de navigation : c’est le plus difficile et l’objet principal de ce billet.
     • Sur Mac OS X: la meilleure application à un coût extrêmement raisonnable est Silverback. D’une simplicité enfantine, elle gère à la fois la capture de la navigation et l’enregistrement de la webcam. Lorsque vous rejouez l’enregistrement, les clics sont visualisés comme des petites « ondes » graphiques. D’une simplicité et d’une fiabilité extrêmes; c’est l’outil idéal.
     • Sur Windows: c’est plus compliqué… En plus de Camtasia (payant), en voici deux gratuits:
       • Free Screen Capturer, mais il arrive souvent que la vidéo s’interrompe tandis que le son continue
       • BB FlashBack Express: je ne l’ai pas testé mais les échos que j’en ai eu sont positifs.

Notez qu’il existe des sites offrant ce genre de fonctionnalité (exemple: ScreenToaster parmi d’autres) , mais d’après mon expérience, leur fiabilité est décevante sur de longs enregistrements, tandis que l’exportation du fichier vidéo final est souvent limité.

Le test

Une fois l’utilisateur installé, vérifiez qu’il a bien compris la consigne de « parler tout haut » en lui demandant d’expliquer comment, par exemple, régler la hauteur de sa chaise de bureau. Cela doit donner quelque chose comme ceci:

« Je veux régler la hauteur de l’assise. Je cherche avec ma main droite une manette. Je trouve une manette et je tente de la pousser; le siège descend. J’ajuste la hauteur en me levant, c’est bon, j’y suis ».

Faites-lui également réciter le scénario (les tâches à effectuer).

Enfin, vous pouvez lui poser d’autres questions, du style:

•  » décrivez votre humeur ? »
• « comment vous attendez-vous à réaliser ces tâches ? »
• etc.

Insistez bien sur le fait que ce n’est pas lui qui est testé, mais l’interface et qu’il ne doit donc pas craindre d’être jugé ou moqué. Au contraire, toute difficulté rencontrée est intéressante pour le travail.

Une fois que le test commence, vous vous taisez et observez. N’intervenez pas, afin de ne pas influencer ses choix.

Après le test

Lorsque le test est terminé, demandez-lui de décrire son état émotionnel (satisfait, frustré, de bonne ou mauvaise humeur…) et puis de se lever. Vous couperez l’enregistrement après cela.
Le moment est venu d’analyser le déroulement de la séance et de coucher sur papier les observations faites, ainsi qu’émettre des recommandations d’amélioration.

Voilà, je pense que c’est tout, le reste relève de votre… expérience !

Je ne peux que vous conseiller de tester vos créations: c’est amusant, riche en enseignements et cela va améliorer votre instinct de web designer.

Mais revenons à nos wireframes: deux nouveaux candidats à l’intégration de ma boîte à outils ont pointé leur nez aujourd’hui.

1. hotGloo

hotGloo crée des wireframes au look plus professionnel, plus propre que balsamiq, et semble très prometteur. Cela étant, tout votre travail est conservé sur leurs serveurs, ce qui ne me plait guère.
Par ailleurs, la gestion dynamique du menu de navigation du wireframe (voir vidéo ci dessus) est impressionnante. Je lui donnerai une chance pour mon prochain projet.

2. FlairBuilder

FlairBuilder me fait fort penser à balsamiq, en plus cher.

Et plein d’autres

Je suis également tombé sur ce sondage, qui liste encore des dizaines d’outils de wireframing / prototyping, en plus des manières classiques de faire du wireframing.

Enfin, je vous recommande la revue très fouillée de plusieurs logiciels de prototyping sur Usaddict, en français.

C’est l’overdose !

Si vous avez une expérience à partager avec ces deux outils, I’m all ears !!

Très simple d’utilisation, il permet de rapidement créer des wireframes et de les faire partager en envoyant l’ URL pointant vers votre wireframe aux adresses email que vous indiquez, ou via image png (et donc non navigables).

Positif

Le test que j’ai réalisé dévoile un outil extrêmement facile d’utilisation, qui génère des wireframes solides et propres et qui n’a pas planté (chose qui arrive relativement régulièrement avec Balsamiq Mockup Desktop).

Le plan gratuit permet de créer un wireframe fait de 4 mockups maximum, partageable à deux personnes uniquement. Le plan « premium », donnant un accès illimité, vous coûtera 4 USD par mois ou 49 USD par an.

Au final, un bon produit, encore jeune et qui va donc se consolider. Utile en l’état pour mes étudiants: dieu sait ce que l’on peut faire avec 4 écrans

Cette vidéo (sans son) vous montre rapidement son fonctionnement, supra simple:

Négatif

1. me demander les adresses email des personnes qui doivent voir les mockups: qu’est-ce qui me prouve qu’il ne les utilisera pas à un moment ou à un autre pour les revendre ?
2. ne pouvoir exporter des png et perdre l’aspect wireframing oblige à utiliser leur viewer en ligne. Je n’aime pas être prisonnier de leur système. Ils pourraient générer une page html par image et utiliser des « imagemap » pour implémenter la navigation entre les écrans.
3. l’email envoyé oblige les reviewers à se créer un compte. Pas question de demander cela à mes clients !
   

   « Alexandre Plennevaux has shared this Wireframe: test mockup.
   Sign-up a free account using your email address: aplennevaux@domain.com at http://www.mockflow.com and view this wireframe under ‘Shared Mockups’ »

Conclusion

Au final, je considère que Mockflow représente potentiellement un concurrent direct pour balsamiq Mockup, mais qu’il souffre de quelques erreurs de choix stratégique et a besoin de temps pour mûrir .

Découverte d’un nouvel outil de production de wireframes / mock ups:

iplotz.

Après un premier essai rapide, il me semble pas mal du tout, un peu plus « propre » que balsamiq Mockups, mais nécessite peut-être un peu plus de temps pour produire un mockup, à cause de l’absence de « snap into place » présent un peu partout et sous diverses formes dans balsamiq, et fort utile pour ajuster les proportions des éléments rapidement.

iPlotz existe en version en ligne et en version desktop (75 USD).

Voici une liste de logiciels, gratuits (freeware) ou non, qui permettent de faire des mockups, prototypes et/ou wireframes. Si vous en avez testé l’un ou l’autre, n’hésitez pas à partager vos impressions via les commentaires.

• Balsamiq Mockup : une application offline (Adobe Air) ou en ligne (Flash player). 79 USD mais possibilités d’avoir une licence gratuite (voir le site). Très bon outil, prise en main rapide, mais pas encore de possibilité de « voyager » d’un mockup à l’autre. et en plus on peut naviguer d’un écran à l’autre !!!
• Pencil: gratuit mais peu d’objets, à part le minimum minimorum pour les applications Desktop. Pour le web, c’est un peu court… A suivre cependant.
• Mockupscreens: pas essayé, 79 USD
• Microsoft Visio (cher!!) + Nick Finck’s IA / Wireframe Stencils (gratuit): de manière générale, un peu inutilement complexe.
• Microsoft Powerpoint (cher !) + Powerpoint Prototyping toolkit. Gratuit, pas encore essayé, mais cela à l’air essentiellement pour les applications Desktop.
• Axure: très complet, voir trop, donc prise en main relativement longue. Très cher.
• OmniGraffle: que pour Mac, donc je ne l’ai pas essayé, mais à en juger par les screenshots, c’est déjà trop « graphiquement » léché pour mon usage. Payant.
• Denim: gratuit, mais mieux vaut avoir une tablette graphique. Pas de librairie d’objets, donc c’est en fait un logiciel de dessin optimisé pour les schémas.
• Yahoo Design Stencil: gratuit, vous fournit les objets UI à utiliser dans Photoshop, OmniGraffle et autres. Téléchargeable au format pdf, png, svg. Mais pour mon usage, c’est déjà trop « graphiquement » léché.
• Serena Prototype Composer: semble être gratuit, très orienté Desktop, mais je ne l’ai pas encore essayé donc ne me croyez pas sur parole.
• WireframeSketcher: plugin Eclipse encore en développement, prix lorsque publié se situant entre 50 et 80 USD.

Si vous en connaissez d’autre, je suis toute ouïe (enfin… « vue », pour être exact).

Dans le cadre de mes cours dédiés à l’ergonomie web, je cherchais un outil gratuit à proposer à mes étudiants pour réaliser des schémas d’interfaces-utilisateurs rapidement et proprement.

Notez que je leur apprends à commencer par une discussion muni de simples feuilles de papier et d’un crayon: on n’a toujours rien inventé de mieux pour permettre au cerveau de s’exprimer rapidement. Mais ces schémas réalisés à la main sont souvent difficiles à relire après quelque temps, aussi il est bon de directement les mettre au propre, sans que cela prenne trop de temps.

Balsamiq Mockups est un outil payant mais qui propose de tester le produit via une interface en ligne (nécessite le flash player) qui permet de sauvegarder en png son écran. L’outil est génial parce que très simple et intuitif, et la version en ligne lui est fidèle… sauf un nagscreen qui revient toutes les x minutes. Plutôt énervant.

Depuis j’ai découvert un produit opensource développé sur le moteur gecko de Mozilla, et donc disponible à la fois comme extension firefox et comme application bureau « stand-alone » (via le moteur xulrunner). Il s’agit de « Pencil« , et ma foi, l’outil est simple et efficace. Je ne l’ai pas encore beaucoup testé mais si vous le connaissez et que vous avez des remarques à émettre, cela m’intéresse !