Mariage entre les user stories et Wireframes

Le monde évolue, les règles changent, les usages se transforment à une vitesse fulgurante et vos produits sont contraints à tous ces bouleversements. On prône de plus en plus la conception centrée sur l’humain pour optimiser les points de contact entre une entreprise et ses clients, créant ainsi une expérience et de la valeur.

La méthode agile appliquée à un projet consiste à travailler en cycles itératifs et incrémentaux pour répondre à de nombreux objectifs : le juste-à-temps, la chasse au gaspillage, la priorisation par la valeur, l’augmentation de la qualité produit, etc.

Généralement, l’équipe qui participe au projet est constituée de nombreux acteurs, des internes et des prestataires, avec un certain turn-over, aux profils très variés et complémentaires. Chacun y contribue avec ses sensibilités, langages et compétences liés à son métier. Ils appréhendent donc tous une fonctionnalité sous un prisme différent : métier, stratégique, marketing, graphique, technique…
Partant de ce postulat, concentrons-nous ici sur l’expérience utilisateur : la nécessité de définir et partager une seule et même vision du besoin attendu par le métier.

Il faut donc construire des bases solides à notre backlog : voyons ici la force de l’union des wireframes avec les user stories !

Revenons d’abord sur ces deux supports avant de les unir

Une user story

C’est l’expression d’un besoin utilisateur enrichie d’un ensemble de conditions d’acceptation qui en définissent le périmètre fonctionnel. Nous pouvons également l’appeler histoire utilisateur.

Idéalement, la structure d’une user story est au format suivant :

En tant que <personas> je veux <description du besoin> dans le but de <objectif de la demande>

Ce formalisme permet de s’assurer que les points principaux ont été réfléchis, à savoir :

  1. A qui s’adresse la fonctionnalité ?
  2. Quel est le besoin ?
  3. Dans quel but fait-on cette demande ?

Ses objectifs sont :

  1. Etre un support de communication avec l’équipe de réalisation.
  2. Etre compréhensible par tous les intervenants du projet. Pour cela on évitera d’utiliser des termes trop techniques, et on préférera le langage de l’utilisateur à celui du développeur.
  3. Etre support de pilotage de l’avancement du projet. Pour cela on préférera les histoires de petites tailles.
  4. Etre (autant que possible) I.N.V.E.S.T.

Un wireframe

C’est une « maquette fil de fer », volontairement épurée, on parle aussi de schéma ou de storyboard dynamique. Le wireframe est orienté expérience utilisateur.

Ses objectifs sont :

  1. Définir les zoning et l’ergonomie (pour tous les devices).
  2. Architecturer et hiérarchiser les contenus.
  3. Définir les principes de navigation et le parcours utilisateur dans les écrans.

Parmi les atouts des wireframes, s’ils sont exploités aux formats web dans la résolution cible, on notera une facilité sur la couverture des objectifs suivants :

Objectifs stratégiques  :

Faciliter la présentation aux sponsors ou investisseurs dans la phase de montage du projet.
Solliciter l’approbation d’un panel d’utilisateurs tant en amont qu’en aval de la conception, Ils peuvent ainsi se projeter dans l’expérience du produit.

Constituer un référentiel permettant la réalisation des didacticiels, des brochures marketing qui pourra se faire en amont ou en parallèle de la réalisation.

Objectifs opérationnels :

Faciliter la compréhension des directeurs artistique lors de création de la charte et des intégrateurs graphique.
Constituer un référentiel permettant à l’équipe de réalisation d’avoir une vision d’ensemble des fonctionnalités qui sont à développer.
Faciliter les travaux de traduction du produit et l’écriture des tests d’acceptance.

Certains outils permettent de générer une documentation fonctionnelle au format word ou pdf, comme par exemple Axure.

La force de ce couple : la complémentarité

Une frontière délicate existe entre les user stories et les wireframes, et se matérialise au niveau des règles de gestion. Celles-ci peuvent se dissocier en deux catégories :

  1. Les règles de gestion de l’IHM (la forme)
  2. Les règles de gestion des traitements métier (le fond)

En faisant cette distinction, nous observons une répartition naturelle entre nos deux supports :

  1. Wireframe : la forme
  2. User Story : le fond

