L'outil au service d'une pratique itérative

Cet article est issu du travail réalisé avec Maud Benest et Thomas Thibault.

Depuis 2017, le Collectif Bam organise pour thecamp des formations sur les outils de prototypage. Dans ce contexte, nous avons créé une boîte à outils, sorte de compilation de différents outils issus de domaines très variés et répondant aux trois règles suivantes :

• L’outil ne doit pas être du “bricolage du dimanche” : exit les perceuses, tournevis, etc. dont nous connaissons le fonctionnement et l’usage, sauf dans le cas où leur fonction est détournée.
• L’outil ne doit pas nécessiter de formation ou de diplôme pour être compris et utilisable.
• L’outil doit être facilement trouvable : dans le monde, en ligne. Nous favorisons au maximum les outils open source.

• 

• Sur l’importance de prototyper… Avant d’industrialiser

• Maquetter votre projet avant de l’industrialiser permet d’éviter des mauvais choix de conception très en amont dans le processus créatif : ces différents outils offrent la possibilité de tester certains aspects d’un projet pour en valider (ou invalider) le cahier des charges, le choix des fonctions, des matériaux de conception, etc. Des ressources comme l’article de Designers Interactifs, le livre Maquetter et bien d’autres se penchent sur le sujet. Nous nous concentrons ici sur quelques idées d’outils simples que nous utilisons pendant nos formations.

1. Des outils non numériques

Les outils sélectionnés dans cette catégorie ne sont ni électroniques ni numériques et ne demandent pas d’énergie (ne posent donc pas de problème d’autonomie) à l’usage. Ils sont variés : certains proviennent de notre quotidien, d’autres sont le fruit d’une utilisation détournée et d’autres doivent être fabriqués avant d’être utilisés.

Sans entrer dans le détail de chacun des outils - que vous retrouverez directement sur la liste en ligne - je vais vous présenter quelques uns d’entre eux :

La craie

Pour : maquetter un espace, un mobilier urbain, le sens de circulation dans une pièce
Comment l’utiliser : Sur les murs, sur le sol, la craie permet de dessiner à échelle 1 l’emplacement des objets qui composent un intérieur, la hauteur standard d’un banc public, etc. Cet outil permet, par exemple, de se rendre compte très rapidement de la faisabilité d’un aménagement intérieur en le spatialisant, et ainsi analyser les flux (de personnes, de matériaux, etc.).

Un exemple d’utilisation de la craie extrait du film The Founder :

Utilisation de la craie pour maquetter une cuisine mobile, projet du Collectif Bam à retrouver ici :

Le papier calque

Pour : maquetter un scénario, les écrans d’une application
Comment l’utiliser : Le papier calque permet de recopier très facilement l’existant. Vous pouvez additionner les couches de calques pour ensuite modifier la copie originelle et l’adapter à vos besoins.

La Sugru

Pour : maquetter un objet
Comment l’utiliser : Cette pâte magique qui répare tout, est à la fois flexible, solide, waterproof, colorée et résistante aux chocs. Elle peut être utilisée dans de multiples contextes, pour créer des boutons ou une interface physique grâce au code couleur, pour augmenter des objets existants (créer une poignée, changer l’ergonomie de l’objet, assembler, etc.)

• 

• Notre version open-source ! (par Thomas)

• Ici, un exemple d’utilisation de la Sugru pour ajouter une surface préhensible sur un bâton de ski.

Le théâtre

Pour : maquetter un service
Comment l’utiliser : Créer une mise en scène, avec un clap de début qui lance “ACTION”, une personne extérieure qui prend des notes et/ou filme. Il est essentiel de mimer au plus proche du service réel : régulièrement, nous prenons pour acquis des comportements utilisateurs ou des réactions d’individus du type “ah oui il clique là et puis c’est bon” or la réalité montre souvent des comportements différents. Jouer une pièce de théâtre permet de faire émerger des problèmes réels en se mettant dans la peau de ‘…’.

Inclusive Design Toolkit

Pour : tester tout type de projet
Comment l’utiliser : Ce kit d’outil permet de tester le caractère inclusif de votre projet : est-il universellement accessible ? Par tout type de public ? Même s’il est plus éloigné de l’outil qui permet maquetter une forme, il permet d’évaluer son prototype à minima, sinon d’anticiper les défauts d’accessibilité d’ordre général. Ils permettent de penser un projet dont l’utilisation est possible par tous.

La liste est collaborative : à la suite des différentes sections vous trouverez un espace “Contributions non triées-complétées (Insérer ci-dessous vos contributions)”.

2. les outils électroniques

