---
target: frontend (UI complète Wordly.art)
total_score: 30
max_score: 40
na_heuristics: 
p0_count: 0
p1_count: 2
timestamp: 2026-08-31T18-46-44Z
slug: frontend
---
# Évaluation de design et d'ergonomie — Wordly.art (`frontend`) — Analyse complète

Méthode : contexte unique (⚠️ DEGRADED: single-context - pas d'environnement de sous-agents parallèles isolés)

## Score de santé ergonomique (10 règles de Nielsen, 0 à 4 chacune)

| # | Règle ergonomique | Note | Constat principal |
|---|-------------------|------|-------------------|
| 1 | Visibilité de l'état du système | 3/4 | La zone de dépôt réagit désormais parfaitement au survol ; le suivi de traitement avec découpage des phases est exemplaire. En revanche, l'action « Tout approuver » dans la relecture enchaîne les requêtes sans compteur ni barre de progression en temps réel. |
| 2 | Correspondance système / monde réel | 3/4 | Vocabulaire du métier de la traduction bien adapté (XLIFF, segments, préservation de mise en page). Quelques identifiants techniques bruts subsistent (identifiants tronqués dans la gestion d'équipe). |
| 3 | Contrôle et liberté de l'utilisateur | 3/4 | Annulation réelle côté serveur lors du traitement et confirmation d'approbation en deux temps. Cependant, la suppression d'un membre d'équipe est immédiate sans modal de confirmation. |
| 4 | Cohérence et standards | 3/4 | Grande harmonie visuelle avec la charte éditoriale (Playfair Display, or encre `#8B6F47`, cartes épurées). Quelques dissonances : la page Glossaires utilise des codes hexadécimaux bruts hors système, et la page Paramètres fait doublon avec l'onglet Préférences du profil. |
| 5 | Prévention des erreurs | 3/4 | Excellents contrôles de format et de taille de fichier. Cependant, si la langue source est identique à la langue cible, le bouton Traduire est désactivé sans message explicatif sous le bouton. |
| 6 | Reconnaissance plutôt que rappel | 3/4 | Récapitulatif clair de la configuration avant envoi, historique récent des travaux avec accès direct à la relecture, sélecteurs de langues avec recherche intégrée. |
| 7 | Flexibilité et efficacité d'utilisation | 3/4 | Bonne accessibilité clavier de la zone de dépôt ; mais absence de raccourci clavier (ex. Ctrl+Entrée) et de filtre par statut (« en attente ») dans la table de relecture. |
| 8 | Esthétique et design épuré | 3/4 | Direction artistique très réussie et distinctive. Le sélecteur de glossaire dans le flux de traduction reste toutefois dense en intégrant l'ajout rapide de termes. |
| 9 | Aide à la reconnaissance et récupération des erreurs | 3/4 | Messages d'erreurs traduits et orientés vers l'action avec possibilité de réessai sans recharger le document. |
| 10 | Aide et documentation | 3/4 | Aides contextuelles claires sous les sélecteurs et infobulles descriptives ; pas de centre d'aide ou FAQ navigable globale. |
| **Total** | | **30/40** | **Palier « Bonne interface » (28-35)** |

## Verdict de spécificité du design

**Évaluation du design** : Wordly.art se démarque nettement des modèles SaaS génériques grâce à son identité éditoriale soignée. L'animation bureautique interactive de la page d'accueil (`hero-visual.tsx`) qui reproduit fidèlement Word, Excel, PowerPoint et PDF avec une onde de numérisation dorée ancre le produit au cœur de sa proposition de valeur : la fidélité absolue de la mise en page. L'équilibre entre le style classique (Playfair Display) et la sobriété moderne fonctionne remarquablement bien.

**Scan automatique** : 3 avertissements identifiés par le vérificateur automatique :
- 2 alertes d'usage de la police Inter (`globals.css:145,151`) — choix assumé pour la lisibilité des textes d'interface.
- 1 bordure d'accent sur élément arrondi (`globals.css:222`) correspondant à l'indicateur de chargement circulaire.

## Ce qui fonctionne particulièrement bien

1. **L'animation bureautique immersive de l'accueil** : Le document vivant qui bascule du français vers l'anglais et l'espagnol avec règles et rubans d'époque démontre la qualité du produit bien plus efficacement qu'une capture d'écran statique.
2. **Le parcours de traitement et d'attente** : L'affichage des étapes (extraction, traduction contextuelle, reconstruction) avec estimation du temps, survie au rafraîchissement et possibilité d'interruption propre.
3. **Le confort de lecture révisé** : L'ajustement des teintes dorées vers un or encre (`#8B6F47`) garantit un excellent contraste sur fond clair tout en préservant le caractère haut de gamme du produit.

## Problèmes prioritaires

1. **[P1] Bouton de traduction désactivé sans message explicatif si source = cible**
   - *Pourquoi c'est important* : Lorsque l'utilisateur sélectionne la même langue en source et en cible (ou que l'auto-détection correspond à la cible choisie), le bouton principal reste grisé sans message explicite, ce qui peut faire croire à un blocage de l'interface.
   - *Solution* : Afficher un court message d'avertissement sous le bouton (`translate/page.tsx`) indiquant que la langue cible doit être différente de la langue source.
   - *Commande suggérée* : `/impeccable clarify`

2. **[P1] Table de relecture sans filtre par statut ni progression en lot**
   - *Pourquoi c'est important* : Sur un document volumineux comptant plusieurs centaines de segments, il est fastidieux de retrouver les segments non validés. De plus, « Tout approuver » lance les requêtes en boucle sans retour visuel d'avancement.
   - *Solution* : Ajouter des onglets de filtrage (« Tous », « À relire », « Approuvés », « Modifiés ») et un compteur interactif sur le bouton d'approbation groupée (`reviews/[jobId]/page.tsx`).
   - *Commande suggérée* : `/impeccable layout`

3. **[P2] Redondance entre la page Paramètres et l'onglet Préférences du Profil**
   - *Pourquoi c'est important* : La page `/dashboard/settings` ne propose que le vidage de cache et une liste statique de formats, tandis que les vrais réglages (thème, langue de l'interface, langue cible par défaut) se trouvent dans `/dashboard/profile?tab=preferences`.
   - *Solution* : Fusionner ou rediriger proprement la navigation pour regrouper tous les réglages utilisateur en un point unique.
   - *Commande suggérée* : `/impeccable distill`

4. **[P2] Sélecteur de glossaire trop chargé dans le volet de traduction**
   - *Pourquoi c'est important* : L'intégration d'un formulaire complet d'ajout rapide de termes dans le panneau latéral de traduction alourdit la prise de décision avant lancement.
   - *Solution* : Concentrer le sélecteur sur le choix du glossaire et les alertes de compatibilité linguistique, en plaçant la gestion détaillée des termes dans la page dédiée aux glossaires (`GlossarySelector.tsx`).
   - *Commande suggérée* : `/impeccable distill`

5. **[P2] Identifiants techniques bruts et suppression immédiate dans l'espace Équipe**
   - *Pourquoi c'est important* : Les membres sont listés avec un extrait d'identifiant technique (`m.user_id.slice(0, 8)`) et le bouton corbeille supprime l'accès instantanément sans demander de confirmation.
   - *Solution* : Afficher l'adresse électronique du membre et ajouter une fenêtre de confirmation avant toute suppression (`teams/page.tsx`).
   - *Commande suggérée* : `/impeccable harden`

## Drapeaux rouges par profil d'utilisateur

- **Alex (Utilisateur intensif / Gestionnaire de localisation)** : Absence de raccourcis clavier rapides pour valider et passer au segment suivant dans l'outil de relecture ; pas de champ de recherche textuelle rapide dans les segments traduits.
- **Jordan (Premier usage)** : Sur la page d'accueil, le lien du plan Starter construit l'adresse avec le nom traduit au lieu de l'identifiant technique ; risque d'incompréhension si le bouton Traduire est grisé sans explication (source = cible).
- **Sam (Accessibilité et navigation au clavier)** : Double barre de défilement imbriquée dans le menu déroulant de sélection des langues (`LanguageSelector.tsx`) ; présence d'émojis décoratifs bruts dans les messages d'avertissement de glossaire.

## Observations complémentaires

- Dans `landing-page.tsx`, l'adresse du lien vers la tarification utilise le nom traduit du plan plutôt que son identifiant fixe (`p.id`).
- Dans `glossaries/page.tsx`, plusieurs classes utilisent des codes de couleurs bruts (comme `#555555` ou `#1A1A1A`) au lieu des variables de thème de l'application.
- Dans `LanguageSelector.tsx`, le conteneur et la liste possèdent tous deux une hauteur maximale avec défilement automatique.

## Questions stimulantes à considérer

1. La page « Paramètres » doit-elle être intégrée directement comme sous-section du profil ou enrichie de vrais paramètres par défaut pour les traductions (ex. moteur favori, préservation des images) ?
2. Dans l'espace de relecture, un mode d'édition en continu avec validation au clavier (Entrée / Tab) ne rendrait-il pas la validation des longs documents 5 fois plus rapide ?
3. Le formulaire d'ajout rapide de termes dans le sélecteur de traduction est-il souvent utilisé à cet endroit, ou mériterait-il d'être allégé au profit de la page Glossaires ?