Conception

Sitemap

Arborescence des écrans et sections, hiérarchie de navigation.

Quand. Dans une refonte, la structure de l'information est souvent le vrai problème, pas le visuel.

Durée
2 h
Participants
Design + PM
Livrable
Arborescence cible
Stade
Pré-PMF · Post-PMF · Scale-up · Mature
AccueilSectionsPages
Ouvrir dans FigJamTrouver la bonne séquence

Dans FigJam : Fichier → Dupliquer dans tes brouillons, puis garde la section de cet atelier. Récupérer le fichier sur Figma Community

Exemple rempli

AccueilAujourd'hui : carte, jobs en cours,alertesBarre de recherche : client, adresse ounuméro de jobSectionsPlanningInterventionsClients & contratsEntreprisePagesPlanning → Tableau du jour etdisponibilité des techniciensInterventions → Liste et filtresInterventions → Détail du job avec photosClients → Fiche clientClients → Contrats récurrents (nouveau)Entreprise → Stock de pièces, exportsfacturation et intégrations

Données d'exemple. Fieldnote est une entreprise fictive qui sert à remplir les 61 boards, pour que les exemples racontent une seule histoire.

Mature, Ana et Karim redessinent l'app web bureau avant d'ajouter les contrats récurrents, parce que les dispatchers ne retrouvent plus le stock de pièces.

Ce que l'équipe en a tiré

Le stock de pièces quitte un onglet de réglages enfoui pour la section Entreprise, et les contrats récurrents ont leur page sous Clients au lieu d'une modale sur la fiche client.

Comment l'animer

Préparation

Déroulé

  1. 15 min
    Lire l'arbre actuel
    Parcours la structure existante de haut en bas. Marque en rouge chaque nœud que le support cite dans les tickets et chaque page avec un rebond au-dessus de 70 %.
  2. 20 min
    Lister les jobs
    Chacun écrit les cinq choses que les utilisateurs viennent faire, une par sticky, avec les mots de l'utilisateur. Fusionne jusqu'à une liste de 6 à 10 jobs.
  3. 35 min
    Tri de cartes
    Écris chaque page sur une carte. En binômes, groupe les cartes par job sans regarder l'arbre actuel. Compare les deux regroupements et garde ce que les deux binômes ont fait pareil.
  4. 30 min
    Dessiner l'arbre cible
    Construis la nouvelle hiérarchie à partir des groupes : premier niveau = jobs, deuxième niveau = pages. Aucun nœud au-delà de trois niveaux. Nomme chaque nœud avec un verbe ou un nom simple, pas de libellé marketing.
  5. 15 min
    Tester avec une tâche
    Donne trois tickets réels à la personne du support et demande-lui de pointer où vit la réponse dans le nouvel arbre. Chaque hésitation est un nœud à renommer ou déplacer.
  6. 5 min
    Clôturer
    Marque les pages à fusionner, les pages à supprimer et les redirections nécessaires. Cette liste est le livrable, pas le dessin.

Pièges

Ensuite

L'arbre cible et la liste de redirections vont au tech lead pour le plan de migration. Le designer utilise l'arbre comme squelette des wireframes basse fidélité des pages de premier niveau.

Ateliers liés

Retour à la boussoleTous les ateliersEnglish version