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

via Instagram http://ift.tt/1Fw58BZ

1Categoria ‘ Elementos e técnicas ’

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

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.

 

Dashboard – Dicas de design para aplicações web

Hey! Adivinha só quem voltou!
Pois é, depois de quase um ano eu estou aqui escrevendo novamente.
Nesse momento estou trabalhando no desenvolvimento de interface para duas aplicações totalmente diferentes, e cheguei a um ponto que pode ser crucial para o sucesso da aplicação: o Dashboard. Como percebi a carência desse assunto em português resolvi escrever sobre o que aprendi ao longo do processo de criação, espero que sirva de fonte de informação pra vocês quando estiverem no meu lugar.

Dashboard, ao pé da letra “Painel de bordo”, é um termo usado em diversas áreas e nada mais do que um painel de indicadores.
Em se tratando de aplicações web, o dashboard é uma forma rápida de visualizar as principais atividades sendo executadas dentro de uma aplicação, e funciona como uma porta de entrada para a maioria das ações que o usuário pode executar. O Dashboard, na maioria das vezes, é dividido em pequenos blocos que exibem as informações referentes as diversas áreas e funcionalidades da aplicação e são chamados Widgets.
Parece complicado, mas é super simples, a maioria dos webdesigners desenvolve pequenos dashboards regularmente sem perceber
Cada aplicação tem a sua própria linguagem de comunicação com o usuário, que é basicamente estabelecida através da regra de negócio determinada pelo tipo de serviço à que o sistema de aplica. Por exemplo: uma aplicação para a área de turismo terá uma necessidade especifica no seu dashboard, que é diferente da necessidade de um sistema de reservas para um restaurante.  Será que podemos chamar isso de algum tipo de Folksonomia?
Mas de modo geral, o dashboard é uma forma simples e rápida de reunir todas as informações importantes em uma única página (ou aba).
Essa pequena definição provavelmente foi suficiente para ajudá-lo a entender como o dashboard é importante, no entanto, normalmente o mínimo de esforço e estudo é aplicado no desenvolvimento dessa área. A intenção desse artigo é passar alguns conceitos básicos que encontrei nas minhas pesquisas e aquilo que considero boas práticas de desenvolvimento.

Continue Lendo »

Você só tem 7 segundos para conquistar seu visitante… Então otimize a sua Home page

Todos nós sabemos a importância de causar uma boa primeira impressão e que não existe uma segunda chance para isso.
A primeira impressão é um dos principais fatores de permanecia de um visitante no site, ela só perde para o fator “recomendação”, quando um amigo de confiança indica um site, o visitante tende a passar alguns segundos em alguma atividade especifica ainda que a primeira impressão não seja boa.

Levando em conta a primeira impressão do visitante como fator determinante para o tempo de permanecia, imediatamente entendemos a importância da Home Page para garantir um resultado positivo.

O que a sua “Página Inicial” diz sobre o site? Ela é suficientemente esclarecedora? Ela transmite a atmosfera que o visitante espera estar no momento que busca o seu produto ou serviço? Ela consegue despertar o interesse para que o visitante queira se aprofundar na visita? Carrega rápido o bastante? O tempo que o navegador necessita para renderizar as informações relevantes para o visitante é ideal?

Continue Lendo »

Logos e Logotipos – dicas de criação

Antes de mais nada, eu confesso que estou entrando num território muito perigoso, que eu não domino completamente e que não faz parte do meu campo de atuação. Não pensem que eu estou desmerecendo o trabalho de vocês especialistas em identidade visual, simplificando a criação do logotipo aos conceitos abaixo, muito pelo contrario, quero explicar o quanto esse processo é complexo e como a prática é importante. Minha intenção é apenas mostrar algumas coisas que eu aprendi ao longo do meu tempo de trabalho para aqueles que tiveram pouco ou nenhum contato com essa área.
Espero muito receber correções e outros pontos de vista de vcs profissionais da área.
Vamos lá! Continue Lendo »

Design baseado em Tipografia – Mais elementos de texto

Uma boa tipografia na web é algo que realmente me impressiona, porque é tão fácil escolher a fonte errada. Eu propriamente acho que nunca fui muito bem sucedida na realização de um projeto baseado em fontes.

