O Google, Twitter e Facebook estão usando e abusando dos cards. Então deve ser coisa boa, certo? Talvez. Mas uma coisa é certa: o design baseado em cards é uma tendência forte e precisa de uma boa análise.
O que são os Cards?
Os cards são pedaços interativos de informação apresentados quase sempre num formato retangular. Assim como cartões de crédito ou cartas de jogos, os cards da web contém informações resumidas, relevantes e de rápida compreensão.
O ponto forte desse formato é a interatividade. Além de conter informação, os cards são um convite ao engajamento.
O que os Cards NÃO SÃO
O design baseado em cards é uma tendência nova e por isso envolve por uma certa confusão sobre o que é e o que não é um card. Algumas vezes, é mais fácil definir uma coisa dizendo o que ela não é.
Você até pode criar uma página cheia de boxes e chamar cada um deles de card. Mas eles se encaixam no nosso modelo? Um card deve ser funcional, ter um conteúdo auto-explicativo e coeso e, se possível, ter um verso.
Se um box não tem essas características, pelo modelo que estamos propondo aqui, ele não não seria um card.
Vantagens do Card Design
Os cards podem ser usados de várias formas, de acordo com funcionalidades diferentes pretendidas.
- Cards prendem a atenção das pessoas
- Cards são responsivos
- Cards são facilmente compreendidos
- Cards são compartilháveis
Cards como melhor padrão mobile
O cenário atual, com milhões de telas mobile em formatos e resoluções diferentes demandou um movimento de reestruturação da web. O foco é fornecer experiências personalizadas que agregam vários pedaços de conteúdo.
Pra fazer parte desse movimento, primeiro o conteúdo precisa se fragmentar em partes menores. Depois os API’s vão fazer muito bem o trabalho de juntar os pedaços de conteúdo.
A agregação do conteúdo fragmentado vai depender do comportamento, preferências e interesses da pessoa que vai consumir o conteúdo e do círculo social dela. Ao identificar esse novo modelo de entregar conteúdo é difícil não achar que os cards são a melhor solução.
Como usar os Cards
Os cards devem interagir com o usuário e servir como um suporte para que ele complete uma ação. Vamos ver quatro exemplos dos grandes que já estão usando o card design.
O feed de notícias do Facebook é todo baseado em cards. Cada card tem seu conteúdo (imagem e texto), botão de “Like”, “Share” e campo para comentário.
Além disso, ele adiciona um certificado de qualidade social: você pode ver quantas pessoas deram like, compartilharam e comentaram. Isso influencia diretamente seu engajamento.
Em segundo plano, ele apresenta as opções negativas. Clicando na seta à direita, você pode deixar se seguir a fonte da postagem, ocultar postagens do mesmo tipo e até denunciar.
Os cards do Facebook são um convite ao engajamento positivo. Você também pode usá-los dessa forma, encorajando a interação positiva do seu público.
Google Now
O Google já tinha serviços no formato de cards – como a aba de promoções do Gmail. Agora, o Google Now foi um passo além ao ser completamente baseado nos cards.
O Google Now é como se fosse um assistente virtual que aprende sua rotina e apresenta informações baseadas nela: aniversários, programação de tv, resultado de jogos, problemas atípicos no transito, previsão do tempo, etc.
Muitos cards apresentados vêm com calls-to-action, como “veja seu email” e “deseje feliz aniversário”. Os cards são uma ótima opção para guiar as pessoas por um caminho de ações.
O melhor exemplo de design baseado em cards é o Pinterest, que tem sua interface quase toda composta por eles. Cada card tem affordances ocultas de “Pin It”, “Enviar”ou “Like”.
Os cards do Twitter são tweets normais com algum tipo de mídia rica anexada. Pode ser uma foto, galeria, video ou um convite para instalação de app.
O Twitter encoraja replies e retweets mas, assim como o Facebook, ele deixa as ações negativas em segundo plano. Um card deve focar nas funções que você quer que as pessoas usem mais.
Conclusão
Cards são perfeitos pra deixar um projeto mais amigável e responsivo. O design baseado em cards é uma ótima alternativa se o seu produto vai depender de engajamento e é direcionado para as plataformas mobile.
Gostou desse post? Mostre sua felicidade curtindo nossa página no Facebook!
