Étape 3 : Maquettage
Définition :
Le maquettage a pour objectif de donner à voir ce que vise la réalisation par l'intermédiaire de récits qui la mettent en scène et de schémas qui l'illustrent.
Rappel :
Le maquettage se base sur les idées formulées lors de la phase d'idéation.
Le maquettage s'articule avec la définition des produits que le projet vise à réaliser.
Conseil :
On profite de la phase de maquettage pour associer à chaque histoire les articulations que l'on anticipe avec les valeurs, leviers et tensions du modèle de la lowtechisation.
Méthode : Tâches à réaliser
Identifier les produits visés par le projet
Identifier les acteurs associés ces produits
Rédiger les petites histoires
Lier les histoires aux valeurs, leviers et tensions du modèle de la lowtechisation
Associer des illustrations aux histoires (esquisses...)
Réaliser une synthèse du maquettage
Mettre à jour la TODO et le journal de bord
Exemple : Livrables
Produits du projet
Acteurs du projet
Petites histoires
Synthèse
TODO
Site web (page d'accueil)
JDB
Attention :
La phase de maquettage peut conduire à faire évoluer la définition du projet, dans ce cas mettez à jour la présentation du projet.
Maquettage : en détails
Produits du projet
Conseil :
Afin d'identifier des produits, on peut :
repartir des sous-objectifs formulés lors de l'idéation
et s'autoriser à penser en terme de solutions, que l'idéation aura commencées à dessinées.
Néanmoins, un objectif peut correspondre à plusieurs produits et inversement un produit peut concerner plusieurs objectifs (il n'y a donc pas de correspondance exacte entre les deux).
Exemple : Dans le contexte lownum
Site web documentaire
Application mobile
Base de données
Serveur applicatif
Ordinateur client
...
Acteurs du projet
Fondamental : Typologie d'utilisateurs
Avant la phase de maquettage il est nécessaire d'identifier les acteurs du projet, c'est à dire qui sont les types de personnes qui vont :
fabriquer les produits du projets
les utiliser
les réparer
les recycler
...
Méthode : Utilisateurs et cycle de vie
L'ACV propose 5 étapes pour le cycle de vie d'un produit :
Extraction des matières premières
Fabrication
Distribution
Utilisation
Fin de vie
On se demandera quelles étapes sont concernées dans le cadre du projet et qui sont les acteurs derrière chaque étape.
On associera les types d'utilisateurs à leur étape de cycle de vie.
Exemple :
- Utilisateur standard (utilisation)
- Utilisateur expert (utilisation)
- Modérateur (utilisation)
- Administrateur (utilisation)
- Développeur (fabrication)
Complément :
Petites histoires
Méthode :
Les histoires sont organisées sous-produit par sous-produit.
Méthode :
Décrire comment les utilisateurs mobilisent les produits du projet :
petites histoires,
et/ou bandes dessinées.
Remarque :
Réaliser des bandes dessinées est plus chronophage...
Attention :
On essaiera d'associer aux histoires des informations techniques (coût, autonomie, puissance, poids, volume...) et/ou scientifiques (issues de la veille).
De même on mobilisera des exemples et on évitera les phrases générale, et on proposera des quantifications chiffrées plutôt que des adverbe (« 42 » plutôt que « beaucoup »).
Attention :
Rédigez au présent ce qu'une personne est en train de faire (pas ce qu'elle voudrait faire par exemple).
Exemple : Marc scanne des produits CoSo²
Marc est végétarien. Il se rend au marché pour acheter des légumes. La marché est labellisé CoSo² (Consommation Soutenable, Conviviale et Sociale), cela signifie que chaque produit est associé à un QR code associé à l'application. Marc s'approche d'un stand comportant des fruits et légumes très diversifiés, on est en février, il est surpris d'avoir autant de choix proposé. Il commence par scanner les carottes et consulte les informations associées. Il est satisfait de voir que ces carottes sont produites dans un village voisin. Il consulte ensuite les informations nutritives, 6 kcal pour 100g, 0.800g de protéines, et ce que ça représente en terme d'apport journalier pour lui. Il relève notamment les 10% pour le potassium et pour la vitamine B6. Enfin il jette un œil aux impacts associés : 30g de CO2, ce qui est 25% inférieur à la moyenne des carottes en France, aucun apport en eau, aucun intrants autres que du fumier et du paillage issue de la ferme elle-même. Le producteur n'a pas le label bio, mais Marc note qu'il semble en respecter tout le cahier des charges. Il scanne également des tomates produites sous serre chauffée, et des avocats du Mexique. Il est étonné que l'impact carbone des avocats ne soit pas si élevé, malgré l'import, mais question eau et biodiversité, c'est la cata. Les tomates hors-saison, on en parle pas. Ce soir ce sera carotte, patates et pois.
Exemple : Luc utilise le minimiseur de MiniFox
Luc est enseignant-chercheur dans le domaine de l'informatique minimaliste. Il utilise principalement des médias sociaux libres et décentralisés comme Mastodon, mais il consulte néanmoins régulièrement LinkedIn pour lire les dernières publications de ses confrères. Cependant, le site est gourmand en ressources à cause des dizaines de trackers et de scripts Javascript qu'il contient et de ce fait il fonctionne très mal sur son vieux 2075. Il est également addictif au sens où, parti pour consulter un post en particulier il se retrouve régulièrement à lire des articles sur tout autre chose, bien au delà du temps qu'il pensait consacrer à cette tâche de lecture. Pour palier cela, il utilise le navigateur MiniFox, un fork de Firefox, installé par défaut sur le 2075. Ce navigateur, dans la lignée de navigateurs comme Lynx, dispose de moins de fonctionnalités que son grand frère, mais il en possède une bien pratique, basée sur le mode lecture de Firefox : le minimiseur. Ce programme analyse les sites Web consultés et supprime tous les éléments superflus comme la plupart des styles et scripts, les appels à des sites tiers, les images les plus lourdes, les vidéos, etc. En résulte une version frugale du site, qui reste 100% fonctionnelle, au moins avec les sites bien conçus, ce qui permet à Luc d'utiliser une vielle machine peu puissante, pour une consultation web économe en énergie électrique et en temps humain.
Fondamental :
Les histoires ont un titre.
Méthode :
Mettre en exergue les liens à la lowtechisation :
contribue à : #valeur ...
contribue à : #levier ...
résiste à : #tension ...
À ce stade on peut entre dans le détail des 27 critères en rappelant à quelle catégorie ils sont attachés.
On peut, optionnellement selon le besoin, justifier en une phrase le lien à tel ou tel critère.
Exemple :
Liens à la lowtechisation :
contribue à : #valeur soutenabilité/ressources
contribue à : #levier imaginer/ataraix · #levier politiser/préfiguration
résiste à : #tension progrès/fétichisme
Complément :
Esquisses : Aperçu des produits
Méthode :
Donner à voir le produit lui-même par un schéma, un dessin, une photo :
maquettes d'IHM (logiciel),
schémas (matériel).
Complément :
Présentation du projet : produits et acteurs
Rappel :
Il s'agit de la première page que liront les visiteurs de votre site, elle doit être simple, claire et soignée.
Rappel : Éléments déjà présents
Titre
Sous-titre
(Illustration)
Objectifs
Crédits
(Licence)
Méthode : Produits du projet (les éléments concrets que le projet vise à réaliser) :
Objet ou service 1 (description courte)
Objet ou service 2 (description courte)
...
Méthode : Acteurs des produits (les personnes qui vont fabriquer, utiliser, réparer... les produits du projet) :
Type de personne 1 (phase du cycle de vie concernée)
Type de personne 2 (phase du cycle de vie concernée)
...
Synthèse du maquettage
Rappel :
À la lumière du maquettage réalisé, les produits du projet (voire les objectifs, le sujet, le titre...) peuvent avoir évolué : les reformuler si besoin.
Compléter la page de présentation de votre projet par un ou deux extraits d'histoire.
Méthode : Page de synthèse
Maintenez à jour une synthèse de votre maquettage :
3 à 5 extraits d'histoires
Une liste de certaines autres histoires ou un nuage de mots-clés qui renvoient aux autres histoires
Méthode : Présentation courte
Préparer une courte présentation de 5 minutes :
titre et sujet du projet, produits visés (1 minute)
1 extrait d'histoire (3 minutes)
quelques autres extraits en vrac (1 minute)
Complément : Créer un nuage de tags
Maquettage : outils et méthodes
User stories (petites histoires)
Définition : User stories (petites histoires)
Il s'agit de raconter en petites histoires d'une dizaine de lignes environ, les principaux scénarios d'utilisation illustrant l'usage du système visé.
Ces histoires permettent d'avoir un fil conducteur mental pour visualiser les fonctions pertinentes. Elles doivent être rédigées (correctement !) et ne pas se réduire à un simple schéma ou des listes à puce. C'est le fait d'écrire qui permet de penser au scénario dans son déroulement temporel, de penser la cohérence des actions et processus dans leur agencement et succession.
Exemple : Transcription d'une vidéo
Valérie est en charge de la transcription et de la synchronisation de la collection des 8 entretiens de metteurs en scène. Cette opération préalable à la mise en ligne d'un entretien est longue et fastidieuse. Elle compte ainsi profiter des nouveaux outils pour accélérer cette étape de traitement. Elle est averti de la mise à disposition de l'entretien de Roger Planchon pour l'étape de transcription/synchronisation. Elle consulte alors le document et peut commencer à taper au kilomètre le texte brut. Valérie peut ajouter quelques éléments de typage (important) dans le corps de son texte. A chaque frappe, le player vidéo se met en pause et reprend, une fois la frappe terminée, quelques secondes auparavant. Cette méthode de saisie est très appréciée par Valérie qui peut ainsi écouter un fragment puis taper le texte sans avoir à mettre constamment en play/pause le curseur vidéo, ni à revenir avec la barre de navigation.
(par Ludovic Gaillard, INA, projet C2M, http://www.utc.fr/ics/c2m)
Bandes dessinées
gknd generator
Maquettage d'IHM
Définition : Mock-up
En informatique, le terme mock-up désigne un prototype d'interface utilisateur. Un mock-up a ainsi pour rôle de présenter les idées sur l'utilisation d'un logiciel.
Exemple :
Conseil :
Avec un papier et un crayon on s'en sort pas mal...
Méthode :
Inkscape est un outil générique de dessins vectoriel ; c'est un logiciel libre et le format SVG manipulé est standard, facilement modifiable et directement publiable sur le Web.
