Daniele V Silva - Webdesigner, desenvolvedor front-end, programador de interfaces, Gerente de projetos web, consultora e freelancer

Im officially a AUNT!!! – Earlybird

Usabilidade de botões de confirmação e Call to Action no design de interface

Publicado em , por , na categoria Elementos e técnicas, Webdesign

No ano de 2008, escrevi um artigo que dizia o seguinte:

“Eles [os formulários] são hoje a forma mais usada de interação entre usuário e o site, é o modo pelo qual o visitante transmite para o site (ou para os responsáveis) tudo aquilo que ele desejar ver ou fazer.”

Hoje, posso complementar dizendo que essa frase se refere também a botões, mas não necessariamente objetos input type=”button”, e sim elementos que visualmente se parecem com botões, os famosos Call to action (em tradução livre “chamadas para executar uma ação”).
Alguns dos tipos mais comuns de Call to Action incluem: “leia mais”, “imprimir”, “ver detalhes”, “cadastre-se”, “login”, “Comprar”, “Adicionar ao carrinho”, “Salvar” e “Cancelar” em todas as suas variações, e a forma como tratamos esses botões podem garante o sucesso ou fracasso de um projeto, principalmente em sistemas e e-commerce, onde o objetivo principal é induzir o usuário a executar uma ação.
A ideia de escrever esse artigo, surgiu de varias discussões que participei recentemente, como pessoas da minha equipe e clientes, que divergem principalmente sobre o posicionamento dos botões na tela.

Posicionamento dos botões na tela

Porque os usuários clicam mais em botões alinhados a direita do que a esquerda

Antes de falar sobre isso, acho importante explicar que todos os argumentos que vou colocar aqui, são baseados na psicologia cognitiva, gestáltica e no Behaviorism clássico (Watsoniano), essas três áreas de estudo, de forma muito parecida, tratam de uma parte do comportamento humano baseada na reação involuntária a estímulos.

Introdução

Um problema que tenho com muitos clientes, e acredito que vcs tbm têm, é a necessidade que eles tem de destacar tudo. Pensando em e-commerce, começam com o preço, depois querem um texto grande piscando dizendo “Promoção”, ai querem um “Envie para um amigo” chamando a atenção. No final, o botão mais importante “adicionar ao carrinho” ou “comprar” praticamente desaparece na tela. Então, o que eles dizem? “Deixa o botão ‘comprar’ maior”.

O que muita gente não considera, é que um botão bem posicionado é muito mais eficiente do que um botão grande piscando numa área ruim da tela. Vamos considerar o potencial de ganho financeiro que um design apropriado de um botão de “comprar” ou “adicionar ao carrinho” pode trazer para um e-commerce, no final desse artigo, tenho um exemplo, onde a simples adição de uma barra de navegação, aumentou a quantidade de produtos adicionados ao carrinho  em 34%.

Diagrama de Gutenberg

GutenbergO diagrama de Gutemberg foi desenvolvido para ilustrar o comportamento do usuário ocidental conhecido como “gravidade da leitura” . Ele sugere que o processo de escaneamento dos blocos de conteúdo acontece da esquerda para a direita e de cima para baixo, formando um Z.

Dessa forma, conseguimos identificar facilmente quais são as áreas mais significativas da tela, as chamadas Zonas quentes. Mas a utilização do diagrama de Gutemberg vai além de posicionar as informações mais importantes nas áreas quentes, ele sugere que a leitura é linear, e que as informações expostas devem seguir essa linha de raciocínio.

Sendo assim, a leitura se inicia no topo, na extrema esquerda e termina embaixo, na extrema direita. Seguindo esse pensamento, fica bastante óbvio que uma ação, o preenchimento de um formulário, por exemplo, deve sempre ser de cima baixo. Mas o que a maioria das pessoas não parecem perceber, é que o verdadeiro final da tela é a estrema direita, portanto, a conclusão de uma ação, deve, na maioria dos casos, ser exibida nesta posição.

Gestalt: principio da continuidade

Baseado no pensamento de que uma analise do todo tem um resultado diferente da analise das partes em sua individualidade, as leis da gestalt, tratam da percepção da organização dos elementos, de como as pessoas interpretam o mundo.

Levando isso para o design de interface, em um formulário por exemplo, os campos (inputs e similares) devem estar diagramados levando em conta seus rótulos (labels). Esses podem ser diagramados como grupos (filedsets). Os agrupamentos, por sua vez, devem ser enxergados como o formulário propriamente, junto com seus auxílios visuais, mensagens de erro, e Call to Actions (botões de conclusão). Se analisarmos cada um desses itens separadamente, podemos ter campos lindos, e bem organizados mas com um agrupamento incorreto. Ou ainda, campos brilhantemente agrupados, mas arruinar tudo com um rótulo e campo mal alinhados . Essa linha de raciocínio garante que a navegação seja orgânica, e entendida no primeiro contato do visitante.

