Panorama des outils de maquettage (Balsamiq, ioDraw, Figma, InVision)

1. Objectifs

   • Utiliser le vocabulaire de Trello : espace de travail, tableau, liste et carte
   • Appliquer les trois principes de la méthode Kanban
   • Construire un tableau adapté à un projet UX
   • Rédiger des cartes précises, avec responsable, date et liste de contrôle
   • Faire vivre le tableau avec une routine d'équipe
   • Connaître les possibilités et les limites de l'offre gratuite

1. Présentation

   • Un projet UX mobilise plusieurs personnes et produit de nombreux livrables : synthèses, personas, wireframes, comptes rendus de test… Sans organisation, on perd vite de vue qui fait quoi, ce qui est terminé et ce qui bloque.
   • Trello est un outil en ligne d'organisation visuelle, basé sur la méthode Kanban. Chaque tâche est une carte que l'on déplace de colonne en colonne : l'avancement du projet devient visible pour toute l'équipe, et pour l'enseignant.

• Nous continuons avec BiblioCampus, notre application fictive de réservation de livres. Créez un compte gratuit sur trello.com et le dossier 13-trello/ dans votre dépôt GitHub ui-ux-design-bts.

1. Le vocabulaire de Trello

   • Trello s'organise en quatre niveaux, du plus général au plus précis :

1. La méthode Kanban

   • Kanban signifie « étiquette » en japonais. La méthode est née dans l'industrie automobile et s'est répandue dans les équipes de développement et de design. Elle repose sur trois principes :

• Limiter le nombre de cartes « En cours » paraît contre-intuitif : on croit avancer plus vite en commençant beaucoup de choses. En réalité, tout reste à moitié fait. Mieux vaut finir trois tâches que d'en commencer dix.

1. Un tableau pour un projet UX

   • Pour un projet UX, nous proposons cinq listes qui suivent l'avancement, et une étiquette de couleur par phase du processus :

• La liste À relire est importante : en UX, un livrable doit être vu par une autre personne avant d'être considéré comme terminé. La liste Idées / à trier évite de perdre une bonne idée qui arrive au mauvais moment.

1. Le détail d'une carte

   • En cliquant sur une carte, on accède à son détail. Une carte bien remplie permet à n'importe quel membre de l'équipe de comprendre la tâche sans poser de question :

1. Exemple 1 : découper une tâche trop large

   • Une carte « Maquettes » ne dit ni quoi faire, ni quand c'est fini. On la découpe en tâches de un ou deux jours :

1. Faire vivre le tableau

   • Un tableau qui n'est pas mis à jour ne sert à rien. Une courte routine suffit à le garder fidèle à la réalité :

1. Automatiser et relier d'autres outils

   • Trello peut exécuter des règles automatiques et s'enrichir de Power-Ups, des extensions qui le relient à d'autres outils :

1. Ce que permet l'offre gratuite

   • L'offre gratuite suffit largement pour un projet de classe. Voici ses principales limites au moment de la rédaction de cette leçon :

• Au-delà de dix collaborateurs dans un espace de travail gratuit, les tableaux passent en lecture seule. Pour une classe entière, créez un espace de travail par équipe et invitez-y l'enseignant.

1. Exemple 2 : une semaine du projet BiblioCampus

   • Lundi, l'équipe trie la liste « Idées / à trier » et crée les cartes de la semaine : trois wireframes et le recrutement des testeurs.
   • Mardi, Ines déplace « Wireframe : fiche d'un livre » dans « En cours ». Amine a déjà trois cartes en cours : il termine la synthèse avant de commencer autre chose.
   • Jeudi, le wireframe passe dans « À relire » ; Amine le commente. Vendredi, après correction et dépôt de l'export sur GitHub, la carte arrive dans « Terminé ». L'enseignant suit l'avancement sans réunion.

1. Activité 1 : le vocabulaire

   • Complétez : un ……… regroupe les tableaux d'une équipe ; un ……… représente un projet ; une ……… est une colonne qui représente une étape ; une ……… est une tâche.
   • Vérifier : espace de travail, tableau, liste, carte.