Si cette frontière sur la qualification des règles de gestion est bien respectée alors le mariage sera une réussite profitable et durable pour le projet et les équipes. L’intégration de nouveaux acteurs sur le projet sera aisée et rapide. Nous obtiendrons une alliance très puissante par la complémentarité sous condition que les critères d’acceptance restent toujours dans les user stories. De plus, toutes vos informations sensibles restent à l’abri dans votre backlog ; vous pouvez diffuser vos wireframes en toute sérénité.

Démonstration par l’exemple

Simplement pour mettre en lumière comment unir physiquement vos user stories et vos wireframes.

Ajouter dans le corps de vos user stories un lien direct à l’écran dans les wireframes contenant cette histoire, ici la user story d’exemple est au format A4 :

usa4
User story A4

Dans la phase de rédaction, ajouter dans vos wireframes dans la partie droite la liste des user stories rattachées à l’écran (sous forme de post-it dans l’exemple) et mettez en évidence les zones correspondantes aux user stories, cela permettra à votre équipe de réalisation de s’y retrouver lors de la réalisation :

2axure
Interface d’Axure

En respectant une nomenclature simple de type web pour le nommage de vos pages au sein de vos wireframes (pas d’espace, pas d’accent, des tirets en séparateur, etc ..), ceux-ci pourront être mis à disposition sur un serveur web.

Ainsi, depuis une user story on pourra directement accéder à l’écran correspondant dans les wireframes.

2usweb
Wireframes dans safari

Dans cet exemple, nous dissocions les nombreuses et complexes informations relatives à l’IHM de celles réellement attendues par la fonctionnalité. Il n’y a pas de surcharge dans la user story, elle reste simple et ouverte aux échanges avec l’équipe lors de la réalisation ! Les wireframes peuvent dès lors êtres envoyés à votre agence préférée pour réaliser la charte graphique. L’organisation du pilotage des tâches d’intégration dans les phases de réalisation des user stories sera traité dans un prochain article.

Lors des « négociations » avec l’équipe, pensez toujours à mettre à jour vos wireframes, idéalement pendant la cérémonie d’estimation ou immédiatement après.

N’hésitez pas à afficher vos wireframes juste à côté de vos Kanban dans votre cockpit projet, le bénéfice en sera encore plus important.

Quelques pièges à éviter

Si vous débutez avec les wireframes, choisissez un outil simple, concentrez votre énergie sur le besoin métier et non sur l’outillage !

Privilégiez toujours des wireframes en noir et blanc : laissez les graphistes se charger de l’aspect graphique dans la charte. Cette pratique vous facilitera la vie et vous vous concentrerez sur le fond sans perdre de temps avec la forme.

De nombreuses librairie « sketchy » existent, n’hésitez pas à les tester, mais allez toujours au plus simple ! Les outils de wireframing sont des outils très puissants, presque trop. Les capacités d’animation offertes peuvent vous permettre d’enrichir l’expérience utilisateurs puissamment, mais attention au revers de la médaille. Vérifiez toujours la faisabilité ergonomique et surtout technique avant de proposer à votre métier des effets wahou. En cas de doute, laissez votre fonctionnalité sans effet pour éviter de générer une déception client en phase de réalisation.

Conclusion

Certe ce mariage ne sera pas adapté à chaque contexte, mais s’il le permet, cette pratique peut s’avérer d’une efficacité redoutable pour tous les types de produit : un site internet, une application mobile, une application desktop ou encore un distributeur bancaire !

L’utilisation des wireframes nécessite un peu de pratique pour se sentir à l’aise, cependant ce n’est pas un investissement vain. En peu de temps vous pourrez bâtir facilement les maquettes de votre produit qui, associées aux user stories, construiront des bases solides au backlog de produit. Les échanges entre tous les acteurs du projet s’en trouveront grandement facilités.Comme disait Confucius : « Une image vaut mille mots ».

Les équipes mises en place ont pour objectif premier de réaliser des produits de qualité pour des hommes ! Ceux-ci doivent être mis en permanence au cœur de la réflexion.

C’est l’objectif de cette alliance de la « user story » et du « wireframe » qui s’inscrit dans une philosophie centrée sur l’utilisateur.