Este artigo foi escrito pelo designer do Wix Domas Markevicus”Design de botão perfeitoEsta é uma tradução de “.
o Google botão o design Al Qaeda : identificável, localizável, óbvio
Claro1 botão fazer
O botão deve indicar claramente o que faz, sem margem para interpretações. A função do texto é dizer exatamente o que acontecerá quando você clicar nesse botão.
Imagem à esquerda: O texto informa o que acontecerá quando o botão for clicado.
Imagem à direita: Você não saberá para que serve este botão até pressioná-lo.
Às vezes, há tantas mensagens para caber no botão que o texto e o ícone precisam ter significados diferentes.
Na imagem, “Mais ações” diz que você pode encontrar mais ações aqui, mas o ícone informa que clicar na seta expandirá a lista em uma lista suspensa.
Emitir estudar
O CTA principal do Wix era apenas texto. O CTA secundário foi reconhecido apenas como um botão sem texto. Após a atualização, alteramos apenas os botões de símbolo para botões de texto ou botões de texto + símbolo.
Antes da alteração, o botão “Criar nova pasta” exibia apenas um ícone.
Adicionei texto ao botão com apenas um ícone. Essa pequena alteração aumentou significativamente a taxa de cliques em “Criar nova pasta”.
pode ser encontrado1 botão fazer
As ações devem ser colocadas onde você acha que os usuários podem encontrá-las. A ação principal deve estar sempre no topo e em um lugar de destaque. As ações de navegação devem ser neutras, mas visíveis. Ações menos importantes (como “Excluir”) podem estar ocultas em pop-ups.
Imagem à esquerda: O texto no botão o destaca.
Imagem à direita: Há muito espaço, mas há apenas um ícone, portanto, o objetivo do botão não é claro.
As ações do widget não devem estar no mesmo nível dos botões de navegação. Os usuários não procuram botões fora de contexto. Na imagem abaixo, é um Gerenciador de Categoria. “Mais ações” diz que este menu fornecerá ações, mas não informa que existem botões de navegação.
Conheça ela1 botão fazer
Os usuários devem ser capazes de entender facilmente quais partes da interface são textuais e quais partes são clicáveis.
Imagem à esquerda: “Mais informações” mostra que é um botão em termos de cor e posição.
Imagem à direita: não sei dizer se “Mais informações” é um botão porque está misturado com o texto.
Para ser reconhecido e apresentado como um botão: Use texto, contraste e forma.
O preto é bom quando há uma cor de fundo. O sublinhado indica que é clicável.
Mensagem
O texto no botão indica sua finalidade. Seja claro, previsível e fácil de escrever. É bom usar verbos para exigir ação. O verbo diz o que fazer depois de clicar neste botão.
Estudo de caso
Do teste A/B realizado pela equipe do Wix Photo Studio Mostre que os usuários ficam mais engajados quando o botão é exibido com texto. Testei três versões: somente ícone, texto sob o ícone e texto ao lado do ícone. A versão em texto vence.
Imagem à esquerda: Funcionou bem, mas simplesmente não coube no layout, então tentei um novo.
Imagem à direita: mudei para a versão abreviada mostrada acima da dobra e o uso de guias foi bastante reduzido.
Ele falha no teste e volta ao normal. Corrigido o problema original e aumentado ligeiramente o uso da guia.
em letras Atitude reflete
O texto do botão deve refletir o contexto. Deixe o usuário saber em qual ação está. Por exemplo, um formulário de alerta aparece rapidamente e muda o layout. Portanto, deve ficar claro o que está acontecendo.
A imagem abaixo não mostra o que acontece quando você clica nela. Compreender a situação exige que o usuário se lembre de ações anteriores.
A imagem abaixo mostra claramente o que cada um dos dois botões faz. Combina bem com o título.
ícone
Os ícones ajudam os usuários a entender o contexto, mas estão sujeitos a interpretações errôneas. Nem é tão urgente trabalhar tanto quanto enviar mensagens. Portanto, use o botão de símbolo apenas com cuidado.
Os botões de ícone são adequados para software profissional que os usuários usam e salvam regularmente. O texto ao lado do ícone o destaca ainda mais.
Editar atrai a atenção dos usuários. Quando você passa o mouse, um rótulo aparece informando o que esse botão faz.
Estudo de caso
O texto e os ícones à direita geraram mais interação do que a imagem à esquerda. Na imagem à direita, o usuário entende qual botão sai da página e qual permite visualizar mais opções.
seqüência
Algumas ações são usadas o tempo todo, enquanto outras são usadas apenas ocasionalmente. Todos os botões devem ser notados, mas nem todos precisam receber a mesma atenção. Existem várias maneiras de criar uma boa hierarquia.
classificação
A ação mais importante deve estar no lugar mais proeminente. No Wix, está no topo da página no canto direito.
Em idiomas da esquerda para a direita, os usuários leem da esquerda. Por esta razão, o call to action principal está à direita. Os usuários decidem suas ações quando conhecem todas as opções. De acordo com o psicólogo Hermann Ebbinghaus, lembramos melhor do primeiro e do último elemento de uma sequência. Esta tendência Efeito de posição serial é chamado.
As ações mais importantes, Salvar e Cancelar, são sempre colocadas de forma destacada no canto superior direito.
apertar
Os botões usam tecnologias de reconhecimento para serem reconhecidos como botões. No entanto, você não precisa marcar todos os botões no mesmo nível. Há apenas uma ação principal por página. Outros são classificados como procedimentos secundários e terciários.
padronizar
Cada botão deve ser projetado conforme pretendido. A soma dos padrões é a linguagem do design. Dê a cada botão seu próprio estilo, como Geral, Navegação, Compartilhamento Social e Carregamento. Cada marca tem seu próprio estilo de botão.
Tamanho
Coloque botões grandes em layouts grandes e espaçosos e botões pequenos em espaços pequenos e lotados.
resumo
Hierarquias de botões: primário, secundário, menos importante
– Essencial: a maior variância, necessária para os objetivos principais
– Secundário: Reconhecível na tela e auxilia na realização dos objetivos principais.
– Menos importante: escondido no botão ícone, não muito relacionado ao objetivo principal.
Vamos verificar os botões primários, secundários e terciários na tela.
Laboratório de redação UX ele almoçoDepois de editar o artigo publicado, Mobi Inside o submete novamente.
“Leitor implacável. Especialista em mídia social. Amante de cerveja. Fanático por comida. Defensor de zumbis. Aficionado por bacon. Praticante da web.”