Prototypage Agile : Papier, Tableau Blanc et Balsamiq
Posté par jc-Qualitystreet le 7 juillet 2010
Voilà tout ce qu’il vous faut pour travailler efficacement !
L’activité de maquettage (ou prototypage) fait partie intégrante d’une démarche de conception centrée utilisateur. Et le « Wireframe » est devenu au fil des années l’un des outils préférés des spécialistes de l’Expérience Utilisateur pour communiquer un concept, tester des propositions ergonomiques ou prendre des décisions de conception…
Balsamiq: Qualitystreet
Wireframe : les vrais enjeux
Le wireframe est un prototype dit “basse fidélité“.
Cet artefact non graphique représentant la structure et la mise en page des écrans à développer est selon moi INDISPENSABLE à tout projet de développement informatique. Vont y être représentés et localisés les fonctionnalités, les outils de navigation, les interactions et les moyens d’actions dont dispose l’utilisateur dans l’écran.
Le wireframe est généralement accompagné de quelques annotations pour décrire le mode de fonctionnement des éléments qu’il contient, et mis en contexte dans un scénario (enchaînement d’écrans selon un scénario clé, appelé storyboard). Les outils du marché pour créer des wireframes sont désormais nombreux, du plus simple au plus sophistiqué, du gratuit au très cher.
Pourtant inutile d’aller chercher très loin…
Juste ce qu’il faut …
Attention aux excès. J’ai vu trop de projets (menés selon des méthodes de développement traditionnelles) dans lesquels le wireframe n’était qu’une documentation supplémentaire, un simple livrable produit dans son coin par un consultant spécialiste ou non, motivé ou non et se substituant à tout dialogue entre les acteurs des projets. Quel gaspillage…
A l’inverse, et même si l’Agilité change radicalement les règles du jeu, je suis toujours stupéfait lorsque je débarque sur un projet Scrum en tant que coach Agile, de constater que le « wireframe » n’est que peu, voire pas du tout utilisé. Des ateliers de travail “Conception”, au tableau blanc, entre Product Owner et Equipe ne sont pas non plus, toujours organisés. Quel gaspillage…
Le TRIO GAGNANT
La force du wireframe (la représentation visuelle d’un écran) tient dans sa capacité à se faire dans un mode collaboratif, à susciter le feedback, à communiquer la Vision ergonomique et interactive, et enfin à soutenir les activités des acteurs métier, développement et test impliqués dans le projet.
Voilà sa raison d’être, et à ce petit jeu, le maquettage papier, le travail en équipe médiatisé autour d’un tableau ou sur la base des éléments crées en un clin d’œil à l’aide d’un outil comme balsamiq, sont de loin les plus efficaces.
Ce constat est encore plus vrai, sur les projets agiles, des projets découpés en sprints courts se terminant par la livraison systématique, toutes les 2 ou 3 semaines, d’incréments de produit. Dans ces projets où la dimension collaborative est encore plus forte, l’activité de maquettage, pourtant nécessaire, n’aura de valeur escomptée que si elle s’exerce au plus juste (en terme de timing, de périmètre et de niveau de détail), avec l’implication de tous dans l’objectif d’explorer, d’illustrer et de comprendre. C’est aussi pourquoi je suis revenu d’outils comme Visio, Axure ou PowerPoint qui ont longtemps eu ma préférence mais qui s’avérent la plupart du temps inappropriés dans ces nouveaux contextes…
Le Maquettage Papier
Le maquettage papier constitue la forme de maquettage la plus simple mais pas la moins efficace. Plus de visuel pour plus de feedback, de la collaboration et de la proximité avant tout.
Papier : le plus simple !
La complexité du format varie d’un contexte à l’autre puisque des prototypes papier très évolués peuvent être crées avec le matériel adéquat : manipulation directe, interactivité, esprit ludique et créativité sont alors au RDV.
Prototypage Papier
Les quelques sessions de travail de groupe orientées prototypage que j’ai pu animées ont toujours été très fructueuses tant pour la conception que pour le test.
Workshop de conception : Prototypage Papier avec sous groupes de travail
La simplicité est à la fois une valeur et un principe fort de l’agilité.
Maquettage Tableau Blanc
La forme de communication la plus efficace, à privilégier au maximum.
Communication Modes Effectiveness - Scott Ambler
Les ateliers de conception collaboratifs sont des moments intenses avec de vrais bénéfices :
- ils créent une dynamique collective, impliquent, et aboutissent à une décision collective plus solide
- ils sont source de valeur non seulement dans une dimension d’échanges, mais aussi et surtout en termes de découverte et de création de contenus
- ils sont interactifs, parfois même ludiques, jamais ennuyeux
- ils mettent l’accent sur des sens essentiels : le visuel et le toucher au travers de la manipulation directe: on découpe, dessine, on pose, regroupe, déplace toute sorte d’éléments : post it, papier, posters, on habille les murs
En terme de timing, je demande aux équipes agiles d’organiser ce type de workshop, soit l’après midi du dernier jour du sprint (de préférence), soit le matin du 1er jour avant la réunion de planification.
Le but est de décortiquer, explorer, modéliser collectivement avec le Product Owner, les experts UX et l’équipe le contenu potentiel du sprint qui va démarrer.
Maquettage : PaperBoard
Ces Ateliers spécifications / conception donnent du contexte et des éléments de conversation cruciaux aux User Stories. Ils permettent d’illustrer et de préciser les conditions de satisfaction tout en délivrant de précieux exemples. L’appareil photo est de mise : les photos associées à chaque User story peuvent par exemple enrichir le wiki du projet
Maquettage Balsamiq
Un outil que je conseille de plus en plus notamment aux équipes agiles. Une large librairie de composants, de nombreux template et surtout une grande facilité d’utilisation font de Balsamiq Mockups l’outil de PROTOTYPAGE RAPIDE le plus efficace du moment.
Balsamiq: exemple de wireframe
Je l’ai utilisé récemment dans des contextes d’équipe colocalisée (avec videoprojecteur) et dans un contexte agile offshore (avec partage d’écran) : dans les deux cas son apport fut salué par les équipes durant la réunion de rétrospective en fin de sprint.
Le format Sketch a aussi son intérêt. On ne perd pas de vue que l’avancement du projet (LE VRAI) ne se mesure pas dans le niveau de détail de ce qui n’est au fond qu’une maquette mais dans les livraisons régulières de notre vrai produit, et la valeur qui va s’en dégager.
Balsamiq Mockups peut être utilisé pour modéliser tout type d’interface: du portail web à l’application métier, du logiciel aux interfaces mobiles.
L’outil est payant mais le rapport qualité /prix est excellent.
