Os botões estão entre os elementos interativos mais populares de uma interface do usuário. Além disso, eles são vitais na criação de interações sólidas e experiência positiva do usuário. Hoje, continuando o conjunto de postagens do glossário da interface do usuário / UX, reunimos aqui as definições e exemplos dos tipos de botões amplamente usados ​​que vemos diariamente em sites e aplicativos para dispositivos móveis.

O que é um botão?

Um botão é um elemento interativo que permite obter o feedback interativo esperado do sistema após um comando específico. Basicamente, um botão é um controle que permite ao usuário se comunicar diretamente com o produto digital e enviar os comandos necessários para atingir um objetivo específico. Por exemplo, pode ser a tarefa de enviar um email, comprar um produto, fazer o download de alguns dados ou parte de um conteúdo, ligar o player e várias outras ações possíveis. Uma das razões pelas quais os botões são tão populares e fáceis de usar é que eles imitam com eficiência a interação com os objetos no mundo físico.

Os botões modernos da interface do usuário são realmente diversos e podem servir a muitos propósitos. Botões típicos e usados ​​com freqüência que apresentam uma zona interativa, geralmente claramente marcados para visibilidade e com uma forma geométrica específica e frequentemente suportados com a cópia, explicando que ação será realizada por esse botão. Os designers precisam aplicar tempo e esforço consideráveis ​​para criar botões efetivos e visíveis que são naturalmente integrados ao conceito estilístico geral, mas que contrastam o suficiente para se destacar no layout.

Vamos verificar os tipos de botões amplamente utilizados em interfaces móveis e da web.

Botão CTA

Um botão de apelo à ação (CTA) é um elemento interativo de uma interface do usuário que visa incentivar um usuário a executar uma determinada ação. Essa ação apresenta uma conversão para uma página ou tela específica (por exemplo, compra, contato, assinatura etc.), ou seja, transforma um usuário passivo em ativo. Portanto, tecnicamente, pode ser qualquer tipo de botão suportado por um texto de chamada à ação. O que o diferencia de todos os outros botões da página ou tela é sua natureza atraente: ela precisa chamar a atenção e estimular os usuários a executar a ação necessária.

Aqui está a página inicial de um site de comércio eletrônico que vende livros para crianças . No slide em destaque, há uma ação principal definida como objetivo para a página: fazer com que um usuário se inscreva no compartilhamento da lista de discussão. Portanto, o botão foi projetado como um dos elementos mais visíveis do layout, para que o usuário possa ver instantaneamente como executar a ação assim que estiver disposto a fazê-lo.

Botão de texto

Aqui a terminologia é transparente: é um botão apresentado com um pedaço de texto. Isso significa que a cópia não está integrada a nenhuma forma, guia preenchida ou algo assim. Portanto, não parece um botão no nosso entendimento padrão desse fenômeno no mundo físico. A cópia é seu único apresentador visual. Ainda assim, é um controle ao vivo que permite aos usuários interagir com uma interface. Você também pode ver esses botões marcados com cores ou sublinhados. Além disso, usados ​​no cabeçalho do site , os botões de texto conectam um usuário às seções principais de conteúdo do site – e, nesse caso, eles não são marcados de qualquer maneira, pois todos (ou a maioria) dos elementos na zona do cabeçalho são interativos por padrão. Os botões de texto são geralmente usados ​​para criar zonas interativas secundárias sem se distrair dos controles principais ou dos elementos da CTA.

Aqui está um design elegante de site para uma loja de moda . Como você pode ver, a parte interativa do layout é baseada em botões de texto. Somente o elemento principal do CTA é apresentado como um botão facilmente decodificado. Todos os outros apresentam apenas cópia no cabeçalho e nas guias de ofertas. Essa abordagem suporta o estilo geral e minimalista da página da web.

Botão suspenso

Quando você clica nele, o botão suspenso exibe uma lista suspensa de itens mutuamente exclusivos. Você pode encontrar esse tipo no botão de configurações. Quando um usuário escolhe uma das opções da lista, geralmente é marcado como ativo, por exemplo, por cor.

O fluxo de interação do aplicativo HealthCare mostra os botões que abrem as listas de detalhes que um médico pode adicionar a uma conta específica: quando o botão é clicado, ele abre a lista suspensa de opções. Assim que você escolhe um, o botão grande desaparece, deixando a opção escolhida e o botão pequeno mais, caso você queira verificar a lista mais uma vez.

Botão hambúrguer

É o botão que oculta o menu. Quando você clica ou toca nele, o menu se expande. Esse tipo de menu (e também o botão) ganhou esse nome devido à sua forma composta por três linhas horizontais que parecem um típico hambúrguer de pão com carne e pão. Hoje, é um elemento interativo amplamente usado de layouts para web e dispositivos móveis; ainda assim, os debates sobre seus prós e contras ainda são quentes.

