Maquettage

Maquettage : en résumé

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 s'articule avec la définition des produits que le projet vise à réaliser.

Attention

La phase de maquettage peut conduire à faire évoluer la définition des produits, dans ce cas mettez à jour la présentation du projet.

ExempleLivrables

  • Petites histoires

  • Esquisses

  • Synthèse

Maquettage : en détails

Présentation du projet : produits et utilisateurs

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

Présentation du projet : titre et crédits

Présentation du projet : objectifs

MéthodeProduits et utilisateurs

  • Produits du projet (les éléments concrets que le projet vise à réaliser) :

    • Objet ou service 1

    • Objet ou service 2

    • ...

  • Utilisateurs des produits (les personnes qui vont utiliser les produits du projet) :

    • Type de personne 1

    • Type de personne 2

    • ...

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.

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

Remarque

Réaliser des bandes dessinées est plus chronophage...

Méthode

  • Mettre en exergue les valeurs de la lowtechisation : convivialité, responsabilité et soutenabilité.

  • Mettre en exergue les leviers de la lowtechisation : optimiser, imaginer, alerter.

  • Mettre en exergue les tensions de la lowtechisation : croissance, progrès, consumérisme.

Complément

User stories (petites histoires)

Bande-dessinées

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

Maquettage d'IHM

Exemple de maquettage

Histoire

La coopérative fabrique et commercialise des chaînes de vélo pour tous types de systèmes mécaniques à effort (machine à laver, home-dynamo...) . Xavier, chargé de communication, pense que modéliser leur produit phare avec EcoCAD permettrait de lui donner plus de visibilité. Il propose à Sabrina, ingénieure, de modéliser et publier leur pièce phare sur EcoCAD. Elle ajoute également un exemple de montage pour une machine à laver à pédales. Cela fait gagner de la visibilité à l'entreprise, en plus de simplifier l'appropriation technique par les citoyens.

Liens à la lowtechisation : #valeur soutenabilité · #valeur convivialité · #levier politiser · #tension croissance

CC BY-SA Lola Nézot, Amélie Pasztor, Marilou Schwartz, Théo Ferreira, Jean-Baptiste le Floch, Matthieu Bricogne, Stéphane Crozat

Synthèse

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éthodePage de synthèse

Maintenez à jour une synthèse de votre maquettage :

  1. 3 à 5 extraits d'histoires

  2. Une liste de certaines autres histoires ou un nuage de mots-clés qui renvoient aux autres histoires

MéthodePrésentation courte

Préparer une courte présentation de 5 minutes :

  1. titre et sujet du projet, produits visés (1 minute)

  2. 1 extrait d'histoire (3 minutes)

  3. quelques autres extraits en vrac (1 minute)

ComplémentCréer un nuage de tags

https://wordcloud2-js.timdream.org/#love

Maquettage : outils et méthodes

User stories (petites histoires)

DéfinitionUser 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.

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

Bande-dessinées

gknd generator

https://framalab.org/gknd-creator/

Maquettage d'IHM

DéfinitionMock-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.

fr.wikipedia.org/wiki/Mock-up

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.

inkscape.org

Méthode

https://framalibre.org/content/pencil-project

Présentation du projet : titre et crédits

Fondamental

Il s'agit de la première page que liront les visiteurs de votre site, elle doit être simple, claire et soignée.

MéthodeTitre et illustration

  • Titre du projet (sigle détaillé...)

  • Sous-titre détaillé :

    Le projet vise à réaliser un LIVRABLE GLOBAL

  • Une illustration originale ou sous licence libre (créditée dans tous les cas)

MéthodeCrédits et licence

  • Crédits :

    • Auteurs et autrices de cette version : Alice, Bob...

    • Suiveur(s), coordinateur(s), ensemble des parties prenantes : Charlie...

  • Licence : Creative Commons BY-SA

Présentation du projet : objectifs

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

Présentation du projet : titre et crédits

MéthodeObjectifs du projet (les sous-objectifs que le projet vise à atteindre)

  • VERBE à l'infinitif + objectif

  • VERBE à l'infinitif + objectif

  • ...

User stories (petites histoires)

DéfinitionUser 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.

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

Bande-dessinées

gknd generator

https://framalab.org/gknd-creator/

Maquettage d'IHM

DéfinitionMock-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.

fr.wikipedia.org/wiki/Mock-up

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.

inkscape.org

Méthode

https://framalibre.org/content/pencil-project

Liste des raccourcis clavier

Liste des fonctions de navigation et leurs raccourcis clavier correspondant :

  • Bloc Suivant : flèche droite, flèche bas, barre espace, page suivante, touche N
  • Bloc Précédent : flèche gauche, flèche haut, retour arrière, page précédente, touche P
  • Diapositive Suivante : touche T
  • Diapositive Précédente : touche S
  • Retour accueil : touche Début
  • Menu : touche M
  • Revenir à l'accueil : touche H
  • Fermer zoom : touche Échap.