29 KiB
29 KiB
Dofus Manager UI/UX Specification
Introduction
Ce document définit les objectifs d'expérience utilisateur, l'architecture de l'information, les flux utilisateur et les spécifications de design visuel pour l'interface de Dofus Manager. Il sert de fondation pour le design visuel et le développement frontend, assurant une expérience cohérente et centrée sur l'utilisateur.
Overall UX Goals & Principles
Target User Persona
Theo - Le Multi-Compteur Organisé
| Attribut | Description |
|---|---|
| Profil | Joueur passionné de Dofus gérant 60+ personnages niveau 200 |
| Contexte d'usage | Joue sur PC avec souvent un second écran pour consulter ses données |
| Frustrations actuelles | Tableur Excel illisible, modifications fragiles, contraintes de compte gérées mentalement |
| Objectifs | Trouver rapidement qui n'a pas fait quoi, composer des teams valides, mettre à jour efficacement |
| Expertise technique | À l'aise avec les outils complexes, préfère la densité d'info à la simplicité |
| Fréquence d'usage | Quotidien pendant les sessions de jeu + planification hebdomadaire |
Usability Goals
- Efficacité de navigation — Trouver n'importe quelle information en moins de 3 clics depuis le dashboard
- Mises à jour rapides — Pouvoir mettre à jour la progression d'une team entière en moins de 30 secondes
- Prévention d'erreurs — Impossible d'ajouter 2 personnages du même compte dans une team active
- Vue d'ensemble immédiate — Voir l'état global (teams, progressions, monnaies) en un coup d'œil
- Mémorabilité — Interface cohérente permettant de retrouver ses repères après plusieurs jours d'absence
Design Principles
-
Densité maîtrisée — Maximiser l'information visible sans surcharger visuellement. Utiliser la hiérarchie typographique et les espaces blancs stratégiquement.
-
Consistance des patterns — Tous les tableaux se comportent de la même façon (tri, filtres, pagination). Toutes les actions CRUD suivent le même flow.
-
Feedback immédiat — Chaque action utilisateur génère une réponse visuelle instantanée (loading states, toasts, transitions).
-
Raccourcis pour experts — Permettre les bulk actions, raccourcis clavier (V2), et filtres combinés pour les utilisateurs avancés.
-
Fail-safe par design — Les actions destructives demandent confirmation. Les contraintes métier sont validées avant même que l'utilisateur ne puisse les violer.
Change Log
| Date | Version | Description | Author |
|---|---|---|---|
| 2026-01-17 | 0.1 | Création initiale | Sally (UX Expert) |
Information Architecture (IA)
Site Map / Screen Inventory
graph TD
A[🏠 Dashboard<br/>Vue d'ensemble principale] --> B[👥 Personnages]
A --> C[📁 Comptes]
A --> D[⚔️ Teams]
A --> E[⚙️ Paramètres]
A --> A1[Widget Comptes]
A --> A2[Widget Personnages]
A --> A3[Widget Teams]
A --> A4[Widget Monnaies]
A --> A5[Actions rapides]
B --> B1[Liste Personnages]
B1 --> B2[Fiche Personnage]
B2 --> B2a[Progressions]
B2 --> B2b[Monnaies]
B2 --> B2c[Teams]
C --> C1[Liste Comptes]
C1 --> C2[Fiche Compte]
C2 --> C2a[Personnages du compte]
C2 --> C2b[Métiers]
C2 --> C2c[Récompenses]
D --> D1[Liste Teams]
D1 --> D2[Fiche Team]
D2 --> D2a[Membres]
D2 --> D2b[Statut Progressions]
E --> E1[Serveurs]
E --> E2[Monnaies]
E --> E3[Données DofusDB]
B1 --> F[🔄 Bulk Actions]
F --> F1[Bulk Progressions]
F --> F2[Bulk Monnaies]
Navigation Structure
Primary Navigation (Sidebar)
| Icône | Label | Route | Description |
|---|---|---|---|
| 🏠 | Dashboard | / |
Vue d'ensemble, KPIs, accès rapide |
| 👥 | Personnages | /characters |
Liste principale avec filtres |
| 📁 | Comptes | /accounts |
Gestion des comptes Dofus |
| ⚔️ | Teams | /teams |
Composition et statut des teams |
| ⚙️ | Paramètres | /settings |
Configuration (serveurs, monnaies, sync) |
Secondary Navigation (Contextuelle)
- Onglets sur fiches détail : Personnage → [Infos | Progressions | Monnaies | Teams]
- Sous-menu Paramètres : [Serveurs | Monnaies | Données DofusDB]
- Actions groupées : Accessible depuis la toolbar des listes (quand sélection active)
Breadcrumb Strategy
Format : Section > Sous-section > Élément
Exemples :
Personnages > Krosmaster-CraTeams > Main Team > Statut ProgressionsParamètres > Données DofusDB
Dashboard Content
| Widget | Contenu | Action au clic |
|---|---|---|
| Comptes | Liste des comptes avec nb persos, ogrines | → Fiche compte |
| Personnages | Total, répartition par classe/niveau | → Liste filtrée |
| Teams | Teams actives avec % complétion | → Fiche team |
| Monnaies | Totaux globaux par type | → Détail par compte |
| Progressions | Résumé global (X% Dofus faits, Y donjons) | → Bulk actions |
| Actions rapides | Boutons : Nouveau perso, Bulk update, Sync DofusDB | → Action directe |
User Flows
Flow 1: Trouver les personnages qui n'ont pas fait X
User Goal: Identifier rapidement quels personnages n'ont pas complété une progression spécifique
Entry Points: Dashboard → Widget Progressions, Sidebar → Personnages, Fiche Team
Success Criteria: Liste filtrée affichée en < 3 clics, < 5 secondes
graph TD
A[Dashboard] --> B[Clic Personnages]
B --> C[Liste avec Filtres]
C --> D[Ouvrir filtre Progression]
D --> E[Sélectionner type]
E --> F[Sélectionner N'a pas fait]
F --> G[✅ Liste filtrée affichée]
G --> H{Action suivante?}
H --> I[Voir fiche perso]
H --> J[Sélectionner plusieurs]
J --> K[Bulk Update]
Edge Cases:
- Aucun résultat → Message "Tous les personnages ont complété X" avec bouton reset
- Filtres combinés complexes → Indicateur des filtres actifs + "Clear all"
Flow 2: Composer une team valide
User Goal: Créer ou modifier une team en respectant la contrainte compte
Success Criteria: Team créée avec membres valides, erreur claire si conflit
graph TD
A[Liste Teams] --> B[Nouvelle Team]
B --> C[Modal création]
C --> D[Saisir nom + type]
D --> E[Enregistrer]
E --> F[Fiche Team vide]
F --> G[Ajouter membre]
G --> H[Sélecteur personnages]
H --> I[Sélectionner perso]
I --> K{Même compte dans team?}
K -->|Non| L[✅ Membre ajouté]
K -->|Oui| M[❌ Erreur conflit]
M --> H
L --> O{Continuer?}
O -->|Oui| G
O -->|Non| P[✅ Team complète]
Flow 3: Bulk update progressions pour une team
User Goal: Marquer une progression faite pour tous les membres d'une team
Success Criteria: Mise à jour de N personnages en < 30 secondes
graph TD
A[Fiche Team] --> B[Section Statut Progressions]
B --> C[Sélectionner progression]
C --> D[Voir statut par membre]
D --> E{Tous faits?}
E -->|Non| G[Bouton Marquer fait pour tous]
G --> H[Modal confirmation]
H --> I[Récap: X persos à mettre à jour]
I --> J{Confirmer?}
J -->|Oui| K[Processing...]
K --> L[✅ Toast: X persos mis à jour]
L --> M[Refresh → 100%]
Flow 4: Ajouter un nouveau personnage
User Goal: Créer un personnage avec toutes ses informations
Success Criteria: Personnage créé et visible en < 1 minute
graph TD
A[Liste Personnages] --> B[Clic Ajouter]
B --> C[Modal création]
C --> D[Saisir pseudo]
D --> E[Sélectionner classe]
E --> F[Saisir niveau]
F --> G[Sélectionner serveur]
G --> H[Sélectionner compte]
H --> I{Validation}
I -->|OK| J[Enregistrer]
J --> K[✅ Toast confirmation]
K --> L[Liste rafraîchie]
Flow 5: Consulter le Dashboard
User Goal: Vue d'ensemble instantanée de tous les comptes et personnages
Success Criteria: Toutes les informations clés visibles sans scroll sur desktop
graph TD
A[Accès Dashboard] --> B[Chargement widgets]
B --> C[Affichage simultané]
C --> D[Widget Comptes]
C --> E[Widget Personnages]
C --> F[Widget Teams]
C --> G[Widget Monnaies]
C --> H[Widget Progressions]
D --> I[Clic → Liste comptes]
E --> J[Clic → Liste personnages]
F --> K[Clic → Liste teams]
Wireframes & Mockups
Screen 1: Dashboard
┌─────────────────────────────────────────────────────────────────────────────┐
│ ☰ DOFUS MANAGER [🌙 Dark Mode] │
├────────────┬────────────────────────────────────────────────────────────────┤
│ │ │
│ 🏠 Dashboard│ DASHBOARD [+ Nouveau ▾] │
│ │ ───────────────────────────────────────────────────────────── │
│ 👥 Persos │ │
│ │ ┌─────────────────┐ ┌─────────────────┐ ┌────────────────┐ │
│ 📁 Comptes│ │ 📁 COMPTES │ │ 👥 PERSONNAGES │ │ ⚔️ TEAMS │ │
│ │ │ 12 comptes │ │ 64 personnages │ │ 3 actives │ │
│ ⚔️ Teams │ │ 45,230 ogrines │ │ Niv. moy: 198 │ │ 87% complete │ │
│ │ │ [Voir tout →] │ │ [Voir tout →] │ │ [Voir tout →] │ │
│ ─────────│ └─────────────────┘ └─────────────────┘ └────────────────┘ │
│ ⚙️ Settings│ │
│ │ ┌─────────────────────────────────┐ ┌──────────────────────┐ │
│ │ │ 💰 MONNAIES │ │ 📊 PROGRESSIONS │ │
│ │ │ Doplons 12,450 │ │ Dofus ████░ 72% │ │
│ │ │ Orichor 3,200 │ │ Donjons ██░░░ 45% │ │
│ │ │ Kamas glace 8,100 │ │ Recherchés███░░ 61% │ │
│ │ │ [Détail par compte →] │ │ [Bulk Update →] │ │
│ │ └─────────────────────────────────┘ └──────────────────────┘ │
│ │ │
│ │ ┌─────────────────────────────────────────────────────────┐ │
│ │ │ ⚡ ACTIONS RAPIDES │ │
│ │ │ [+ Personnage] [+ Team] [Bulk Progressions] [Sync] │ │
│ │ └─────────────────────────────────────────────────────────┘ │
└────────────┴────────────────────────────────────────────────────────────────┘
Screen 2: Liste Personnages
┌─────────────────────────────────────────────────────────────────────────────┐
│ ☰ DOFUS MANAGER [🌙] │
├────────────┬────────────────────────────────────────────────────────────────┤
│ │ PERSONNAGES 🔍 [Rechercher... ] │
│ 🏠 Dashboard│ ───────────────────────────────────────────────────────────── │
│ ►👥 Persos │ │
│ │ ┌──────────────┐ ┌──────────────────────────────────────────┐│
│ 📁 Comptes│ │ FILTRES │ │ ☑ Sélection: 3 [Bulk Actions ▾] ││
│ │ │ │ │ ─────────────────────────────────────── ││
│ ⚔️ Teams │ │ ▼ Classe │ │ ☐ │ Nom │Classe│Niv│Serveur│Cpt││
│ │ │ ☑ Cra 12 │ │ ──┼──────────────┼──────┼───┼───────┼───││
│ ─────────│ │ ☑ Iop 8 │ │ ☑ │ Krosmaster │ Cra │200│Imagiro│C1 ││
│ ⚙️ Settings│ │ ☐ Enu 6 │ │ ☐ │ TankMaster │ Iop │200│Imagiro│C1 ││
│ │ │ │ │ ☑ │ MoneyMaker │ Enu │200│Imagiro│C2 ││
│ │ │ ▼ Serveur │ │ ☐ │ HealBot │ Eni │200│Imagiro│C2 ││
│ │ │ ☑ Imagiro │ │ ☑ │ PortalGuy │ Elio │200│Imagiro│C3 ││
│ │ │ │ │ ─────────────────────────────────────── ││
│ │ │ ▼ Progression│ │ Showing 1-20 of 64 [< 1 2 3 4 >] ││
│ │ │ Type: [──▾] │ └──────────────────────────────────────────┘│
│ │ │ ○ A fait │ │
│ │ │ ○ N'a pas │ [+ Ajouter Personnage] │
│ │ │ [Réinitialiser]│ │
│ │ └──────────────┘ │
└────────────┴────────────────────────────────────────────────────────────────┘
Screen 3: Fiche Personnage
┌─────────────────────────────────────────────────────────────────────────────┐
│ ☰ DOFUS MANAGER [🌙] │
├────────────┬────────────────────────────────────────────────────────────────┤
│ │ ← Personnages / Krosmaster [✏️] [🗑️] │
│ 🏠 Dashboard│ ───────────────────────────────────────────────────────────── │
│ 👥 Persos │ │
│ │ ┌─────────────────────────────────────────────────────────┐ │
│ 📁 Comptes│ │ [Avatar] KROSMASTER │ │
│ │ │ Classe: Cra Niveau: 200 │ │
│ ⚔️ Teams │ │ Serveur: Imagiro Compte: Compte1 │ │
│ │ │ Teams: Main Team, Team Succès │ │
│ ─────────│ └─────────────────────────────────────────────────────────┘ │
│ ⚙️ Settings│ │
│ │ ┌─────────────────────────────────────────────────────────┐ │
│ │ │ [Infos] [Progressions] [Monnaies] [Teams] │ │
│ │ ├─────────────────────────────────────────────────────────┤ │
│ │ │ PROGRESSIONS Filtre: [Tous ▾] │ │
│ │ │ │ │
│ │ │ ▼ Quêtes Dofus (7/10) │ │
│ │ │ ☑ Dofus Turquoise ✓ 2026-01-10 │ │
│ │ │ ☑ Dofus Pourpre ✓ 2026-01-08 │ │
│ │ │ ☐ Dofus des Glaces │ │
│ │ │ │ │
│ │ │ ▼ Donjons 191-200 (12/18) │ │
│ │ │ ☑ Bethel ✓ 2026-01-15 │ │
│ │ │ ☐ Tal Kasha │ │
│ │ └─────────────────────────────────────────────────────────┘ │
└────────────┴────────────────────────────────────────────────────────────────┘
Screen 4: Fiche Team
┌─────────────────────────────────────────────────────────────────────────────┐
│ ☰ DOFUS MANAGER [🌙] │
├────────────┬────────────────────────────────────────────────────────────────┤
│ │ ← Teams / Main Team [✏️] [🗑️] │
│ 🏠 Dashboard│ │
│ 👥 Persos │ ┌────────────────────────────────────────────────────────┐ │
│ │ │ MAIN TEAM Type: Main │ │
│ 📁 Comptes│ │ 8 membres • ✅ Active • 8 comptes différents │ │
│ │ └────────────────────────────────────────────────────────┘ │
│ ⚔️ Teams │ │
│ │ ┌────────────────────────────────────────────────────────┐ │
│ ─────────│ │ [Membres] [Statut Progressions] │ │
│ ⚙️ Settings│ ├────────────────────────────────────────────────────────┤ │
│ │ │ STATUT PROGRESSIONS │ │
│ │ │ │ │
│ │ │ Progression: [Dofus Turquoise ▾] │ │
│ │ │ │ │
│ │ │ ████████████████████░░░░ 75% (6/8) [Marquer tous] │ │
│ │ │ │ │
│ │ │ │ Perso │ Statut │ Date │ │ │
│ │ │ │ Krosmaster │ ✅ │ 2026-01-10 │ │ │
│ │ │ │ TankMaster │ ✅ │ 2026-01-10 │ │ │
│ │ │ │ HealBot │ ❌ │ — │ │ │
│ │ │ │ SramKiller │ ❌ │ — │ │ │
│ │ └────────────────────────────────────────────────────────┘ │
└────────────┴────────────────────────────────────────────────────────────────┘
Component Library / Design System
Design System: shadcn/ui (composants copiés, personnalisables)
Core Components
| Component | Purpose | Variants | States |
|---|---|---|---|
| DataTable | Listes avec tri, filtres, pagination | default, selectable, compact | loading, empty, error, filtered |
| FilterSidebar | Panel de filtres multicritères | default, collapsible, modal | default, active, loading |
| StatCard | Widget Dashboard KPI | default, progress, compact | loading, default, hover |
| EntityCard | Header fiches détail | character, account, team | default, editing |
| ProgressionCheckbox | Toggle fait/pas fait | default, with-date, bulk | unchecked, checked, loading, disabled |
| BulkActionBar | Actions sur sélection multiple | floating, inline | hidden, visible, processing |
| Modal | Dialogues création/édition/confirmation | form, confirm, selector | default, loading, error |
| Toast | Notifications feedback | success, error, warning, info | entering, visible, exiting |
| Tabs | Navigation sous-sections | default, pills, underline | default, active, disabled |
| EmptyState | Affichage liste vide | no-data, no-results, error | — |
Branding & Style Guide
Color Palette
Dark Mode (Principal)
| Color Type | Hex Code | Usage |
|---|---|---|
| Background | #0F172A |
Fond principal (slate-900) |
| Foreground | #F8FAFC |
Texte principal |
| Card | #1E293B |
Fond cartes (slate-800) |
| Primary | #60A5FA |
Actions principales (blue-400) |
| Secondary | #94A3B8 |
Texte secondaire (slate-400) |
| Accent | #A78BFA |
Highlights (violet-400) |
| Border | #475569 |
Bordures (slate-600) |
Semantic Colors
| Color Type | Hex | Usage |
|---|---|---|
| Success | #4ADE80 |
Confirmations, complété |
| Warning | #FBBF24 |
Alertes |
| Error | #F87171 |
Erreurs |
| Info | #60A5FA |
Informations |
Typography
| Element | Size | Weight | Line Height |
|---|---|---|---|
| H1 | 32px | 700 | 1.2 |
| H2 | 24px | 600 | 1.3 |
| H3 | 20px | 600 | 1.4 |
| Body | 14px | 400 | 1.5 |
| Small | 12px | 400 | 1.4 |
Font: Inter (system-ui fallback)
Iconography
Library: Lucide Icons
| Context | Size |
|---|---|
| Navigation | 20px |
| Buttons | 16px |
| Inline | 14px |
Spacing Scale (base 4px)
| Token | Value |
|---|---|
space-1 |
4px |
space-2 |
8px |
space-3 |
12px |
space-4 |
16px |
space-6 |
24px |
space-8 |
32px |
Layout Constants
| Element | Value |
|---|---|
| Sidebar width | 240px (collapsed: 64px) |
| Max content width | 1280px |
| Border radius | 8px (cards), 6px (buttons) |
Accessibility Requirements
Standard: Pas de conformité WCAG formelle (app personnelle)
Approche pragmatique : Bonnes pratiques "gratuites" via shadcn/ui
Key Requirements
| Category | Requirement |
|---|---|
| Visual | Contraste 4.5:1, focus visible, états sans couleur seule |
| Interaction | Navigation clavier, focus trap modals, touch targets 44px |
| Content | Labels formulaires, messages d'erreur associés, structure headings |
Responsiveness Strategy
Breakpoints
| Breakpoint | Min Width | Target |
|---|---|---|
| sm (Mobile) | 0 | Smartphones |
| md (Tablet) | 640px | Tablettes |
| lg (Desktop) | 1024px | Laptops |
| xl (Wide) | 1280px | Grands moniteurs |
Adaptation Patterns
| Element | Desktop | Tablet | Mobile |
|---|---|---|---|
| Sidebar | Expanded | Collapsed (icons) | Burger menu |
| Dashboard | 3 colonnes | 2 colonnes | 1 colonne |
| DataTable | Full | Colonnes prioritaires | Cards |
| Modals | Centré 500px | 90vw | Plein écran |
| Filtres | Sidebar | Sidebar mini | Modal |
Animation & Micro-interactions
Motion Principles
- Fonctionnel avant décoratif
- Rapide et non-bloquant (150-300ms)
- Subtil et cohérent
- Respect prefers-reduced-motion
Key Animations
| Animation | Durée | Usage |
|---|---|---|
| Hover | 150ms | Buttons, rows |
| Fade in | 200ms | Contenu chargé |
| Slide in | 250ms | Modals, drawers |
| Toast | 300ms in / 200ms out | Notifications |
| Checkbox | 150ms | Toggle état |
Performance Goals
| Metric | Target |
|---|---|
| First Contentful Paint | < 1.5s |
| Time to Interactive | < 3s |
| Interaction Response | < 100ms |
| Animation FPS | 60fps |
Next Steps
Immediate Actions
- Générer les maquettes haute-fidélité (v0, Lovable, ou Figma)
- Setup le projet avec shadcn/ui et configurer le thème
- Implémenter le Layout principal (sidebar + header)
- Développer le Dashboard avec widgets mockés
Design Handoff Checklist
- All user flows documented
- Component inventory complete
- Accessibility requirements defined
- Responsive strategy clear
- Brand guidelines incorporated
- Performance goals established
Prompt v0.dev (Dashboard)
Create a dark mode dashboard for a Dofus MMORPG character management app called "Dofus Manager".
Layout:
- Left sidebar (240px) with navigation: Dashboard (active), Characters, Accounts, Teams, Settings
- Main content area with widgets grid
Widgets (3 columns on desktop):
1. "Comptes" card: showing "12 comptes" and "45,230 ogrines" with folder icon
2. "Personnages" card: showing "64 personnages" and "Niv. moy: 198" with users icon
3. "Teams" card: showing "3 actives" and "87% complete" with swords icon
4. "Monnaies" card (spans 2 cols): list of currencies with amounts
5. "Progressions" card: progress bars for Dofus, Donjons, Recherchés
6. "Actions rapides" section: buttons for + Personnage, + Team, Bulk Progressions, Sync
Style: shadcn/ui, dark slate background (#0F172A), blue primary (#60A5FA), Inter font 14px
Prompt v0.dev (Liste Personnages)
Create a character list page for "Dofus Manager" with filters sidebar.
Layout:
- Left filter sidebar (250px): Classe checkboxes, Serveur checkboxes, Progression filter
- Main data table: checkbox, Nom, Classe, Niveau, Serveur, Compte columns
- Top bar: search input, bulk actions when selected, + Ajouter button
- Pagination at bottom
Style: Dark mode, shadcn/ui, dense table rows (48px height), hover shows edit/delete icons