Os internautas ativos que visitam diversos sites regularmente sabem por padrão que esse botão oculta as várias categorias de conteúdo do site, portanto esse truque não precisa de explicações e avisos adicionais. O que é bom, os menus de hambúrguer liberam espaço, tornando a interface mais minimalista e arejada; do ponto de funcionalidade, economiza muito espaço para outros elementos importantes do layout. Benefícios adicionais podem ser mencionados para o design responsivo e adaptável, ocultando elementos de navegação e fazendo a interface parecer harmônica em diferentes dispositivos.

Os argumentos contra o menu de hambúrgueres são baseados no fato de que esse elemento de design pode ser confuso para pessoas que não usam sites regularmente e podem se enganar com o sinal que apresenta um alto nível de abstração. Pode ter uma influência negativa na navegação e pode se tornar o motivo de uma experiência ruim do usuário. Portanto, a decisão sobre a aplicação do botão hambúrguer deve ser tomada após a pesquisa do usuário e a definição das habilidades e necessidades do público-alvo.

Embora os menus de hambúrguer ainda pertençam a questões controversas do design moderno de aplicativos e web, eles são usados ​​com frequência.

Aqui está o exemplo de um site usando a funcionalidade de um menu de hambúrguer. Permite ocultar o extenso menu de opções para concentrar a atenção do usuário em visuais impressionantes e informações essenciais.

Botão de adição

Ao clicar ou tocar no botão mais, o usuário pode adicionar um novo conteúdo ao sistema. Dependendo do tipo de um aplicativo , ele pode ser uma nova postagem, contato, local, nota, item da lista – qualquer coisa que seja uma ação básica para o produto digital. Às vezes, tocando nesse botão, os usuários são transferidos diretamente para a janela modal de criação de conteúdo; em outros casos, também há um estágio médio em que são oferecidas opções adicionais para você escolher e tornar a adição de conteúdo mais focada.

Botão gastável

Este botão abre uma variedade de opções após ser clicado ou tocado. É mais uma maneira de definir o fluxo adequado de interações sem sobrecarregar a tela, o que é particularmente importante para interfaces móveis limitadas no espaço da tela.

Aqui está o aplicativo Travel Planner : o elemento interativo central da barra de guias é um botão de adição que permite ao usuário adicionar uma nova viagem ou um novo item à viagem específica. Para simplificar a experiência, o botão é expandido para um conjunto de botões, marcando tipos definidos de conteúdo, para que o usuário possa fazer a escolha no início e acessar a tela necessária.

Botão Compartilhar

Com a alta popularidade das redes sociais, conversando e enviando e-mails, esses botões simplificam o processo de conexão de um conteúdo de aplicativo ou site aos perfis sociais do usuário. O botão desse tipo permite compartilhar o conteúdo ou conquista diretamente nas contas das redes sociais. Para tornar a conexão clara, ela é apresentada com ícones que apresentam um sinal de marca de redes sociais específicas e são facilmente reconhecíveis. Agora, muitas vezes, se o compartilhamento não é a principal ação esperada do usuário na página, eles não são marcados de qualquer maneira como botões (sem formas adicionais, marcação de cores, sublinhado etc.) – você apenas vê os ícones, mas eles são interativo. Essa abordagem apóia o minimalismo e o uso efetivo do espaço negativo. Ele também permite que os usuários se concentrem na funcionalidade principal, mas sempre veem os sinais de acesso rápido aos seus perfis sociais.

Aqui está o site corporativo elegante e minimalista de uma empresa de construção . No canto inferior esquerdo da página inicial, você pode ver os ícones das contas sociais corporativas. Eles são facilmente perceptíveis, mas bem equilibrados, para não distrair a navegação principal e o botão CTA.

Botão fantasma

O botão fantasma é um botão transparente que parece vazio. É por isso que também é chamado de “vazio”, “vazio” ou mesmo “nu”. Seu reconhecimento visual como botão geralmente é fornecido com uma forma delimitada por uma linha bastante fina ao redor da cópia do botão. Esse tipo de botão ajuda a definir a hierarquia visual no caso de vários elementos do CTA: o CTA principal é apresentado em um botão preenchido enquanto o secundário (ainda ativo) é fornecido em um botão fantasma.

Aqui está a tela de inscrição para um aplicativo de restaurante . Possui botões de três tipos diferentes: o CTA principal é apresentado com o botão preenchido que oferece a maneira mais popular e fácil de se inscrever rapidamente; o botão fantasma oferece acesso à opção menos popular; o botão de texto é integrado à próxima linha como resposta a uma pergunta e marcado com cores. Essa abordagem ajuda a criar uma hierarquia visual sólida dos botões na tela.

Botão de ação flutuante (FAB)

