Card
Resumo
Um card é um elemento de interface que agrupa conteúdo relacionado em um contêiner compacto e visualmente distinto.
Reduz a carga cognitiva: as pessoas não precisam reaprender a usar sua interface ao trocar de dispositivo. O padrão é previsível.
Melhora a legibilidade por escaneamento: As bordas definidas de cada cartão guiam o olhar, permitindo que os usuários passem rapidamente de um item para o próximo.
Melhora a usabilidade: Cada cartão é um mundo interativo em si. Ao tocar nele, você é direcionado para um local específico, tornando a navegação simples e direta.
O princípio das regiões comuns cria grupos visuais.
Múltiplos itens contidos juntos dentro de um limite têm maior probabilidade de serem percebidos como agrupados, permitindo que itens mais distantes sejam agrupados visualmente de forma mais explícita. O princípio das regiões comuns libera os designers da necessidade de usar o espaço negativo para criar conexões explícitas entre vários itens.
Anatomia
A força de um cartão reside em sua flexibilidade, pois ele pode conter texto, imagens, ações ou combinações de conteúdo, mantendo-se simples e estruturado.
Quando usar
Conteúdo multimidia
Os cartões são frequentemente usados para apresentar conteúdo multimídia, como imagens, vídeos ou faixas de áudio. Em aplicativos focados em mídia, cada cartão pode representar uma peça de mídia específica, fornecendo uma prévia e opções de reprodução ou interação.
Listagens de produtos e aplicativos de comércio eletrônico
Em aplicações de comércio eletrônico, os cartões são comumente usados para exibir produtos.
Cada cartão representa um item individual à venda e geralmente inclui uma imagem, o nome do produto, o preço e, às vezes, detalhes adicionais, como avaliações ou comentários. Os usuários podem clicar em um cartão para ver mais informações ou prosseguir com a compra.
Notícias e feeds de redes sociais
O formato de cartão é frequentemente usado em aplicativos de notícias e redes sociais para exibir artigos, posts ou atualizações individuais.
Cada cartão representa um conteúdo separado e normalmente inclui um título, um breve resumo, uma imagem e elementos interativos adicionais, como curtidas, comentários e botões de compartilhamento.
Navegação
Um layout baseado em cartões também é usado como parte da navegação. Cada cartão representa um conteúdo separado que pode ser acessado, geralmente incluindo um título e uma dica ou seta.
É importante notar que os cartões levam a um conteúdo, e não iniciam uma ação ou fluxo.
Cartões de compartilhamento
Os cartões também são usados para compartilhar o progresso/conteúdo fora do aplicativo (por exemplo, redes sociais, mensagens).
O padrão de design mais comum é um único cartão com um botão de compartilhamento em destaque na parte inferior da tela.
Em resumo
Conteúdo relacionado ao grupo: Ideal para agrupar informações relacionadas
Elementos interativos: Funciona bem quando usuários precisam clicar, tocar ou deslizar para explorar mais
Coleções ou grades: Apresentar conteúdo semelhante em forma de grade, lista ou carrossel
Para aprimorar as interações com os cartões, os designers costumam adicionar microanimações
Estados de foco, efeitos de ondulação ou gestos de deslizar para descartá-los. Pequenos detalhes, como animar a reordenação do conteúdo ou adicionar elasticidade ao arrastar os cartões, tornam a experiência mais refinada e responsiva. Essas interações ajudam a transformar os cartões de contêineres estáticos em componentes dinâmicos.
Variações
Um card pode ser estático ou direcionar o usuário para um destino
Um card pode ser exibido individualmente ou em grupos (grade,lista,carrossel)
O tamanho do card é flexível e o conteúdo nele pode variar
É comum usar preenchimento ou sombra para proporcionar maior contraste com o fundo
Cards podem ter infinitos estilos
Se seu aplicativo possui uma coleção de conteúdo multimídia visualmente atraente, você pode considerar usar imagens preenchidas em vez de imagens com preenchimento.
Os cartões podem ter tamanhos de miniaturas diferentes.
Ao longo dos anos, observamos cartões com tamanhos que variam. Isso depende de como os diferentes tipos de elementos são agrupados na interface do usuário do cartão.
Vemos até mesmo cartões sendo usados sem miniaturas. Contanto que você precise de um agrupamento visual de elementos da interface do usuário, os cartões podem ser uma ótima maneira de exibir suas informações de forma coesa.
Os botões são opcionais em layouts baseados em cartões.
Na maioria das vezes, ter um layout em formato de cartão implica que eles são clicáveis.
Se você tiver uma ação do usuário muito importante, pode ser prudente incluir um botão de chamada para ação no próprio layout do cartão.
No entanto, se você tiver vários cartões na mesma tela, isso pode se tornar repetitivo.
Boas práticas
Um tópico por vez
Ao focar um cartão em um único tópico, você consegue apresentar um design altamente fácil de visualizar rapidamente. Os usuários compreendem o padrão “Um Cartão, Um Tópico” com agilidade, o que permite uma navegação mais rápida pelo design e reduz a carga cognitiva em comparação com cartões que tentassem apresentar várias informações simultaneamente.
Espaçamento e acolchoamento consistentes
Certifique-se de ter um sistema consistente de espaçamento ao redor das bordas externas do cartão, bem como um sistema consistente de espaçamento para o conteúdo dentro do cartão.
Dê destaque
Adicionar uma sombra projetada atrás do componente do seu cartão confere profundidade e dimensão à sua interface de usuário. Essa sensação de separação ajuda os usuários a perceberem cada cartão como um elemento distinto e independente dentro da interface. Além disso, uma sombra projetada bem implementada pode aumentar o contraste entre o cartão e o fundo da interface, melhorando a legibilidade e a acessibilidade.
Mantenha suas fronteiras simples.
Embora as bordas nos cards possam ter sua utilidade, minimizá-las ajudará a manter o conteúdo do card organizado e legível.
Estados vazios
É crucial fornecer aos usuários mensagens claras explicando por que eles estão vendo um cartão vazio. Essa mensagem deve ser curta e objetiva.
Para reforçar ainda mais a necessidade de o usuário realizar uma ação em um cartão de estado vazio, também deve ser utilizado um botão de chamada para ação (CTA).
Carregamento de esqueleto
Nem todos têm uma conexão de internet rápida e nem todos os sites ou aplicativos terão um tempo de carregamento extremamente rápido. Para lidar com esses problemas em potencial, você pode usar o carregamento de esqueleto.
Acessibilidade
A
Se o card comunica categoria ou estado por cor (card de status, card selecionado, card de alerta), a cor não pode ser o único canal (WCAG 1.4.1).
As imagens de conteúdo do card precisam de texto alternativo, e os ícones de ação precisam de nome (WCAG 1.1.1).
Quando o card é clicável e leva a um destino, o propósito desse link precisa ser compreensível pelo conteúdo do card (WCAG 2.4.4).
A referência a um card não pode depender só de característica sensorial — posição ou cor (WCAG 1.3.3).
AA
O texto dentro do card precisa de contraste de pelo menos 4.5:1 contra o fundo onde está (WCAG 1.4.3).
Quando a borda ou a sombra é o único meio de perceber o card como uma unidade separada, ela precisa de pelo menos 3:1 contra o fundo; o mesmo vale para o indicador de foco e para o estado selecionado do card clicável (WCAG 1.4.11).
Os controles interativos dentro do card, e o próprio card se for clicável, precisam de área de toque de no mínimo 24×24px (WCAG 2.5.8).
O indicador de foco precisa estar visível no card clicável e em cada controle interno alcançado por teclado (WCAG 2.4.7).
Ao receber foco, o card ou o controle não pode ficar totalmente escondido atrás de outro elemento (WCAG 2.4.11).
AAA
O texto dentro do card com contraste de 7:1 contra o fundo (WCAG 1.4.6).
O card clicável e seus controles com área de toque de no mínimo 44×44px (WCAG 2.5.5).
O indicador de foco com espessura equivalente a um perímetro de 2px ao redor do card e contraste de 3:1 entre focado e não-focado (WCAG 2.4.13).
Referências
https://mobbin.com/glossary/card
https://60fps.design/learn/glossary/card
https://www.nngroup.com/articles/cards-component/
https://www.simplethread.com/card-components-best-practices/