Com milhões de combinações possíveis, nós designers acabamos desistindo antes mesmo de começar. No entanto, temos que agradecer a perseverança de alguns de nossos colegas, que por não desistirem acabaram criando as maravilhas que serão listadas no final desse artigo.

Apesar do meu gosto pela analise mais profunda da tipografia, esse artigo tratará apenas da tipografia como elemento fundamental do design: títulos, manchetes e áreas de destaque, etc. Pretendo publicar brevemente algum material sobre “legibilidade na web”.

Continue Lendo »

Como criar formulários – Dicas e truques de Usabilidade e layout

Desenvolver formulários para web pode ser divertido ou frustrante e exige uma grande dose de persistência e determinação.

O modo como você estiliza e formata seus formulários é crucial para torna-lo aparentemente útil pois na maioria das vezes é preciso convencer o visitante a preencher as informações. Para formulários pequenos, basta adapta-los ao site, mas quando se trata de formulários mais complexos onde uma grande quantidade de informações é exigida ter um estilo bem elaborado e fácil de usar se torna o principal motivo de sucesso ou fracasso.

Antes de tudo é preciso entender a importância e o significado de um formulário: eles 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. Mesmo quando não aparenta exatamente o tipo de formulário convencional, em algum lugar deve haver uma tag “input” escondida. A palavra “input” tem exatamente esse significado: passar, enviar informações.

Continue Lendo »

Portfolio – Técnicas, dicas e exemplos de criação (atualizado)

(atualizado com novos exemplos)
Projetar seu portfolio é provavelmente a coisa mais frustrante do mundo.

Todos os colegas com quem conversei falam da dificuldade de concluir e das dezenas de vezes que abandonam e recomeçam.

Esse meu site mesmo, que além de blog, serve como portfolio passou por umas 4 tentativas até terminar desse jeito, ele inclusive chegou a ser rosa e com florzinhas coloridas, mas todos as versões estavam mal acabadas do tipo “vamos deixar assim por enquanto”. E confesso que ainda não estou completamente satisfeita com a versão atual, tenho idéias novas pra ele todos os dias…

Continue Lendo »

Tipografia organização dos elementos

O motivo de voltar a escrever sobre assunto é porque não me senti satisfeita com a primeira parte, acho que faltou um pouco de teoria, então se este artigo estiver muito técnico para o seu gosto, sugiro que leia o primeiro artigo que trata mais da aplicação de fontes num projeto.

É muito interessante entender como as fontes são compostas e o que diferencia cada tipo, assim é possível compreender melhor porque uma certa fonte causa um resultado mais satisfatório do que outra, e conhecendo melhor os termos técnicos é mais fácil realizar pesquisas e se aprofundar no assunto.

Continue Lendo »

Ilustrações, vetores e desenhos

Eu tenho uma pequena relação de links guardados no netvibes separados por temas, quando um desses temas atinge uma certa quantidade de links eu publico um artigo novo. Dessa vez eu não pude esperar para escrever, não depois de ter relido um artigo no FatorW, “Como usar imagens free e não ser igual à concorrência”.

Nós que trabalhamos com criação já estamos cansados de ouvir a velha frase “uma imagem vale mais que mil palavras” e realmente não se pode negar essa afirmação. Cada vez mais a turma responsável pela criação vem apelando para bancos de imagem free para reduzir custos e oferecer um orçamento mais competitivo, mas, com isso, temos o risco de mais tarde encontrar aquela mesma imagem sendo usada pela concorrência ou até mesmo num contexto oposto aquilo que você desejava demonstrar, pois uma mesma imagem pode estar aberta a muitas interpretações, o que pode ser muito perigoso para a marca.

Continue Lendo »

Arabescos – Elementos ornamentais

Elementos ornamentais, também chamados de arabescos, vêm sendo usados desde a idade média por tipógrafos e ferreiros, decorando desde de bancos públicos a convites de casamento, e agora, como não poderia deixar de ser, websites.

São elementos belos e realmente podem enriquecer um trabalho quando usado sem exageros. Em alguns casos o projeto pode ser completamente baseado nessas estruturas de contornos florais, linhas onduladas e formas geométricas. Em outros o uso é mais sutil, apenas como elemento decorativo adicionando um toque de sofisticação à página.

Continue Lendo »