# Category 7: User Interface

> **Usage:** Definition of user experience
> **When to load:** If feature is UI-centric or full module

---

## 7.1 Experience

| # | Question | Answer Type |
|---|----------|-------------|
| Q7.1 | Target devices? (desktop, mobile, tablet) | List |
| Q7.2 | Browsers to support? | List + versions |
| Q7.3 | Accessibility required? (WCAG level) | A/AA/AAA |
| Q7.4 | Dark/light mode required? | Yes/No |

## 7.2 Screens

| # | Question | Answer Type |
|---|----------|-------------|
| Q7.5 | Main screens needed? | List |
| Q7.6 | Existing mockups/wireframes? | Documents |
| Q7.7 | Key information per screen? | Per screen |
| Q7.8 | Possible actions per screen? | Per screen |

## 7.3 Dashboards & Analytics

| # | Question | Answer Type |
|---|----------|-------------|
| Q7.9 | Dashboards ou tableaux de bord requis ? | List (noms + descriptions) |
| Q7.10 | KPIs à afficher par dashboard ? | Per dashboard: nom, métrique, format (number/currency/percent), seuils |
| Q7.11 | Types de graphiques souhaités ? | Per KPI: bar, line, pie, area, scatter, kpi-card |
| Q7.12 | Filtres temporels ? | Période par défaut + plages disponibles (jour/semaine/mois/trimestre/année) |

---

## UI Components

| Need | Component | Détail |
|------|-----------|--------|
| List with pagination | DataTable | Tri, pagination, sélection, actions inline |
| Creation form | Form page (`/create` route) | Validation FluentValidation, i18n des erreurs |
| Edit form | Form page (`/:id/edit` route) | Pré-remplissage, dirty check, optimistic locking |
| Filters | FilterBar | Filtres combinables, persistance URL params |
| Export | ExportButton | CSV/Excel, respecte les filtres actifs |
| Cards/Grid | CardGrid | Affichage visuel alternatif au tableau |
| Detail view | DetailPanel | Side panel ou page dédiée |
| Status/Workflow | StatusBadge + Timeline | Affichage état + historique transitions |
| Tooltips/Infobulles | Tooltip | Info contextuelle sur champs/actions |
| KPI Card | StatCard | Valeur numérique + tendance + icône |
| Chart (Bar/Line/Pie) | RechartsChart | Graphique interactif via Recharts |
| Dashboard layout | DashboardGrid | Grille responsive de KPI + charts |

## Elicitation Guide

### Follow-ups by Question

| Question | If answer is vague/insufficient | Probe |
|----------|-------------------------------|-------|
| Q7.1 (devices) | "Desktop uniquement" | "Aucun accès mobile ? Même pas en consultation ? Tablette en atelier/terrain ?" |
| Q7.5 (screens) | "Un écran de liste" | "Avec pages dédiées pour création et édition ? Détail en page avec onglets ?" |
| Q7.5 (screens) | Pas de mention dashboard | "L'utilisateur a-t-il besoin d'un tableau de bord avec des KPIs avant de plonger dans les données ?" |
| Q7.7 (key info) | "Toutes les colonnes" | "Sur mobile/petit écran, quelles 3-4 colonnes sont indispensables ? Le reste = détail secondaire" |
| Q7.8 (actions) | "CRUD classique" | "Actions métier spécifiques ? (valider, dupliquer, archiver, changer statut, assigner)" |
| Q7.9 (dashboards) | "Juste des chiffres" | "Les tendances/comparaisons ne seraient-elles pas plus lisibles en graphique ? Bar chart pour comparer, line chart pour évoluer ?" |
| Q7.10 (KPIs) | Pas de seuils définis | "À partir de quel seuil un KPI est-il en alerte ? En critique ? (ex: stock < 10 = warning, < 3 = critique)" |

### Anti-patterns to Detect

| Signal | Anti-pattern | Action |
|--------|-------------|--------|
| "Un seul gros formulaire avec tout" | **Formulaire monolithique** | Proposer des étapes/wizard ou des onglets par section logique |
| Aucune mention de feedback utilisateur | **UX silencieuse** | "Quels messages de succès/erreur ? Toast, notification, redirect ?" |
| "Identique à [autre app]" | **Copier sans adapter** | "Quelles différences de contexte ? L'utilisateur fait-il le même parcours ?" |
| Actions sans confirmation | **Actions destructives non protégées** | "La suppression nécessite-t-elle une confirmation ? Un motif ? Une double validation ?" |
| "Juste des chiffres sur la page" | **Dashboard sans visualisation** | "Les tendances/comparaisons ne seraient-elles pas plus lisibles en graphique ? Bar chart pour comparer, line chart pour évoluer ?" |
