Listes et grilles : Comparaison UX

1) Quand la liste, quand la grille (règle 5 questions)

1. Objectif de l'utilisateur : comparer rapidement les paramètres (liste) ou choisir par visuel/couverture (grille) ?

2. Formulaire de données : champs de structure (tabulaires/texte) → liste ; objets visuels (couvertures, photos) → grille.

3. Densité vs aperçu : besoin d'un maximum d'éléments par écran (liste) ou d'une vitrine uniforme (grille) ?

4. Action par défaut : ouvrir/détails (liste) ou instantanément « Jouer/Acheter » à partir de la carte (grille) ?

5. Contexte de l'appareil : portrait mobile - généralement une grille de 2 rangées pour les cartes ; rapports/tableaux sur le bureau - liste/tableau.

Bref : comparer - liste ; choisir par les yeux est un filet.

2) Modèle de contenu et IA

Liste (row-first) : le signal principal est texte/champs. Convient pour : logs, historique des opérations, rapports, résultats de recherche par attribut.
Grille (card-first) : le signal principal est la couverture/prévisualisation. Convient pour : jeux/produits, médias, collections.
Hybride : « cartes-lignes adaptatives » (sur le mobile - carte, sur le bureau - ligne avec les colonnes) avec la même source de données.

3) Conception des éléments : chaîne vs carte

Chaîne (list row)

Structure : icône/vignette (en option), en-tête, 1-3 champs clés, meta (date/état), actions contextuelles (⋮).
Points forts : lisibilité, haute densité, bon ensemble triable de colonnes.
Conseils UX : fixez la hauteur ; Aligner sur la grille ; cacher les champs secondaires dans la « divulgation ».

Carte grise

Structure : couverture, titre, signature/labels (nouveau/jackpot), un CTA + dope. action dans « »....
Points forts : choix visuel, actions rapides, contexte émotionnel.
Conseils UX : gardez l'aspect-ratio (par exemple, 4 : 3/1 : 1), les mêmes hauteurs de titres, coupez le texte avec tooltip.

4) Navigation, tri et filtres

Général : filtres et triages - proches et stables (pas de surtensions). Les conditions actives sont les puces au-dessus des résultats.
Liste : soutenir de nombreuses colonnes + « geler » les titres ; trier par clic sur le chapeau.
Grille : tri par une liste déroulante ; filtres - puces/panneau. Pour la recherche « visuelle » - je vais passer à hover/long-press.

5) Mobile vs desktop

• Grille : 2-en-rangée (téléphone), 3-en-rangée (tablette). Grands CTA dans la zone pouce.
• Liste : lignes compactes (56-72dp), méta-champs réductibles.

• Grille : 4-6-rangée à la ≥1200px, auto-fill avec « min » largeur de carte.
• Liste : table/rangées, récitation des colonnes, recherche rapide par tableau.

6) États et téléchargement

Skeletons : lignes squelettes (3-5 minimum), cartes squelettes avec des bouchons sous la couverture et du texte.
Vide : expliquer pourquoi c'est vide et suggérer des préréglages/enlever les filtres.
Erreurs : sauvegarder la sélection de l'utilisateur et la position ; Donnez un retry.
Dosage : « Afficher encore » (hybride) est préférable à un ruban sans fin dans les catalogues ; Pour les logs, vous pouvez utiliser l'auto-scroll « Pause ».

7) Performance

Objectifs : INP ≤ 200 ms, CLS ≤ 0,1, scroll-jank <1 %.

Liste : virtualisation des lignes, hauteurs fixes, calculs différés.
Grille : images lazy (AVIF/WebP), 'srcset/sizes', dimensions prévisibles, « lots » de 20 à 60 cartes.
Général : 'content-visibility : auto', cache-tête, priorités de téléchargement pour les éléments hero.

8) Disponibilité

