Para um melhor design de UX: posso clicar nisso?

Como mudanças sutis podem aumentar sua CTR

Todo mundo quer mais cliques. Mais torneiras. Mais usuários dizendo 'sim, eu gosto de tudo o que você está me dando'. Queríamos ver algumas maneiras que realmente fazem os usuários quererem clicar mais, é aí que entra o design UX !

Está muito bem espalhado por toda a web: quando você está fazendo com que os usuários cliquem, uma mudança sutil pode ajudar muito. Analisamos o que exatamente essas mudanças sutis podem ser e o efeito que elas podem ter em suas conversões.

Fontes

As fontes podem ter um efeito enorme e louco. Por exemplo, em 2009, a Tropicana mudou de nome em grande estilo, e grande parte disso foi refazer sua fonte. Lembre-se que a fonte Tropicana também é o logotipo deles.

Imagem via Design Vital

As vendas imediatamente caíram 20%.

As fontes também são uma das coisas mais estáveis ​​nas quais você pode confiar quando está fazendo as pessoas clicarem.

Geralmente, uma fonte em negrito, sem serifa e com alto contraste, será ótima.

Por quê? É o mais fácil de ler. Exemplos disso estão por toda a internet. Basecamp, BaseCRM, Evernote, mHelpDesk – todas essas empresas têm os mesmos CTAs – fonte de alto contraste, negrito sem serifa. É fácil de ver, é fácil de ler. É por isso que as empresas tendem a usá-lo em fontes com serifa. (O mesmo vale para pôsteres - você pode lê-lo há muito tempo). Além disso, sans serif é mais fácil de ler em um computador, e é por isso que você quer usá-lo quando quiser que o leitor clique – eles precisam saber o que você está dizendo antes de qualquer outra coisa.

Sombras projetadas + efeitos 3D

É incrível como as sombras e fazer algo em 3D podem fazer com que as pessoas cliquem nele. É realmente a principal desvantagem do design plano. (Atualmente. A outra é que, eventualmente, será maluca.) Quando as coisas são realmente planas, elas parecem ótimas, mas não é tão fácil saber o que é clicável e o que não é. Jakob Nielsen discutiu isso quando avaliou o Windows 8 em 2012.

Como as pessoas clicam mais quando as coisas realmente se parecem com botões, bordas arredondadas ou uma sombra projetada tornam muito fácil saber o que é clicável e o que não é.

(dica profissional: estes são chamados de botões estilo quiosque).

Isso realmente apresenta um problema interessante. Botões estilo quiosque foram originalmente usados ​​em fliperamas e outros lugares no passado. Então, quando nos tornamos digitais, essa norma foi mantida. Isso faz sentido, mas em algum momento, eles se tornam botões chanfrados e 3D por serem botões 3D chanfrados, não porque alguém realmente se lembra de onde eles vieram. É como o ícone de salvar em disquete – a raiz skeuomórfica eventualmente se torna arbitrária e não é mais skeuomórfica.

Tudo isso para dizer que as pessoas estão mais confortáveis ​​clicando em botões estilo quiosque agora, mas podemos ver um movimento constante se um design plano puder durar mais alguns anos.

Movimento

Muitas pessoas confundem o movimento com a criação de algo que é 3D clicável, mas acho que é importante o suficiente para garantir uma categoria por conta própria, primeiro de uma perspectiva de UX e segundo por causa do que isso significa para o design plano.

Do ponto de vista do UX

Os usuários precisam de feedback para suas ações. É a maneira número 1 de ajudar os usuários a entender onde estão e o que fazer.

O primeiro trabalho de tornar algo clicável é dizer aos usuários que ele pode ser clicado.

Quando se trata de botões, por exemplo, apenas a menor mudança de gradiente pode fazer maravilhas. Por exemplo, a página inicial da Eventbrite usa uma ligeira mudança de gradiente em seus ícones para mostrar que eles são clicáveis ​​e reforçar onde o usuário está:

