191 lines
17 KiB
Markdown
191 lines
17 KiB
Markdown
<!-- Rôle : consigne l'audit d'ergonomie, les observations vérifiées et les améliorations proposées. -->
|
||
# Audit d'ergonomie de Sokko G
|
||
|
||
Date : 5 octobre 2026.
|
||
|
||
## Diagnostic
|
||
|
||
Sokko G possède une identité visuelle cohérente et une vraie utilité : rassembler les informations personnelles d'une session et les consulter à côté de guides de jeu. Ses 17 outils couvrent déjà de nombreux usages. Le principal axe d'amélioration est de rendre le premier usage évident, puis de raccourcir l'accès aux contenus personnels.
|
||
|
||
Aujourd'hui, l'interface expose assez tôt ses possibilités d'organisation, ses réglages et sa gestion des données. Elle explique moins directement quelle action choisir pour répondre à un besoin simple : noter une information, préparer une liste, retrouver sa session ou suivre les éléments d'un guide.
|
||
|
||
Les problèmes fonctionnels ci-dessous sont observés ou établis dans le code. Les conséquences sur la compréhension et les bénéfices attendus restent des hypothèses ergonomiques à valider avec des utilisateurs.
|
||
|
||
## Périmètre et méthode
|
||
|
||
- Lecture des routes, contenus JSON, composants de navigation, accueil, catalogue, toolboxes, modales, sauvegardes, intégration des guides et styles responsive.
|
||
- Parcours Chromium dans un profil temporaire : accueil, liste vide des toolboxes, création, ouverture d'une toolbox, choix d'un outil, catalogue, liste des jeux, accueil Aniimo et ouverture de son panneau toolbox.
|
||
- Inspection à 1440 × 1000 et 390 × 844, avec captures et mesures de mise en page.
|
||
- Contrôle ponctuel du focus et de la touche Échap dans « Ajouter un outil ».
|
||
- Aucune erreur JavaScript remontée par `pageerror` pendant ces parcours. Aucun débordement horizontal du document détecté dans les vues capturées.
|
||
|
||
Limites : vérification sur Vite en développement, sans session avec de vrais utilisateurs, sans audit exhaustif d'accessibilité, sans mesure de performance et sans validation complète des 17 outils. Les filtres détaillés des jeux ont été examinés dans le code, pas exercés dans le navigateur. L'observation initiale à 390 px a permis de retirer une interface téléphone qui ne correspondait pas à la cible produit ; la cible retenue est désormais une fenêtre d'ordinateur à partir de 768 px.
|
||
|
||
Le mode développement conserve la prise en main sur l'accueil, même après création. En production, le code la masque dès qu'une toolbox existe. L'entrée « Design system » visible pendant l'audit est également propre au développement : ce n'est pas un défaut de navigation en production.
|
||
|
||
## Points à conserver
|
||
|
||
- Identité Nebula, palette sombre et composants visuels communs : la base est reconnaissable et cohérente.
|
||
- Navigation principale courte sur ordinateur.
|
||
- Création d'une toolbox avec un seul champ obligatoire.
|
||
- Prise en main existante, exemples interactifs et documentation par outil.
|
||
- Organisation du catalogue en cinq familles : notes et suivi, références, calcul et données, temps et routines, builds et commandes.
|
||
- Possibilité d'associer une toolbox à un jeu et d'utiliser les résultats d'un guide pour créer une checklist.
|
||
- Stockage local, exports et sauvegarde automatique déjà prévus.
|
||
- Confirmations existantes pour retirer un outil ou supprimer une toolbox : il faut les conserver, pas ajouter des confirmations partout.
|
||
|
||
## Priorités proposées
|
||
|
||
Les efforts sont relatifs, pas des engagements de délai : faible = changement local ; moyen = plusieurs composants ou états ; élevé = nouvelle logique et validation de données.
|
||
|
||
| Priorité | Amélioration | Observation ou justification | Effort |
|
||
| --- | --- | --- | --- |
|
||
| P1 | Recentrer la navigation sur le second écran | La navigation téléphone ne correspond pas à la cible d'utilisation. | Faible |
|
||
| P1 | Harmoniser les libellés de navigation | Conserver les mêmes destinations dans la sidebar large et compacte. | Faible |
|
||
| P1 | Fiabiliser les modales au clavier | Dans l'ajout d'outil, le focus reste derrière la fenêtre et Échap ne la ferme pas. | Moyen |
|
||
| P1 | Donner une explication à chaque outil | Mis en œuvre : les 17 choix affichent leur nom complet et une phrase d'usage. | Réalisé |
|
||
| P1 | Faire de la création la première action | Mis en œuvre : l'action du hero crée la première toolbox, puis mène à la liste. | Réalisé |
|
||
| P1 | Placer les toolboxes avant les réglages | En fenêtre compacte, sauvegardes et préférences précèdent la première toolbox et la repoussent sous le premier écran. | Moyen |
|
||
| P2 | Proposer quelques modèles par usage | Une nouvelle toolbox contient surtout un mémo de bienvenue et un lien vers le catalogue. | Moyen |
|
||
| P2 | Donner une suite à la démonstration | Le catalogue permet d'essayer les outils, sans action directe pour ajouter l'exemple à sa toolbox. | Moyen |
|
||
| P2 | Rendre visible la création de checklist depuis un guide | Mis en œuvre : « Utiliser les résultats » remplace l'icône seule sur les listes filtrables. | Réalisé |
|
||
| P2 | Clarifier enregistrement local et sauvegarde externe | « IndexedDB », export, import et budget de stockage occupent beaucoup de place dans le parcours courant. | Moyen |
|
||
| P2 | Alléger les barres d'actions et notifications | Partiellement réalisé : confirmations à 6 secondes, alertes Timer, Calendrier et sauvegarde persistantes. | Moyen |
|
||
| P3 | Accueil de reprise, recherche et favoris | L'accueil ne propose pas de raccourci vers une toolbox récente ; la liste n'a pas de recherche. | Moyen à élevé |
|
||
|
||
## Recommandations détaillées
|
||
|
||
### 1. Une navigation stable en fenêtre large ou compacte
|
||
|
||
**Constat vérifié.** L'ancienne barre mobile ne correspondait ni au second écran ni à la fenêtre demi-écran visés par Sokko G. Elle a été retirée au profit d'une sidebar compacte conservée à partir de 768 px.
|
||
|
||
**Proposition.** Utiliser des destinations stables dans la sidebar et identifier chaque icône par une infobulle au survol et au focus. Garder la création dans les pages concernées.
|
||
|
||
**Validation attendue.** De 768 à 1920 px, toutes les destinations sont identifiables et aucun contrôle fixe ne recouvre le contenu. Sous 768 px, l'application reste accessible sans promesse de confort.
|
||
|
||
### 2. Montrer immédiatement ce que l'on peut faire
|
||
|
||
**État actuel.** Sans toolbox, le premier bloc affiche désormais « Créer ma première toolbox » et ouvre la création avec le tutoriel activé. Dès qu'une toolbox existe, l'action devient « Voir mes toolboxes ». Le bouton placé après les étapes reste disponible comme rappel.
|
||
|
||
**Proposition de texte.** « Vos notes, listes et outils de jeu, réunis au même endroit. Créez une toolbox pour préparer votre prochaine session. Vos données restent dans ce navigateur. »
|
||
|
||
**Actions proposées.** Mettre « Créer ma première toolbox » dans le premier bloc, puis « Essayer les outils » en action secondaire. Les guides restent accessibles dans la navigation. Après une première utilisation, remplacer ce bloc par « Reprendre ma session » avec les dernières toolboxes ouvertes.
|
||
|
||
Réduire les compteurs « 0 toolbox / 17 outils » à une information secondaire. Déplacer l'histoire du nom vers « C'est quoi Sokko G ? », avec un lien discret depuis l'accueil. Conserver les illustrations comme repères visuels.
|
||
|
||
### 3. Rendre le choix d'un outil compréhensible
|
||
|
||
**État actuel.** La fenêtre d'ajout s'étend jusqu'à 900 px et présente les 17 icônes, les noms complets et une courte phrase d'usage. Elle affiche quatre ou cinq colonnes selon la largeur et répartit directement les outils dans les cinq sections du catalogue, sans onglets supplémentaires. Le panneau NDS gère le défilement vertical. L'ajout rapide au chevron reste inchangé dans son principe et utilise les infobulles NDS.
|
||
|
||
**Proposition.** Réutiliser les cinq familles du catalogue, afficher les noms complets et une phrase d'usage. Ajouter une recherche par nom et intention, par exemple « noter », « loot », « temps ». Mettre trois choix de démarrage en évidence sans masquer les autres.
|
||
|
||
| Outil | Description proposée |
|
||
| --- | --- |
|
||
| Mémos | Garder une information courte sous les yeux. |
|
||
| Bloc-notes | Rédiger un guide personnel ou des notes détaillées. |
|
||
| Checklist | Cocher des objectifs et suivre des quantités. |
|
||
| Planificateur de tâches | Suivre des tâches quotidiennes ou hebdomadaires. |
|
||
| Compteurs | Compter des essais, victoires ou ressources. |
|
||
| Arbre d'objectifs | Décomposer un objectif en étapes et ressources. |
|
||
|
||
Ces distinctions sont particulièrement utiles pour les outils dont les usages se recoupent. Un lien « Voir un exemple » peut ouvrir la bonne section du catalogue.
|
||
|
||
### 4. Donner un résultat utile dès la création
|
||
|
||
**Constat.** La création standard ajoute des Mémos et des Liens. La visite guidée est demandée par le bouton dédié de l'accueil, mais pas par toutes les entrées « Nouvelle toolbox ». Le tutoriel commence par changer l'icône et renommer, avant d'ajouter un outil.
|
||
|
||
**Proposition.** Proposer une option facultative de modèle, sans transformer la création en long formulaire :
|
||
|
||
- « Notes de session » : bloc-notes et liens.
|
||
- « Collecte et progression » : checklist et compteurs.
|
||
- « Routine quotidienne » : planificateur et minuteur.
|
||
- « Préparer un build » : équipements, notes et références.
|
||
- « Personnaliser moi-même » : départ libre.
|
||
|
||
Guider d'abord vers une action utile : ajouter une note ou cocher un objectif. Montrer ensuite les possibilités de personnalisation. Proposer de relancer l'aide depuis la toolbox.
|
||
|
||
Les modèles sont une piste de conception à tester. Leur implémentation doit respecter le stockage et les formats d'export existants.
|
||
|
||
### 5. Mettre les contenus personnels au premier plan
|
||
|
||
**Constat vérifié.** La page Toolboxes affiche successivement une présentation, cinq actions, les préférences d'alertes et une grande carte d'explication du stockage avant la première toolbox en fenêtre compacte.
|
||
|
||
**Proposition.** Afficher un titre court, « Nouvelle toolbox », puis les toolboxes. Déplacer le positionnement des alertes dans les préférences et regrouper les actions de données dans « Sauvegardes ». Conserver un résumé visible et rassurant : « Enregistré sur cet appareil » avec un accès aux détails.
|
||
|
||
Ajouter recherche et favoris lorsque la collection grandit. Un tri « Dernière ouverture » nécessite un suivi local dédié ; la date de modification existante n'est pas un historique de consultation.
|
||
|
||
### 6. Relier découverte et utilisation
|
||
|
||
**Catalogue.** Les exemples interactifs constituent un bon support d'apprentissage. Ajouter « Ajouter cet outil à une toolbox » à proximité de chaque exemple, avec le choix « Vide » ou « Avec cet exemple ». Expliquer localement que les essais de la démo ne sont pas conservés dans les toolboxes.
|
||
|
||
**Guides de jeu.** L'action visible « Utiliser les résultats » ouvre désormais la modale de copie ou de création de checklist, tout en gardant un libellé accessible contextuel. La destination liée et l'absence de toolbox sont expliquées dans la modale. Le choix ou la création d'une toolbox dans ce même parcours reste une amélioration possible.
|
||
|
||
**Panneau latéral.** Afficher le nom de la toolbox liée dans le déclencheur ou à proximité. En fenêtre compacte, la bascule « Guide / Toolbox » évite de perdre le contexte dans un panneau couvrant la page.
|
||
|
||
### 7. Clarifier la conservation des données
|
||
|
||
**Constat.** Le site explique déjà que les données restent locales et propose des exports ainsi qu'une sauvegarde automatique. Le vocabulaire technique et les détails de fonctionnement sont cependant très présents.
|
||
|
||
**Proposition.** Distinguer deux informations :
|
||
|
||
- « Enregistré dans ce navigateur » : persistance courante des modifications, à afficher après confirmation effective de l'écriture.
|
||
- « Dernière sauvegarde en fichier : … » : copie récupérable hors de ce navigateur.
|
||
|
||
Employer « Télécharger une sauvegarde » et « Restaurer une sauvegarde » aux endroits appropriés, tout en explicitant si l'import ajoute, fusionne ou remplace des données. Garder les détails IndexedDB et quota dans une rubrique secondaire. La jauge de 250 Mio correspond à un budget recommandé, pas au quota réel du navigateur : éviter un affichage qui suggérerait une limite technique ferme.
|
||
|
||
Dans la fenêtre de sauvegarde automatique, mettre d'abord l'état, le dossier et l'action suivante ; replier les explications longues sous « Comment ça fonctionne ».
|
||
|
||
### 8. Réduire l'effort de lecture pendant une session
|
||
|
||
**Constat visuel.** Les en-têtes d'outils cumulent déplacement, défilement, ajout, réglages, suppression et repli. Le mémo de bienvenue est également visible dans des bandes déroulantes. Les cartes, contours et accents occupent une place importante dans la hiérarchie.
|
||
|
||
**Proposition.** Garder visibles l'ajout et les actions fréquentes ; regrouper les actions rares dans « Plus ». Ajouter un libellé aux actions essentielles dans les fenêtres compactes. Envisager un mode « Organiser » explicite pour les déplacements et changements de disposition, après test pour préserver l'efficacité des utilisateurs habitués.
|
||
|
||
Réserver l'accent le plus fort à l'action principale du bloc. Rendre les bandes de mémos facultatives au démarrage. Les confirmations ordinaires disparaissent désormais après 6 secondes ; les alertes Timer, Calendrier et sauvegarde restent affichées jusqu'à leur fermeture manuelle.
|
||
|
||
### 9. Corriger les interactions clavier des fenêtres
|
||
|
||
**Constat vérifié.** À l'ouverture de « Ajouter un outil », le focus reste sur le bouton déclencheur hors de la modale. Échap ne ferme pas la fenêtre. Le composant ne prévoit pas de confinement du focus. Plusieurs autres modales utilisent un fonctionnement similaire, à contrôler individuellement.
|
||
|
||
**Proposition.** Standardiser l'ouverture avec focus dans la fenêtre, la navigation Tab à l'intérieur, la fermeture par Échap et le retour au déclencheur. Rendre l'arrière-plan inactif pendant la modale. Compléter la navigation avec l'indication programmatique de la page courante et un accès direct au contenu principal.
|
||
|
||
Le contrôle des contrastes, des cibles tactiles et des lecteurs d'écran reste à réaliser ; cet audit ne conclut pas à une conformité globale d'accessibilité.
|
||
|
||
## Ordre de réalisation conseillé
|
||
|
||
1. Corriger les défauts vérifiés : navigation de second écran, noms tronqués, focus et fermeture des modales.
|
||
2. Simplifier le premier parcours : bouton de création immédiat, catalogue d'ajout descriptif, contenus personnels avant les réglages.
|
||
3. Améliorer les passerelles : exemples vers toolbox et résultats de guide vers checklist.
|
||
4. Tester les évolutions plus structurantes : modèles, accueil de reprise, favoris, mode d'organisation.
|
||
|
||
Éviter d'ajouter d'abord de nouveaux outils : les fonctions actuelles offrent déjà suffisamment de matière pour améliorer la découverte et l'usage quotidien.
|
||
|
||
## Comment vérifier les progrès
|
||
|
||
Organiser une courte séance avec, par exemple, cinq personnes découvrant le site. Ce petit groupe sert à repérer des obstacles, pas à établir des statistiques représentatives. Leur donner les mêmes objectifs avant et après les changements :
|
||
|
||
1. Expliquer à quoi sert le site et où les données sont conservées.
|
||
2. Créer un espace pour une session et y noter une information.
|
||
3. Choisir entre checklist et tâches récurrentes pour deux besoins distincts.
|
||
4. Utiliser un guide pour constituer une checklist personnelle.
|
||
5. Retrouver la toolbox après rechargement.
|
||
6. Télécharger une sauvegarde et expliquer comment la restaurer.
|
||
|
||
Relever la réussite sans aide, les hésitations, les retours arrière et le temps jusqu'au premier contenu utile. Fixer les objectifs chiffrés après cette première mesure. Inclure un parcours au clavier et des fenêtres réelles de 768 et 960 px.
|
||
|
||
## Références dans le dépôt
|
||
|
||
- [Accueil et différence développement/production](../website/src/pages/HomePage.jsx)
|
||
- [Prise en main](../website/src/pages/HomeOnboardingSection.jsx)
|
||
- [Libellés éditoriaux](../website/public/data/site.json)
|
||
- [Navigation globale](../website/src/components/Shell.jsx)
|
||
- [Règles responsive des fenêtres compactes](../website/src/styles/_responsive.scss)
|
||
- [Pages, tutoriel et panneau toolbox](../website/src/features/toolboxes/ToolboxPages.jsx)
|
||
- [Sélection d'outils](../website/src/features/toolboxes/modules/AddToolControls.jsx)
|
||
- [Registre des 17 outils et familles](../website/src/features/toolboxes/toolboxModuleRegistry.js)
|
||
- [Catalogue et exemples](../website/src/pages/LibraryPage.jsx)
|
||
- [Résultats de guides vers checklist](../website/src/features/games/CopyChecklistItemsButton.jsx)
|
||
- [Modales et sauvegarde automatique](../website/src/components/ToolboxModals.jsx)
|
||
- [Durée des notifications](../website/src/main.jsx)
|
||
|
||
Le recentrage responsive issu de cet audit est implémenté ; les autres recommandations restent des pistes de travail hors de ce chantier.
|