Um dos princípios da Gestalt, a lei da continuidade, está diretamente ligada ao Diagrama de Gutemberg. Entendendo como o usuário navega, entendemos qual será a expectativa dele sobre a organização do conteúdo, assim é fácil entender que, se a navegação é finalizada na estrema direita na parte de baixo da tela, é evidente que ao procurar o Call to Action (botão de conclusão), o usuário vai se dirigir imediatamente para esta área da tela.

Sendo assim, associando o principio da continuidade ao Diagrama de Gutemberg, o botão de confirmação de uma tela deve ficar posicionado sempre no final dela, ou seja alinhado a direita, na parte de baixo da tela.

Lei de Fitts

O psicologista americano Paul Fitts, publicou um artigo em 1954 que pode ajudar os designers de interface a tomar decisões mais assertivas no que diz respeito ao posicionamento e dimensões dos elementos na tela.

A lei de Fitts sugere que: Quanto mais rápido você consegue alcançar um alvo, mais fácil e usável ele é.

Bem previsível né?

Bom, para chegar a essa definição, ele criou uma equação matemática que leva em consideração o tamanho da área e a distancia do alvo para  determinar o quanto fácil ele é de ser acessado. Assim, um elemento mais próximo do ponteiro do mouse se torna mais fácil de acessar, enquanto elementos muito distantes da posição atual do mouse exigem maior atenção do usuário.

Superfície ativa dos botões (o tamanho)

A área do click de um botão é conhecida como superfície ativa, enquanto a área do botão sem click é chamada de “dead pixel”. Certo… Mas porque um botão deveria ter uma área sem click? Parece bastante óbvio que um botão seja inteiramente clicável, se usarmos um input padrão automaticamente a totalidade da área passa a ficar ativa no click, o mesmo acontece com os links. Mas existem casos bastante específicos onde pode existir uma área de “dead pixel” sem que você perceba.

O que temos que aprender com os erros dos grandes?

Botão inciar do windows 7, com problema de usabilidadeO Windows Vista por muito tempo teve um problema de usabilidade bastante chato. O Botão iniciar, na maioria das versões fica posicionado na extrema esquerda na parte de baixo da tela e essa região não foi escolhida somente com a intenção de melhorar a visibilidade. Assim como o botão “fechar” das janelas padrões do sistema,  como expliquei anteriormente as extremidades da tela são as áreas mais fáceis de se acessar com o movimento do mouse.

No entanto, os desenvolvedores das primeiras versões do Windows Vista, tiveram um descuido: o botão era redondo!

O que aconteceu nesse caso, foi que o botão foi reduzido quase que a metade do tamanho se comparado ao Windows XP, e a superfície ativa do botão se limitava ao circulo do botão, não alcançava a extremidade esquerda da tela, o processo de click no botão, se tornou maçante e cansativo, quase um trabalho de tiro ao alvo.

Mas não demorou muito tempo para que fosse resolvido, as versões seguintes já vieram com essa correção e a maioria das pessoas nem chegou a ver o problema acontecendo.

Nem sempre, maior é melhor

Sabendo que um botão maior é mais fácil de usar, essa proporção não é escalável, ou seja, aumentar 50px em um botão já grande, não melhora sua usabilidade na mesma proporção.

Por exemplo se vc possui um botão representado por um ícone de 16px×16px, a sua área de click será muito pequena,  aumentando 10px de cada lado do botão, a sua área passa a ser de 36px, o que dará um ganho enorme na usabilidade.

Por outro lado, um botão de 130px×36px, com o aumento dos mesmo 10px de cada lado, não traz grandes diferenças na facilidade do click, o tamanho original já é suficientemente grande para garantir o bom uso dele.

area de click

Exemplos de uso

Caso Slide Shop

Um Caso interessante, é o do site www.slideshop.com. A versão do ano de 2010 desse site, trazia um menu superior que quando acionado, abria um submenu.

slideshop_control

Baseados em teste A/B, a Optimeria (o site deles não está mais disponível), empresa responsável pelo estudo, concluiu que os usuários não estavam se adaptando bem ao fluxo de navegação das subcategorias do menu. Uma análise dos Heatmaps (mapas de calor) e dos Clickfows (fluxo dos clicks) das páginas principais, mostraram que os usuários não conseguiam atingir um nível ideal de profundidade na navegação, muitas vezes não chegavam se quer as subcategorias. O que levantou uma suposição de que, melhorando o modelo de navegação, conseguiram melhorar o engajamento do usuário, levando a uma navegação mais linear e por consequência mais profunda, dando visibilidade aos produtos.

Partindo dessa afirmação, proposta era: melhorar a usabilidade e estudar como isso afetaria o padrão do fluxo de clicks.
Começaram removendo os banners laterais promocionais, e adicionando uma barra de navegação vertical a esquerda, o resultado foi esse:

slideshop_menu

Não foi uma diferença muito significativa, vocês concordam?

Os resultados:
Essa pequena alteração, melhorou em 8,9% o interesse dos usuários, e apresentou um crescimento de 34%  na quantidade de produtos adicionados ao carrinho no processo de compra!
Além disso, essa alteração ajudou a traçar novos perfis de interesse e padrões de navegação.

 

Uma opinião sobre “Usabilidade de botões de confirmação e Call to Action no design de interface”

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *