Saiba como o web design evoluiu do skeuomorfismo para o flat, o que são botões-fantasma (ghost buttons), como eles ganharam popularidade nos últimos anos e qual seu impacto na conversão de usuários.
O que são botões-fantasma (ghost buttons)?
Você decidiu comprar um novo par de sapatos. Você abre o Google, acessa seu site de calçados favorito e fica por um segundo na página inicial deles. A imagem do banner é atraente, mas onde está o botão para chegar ao calçado que você queria? Não poderia ser aquela pequena caixa quadrada bem no meio da imagem, poderia?
Os botões-fantasma (ghost buttons), botões com borda colorida, mas sem preenchimento de cor, tornaram-se bastante populares. Eles recebem o nome “fantasma” para descrever sua natureza transparente — já que não têm uma cor de preenchimento, eles assumem a aparência do plano de fundo (freqüentemente uma foto/ilustração). Mas sempre que eles aparecem, pode surgir a pergunta: “Os designers fizeram teste A/B?”.
Como os botões-fantasma surgiram?
Os botões fantasma não foram projetados em um vácuo; assim como muitas outras coisas na Web, eles são o resultado de entendimentos do usuário, limitações técnicas e preferências estéticas. Então, para entender de onde vêm os ghost buttons, torna-se necessário um pequeno contexto histórico.
1984 — Apple lança o primeiro Macintosh
É discutível que o primeiro Macintosh tenha sido responsável por introduzir a interface gráfica do usuário (GUI) para o público em geral.
Usava o conceito de arquivos como papéis renderizados, contêineres que podiam conter arquivos como pastas e um grupo de contêineres como um diretório de arquivos. Em 1984, os computadores pessoais eram um conceito relativamente novo e pouquíssimos lares tinham um.
Usando essas metáforas visuais, as pessoas foram capazes de fazer o salto cognitivo entre o objeto físico e o digital.
A Apple usou a abordagem do skeuomorphism, em que o designer estiliza ferramentas e conceitos digitais para se assemelhar a suas contrapartes do mundo real — por exemplo, versões antigas do aplicativo Notes da Apple fazia referência aos blocos de notas amarelos.
A ideia era que a metáfora visual ajudaria os novos usuários a entender rapidamente como usar o aplicativo, ou seja, o aplicativo do Notes era apenas uma versão digital do bloco de notas amarelo icônico.
Continuando na linha do tempo…
2001 — Uma equipe da razorfish lançou o primeiro site que se adaptou à viewport do navegador (para a Audi).
2004 — Cameron Adams cria este exemplo de layout dependente de resolução.
2007 — Lançamento do primeiro iPhone.
2008 — 1 a cada 2 seres humanos no mundo (média) já possuía um telefone celular.
2010 — Lançamento do primeiro iPad.
2010 — Ethan Marcotte inventa o termo “Responsive Web Design”.
Ethan Marcotte definiu “Responsive Web Design” como o conjunto de uso de grids fluidas, imagens flexíveis e o uso de media queries. Em vez de criar arquiteturas separadas para dispositivos móveis e desktops, RWD propôs uma arquitetura fluida que pudesse se adaptar a qualquer tamanho de viewport.
Flat Design
Enquanto as primeiras explorações em web design responsivo começaram a explorar como a Web poderia ser mais fluida e elástica e como isso poderia funcionar, o Flat Design começou a imaginar como a Web poderia se parecer.
Embora muitos na época considerassem o Flat Design uma estética mais futurista e modernista, suas raízes remontam aos anos 50 aos movimentos Swiss International Style, Modernism e Bauhaus. “Design Plano” se esforça para subtrair decorações desnecessárias.
Entra o botão fantasma, despojado de toda a decoração, reduzido a uma forma retangular delineada com texto acionável — esta escolha de design é definitivamente na linha do design flat.
Quando começamos a ver Ghost Buttons?
Começamos a ver referências a botões fantasma em algum momento de 2014. Um tumblr chamado websiteswithghostbuttons começou a circular e Daniel Klopper foi o primeiro a twittar #ghostbuttons.
Com o lançamento do Windows Phone 7 e do Windows 8, a Microsoft introduziu um sistema de design chamado “Metro”. Este sistema contou com o uso de cores fortes, tipografia simples e… Botões fantasma!
Entre todos os pioneiros a usarem ghost buttons, o lançamento do iOS 7 da Apple foi talvez a maior influência sobre a tendência. Neste artigo da Wired, a Apple enfatizou que as interfaces de usuário devem ser “discretas e deferentes” para que a interface do usuário “recue, elevando seu conteúdo” em vez de competir com ela.
Não há muitas pessoas que hoje argumentem contra a filosofia da Apple — o conteúdo deve ser o elemento mais importante, não os elementos da interface que o suportam.
Como designers estão usando botões fantasma?
Agora que temos uma ideia de como os botões-fantasma podem ter se originado, por que eles se tornaram uma forte tendência? A maioria dos designers provavelmente argumentaria que seu design simplista os torna versáteis.
Especialmente, quando você considera imagens de hero full-width ou um site com vídeo pesado, os botões fantasma geralmente ajudam a colocar o foco nas imagens e no texto.
Um caso de uso comum para botões-fantasma é como um complemento para um botão de preenchimento sólido ao lado dele. Essa abordagem de 2 botões normalmente tem o botão de opaco como a principal chamada para ação (CTA) e o botão fantasma como a tarefa acionável secundária e menos importante.
Alguns designs vão além disso e incorporam uma mistura de botões de preenchimento fantasma e sólido, seja para denotar hierarquia ou para fornecer variedade.
O uso de cores sólidas (ou gradientes) também tem aumentado desde o advento do flat design. Botões-fantasma podem combinar bem com esse tipo de design, servindo como elementos neutros.
Como mencionado anteriormente, botões fantasma também são uma evolução do flat design, portanto, se a aparência geral “abraçar” essa estética, os ghost buttons podem funcionar bem visualmente.
As implicações do uso de botões-fantasma
Embora tenhamos apenas discutido todos os grandes motivos pelos quais os designers usam bastante botões-fantasma ultimamente, aqui estão alguns fatos e números infelizes que os tornam menos que impressionantes.
Embora os ghost buttons possam ajudar na criação de um design visual agradável, eles também podem criar problemas que podem afetar a UX e ter um impacto comercial negativo.
Angie Schottmuller, ex-chefe de Marketing de Conversão da Unbounce, disse o seguinte sobre eles:
Botões fantasma me deixam louco. Isso vai contra a usabilidade. O conceito é uma tendência de fantasia do designer que deve morrer. O único cenário que acho útil essa tática é quando um cliente insiste em ter 2 CTAs na página e eu, basicamente, quero que um desapareça. Botões-fantasma têm conversões-fantasma.
A seguir, veja alguns problemas comuns de usabilidade que podem ser associados ao uso de botões fantasma.
Legibilidade
Se colocado sobre uma imagem/vídeo sem contraste suficiente, pode ser difícil para os usuários entenderem o que uma CTA que usa botão fantasma diz.
Contraste
Se, digamos, o botão-fantasma e a tipografia forem brancos, colocados sobre uma imagem, geralmente há falta de hierarquia para chamar a atenção para a tarefa principal a ser executada.
Isso pode ter implicações reais nas páginas de destino (landing pages), nas quais as conversões podem ser afetadas.
Clareza
Embora a copy e animações de interação possam ajudar, pode não ficar claro que se trata de um botão. Se não houver contexto apropriado (e dependendo da idade de seu público), pode haver confusões.
Botões fantasma no mundo real
Embora todas as questões acima não devam ser negligenciadas, o impacto potencial nas conversões é aquele que pode custar dinheiro às empresas. Houve alguns estudos de conversão que analisaram o impacto que um botão fantasma pode ter contra um botão de preenchimento sólido.
A Elevated Third realizou um teste em sua newsletter, uma versão com CTAs de botão fantasma e outra com botões de preenchimento sólido. A versão de preenchimento sólido superou a versão do botão fantasma em quase 7%.
Em outro teste, o site ConversionXL encontrou uma redução de 20% nos cliques (com base em 10.000 visitas) ao testar as seguintes imagens:
A Nielsen Norman Group divulgou recentemente um estudo que concluiu que “elementos de UI flat atraem menos atenção e causam incerteza”. No estudo, o NNG descobriu que os usuários gastavam 22% mais tempo em páginas web que tinham significantes fracos (ex: botões acionáveis ou links).
Como este estudo foi baseado em tarefas de localização específicas, o objetivo é que o usuário conclua a tarefa o mais rápido possível. Mais tempo em uma página significa que os usuários enfrentaram mais carga cognitiva.
Desde as publicações do estudo da NNG, tem havido algumas reações que não se concentram verdadeiramente no design flat. Sean Dexter, da Cigna, escreveu um artigo intitulado “Flat Design: Por que você deveria questionar a pesquisa da Nielsen Norman sobre o estilo de design moderno”.
Em seu artigo, ele menciona que um dos melhores exemplos no estudo NNG na verdade compara um botão fantasma a um preenchimento sólido, tornando o teste mais sobre contraste do que sobre flat design. O problema com essa observação é a suposição de que os ghost buttons são um problema diferente e não estão intimamente ligados ao design flat.
O argumento de que o estudo da NNG foi focado principalmente em significantes fracos vs. fortes em vez de flat design tem seu mérito. Ou seja, muitas execuções de flat design sofreram mais pela falta de contraste.
Essas são pequenas amostras, e os resultados variam de acordo com vários fatores, como indústria, público-alvo, tipo de tráfego para a página, posição na página, copy etc.
Dito isso, se você usar botões-fantasma proeminentemente em seu site/app, esses dados devem fazer você, no mínimo, considerar a execução de alguns testes A/B.
Conclusão
Abordamos sobre o que são botões fantasma (ghost buttons), suas possíveis origens, diferentes maneiras de usá-los e possíveis implicações para seu uso.
Aqui estão alguns tópicos a serem considerados na próxima vez que você estiver pensando em usar botões-fantasma:
- Use botões fantasma como CTAs secundários
- Considere contraste, legibilidade e clareza
- Seja consistente
- Teste, teste, teste!
Esteja ciente das possíveis implicações e não crie designs que sejam amplamente dependentes de botões-fantasma. Muitos designers desconfiam de decisões baseadas em dados — talvez porque tenham medo de que os dados forcem uma direção de projeto indesejável.
Os dados não são inimigos e, se optarmos por ignorá-los, faremos isso com o risco potencial de nossos clientes e das marcas que gerenciamos serem prejudicados.