No Design de materiais , o botão de ação flutuante (FAB em resumo) é o botão que apresenta a ação principal na tela do aplicativo. Normalmente, é um botão de ícone redondo elevado acima de outro conteúdo da página. Esse botão geralmente fornece acesso instantâneo a ações essenciais ou populares que os usuários fazem com o aplicativo. Dependendo do design e da arquitetura de informações do aplicativo móvel, o FAB pode:

• execute uma ação principal típica (abra a tela de novo email, abra a tela de adição de conteúdo de foto ou vídeo, pesquise o conteúdo necessário na galeria etc.)
• mostrar ações adicionais
• transformar em outros elementos da interface do usuário.

A posição da FAB na tela geralmente é determinada pelo fator de alta visibilidade e pode variar de acordo com o conceito geral de design das telas do aplicativo. A regra geral é usar apenas um FAB por tela, e não mais, para evitar perda de concentração.

Aqui está um fluxo de interações para o diário de viajantes que aplicam a barra de aplicativos inferior, a sobreposição da FAB e a lista de imagens tecidas.

Fatores eficazes de design para botões

Tamanho

O tamanho é uma das principais maneiras de informar os usuários sobre a importância de um elemento de layout e criar a hierarquia de componentes. Um botão de call to action atraente e eficiente precisa ser grande o suficiente para ser encontrado rapidamente, mas não grande demais para que a estrutura do layout não seja estragada. Os líderes de mercado geralmente fornecem recomendações sobre o tamanho adequado dos botões em suas diretrizes. Por exemplo, a Apple diz que os CTAs na interface do usuário para dispositivos móveis devem ter pelo menos 44 a 44 pixels, enquanto a Microsoft recomenda 34 a 26 pixels. Se você projeta para dispositivos móveis, os requisitos para diferentes tipos de botões podem ser bastante rigorosos; portanto, estude as diretrizes cuidadosamente para minimizar os riscos de rejeição de aplicativos devido ao mau design da interface do usuário.

Cor

Para tornar alguns botões facilmente perceptíveis e outros secundários, é vital escolher uma cor adequada . O fato é que o humor e o comportamento humanos se relacionam muito com o ambiente visual, e a cor é uma das ferramentas mais poderosas nesse aspecto. É importante ter em mente ao escolher cores para o CTA: os botões e as cores de fundo precisam contrastar bem para fazer com que o botão se destaque rapidamente dos outros componentes da interface do usuário.

Forma

Quanto aos botões de CTA, eles geralmente se parecem com retângulos horizontais. O motivo é que você deseja deixar claro que esse botão é clicável e interativo, e as pessoas estão acostumadas a perceber essa forma como um botão. Além disso, é recomendável projetar CTAs com cantos arredondados, porque eles são pensados ​​quando apontam para dentro do botão, chamando a atenção para a cópia. Certamente, essa decisão é tomada caso a forma combine harmonicamente com o conceito estilístico geral escolhido para uma página da Web ou tela de aplicativo móvel.

Canal

O posicionamento dos botões é crucial para construir uma hierarquia visual sólida e uma navegação clara . Se eles estiverem localizados nas áreas em que os olhos dos usuários não os conseguem captar, outros aspectos visuais, como cor e tamanho, podem não funcionar com eficiência. Os designers precisam aprender as áreas mais digitalizáveis e colocar os botões da funcionalidade principal no caminho do usuário.

Copy of

A poderosa microcópia de botão geralmente é curta, mas consistente, para atrair a atenção dos usuários rapidamente. É frequentemente realizada em letras maiúsculas para tornar a cópia ainda mais atraente no layout. Ainda assim, isso não é necessário, a decisão é tomada de acordo com o conceito geral de design, tipografia e humor da mensagem de texto.

Aqui está o design da página de destino para um jardim de infância. Vamos revisar todos os botões usados ​​na página:

• o botão principal do CTA que convida os visitantes a participar é instantaneamente visível: o designer usou um botão retangular arredondado e cheio da cor que contrasta com o fundo, mas define a conexão visual com a imagem animada do herói, o elemento visual mais importante da página. O texto do CTA é fornecido em fonte legível simples, com todas as letras maiúsculas
• o cabeçalho possui 4 botões de texto que conectam os usuários às seções importantes de conteúdo do site.
• a parte esquerda do cabeçalho apresenta o botão secundário do CTA que é rapidamente verificado e permite que usuários já registrados entrem em suas contas.
• os botões de compartilhamento são colocados em formas redondas, mas não recebem muito contraste de cores, para serem facilmente encontrados, mas não para distrair os usuários do CTA principal.

Obviamente, existem mais tipos de botões para discutir e verificar exemplos de design de interface do usuário. Portanto, continuaremos em nossos próximos posts, não perca as atualizações.