Organizando conteúdo da UI em cards

No projeto de um app mobile de ecommerce, chegaram ao seguinte layout de busca de produtos:

Quando a relação de produtos aparecia, tínhamos diversas imagens aparecendo com alguns textos sob elas, mas ao realizar o teste de usabilidade, notaram que muitos usuários ficaram confusos em como abrir a página de cada produto, ou ainda, se eram itens clicáveis.

Além disso, o conteúdo da pesquisa parecia muito jogado, quer dizer, muitas informações na mesma tela que forçavam o usuário a perder algum tempo tentando entender o que era o que, qual item se relacionava a qual informação.

Para diminuir esse problema, pensamos em trabalhar de uma forma diferente, começando por reorganizar melhor a informação visualmente.

Criando componentes de conteúdo

Ao organizar o conteúdo, podemos começar criando divisões melhores:

Nesse caso, fizemos uma separação do conteúdo de cada item com linhas que delimitavam onde começa e onde termina cada informação.

Mas, note que esse resultado a que chegamos ainda parece muito com uma listagem de itens e nem parecem itens clicáveis realmente.

Nesse ponto, ainda não conseguimos solucionar nosso problema e alcançar o objetivo de vender o item da loja, portanto teremos que pensar em alguma forma tornar mais claro ao usuário como interagir com o conteúdo que apresentamos.

Para aumentar ainda mais esse contraste de um conteúdo para o outro, podemos criar separações mais evidentes, que mostrem cada item como um pedaço único, independente dos demais resultados.

Separando os elementos

O próximo layout ao qual chegamos foi esse:

Repare que, em todos os itens temos agora uma divisão muito mais clara, indicando que se tratam de unidades e, apesar de relacionadas pela mesma palavra-chave da busca, não são conectados.

Esse tipo de padrão é mais conhecida como Cards.

Fazendo uma analogia ao que também conhecemos de cards na vida real, podemos pensar em um baralho, uma cartela de opções, enfim, com cards, ou cartas, conseguimos separar muito melhor esse conteúdo com informações específicas.

Afinal, uma carta de Ás não tem o mesmo valor que uma carta de Valete, por exemplo, ainda que ambas sejam cartas de um baralho.

A ideia é, utilizando cards, facilitar ao usuário digerir todas essas porções de informação que têm alguma chamada para ação. Ou seja, os cards são como opções de escolha, cada um com seu conteúdo.

Mas, para que estes cards tornem-se um apelo clicável ao usuário, não fizemos simplesmente uma separação do conteúdo aleatória.

Note que, nas bordas de cada card, adicionamos uma sombra suave, como se fossem realmente "cartas sobre a mesa", independentes, e que poderiam ser escolhidos individualmente (assim como as cartas de baralho também).

Ainda que pareça apenas um detalhe, deixar essa divisão visual clara pode ser o ponto mais relevante quando se trata de organização visual.

Mas não precisaríamos utilizar apenas esse recurso da sombra, poderíamos criar algum gradiente que sugerisse relevo ao card ou mesmo uma borda envolvendo apenas os elementos do card:

Assim conseguimos organizar melhor as informações e tornar esses elementos mais apelativos para que o usuário clique, como uma espécie de botões.

Agora ficou muito mais fácil de digerir toda essa informação de uma vez, orientando o olhar em focos específicos de conteúdo.

Outras vantagens interessantes

Além das questões visuais que apoiam a divisão de conteúdo, os cards são elementos interessantes para trabalhar com responsividade.

Ao trabalharmos com containers menores de conteúdo, que podem ser expandidos para maiores informações, conseguimos lidar melhor com ambientes responsivos, readequando cada conteúdo e empilhando de forma mais organizada.

Com os cards podemos criar um layout mais flexível para criar experiências ricas de conteúdo.

Isso se considerarmos que esse padrão foi pensado para ser fácil e simples de ler, isto é, nada de encher cards com milhares de informações. Afinal, assim estaríamos apenas criando telas complexas dentro de outras telas, dificultando ainda mais a leitura.

O card é a "chamada". Ao clicar nele podemos abrir todo o conteúdo detalhado que precisarmos a mais.

Como diria Carrie Cousins "uma informação por vez".

Mas onde utilizar cards?

Os cards são utilizados em contextos bem variados, como no caso de timelines de eventos:

Print por How to Geeks

No Facebook temos cada item do feed de novidades separado em cards que compõem uma interação diferente.

Aí temos diversos tipos de conteúdo (vídeos, imagens, texto), que são separados como a atividade específica de cada usuário ou página. Podemos curtir, compartilhar e comentar cada conteúdo específico.

Além disso, assim como no exemplo inicial, podemos utilizar cards como forma de facilitar a busca do usuário quando navega por diversas informações diferentes.

Nesse caso, temos cards separando o conteúdo dos cursos oferecidas pela plataforma, por exemplo. Um card, um curso, em uma listagem de busca maior.

E, se a ideia é reforçar a organização de informações, podemos aplicar esse conceito em interfaces mais complexas também, como dashboards, que apresentam muitas informações ao mesmo tempo.

Dashboard de sites por Weebly

Note que, nessa dashboard do Weebly temos a divisão dos cards e também a possibilidade de abrir cada tópico, expandindo o conteúdo de cada um.

Recapitulando…

Se precisamos facilitar a leitura de diferentes conteúdos, precisamos organizar as informações de forma a melhorar a scanneabilidade.

Para isso, é preciso pensar em como tornar o conteúdo agradável e claro visualmente. Se quero interagir apenas com aquele elemento, crio um card específico, clicável, para abrir ou acionar o item e concluir a ação que planejava.

E você? Tem algum outro exemplo de site ou plataforma que utiliza cards para organizar o conteúdo? Compartilhe com a gente nos comentários!

Para entender melhor sobre como funciona a construção de um layout, a Alura tem dois cursos de Photoshop para a web e Layouts avançados, que dão uma boa base para pensar em composição e estruturação de conteúdo para web. :)