UI : améliorer la lisibilité sans changer les couleurs #1

New Issue

2026-01-14T22:05:15+01:00

gilles commented

2026-01-14 22:05:15 +01:00

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/a par En 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

## 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/a` par `En 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

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: gilles/scrap#1