Listas e grades: comparação UX

1) Quando a lista, quando a grade (regra 5 perguntas)

1. O objetivo do usuário é comparar rapidamente as opções (lista) ou selecionar pelo visual/capa (grade)?

2. Formulário de dados: campos estruturais (tabelas/texto) → lista; objetos visuais (capas, fotos) → grade.

3. Densidade vs visão: precisa de um máximo de elementos por tela (lista) ou vitrine uniforme (grade)?

4. A ação padrão é abrir/detalhes (lista) ou «Jogar/Comprar» instantaneamente com o cartão (grade)?

5. Contexto do dispositivo: retrato móvel - normalmente grade 2-em-fila para cartões; relatórios/tabelas no desctop - lista/tabela.

Resumir: comparar - lista; Escolher com os olhos é uma grade.

2) Modelo de conteúdo e IA

Lista (row-first): o sinal principal é texto/campo. Adequado para logs, histórias de operações, relatórios, resultados de pesquisa por atributos.
Grade (card-first): o sinal principal é capa/suprimento. Adequado para jogos/produtos, mídia, coleções.
Híbrido: «cartões de linha adaptativos» (no móbil, cartão e no desctop, linha com colunas) com a mesma origem de dados.

3) Design de elementos: linha vs cartão

Linha (lista row)

Estrutura: ícone/miniatura (opcional), cabeçalho, 1 a 3 campos-chave, meta (data/status), ação contextual (⋮).
Pontos fortes: leitura, alta densidade, bom conjunto de colunas ordenadas.
Dicas UX: fixe a altura; alinhar à grade; esconda os campos secundários em «divulgação».

Cartão (grid card)

Estrutura: capa, título, assinatura/editora (novo/jackpot), um CTA principal + ação extra em «»....
Pontos fortes: escolha visual, ação rápida, contexto emocional.
Dicas UX: guarde aspect-ratio (por exemplo, 4: 3/1: 1), as mesmas alturas de cabeçalho, corte de texto com tooltip.

4) Navegação, ordenação e filtros

Geral: filtros e ordens - ao lado e estáveis (sem saltos). Condições ativas - chips acima dos resultados.
Lista: suporte muitas colunas + «congelar» cabeçalhos; ordens de clique por chapéu.
Grade: arrumação em uma lista; filtros - chips/painel. Para uma pesquisa «visual» - uma exaltação em hover/long-press.

5) Celular vs desctop

• Grade: 2-em-fila (telefone), 3-em-fila (tablet). Grandes CTA na zona do polegar.
• Lista: linhas compactas (56-72dp), meta-campos compactos.

• Grade: 4-6-em-fila em ≥1200px, auto-fill com 'min' de largura do cartão.
• Lista: tabela/linha, ressalvas de coluna, busca rápida por tabela.

6) Estados e download

Skeletons: linhas-esqueletos (pelo menos 3-5), cartões-esqueletos com bordas de capa e texto.
Vazio: Explicar por que está vazio e sugerir que os pré/filtros sejam retirados.
Erros: manter a seleção do usuário e a posição; dar retry.
«Mostrar mais» (híbrido) é preferível a uma fita infinita nos diretórios; para os logs - Pode-se fazer um scroll automático com «Pausa».

7) Desempenho

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

Lista: virtualização de linhas, alturas fixas, cálculos adiados.
Grade: imagens lazy (AVIF/WebP), 'srcset/sizes', dimensões previsíveis, 'lotes' de 20 a 60 cartões.
Geral: 'conteúdo-visibilidade: auto', kesh de suprimento, prioridades de download para itens hero.

8) Disponibilidade

Lista: tabelas com semântica correta ('mesa/thead/tbody', 'ária-sort'), foco de linha/célula.
Grade: 'role =' grid' ou lista com 'role =' list '; ordem em DOM = visual; assinaturas para imagens.
Teclado: seta/Tab; Enter - abrir; Space - «para favoritos» (se apropriado).
Tamanho do clique: ≥ 44px; contraste AA; assinaturas explícitas de ícones.

9) Métricas e telemetria

• `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 de resultados, Scroll Depth, Zero-Result Rate,
• Compare Rate (para listas), Quick-Action Rate (para malhas), Latency p95.

10) A/B experimentos (o que testar)

Exibição padrão (lista/grade) para novos/retornantes.
Número de itens por tela, altura da linha, tamanho do cartão.
Ordem de filtros/ordens; chips vs painel lateral.
Ação rápida no cartão (ícones/texto, um vs dois CTA).
Guardrails: INP/CLS, queixas de «saltar», crescimento Zero-Result.

11) Exemplos para iGaming

Lobby de jogos (B2C): grade - capa + «Jogar/Demo», editoras Novo/Jackpot, filtros de chips (Provedor/Categoria/Mecânica).
Catálogo de provedores: grade de logos com número de jogos; clique - Página do provedor (dentro, uma grade de jogos).
Relatórios/finanças (B2B): lista/tabela - colunas NGR/GGR/FTD/CR, fixação de cabeçalhos, exportação.
Histórico de transações: lista - fila apertada, estatais, pesquisa por soma/ID/data; A divulgação da linha de detalhes.
Promoções/torneios: grade de banners com datas e CTA, triagem por «Agora/Em Breve».

12) Alternadores flexíveis e personalização

Dê ao usuário o botão Lista de ↔ Grade e memorize a seleção (per usuário/tenant).
Ofereçam os pré-programas «Dureza», «Normal», «Grossy».
Lógica contextual: pela primeira vez, grade no lobby; A pesquisa é uma lista para comparações precisas.

13) Antipattern

Grade sem relação fixa → cartões «dançantes» e CLS alto.
Uma lista com muitas colunas é um scroll horizontal sem necessidade.
Duplica os botões de ação no cartão e no ápice com comportamentos diferentes.
Misture ordens/filtros a cada reposição (quebra o foco).
Filtros ativos ocultos - Os usuários perdem os resultados.

14) Folha de cheque de implementação (passo a passo)

1. Defina o destino da tela: selecionar pelo visual ou comparar atributos.
2. Especifique um modelo: lista/grade/híbrido; negocie o IA e as fontes de dados.
3. Projete uma linha ou cartão com tamanhos fixos de áreas-chave.
4. Triagem/filtros: chips visíveis, controlador de triagem estável.
5. Download/vazio/erro: esqueletos, textos compreensíveis e retry.
6. Performance: lazy/virtualização, 'conteúdo-visibilidade', p95-alvos.
7. A11y: semântica, teclado, contraste, tamanhos de tarefas.
8. Telemetria: TTFA, qCTR, Zero-Result, Latency p95.
9. A/B: exibição padrão, dimensões, acções rápidas.
10. Memória de seleção: mantenha o modo de exibição e os últimos filtros.

15) Resultado

Listas e grades - ferramentas sob tarefas diferentes.

Quando os atributos e comparações são importantes, selecione a lista.
Quando o visual e as ações rápidas resolvem, pegue na grade.
Defina o objetivo, fixe o tamanho e o comportamento, mantenha a interface rápida e acessível - e os usuários alcançarão resultados em menos passos, sem ruídos cognitivos.