Liste : tables avec la sémantique correcte ('table/thead/tbody', 'aria-sort'), focus sur les lignes/cellules.
Grille : 'role =' grid 'ou liste avec' role = 'list' ; ordre dans DOM = visuel ; signatures pour les images.
Clavier : flèches/onglet ; Enter - ouvrir ; Espace - « dans les favoris » (le cas échéant).
Dimensions du clic : ≥ 44px ; le contraste AA ; signatures explicites aux icônes.

9) Métriques et télémétrie

• `view_switch(list|grid)`, `sort_change`, `filter_apply`, `card_quick_action`,
• `row_open`, `compare_open`, `results_load_batch`, `error_retry`.

• Time-to-First-Action (TTFA), qCTR des résultats, Scroll Depth, Zero-Result Rate,
• Compare Rate (pour les listes), Quick-Action Rate (pour les grilles), Latency p95.

10) Expériences A/B (que tester)

Affichage par défaut (liste/grille) pour les nouveaux/nouveaux.
Nombre d'éléments par écran, hauteur de ligne, taille de la carte.
Ordre des filtres/triages ; puces vs panneau latéral.
Actions rapides sur la carte (icônes/texte, un vs deux CTA).
Guardrails : INP/CLS, plaintes pour « sauts », croissance de Zero-Result.

11) Exemples pour iGaming

Lobby des jeux (B2C) : grille - couverture + « Play/Démo », labels « New/Jackpot », filtres à puce (Fournisseur/Catégorie/Mécanique).
Catalogue des fournisseurs : grille de logos avec nombre de jeux ; par clic - la page du fournisseur (à l'intérieur - aussi la grille des jeux).
Rapports/finances (B2B) : liste/tableau - colonnes NGR/GGR/FTD/CR, fixation des titres, exportation.
Historique des transactions : liste - série dense, statuts, recherche par montant/ID/date ; divulgation de la ligne pour les détails.
Promotions/tournois : grille de bannières avec dates et CTA, triage par « Aller maintenant/Bientôt ».

12) Commutateurs flexibles et personnalisation

Donnez à l'utilisateur le bouton « Liste ↔ Grille » et mémorisez la sélection (per user/tenant).
Suggérez des préréglages de représentation : « Serré », « Habituellement », « Gros ».
Logique contextuelle : pour la première fois, une grille dans le lobby ; de la recherche est une liste pour une comparaison précise.

13) Anti-modèles

Grille sans rapport d'aspect fixe → cartes « dansantes » et CLS élevé.
La liste avec trop de colonnes est un scroll horizontal sans besoin.
Duplication des boutons d'action dans la carte et dans le hover avec des comportements différents.
Agiter le tri/filtre à chaque sous-chargement (brise le focus).
Filtres actifs cachés - les utilisateurs « perdent » les résultats.

14) Chèque de mise en œuvre (étape par étape)

1. Définissez le but de l'écran : choisir par le visuel ou comparer les attributs.
2. Définir le modèle : liste/grille/hybride ; concilier l'IA et les sources de données.
3. Concevoir un élément : une ligne ou une carte avec des tailles fixes de zones clés.
4. Tri/filtres : puces visibles, contrôle de tri stable.
5. Téléchargement/vide/erreur : squelettes, textes compréhensibles et retry.
6. Performance : lazy/virtualization, 'content-visibility', objectifs p95.
7. A11y : sémantique, clavier, contraste, taille des tap-targets.
8. Télémétrie : TTFA, qCTR, Zero-Result, Latency p95.
9. A/B : vue par défaut, dimensions, actions rapides.
10. Mémoire de sélection : conservez le mode de présentation et les derniers filtres.

15) Résultat

Listes et grilles - outils pour différentes tâches.

Lorsque les attributs et la comparaison sont importants - prenez la liste.
Quand le visuel et les actions rapides décident - prenez la grille.
Définissez la cible, fixez les dimensions et le comportement, gardez l'interface rapide et accessible - et les utilisateurs obtiendront des résultats en moins d'étapes, sans bruit cognitif excessif.