outils pour une pratique itérative

outils pour une pratique itérative

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 de Praticable (anciennement Collectif Bam).

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.

Deux exemples d’utilisation possible du papier calque. À gauche, un exemple d’écran d’application. À droite, un exemple d’analyse d’un service existant.

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.)

Version open-source (par Thomas).

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 …

Les enfants testent l’encombrement du futur mobilier du collège.

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.

Un super choix de moquette pour refaire l’immeuble de quelqu’un que vous n’aimez pas.

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

  • 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 Praticable

Un exemple trouvé sur internet : le MakeyMakey permet d’utiliser n’importe quel objet conducteur pour maquetter un projet interactif.

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.

Pensez à prototyper dans des conditions réelles (la météo, l’orientation du soleil, tout ça…)

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’ OpenStreetMap , 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.

Scratch pour programmer par des briques visuelles

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.

Retrouvez un exemple que nous avons réalisé pour l’Ademe.

N’oubliez pas de partager vos contributions

Infos
  • Auteur : Thomas Thibault
  • Date : Décembre 2019