Dans l’article du mois de mai, l’utilisateur jouait la star dans le processus de conception d’une application ou d’un software. Au travers des outils du persona et du storyboard, nous avons obtenu un première vision du contexte d’usage, sur base duquel une liste de fonctionnalités de la future app peut être construite. Il est temps, maintenant, de sortir les crayons !
Et oui, le développement informatique de l’app ou du software ne va pas encore démarrer tout de suite… C’est le processus de création de l’application ou du software qui va maintenant débuter. Il généralement constitué de quatre étapes, quatre manières de plus en plus complexes et concrètes de donner vie au projet.
Chaque étape du processus permettra de co-construire et/ou de tester l’app avec les parties prenantes afin de se rapprocher petit à petit de la solution idéale. De la sorte, plus l’investissement augmente (en temps et en argent), plus on est sûr de converger vers une solution optimale et acceptable en terme d’utilisabilité et d’usage.
Quelles sont les différences et bonnes pratiques de chaque outil?
Le Sketch (ou « croquis »)
Il s’agit de la représentation la plus basique du projet : un simple dessin à main levée sur une feuille de papier, qui vous donne une vision très schématique de l’application. C’est le moyen le plus rapide de préparer votre idée pour la discussion/co-création. Le Sketch va généralement faire intervenir les grandes zones fonctionnelles et y identifier les textes, les images et les boutons. C’est une étape de structuration qui peut évoluer rapidement et donc, faire l’objet de plusieurs itérations.
Le stylo et le papier sont les outils de base les plus adaptés à cette phase. On peut facilement trouver des canevas, comme celui ci-dessous, qui viendront cadrer nos croquis.
En mode collaboratif/co-création, il est également possible de travailler avec des post-it ou des cartons que l’on viendra assembler collectivement sur de grands canevas pour donner vie à la structure de chaque écran.
Dans son article « Free Printable Sketching, Wireframing and Note-Taking PDF Templates« , SmashMagazine vous offre une batterie complète de modèles à imprimer pour commencer à croquer votre future app…ainsi que d’autres canevas pour le storyboard, le wireframing ou encore l’idéation.
Le Wireframe
Traduit en français par « structure filaire », il est l’équivalente du squelette ou de la structure simple de votre software/application. Chaque wireframe est utilisé pour décrire les fonctionnalités des différents écrans ainsi que les relations entre les vues. C’est en général à cette étape que sont prises les décisions sur la place des contenus et des éléments interactifs. Elle est plus précise que l’étape précédente, notamment par une considération avancée de la taille des éléments qui composeront une vue ainsi que sur leur emplacement absolu et relatif.
On résuméra généralement à l’équation : Wireframe = structure + fonctions + contenu
Il existe de nombreux outil de Wireframing en ligne comme Balsamiq ou Mockflow qui offrent de nombreuses possibilités de construction d’un wireframe.
Le mock-up
Pour reprendre notre équation, on dira que le mock-up = style + couleurs + contenu validé. Cette maquette a pour objectif de se rapprocher de la réalité et de visualiser ce à quoi l’application va finalement ressembler. C’est la base du travail du développeur qui donnera ensuite vie au projet. Le mock-up va donc ajouter au wireframe des éléments tels que les couleurs, les typographies, les textes (parfois en utilisant un texte de substitution, le Lorem Ipsum), des images, des photos et tout élément susceptible de matérialiser l’application/le software. Un mock-up est généralement un résultat statique. Il est important de penser aux éléments de l’interface utilisateur (UI) lors de la définition de cette étape.
Un service en ligne comme Moqups vous permet de faire facilement évoluer votre projet filaire vers une représentation plus proche de la réalité.
Un autre outil (qui s’appelle « Sketch » mais qui est pourtant bien un outil mock-up !) permet également d’aller un pas plus loin dans la production de mock-up d’app, de software et de site web.
En général, c’est à cette étape qu’interviendront de manière plus importante le graphiste et/ou l’UX designer en utilisant leurs propres outils professionnels comme par exemple ceux de la suite Adobe : XD, Photoshop et Illustrator.
Le prototype
Les prototypes offrent en général une représentation haute-fidélité de l’application ou du software. Le prototype est un ensemble d’image reliées les unes aux autres qui pousseront le test aussi loin que possible avant de débuter le développement. C’est une maquette enrichie d’interactions et d’animations qui donnera via à l’expérience utilisateur.
UXPin est l’un des outils les plus populaires pour créer des prototypes à faire tester par vos futurs utilisateurs.
Simple et efficace : le PDF interactif
A l’étape du Wireframe et du mock-up, il est déjà possible de créer de l’interactivité et de réaliser des tests avec de futurs utilisateurs. S’il est possible de simuler manuellement le passage d’une vue à une autre en manipulant des représentations papiers, il est également possible de réaliser un PDF interactif au départ d’outils comme Microsoft Power Point ou d’exporter des créations Balsamiq ou Moqups dans ce format. Le PDF interactif peut être utilisé sur l’écran d’un ordinateur ou sur une tablette et aller un pas plus loin dans la simulation de l’expérience utilisateur.
Conclusions
Avant de se lancer dans le développement d’une application, il est nécessaire de :
- s’approprier le contexte d’usage par l’exploration, la création de persona et la conception de storyboard afin d’assurer un haut niveau de pertinence avec les besoins du terrain;
- construire l’application/le software étape par étape, de la technique la plus rapide et la moins coûteuse jusqu’au développement final;
- de tirer parti de chaque étape de la création pour agir en co-construction avec les futurs utilisateurs et les parties prenantes, de sorte à créer des boucles itératives d’amélioration du produit final.
Pour en savoir plus:
Si vous avez manqué le premier article du dossier Application & Software sur l’utilisation des personas et du storyboard: