Cours Interfaces et utilisateurs 1 · HEIG-VD · Laurent ERNST
Journal de conception
Client e-mail collaboratif — Introduction à la conception orientée utilisateur
ExerciceConception centrée utilisateur
MéthodeFeutre et papier — Esquisses rapides
LivrableJournal de conception individuel
PersonasMarco · Régine · Karim · Mei
Étape 1/4
Définition du périmètre
Hiérarchie des personas — décision de groupe
Primaire
Marco
« Jongle avec 8 clients sans que ça se voie »
Aisance 4/5
Secondaire
Karim
« Ma pile d'abord, le reste après »
Aisance 3/5
Tertiaire
Régine
« Trois casquettes, zéro marge d'erreur »
Aisance 2/5
Justification de la hiérarchie
Marco est positionné comme persona primaire car il représente le cas d'usage le plus riche et le plus central pour un client e-mail collaboratif : il doit coordonner une équipe, éviter les fuites de communication interne vers le client, et passer la main proprement. C'est le cas où les limites des clients classiques (Gmail, Outlook) sont les plus criantes. Karim vient en second car ses besoins de pile individuelle et de visibilité de l'équipe complètent naturellement le flow de coordination de Marco. Régine est tertiaire : ses besoins de multi-comptes sont légitimes mais moins structurants pour la valeur collaborative de l'outil.
12 User Stories retenues (3 par persona)
Priorité donnée aux stories qui augmentent la valeur collaborative — ce que les clients classiques ne font pas.
Marco — Persona primaire
2.7
En tant que responsable de comptes, je veux des brouillons partagés et un chat avec l'équipe dans le contexte de l'email, afin d'améliorer la qualité des réponses.
C'est la tension de conception centrale de Marco : aider à rédiger en interne sans que le client ne voie les coulisses. Impossible avec Gmail.
M
3.4
En tant que chef d'équipe, je veux supprimer les transferts d'email entre collègues, afin que tout le monde ait le même contexte.
Résout directement la frustration des chaînes de transfert où le contexte se perd — la peur #1 de Marco.
MKR
1.2
En tant que responsable support, je veux empêcher que plusieurs personnes répondent au même email, afin que nous restions professionnels aux yeux des clients.
Essentiel pour l'image de l'agence : éviter la réponse double qui révèle le manque de coordination interne.
MR
Karim — Persona secondaire
4.1
En tant que chef d'équipe, je veux mettre en attente (snooze) des emails et les traiter comme des tâches, afin de faire le suivi au bon moment.
Karim doit traiter ses dossiers par ordre de priorité — un snooze qui intègre la logique de pile est central à son workflow.
KM
2.8
En tant qu'agent support, je veux discuter des cas difficiles en interne avant de répondre, afin que ma réponse soit solide.
La tension principale de Karim : ne pas mélanger sa pile perso et la boîte générale, tout en pouvant demander de l'aide discrètement.
MK
3.2
En tant que membre d'équipe qui rentre de congés, je veux que mes collègues aient pu voir et traiter mes emails, afin de ne pas découvrir une boîte saturée.
La délégation temporaire est un cas d'usage fréquent dans le cabinet et révèle bien la limite des clients classiques.
MK
Régine — Persona tertiaire
6.8
En tant qu'équipe avec plusieurs comptes email, je veux tout regrouper dans une boîte unifiée, afin de ne pas avoir à vérifier plusieurs endroits.
Régine jongle entre trois adresses — la confusion visuelle est sa frustration principale. Une vue unifiée par identité est la solution.
RM
9.2
En tant que responsable support, je veux que chaque membre ait sa propre adresse/alias, afin que les clients aient l'impression de parler à une vraie personne.
Régine envoie depuis des adresses différentes selon son "chapeau" — l'identité visuelle de l'expéditeur doit être sans ambiguïté.
MR
10.5
En tant qu'équipier, je veux un outil simple sans complexité écrasante, afin de me concentrer sur le travail plutôt que sur l'outil.
Régine a une aisance tech de 2/5. Toute fonctionnalité collaborative ajoutée ne doit pas dégrader la simplicité — garde-fou pour nos choix de conception.
R
Note de journal — Étape 1
La sélection a écarté les stories de la catégorie 7 (échelle & volume) car elles concernent principalement Mei et des contextes de très gros volume (2000+ emails/jour), qui s'éloignent du cas d'usage principal de nos personas. Les stories 11.x (contexte & culture) ont été gardées comme toile de fond, pas comme brief de sketching, conformément à la consigne.
Flows couverts par la sélection
2. Chat interne & mentions3. Transfert & délégation1. Tri & attribution4. Snooze & différer6. Unifier les comptes9. Relations externes10. Onboarding
Étape 2/4
Esquisse et breadboarding
Note de méthode
Les esquisses ci-dessous reproduisent fidèlement le résultat d'un travail au feutre et papier. Chaque écran est volontairement grossier et annoté — c'est l'objectif. La valeur est dans les décisions représentées, pas dans le rendu visuel. Une esquisse par user story sélectionnée + 3 variantes divergentes sur la story 2.7 (brouillon partagé).
Story 2.7 — Brouillon partagé + chat contextualisé (3 variantes)
Variante A
Split-panel : email + brouillon + chat
Objectif : Co-rédaction visible en temps réel, chat ancré à l'email. Résultat : Très dense. Risque de surcharge sur petit écran. Questions ouvertes : Comment gérer les conflits d'édition simultanée ?
Variante B
Onglets contextuels sous l'email
Objectif : Moins d'encombrement, basculer entre brouillon et notes selon le besoin. Résultat : Plus sobre. Choix laissé de côté : Perd la co-édition visible en temps réel. Questions ouvertes : Les utilisateurs penseront-ils à cliquer sur "Notes" ?
Objectif : Réunir toutes les informations nécessaires sans navigation — le flow de Marco de bout en bout. Résultat : Plus lisible que A, plus complet que B. L'email et le brouillon partagent la colonne centrale — le chat interne (invisible du client) est toujours à portée sans quitter l'écran. Choix effectués : Les avatars co-éditeurs donnent une conscience collective immédiate. Le snooze et l'assignation sont dans le panneau chat (actions "équipe"). Laissé de côté sciemment : Pas de version mobile de cet écran dans cette itération — la triple colonne suppose un écran large.
Objectif : Transmettre sans que le contexte se perde, sans transfert email. Résultat : Le résumé automatique réduit la friction. Questions ouvertes : Que voit Sophie côté destinataire ? Itération suivante nécessaire.
Verrou de réponse — éviter le doublon
Objectif : Signaler visuellement qu'une réponse est en cours avant même d'ouvrir l'email. Résultat : Deux états clairs : "en rédaction" et "déjà répondu". Choix effectués : Le verrou n'est pas un blocage technique — c'est une alerte sociale. On peut quand même "prendre en charge" si la situation l'exige.
Objectif : Retirer l'email de la pile sans le perdre. Résultat : Raccourcis temporels + saisie libre. Choix : Le snooze est personnel (pas visible de l'équipe) — cohérent avec le besoin de Karim de gérer SA pile.
Mode congés + résumé de retour
Objectif : Karim rentre et sait exactement ce qui s'est passé pendant son absence. Résultat : Résumé structuré. Questions ouvertes : Qui décide de la délégation — Karim avant de partir, ou son responsable ? Nécessite clarification dans le prototype papier.
Objectif : Régine envoie depuis la bonne adresse, à chaque fois, sans hésiter. Résultat : Deux mécanismes complémentaires : (1) sélecteur visuel et coloré, (2) alerte proactive si l'identité ne correspond pas au destinataire connu. Choix : La mémoire d'identité par contact réduit la charge cognitive. Laissé de côté : Pas de gestion de la signature ici — c'est dans le socle fonctionnel.
Étape 3/4
Prototype papier & test utilisateur
Contexte du test
Groupe testeur
Groupe B (3 étudiants), jouant le rôle de Marco.
Prototype testé
Variante C (triple colonne) + écran de délégation + verrou de réponse. 7 écrans papier assemblés avec du scotch.
Scénario
Marco reçoit un email de Merkur SA sur les tarifs. Il doit (1) co-rédiger la réponse avec Sophie en interne, (2) déléguer le dossier avant ses congés.
Durée par tâche
Tâche 1 — Co-rédaction
4 min 20
Tâche 2 — Délégation congés
5 min 50
Remarque
Les deux tâches ont pris plus de temps qu'attendu. La tâche 2 n'a pas été complétée par un testeur sur trois.
Observations — ce qui s'est passé
🚧
Blocages
BlocageLes 3 testeurs ont cherché un bouton "Inviter Sophie" ou "Partager" — personne n'a trouvé la colonne de chat interne spontanément dans les 90 premières secondes.
BlocageLa délégation congés était dans le menu "Paramètres" du prototype. 2 testeurs sur 3 ont cherché dans les actions de l'email lui-même.
BlocageUn testeur a cliqué sur "Envoyer" du brouillon en pensant envoyer un message interne à Sophie, pas la réponse au client. La distinction brouillon / chat n'était pas lue.
😮
Surprises
Surprise+Le verrou de réponse (badge orange "Sophie rédige") a été compris immédiatement par les 3 testeurs — sans qu'on l'explique.
Surprise+Un testeur a remarqué les avatars co-éditeurs et dit spontanément "ah, je vois que Sophie est en train d'écrire" — exactement l'intention.
HésitationL'icône 🔒 pour "chat invisible du client" a suscité des questions : "ça veut dire que c'est chiffré ?" Mauvaise lecture du cadenas.
OKLe snooze a été trouvé et utilisé sans friction par les 3 testeurs sur la tâche 1.
Citations marquantes
« J'aurais voulu cliquer sur le nom de Sophie pour lui envoyer un message, pas chercher un panneau séparé. »
Testeur 1 — pendant la tâche 1, après 2 min d'exploration
« J'ai cru que "Envoyer" c'était envoyer à Sophie. J'ai failli envoyer ma note interne au client. »
Testeur 2 — après avoir cliqué sur Envoyer par erreur sur le brouillon partagé
« Pour les congés, je cherchais quelque chose sur l'email de Merkur, pas dans les settings généraux. C'est lié à ce dossier, non ? »
Testeur 3 — bloqué sur la tâche 2
« Le badge orange qui dit que Sophie rédige, ça c'est vraiment bien. Dans Gmail tu sais jamais si quelqu'un a déjà commencé à répondre. »
Testeur 1 — feedback spontané en fin de session
Synthèse des problèmes identifiés
#
Problème
Story concernée
Sévérité
Cause racine
P1
Le chat interne n'est pas trouvé spontanément — les testeurs cherchent à "inviter" un collègue depuis l'email, pas depuis un panneau latéral
2.7 / 2.8
Critique
Point d'entrée du chat déconnecté de l'email lui-même
P2
Confusion entre "Envoyer au client" et "Envoyer à un collègue" — le bouton Envoyer du brouillon est ambigu
La délégation congés est dans "Paramètres" alors que les testeurs la cherchent dans le contexte d'un email ou d'un fil spécifique
3.2 / 3.4
Moyen
Modèle mental : "je délègue CE dossier", pas "je configure mes congés"
Étape 4/4
Révision & amélioration
P1
Chat interne introuvable — ancrage à l'email
Stories 2.7 / 2.8 · Sévérité critique
Pourquoi ce problème
Dans la Variante C, le chat est un panneau indépendant en colonne droite. Les testeurs ont le réflexe de partir de l'email — ils cherchent à "mentionner Sophie" depuis le fil, comme on ferait @sophie dans Slack ou Notion. Le chat flottant n'est pas perçu comme lié à l'email ouvert.
Pourquoi cette solution
Ancrer le déclencheur du chat dans le corps de l'email, via un bouton "@Mentionner" visible à la sélection de texte, et via un indicateur permanent en bas du fil. Le chat s'ouvre alors depuis l'email, pas à côté.
Ce qui est laissé de côté : la colonne de chat permanente est supprimée au profit d'un drawer contextuel. Perd un peu de la "conscience collective" mais gagne en clarté.
Bonjour, suite à notre dernier échange je voudrais comprendre si la remise de 10% s'applique bien à l'ensemble de la commande ou uniquement aux références standard. Pouvez-vous confirmer avant vendredi ?
✏️
Sophie Marchand rédige une réponse
S
Commencé à 10h14 · il y a 3 min
Vous pouvez voir son brouillon, lui laisser une note, ou prendre en charge vous-même.
← Nouveau : "Discuter en interne" ouvre un drawer contextuel ancré à ce fil, sans quitter l'écran. Le chat reste visible à côté de l'email, pas dans une colonne permanente.
P2
Confusion brouillon client / message interne
Story 2.7 · Sévérité critique — risque d'envoi accidentel au client
Pourquoi ce problème
Deux zones de saisie cohabitent : le brouillon de réponse au client et le chat interne avec les collègues. Visuellement, elles se ressemblent trop. Un testeur a confondu et failli envoyer une note interne directement au client.
Pourquoi cette solution
Différenciation radicale des deux espaces : le brouillon client a un fond légèrement bleuté + label "Réponse au client" + bouton Envoyer proéminent. Le chat interne a un fond violet clair + icône cadenas remplacée par "Équipe seulement" en texte. Les deux ne peuvent jamais être confondus.
Ce qui est laissé de côté : l'icône 🔒 est abandonnée. Elle était mal lue (interprétée comme "chiffrement" plutôt que "invisible du client").
La remise de 10% s'applique bien à l'ensemble de la commande, y compris les références hors catalogue.
Cordialement,
Marco
M
S
2 personnes éditent · enregistré
Ajouter une note pour l'équipe avant envoi…
Équipe seulement
Non visible du client
🔵Ce fil est invisible de Laurent Bauer et de Merkur SA
Sophie · 10h14
On mentionne le -10% sur toute la commande ?
Marco · 10h16
Oui, j'ai vérifié avec Léa, c'est confirmé
Sophie · 10h17
OK j'ai mis à jour le §2 du brouillon 👍
Répondre à l'équipe…
Changements clés
Le label "Équipe seulement" remplace l'icône cadenas ambiguë. Le bouton d'envoi dit explicitement "Envoyer à Merkur →" — impossible de confondre avec une action interne. Les fonds de couleur différents (bleu pâle vs violet pâle) créent une séparation immédiate sans lecture.
P3
Délégation congés — mauvais emplacement
Stories 3.2 / 3.4 · Sévérité moyenne
Pourquoi ce problème
Les testeurs partent de l'email (ou du fil de dossier) pour trouver la délégation. Leur modèle mental : "je confie CE dossier à Sophie", pas "je configure mes absences dans les paramètres". Le placement dans Settings était une erreur de concepteur, pas d'utilisateur.
Pourquoi cette solution
La délégation congés reste accessible depuis Settings, mais elle est aussi déclenchable depuis le profil utilisateur en haut (contexte global) et depuis une bannière contextuelle quand une absence imminente est détectée.
Ce qui est laissé de côté : la délégation fil par fil (trop granulaire pour ce prototype). On délègue la pile entière pour une période.
Sophie recevra une notification · Vous resterez visible des clients · Résumé à votre retour
Changements clés
La délégation est maintenant accessible via un raccourci depuis le profil utilisateur en haut de l'interface (pas seulement depuis Settings). Une bannière contextuelle "Vous partez bientôt — configurer la délégation" apparaît 3 jours avant l'absence détectée dans le calendrier. Les droits accordés sont explicites et granulaires.
Synthèse
Note de synthèse
Ce que le test a changé — et pourquoi
Les trois problèmes identifiés lors du test ont un point commun : ils révèlent un écart entre notre modèle de concepteurs et le modèle mental des utilisateurs. Nous avions pensé l'interface en termes d'espaces — une colonne pour le chat, un panneau pour les paramètres. Les testeurs, eux, pensent en termes d'actions depuis le point d'attention : "je suis sur cet email, je veux faire quelque chose ici".
La correction principale (P1 et P2) consiste à ancrer les actions collaboratives dans le fil de l'email, pas à côté. Le bouton "Discuter en interne" remplace la colonne permanente. Ce choix sacrifie un peu de visibilité permanente du chat, mais supprime la confusion sur son rôle et son point d'entrée — un compromis acceptable pour un prototype de niveau 1.
La correction de P3 est plus simple : multiplier les points d'accès à la délégation congés sans déplacer la fonctionnalité. Le modèle mental "je délègue depuis mon dossier" reste partiellement frustré dans cette version — c'est une dette de conception consciente que l'on note pour l'itération suivante.
Ce qui est délibérément laissé de côté : la distinction visuelle entre les états "brouillon en cours / brouillon validé / envoyé" dans la liste d'inbox — un problème apparu en marge du test mais hors du périmètre de cette itération. Le socle fonctionnel (lire, écrire, organiser) n'a pas été touché.