1. Activité 2 : créer le tableau de l'équipe

   • Créez un espace de travail pour votre équipe, puis le tableau « Projet CantineCampus » avec les cinq listes de la leçon.
   • Créez les cinq étiquettes de couleur (comprendre, définir, imaginer, prototyper, tester) et invitez vos camarades et votre enseignant.
   • Vérifier : chaque membre voit le tableau et peut déplacer une carte.

1. Activité 3 : découper le projet en cartes

   • Créez au moins douze cartes couvrant les cinq phases du projet CantineCampus. Chaque carte a un titre précis et une étiquette.
   • Vérifier : aucune carte n'est vague (« Design », « Tests ») ; chacune peut être réalisée en un ou deux jours.

1. Activité 4 : compléter une carte

   • Choisissez une carte de prototypage et complétez-la : description avec les exigences couvertes, responsable, date limite, liste de contrôle d'au moins quatre éléments.
   • Vérifier : le dernier élément de la liste de contrôle correspond à la définition de « terminé » (relecture faite, export déposé sur GitHub).

1. Activité 5 : corriger un tableau

   • Observez le tableau de cette équipe. Listez ses défauts, puis proposez une version corrigée :

• Vérifier : les noms de listes sont flous (« Trucs », « Fini ? ») ; cinq cartes sont en cours en même temps ; les cartes sont vagues, sans étiquette, sans responsable ni date ; la carte « Entretiens » est en attente depuis trois semaines ; le logo ne relève pas d'une phase UX prioritaire.

1. Activité 6 : définir « terminé »

   • Rédigez en équipe la définition de « terminé » pour trois types de livrables : un persona, un wireframe et un compte rendu de test.
   • Vérifier : chaque définition est vérifiable (relu par qui ? déposé où ? quel format ?) et figure en liste de contrôle dans les cartes concernées.

1. Activité 7 : simuler une semaine

   • Pendant une séance, appliquez la routine : point de cinq minutes au début, déplacement des cartes, limite de trois cartes « En cours » par personne.
   • À la fin, notez ce qui a avancé, ce qui bloque et ce que vous changez dans l'organisation.
   • Vérifier : le tableau reflète exactement l'état réel du travail en fin de séance.

1. Activité 8 : créer une règle d'automatisation

   • Créez une règle : « Quand une carte est déplacée dans À relire, ajouter l'étiquette Relecture et une date limite à deux jours. »
   • Testez-la en déplaçant une carte.
   • Vérifier : l'étiquette et la date apparaissent automatiquement, sans action manuelle.

1. Activité 9 : relier Trello et GitHub

   • Pour chaque carte terminée, ajoutez en pièce jointe le lien vers le livrable déposé sur GitHub.
   • Dans le README de votre dépôt, ajoutez à l'inverse le lien vers votre tableau Trello.
   • Vérifier : depuis le tableau, on retrouve chaque livrable en un clic, et depuis GitHub, le tableau.

1. Activité 10 : déposer votre travail sur GitHub

   • Regroupez dans 13-trello/README.md une capture de votre tableau, votre définition de « terminé » et le bilan de votre semaine simulée, puis envoyez le tout :

git add 13-trello
git commit -m "Ajoute l'organisation du projet avec Trello"
git push

• Vérifier : le fichier README.md et votre capture apparaissent bien sur la page GitHub du dépôt.

1. Erreurs fréquentes

1. À retenir

   • Trello s'organise en espaces de travail, tableaux, listes et cartes.
   • La méthode Kanban: visualiser, limiter le travail en cours, faire avancer de gauche à droite.
   • Pour un projet UX : des listes pour l'avancement, des étiquettes pour les phases.
   • Une bonne carte a un titre précis, un responsable, une date, une liste de contrôle et un lien vers le livrable.
   • Le tableau vit grâce à une routine d'équipe courte et régulière.

Un bon tableau répond en un coup d'œil à trois questions : qui fait quoi, où en est-on, et qu'est-ce qui bloque ?