Outro grande exemplo é a página inicial do site eTecc/Interactive. Eles realmente usam um preenchimento para informar ao usuário que algo é clicável.

É uma maneira muito fácil de descobrir como informar aos usuários o que é clicável e o que não é. E à medida que as coisas ficam cada vez mais planas, esse feedback visual é cada vez mais importante. Estranhamente, isso é algo que a Apple poderia melhorar. Confira a página inicial do Apple.ca.

Parece que os links na parte superior são clicáveis, o que são, e há uma pequena mudança de gradiente para reafirmar esse conhecimento para o usuário. Também podemos assumir que a opção de visualização da galeria também é clicável e, novamente, há uma mudança de cor para reforçar isso.

Mas o problema é que a tela inteira é realmente clicável! É extremamente pouco intuitivo para o usuário e, como alguém que clica muito , demorei um pouco para descobrir por que a página continuava mudando. Não é uma interface de usuário intuitiva.

De uma perspectiva plana

Portanto, embora a Apple não tenha acertado 100% do tempo, eles estão bem próximos. E o movimento permite que os designers construam as interfaces planas que eles desejam enquanto ainda permitem que os usuários saibam o que é clicável e o que não é. Observe como todos os exemplos eram designs excepcionalmente planos? Divulgação completa Eu planejei isso. Ele ilustra que o design plano pode funcionar para um botão, desde que haja feedback.

Aqui está um exemplo de design plano (ish) sem feedback - embora esteja claro para mim que é um botão, sem feedback parece um pouco que meu computador não está funcionando.

Contraste + Cor

Infelizmente, não há um código RGB específico que garanta que as pessoas cliquem. Mas existem algumas regras excelentes a seguir que irão ajudá-lo. Se você quer que os usuários cliquem em algo, você quer que ele se destaque. Isso significa que você precisa contrastar dramaticamente com o que estiver ao seu redor, mesmo que isso signifique romper com a paleta de cores de uma marca.

Por exemplo, David Hamill recomenda usar uma cor para hiperlinks que não é usada para qualquer outra coisa. Em seu site, cada link é feito em rosa. É fácil para um usuário saber o que é um link e o que não é. Combinado com uma mudança quando você passa o mouse sobre ela, é realmente óbvio para o usuário quando você pode clicar em algo.

Esse tipo de problema de cor e contraste geralmente surge com chamadas para ação (CTA) e botões, e uma pequena mudança na cor pode causar uma grande mudança nos lucros. Por exemplo, o Vibethink escreveu sobre CTAs e botões e relatou que alterar a cor e a forma de um botão aumentou as conversões (leia-se: cliques) em 35%. Eles sentiram que o aumento do contraste tornou mais fácil para os usuários clicarem.

Mas eles mudaram duas coisas, então não é absolutamente científico. A Hubspot em 2011 publicou os resultados de alguns testes A/B em botões vermelhos e verdes e descobriu que o botão vermelho superou o verde em 21%.

Portanto, a cor e o contraste podem desempenhar um papel importante em fazer com que os usuários cliquem nas coisas.

Embrulhar

O diabo está nos detalhes. Como designers, desenvolvedores, UXers e profissionais de marketing, sempre que fazemos algo clicável, estamos pedindo que o usuário faça algo. Clique aqui. Enviar candidatura. Contate-Nos. Compre Agora. Seja o que for, é algo que eles têm que precisamos. Então por que não simplificar isso? A melhor maneira de ajudar seus usuários a clicar (e, portanto, provavelmente ajudá-lo) é facilitar o clique. Ao fazer com que os botões atendam às expectativas com design estilo quiosque, ao tornar as fontes fáceis de ler em uma tela (mesmo que sejam pequenas) e ao fornecer feedback sobre botões e conteúdo clicável, você facilita a vida de seus usuários.

É isso, realmente. Ao criar algo clicável, facilite a vida de seus usuários ao mesmo tempo.

Gostou desta postagem? Você também pode querer ler nossa postagem Entenda seus usuários para melhorar seu site UX Design ou nossos ótimos produtos que todo UX Designer deve possuir !