1.9 KiB
1.9 KiB
Objectif
Améliorer la clarté et la lisibilité de l’interface (catalogue, filtres, détails produit) sans modifier la palette de couleurs existante.
Contraintes strictes
- Interdit : changement de couleurs (fond, accent, badges, etc.)
- Autorisé : typographie, espacements, hiérarchie, mise en page, libellés, tooltips, états, comportements hover/focus, clamp.
Tâches
Cartes produit (catalogue)
- Titre : line-clamp 2 lignes + ellipse
- Tooltip titre complet (survol + clavier)
- Prix : taille 18–20px, bold (prix = focal n°1)
- Delta : format standard ▲/▼ + % (sinon afficher —)
- Statuts : remplacer
unknown/n/aparEn stock / Rupture / Inconnu / Erreur scrape - Badges statuts homogènes (sans changer couleurs)
- Actions : 1 action primaire visible, secondaires au hover ou menu “...”
- Tooltips obligatoires sur toutes les icônes + aria-label
Panneau Détails (colonne droite)
- Découper en sections : Résumé / Prix / Historique / Source / Actions
- Prix dominant visuellement + espacement vertical accru
- URL cliquable + bouton copier + ASIN visible
- Actions regroupées en bas
Filtres (colonne gauche)
- Afficher compteur
X affichés / Y - Chips filtres actifs (cliquables pour retirer)
- Bouton Reset filtres toujours visible
- Labels cohérents + placeholders explicites
Comparaison
- Message guidage : “Sélectionnez 2 à 4 produits…”
- Afficher compteur de sélection (
2 sélectionnés, etc.)
Accessibilité
- Focus clavier visible
- Navigation clavier : Tab sur cartes, Enter ouvre détails
- Icônes avec aria-label + tooltips accessibles
Critères d’acceptation
- Prix clairement dominant sur cartes et détails
- Titres non envahissants (2 lignes max)
- Statuts compréhensibles (plus de unknown/n/a)
- Filtres : X/Y + chips + reset
- Aucune couleur modifiée