Cartões vs. listas, como eles afetam o UX

Duas das formas mais comuns de organizar o conteúdo do site nos dias de hoje é usando cartões e listas. Cada um tem suas próprias vantagens e desvantagens. Considerando que as listas existem desde os primórdios da web, o design baseado em cartão só recentemente se tornou uma força a ser considerada e uma que é cada vez mais uma escolha popular para organização de conteúdo.

Cartões e listas são formas únicas de exibir conteúdo, o que significa que são melhores e piores, respectivamente, para situações específicas. A chave para os web designers, é claro, é entender quando usar exatamente cada um deles proporciona aos usuários uma melhor experiência do usuário. As respostas apenas podem surpreendê-lo e fazer com que você analise os princípios de design de maneira um pouco diferente.

Aqui, nós exploramos quando é apropriado em web design usar cartões versus listas e vice-versa.

O que é um cartão? O que é uma lista?

Para nos ajudar a entender quando usar um cartão ou lista é mais apropriado para fins de UX, ajuda muito entender primeiro o que cada um é e o que cada um faz (ou deveria fazer).

Um cartão é um contêiner que exibe vários bits de informações relacionadas, a partir das quais os usuários podem obter ainda mais informações. Embora ainda seja um produto do design plano, ele é mais apropriadamente classificado como Flat Design 2.0, já que ele geralmente possui efeitos 3D claros, como sombras projetadas para indicar a clicabilidade. Efeitos 3D como essa profundidade visual funcionam como o significante para os usuários, dizendo que eles podem clicar para obter mais informações.

Curiosamente, há algo de uma dicotomia com um cartão, uma vez que geralmente se assemelha a uma carta de baralho real tanto em forma quanto em tamanho. Isto é sugestivo do skeuomorphism desatualizado, onde os elementos gráficos se assemelham a itens reais.

Uma lista é uma página na qual os critérios de pesquisa ou os hábitos de navegação de um usuário os levam. A página de listagem apresenta, essencialmente, vários itens ou entradas de candidatos. Portanto, uma lista deve facilitar a varredura rápida e eficiente dos olhos para uma experiência adequada de UX. Essa é uma distinção importante que nos ajuda a diferenciar quando uma lista é mais apropriada do que um cartão, em termos de usabilidade.

Quando usar cartões

Agora que conhecemos as principais diferenças entre cartões e listas, é mais fácil para nós sabermos com confiança quando usamos cada um deles, é apropriado em web design.

Para navegação de informações (em oposição à pesquisa)

Os cartões tornam difícil ou mesmo impossível para os usuários discernir facilmente a importância do ranking do conteúdo. Por exemplo, os cartões não fornecem informações óbvias sobre a ordem na qual o conteúdo deve ser visualizado em uma página, já que os contornos / bordas dos cartões são parecidos. Certamente, pesquisas básicas de rastreamento ocular sempre sugerem que os usuários primeiro começam com conteúdo no topo e na esquerda de uma página, mas as listas tornam muito mais intuitivo para os usuários seguirem essa maneira fundamental de absorver conteúdo on-line.

É por isso que usar cartões para navegar por grandes coleções - como as do Pinterest, por exemplo - é o ideal. Quando você está apenas navegando pelos resultados de pesquisa no Pinterest, em vez de determinar em qual ordem visualizá-los, a rolagem infinita de resultados baseados em cartões torna a navegação atraente, divertida e fácil. Sempre que você vir algo interessante, você pode clicar imediatamente no cartão para mais informações. É gratificação instantânea.

Para agrupamentos de diversos itens

Dependendo do aplicativo ou do programa que você está usando, você encontrará um com um painel que usa o design baseado em cartão para facilitar a diferenciação entre vários tipos de conteúdo. Este é um exemplo da força dos cartões para permitir que os usuários identifiquem rapidamente os diferentes tipos de conteúdo que estão gerenciando.

Como os cartões usam bordas para estabelecer limites visuais, eles são ideais quando se trata de agrupar elementos díspares.

Quando usar listas

As listas podem ser um pouco mais diretas do que as placas, talvez porque estejam mais tempo no design da web. Como resultado, tende a ser mais fácil determinar quando usá-los bem.

Para uma digitalização eficiente dos olhos

As listas são preferidas quando os usuários precisam pesquisar rapidamente algo que desejam em um site, como quando examinam a página de resultados da pesquisa depois de inserir seus termos de pesquisa. Listas que são verticais e onde um elemento fica em uma linha acima da próxima ajuda para focar os olhos do usuário muito melhor do que as cartas, já que as listas são fixas enquanto as cartas não ficam em posições fixas nas linhas.

Para telas menores

Simplificando, os cartões ocupam muito mais espaço na tela. Isso faz com que seu uso em dispositivos móveis e em alguns tablets seja problemático, pois força os usuários a rolar a página para baixo, para ver mais opções, mais cedo do que quando as listas são usadas. Como os elementos de uma lista ficam apenas em linhas curtas no comprimento de uma página, os usuários podem ver mais opções sem depender da memória de curto prazo (que aqueles que procuram um design baseado em cartão teriam que fazer quando começarem a rolar para baixo veja mais elementos).

Assim que o seu design exigir que os usuários se lembrem das escolhas na tela, eles começarão a encontrar carga cognitiva , o que prejudica a UX. Carga cognitiva significa que seu cérebro tem que trabalhar mais para se lembrar de algo enquanto ainda está processando novas informações adicionais. Isso, por sua vez, leva a retardar a velocidade das tarefas e, potencialmente, completa o abandono de uma tarefa do usuário.

No aplicativo App Store do meu smartphone, as categorias de aplicativos são organizadas em uma lista vertical e organizada que exibe oito itens em uma página, sem me preocupar em ter que rolar para baixo para ver mais e lembrar das opções anteriores. Se isso tivesse sido feito em um layout com os cartões muito maiores, eu só teria sido capaz de ver algumas opções no máximo, dificultando meu UX.