Ces outils permettent de tester d’autres aspects du projet : évaluer la réaction in situ des utilisateurs, rendre interactifs des objets du quotidien, tester un système sans savoir coder ou encore se plonger dans le code à l’aide d’outils qui le vulgarisent.

En voici quelques uns parmi les outils électroniques.

MakeyMakey (et MakeyMakey Go)

Pour : maquetter une application, une interface, un objet interactif
Comment l’utiliser : Cet outil est certainement un des plus simples à utiliser dans cette liste. C’est une extension du clavier d’ordinateur qui permet de rendre interactif n’importe quel objet conducteur. On peut l’utiliser pour tester une interaction rapidement et sans avoir à coder. Il est aussi possible de l’utiliser pour faire une démo, faire prototyper à des enfants, faire tester au grand public, etc.

Un exemple réalisé par le Collectif Bam

BarePaint

Pour : maquetter un objet interactif
Comment l’utiliser : C’est une peinture/encre conductrice. Elle peut être utilisée pour rendre n’importe quel objet conducteur, tout peut alors devenir un circuit ; elle peut également servir pour créer des zones tactiles et ainsi commander n’importe quoi. Combiné avec un MakeyMakey, les possibilités d’utilisation sont infinies.
Ça donne envie !

LittleBits

Pour : maquetter un objet interactif, un système électrique
Comment l’utiliser : C’est le Lego de l’électronique. Assemblez les modules les uns après les autres et les composants se mettent à fonctionner ensemble : vous n’avez pas besoin de coder. Parmi les composants vous trouverez des sliders, des capteurs de luminosité, des moteurs, des roues, des ventilateurs, des capteurs de pression, etc. Vous pouvez ainsi l’utiliser pour maquetter des objets, des jouets, un fonctionnement de circuit électrique, etc.

3. les logiciels et sites web

La grande difficulté dans cette partie est de ne pas se laisser aller à l’écriture d’une liste sans fin tant la quantité d’outils en ligne est immense. Nous avons donc essayé de réduire notre choix selon ces critères : ne conserver qu’une seule référence par fonction — deux si les outils ont des spécificités notables -, favoriser ceux bien conçus, dont l’utilisation est fluide et rapide à prendre en main.

POP : Prototyping On Paper

Pour : maquetter une application
Comment l’utiliser : Prenez en photo vos wireframes (vos écrans d’application filaires dessinés) à la main sur papier. L’application vous permet ensuite de créer des liens entre les différentes pages en sélectionnant des zones actives, comme si c’étaient des boutons. Super pratique pour vérifier l’arborescence initiale et s’assurer que l’on a pas oublié une page ; également pour faire tester son application.
Lien de téléchargement

Slicer for Fusion 360

Pour : maquetter un objet
Comment l’utiliser : Cet outil permet de réaliser des objets en 3D à partir de découpes en 2D. À partir de l’objet 3D, Slicer va créer des “tranches” de l’objet. Il suffit ensuite de découper celles-ci (à la découpe laser ou à la main) et de les coller entre elles pour obtenir l’objet en volume.
Lien de téléchargement

Umap

Pour : maquetter un service
Comment l’utiliser : Sur fond des cartes d’OpenStreet map, vous pouvez placez des points d’intérêts, établir des filtres et la partager. Peut être utilisé pour maquetter un parcours de découverte d’un lieu, de carte collaborative pour recenser un type de service, etc.

Un exemple par ici

Scratch

• 

• Pour : maquetter un objet interactif (principalement, mais peut servir pour d’autres types de projet)

• Comment l’utiliser : Gratuit à l’installation, pour utiliser ce logiciel de programmation développé par le MIT il suffit d’assembler les blocs ensemble sur l’écran pour créer des fonctions et donc des actions. Très simplifié et utilisé pour apprendre le code aux enfants, la typologie d’actions est très proche de celle de la programmation classique (les boucles < IF > par exemple) ce qui le rend très pédagogique. Combiné à un MakeyMakey, il rend alors interactif tout type d’objets avec des fonctions précises et se rapproche de l’utilisation d’un Arduino — toujours sans coder.

• Leur site

Twine

Pour : maquetter des sites, des scénarios, des arbres de décisions, etc.
Comment l’utiliser : Ce site permet de créer des histoires non-linéaires, comme par exemple les livres dont vous êtes le héros. La mise en forme initiale est très basique mais il est possible d’ajouter une feuille de style CSS.

Un exemple d’utilisation un peu détournée avec ce petit jeu pour dépenser l’argent de Jeff Bezos.

N’oubliez pas de partager vos contributions !