Botões, Campos de texto e Controles de seleção: saiba mais sobre esses 3 elementos fundamentais de uma interface

No artigo anterior falei sobre a profissão Design de interface e agora, neste guia quase-completo, vou falar sobre os 3 elementos fundamentais de uma interface.

Lembrando que existem elementos mais primordiais dos que falarei a seguir, como por exemplo, cor e tipografia. Mas entendendo-os como intrínsecos ao Design, vamos dar sequência ao artigo.

Por que é importante conhecer os elementos de uma interface

Primeiramente, você precisa conhecê-los para atingir o objetivo básico do Design de interface: desenhar uma solução familiar e de fácil uso para um usuário.

Talvez você tenha em mente que conhecer e utilizar os elementos a seguir podem engessar seu Design ou até mesmo bloquear espaços para inovação, mas muito pelo contrário, é trabalhando o “arroz com feijão” que é possível propor novas ferramentas que funcionem.

O caminho mais simples para se atingir uma interface realmente funcional e que converse com seu usuário é por meio do entendimento e utilização casual desses elementos, tais quais as propostas de suas existências. Não ficou claro? Então vamos conhecê-las para melhorar o entendimento.

1- Botões

Esse elemento, na minha opinião, é o elemento mais importante de uma interface.

Se você desenhou bem uma estratégia para a existência da sua interface, trabalhar bem os botões é uma tarefa imprescindível.

Os botões são responsáveis por incentivar o usuário a fazer alguma ação, seja ela conhecer mais sobre a própria interface ou fazer uma compra.

E repito, trabalhar bem os botões é fundamental para que os objetivos da interface, a nível de interação, seja cumpridos.

Como são esses botões?

Basicamente, existem 3 tipos de botões: de texto, outlined e container.

Observação: Não estranhe, no mundo do UI Design, existem muitos termos em inglês, e por muitas vezes vou misturar os idiomas por terem palavras que simplesmente não têm tradução do inglês.

Esses três tipos de botão expressam três níveis de ênfases em relação às ações de uma interface. Isto é, botões do tipo “texto”, expressam ações menos importantes do que botões outlined, que por sua vez manifestam ações menos importantes que os botões container.

E falo mais uma vez, uma interface desenhada a partir de estratégias bem definidas e objetivos claros tendem a ter maior sucesso, pois servem à uma finalidade maior além da estética.

Quando falamos sobre botões, precisamos ter em mente quais botões expressam as ações que desejamos que um usuário tome em nossa interface.

Como interagimos com eles

Existem o que falarei a seguir, o que eu chamo de 3 estados fundamentais dos botões.

Os estados dos elementos de uma UI servem para fornecer feedback visual ao usuário. Em outras palavras, servem para indicar que a ação teve alguma reação na interface.

Os 3 estados fundamentais são: normal, hover e active.

O primeiro indica o estado do botão enquanto existência, sem nenhuma interação do usuário. O hover é o famoso “passar com o cursor por cima”, e nesse tipo de interação, também é importante dar um feedback visual ao usuário. E por fim, o estado active, que denota o clique no botão.

2- Campos de texto

Também conhecido como text field, os campos de texto são elementos primordiais de um formulário, onde está concentrado o maior esforço estratégico de qualquer interface (na minha visão).

Ao incentivar um usuário a preencher um formulário, estamos coletando informações que serão úteis para o negócio, principalmente quando pensamos no Design alinhado ao Marketing.

E um dos elementos que trabalham em prol do sucesso dos formulários são os campos de texto, que precisam ser desenhados com cuidado e seguindo algumas diretrizes.

Como é um campo de texto?

Na anatomia geral de um campo de texto, temos: container, placeholder e label.

Um campo de texto pode ser desenhado de diversas maneiras, sendo duas principais: container e outlined.

O que define o uso de um tipo de campo de texto, na minha opinião, é a mensagem que a marca, que financia aquela interface, quer passar.

Assim como os botões, também existem estados que indicam ao usuário que há uma reação da interface em relação à alguma ação dele. Os principais são: normal, hover e typing.

Como você já deve ter entendido, o normal e hover têm o mesmo objetivo do botão, já o typing é o estado fundamental de um campo de texto.

É preciso ter muito cuidado ao manifestar essa interação do usuário com a interface, pois o feedback visual precisa corresponder exatamente à ênfase daquela ação.

Em campos de texto que possuem placeholder, aumentar a opacidade e tamanho do texto enquanto “typing”, ajudam a indicar a interação.

E tome muito cuidado nas cores ao trabalhar com campos de texto para não causar confusão com os botões.

3- Controles de seleção

O último elemento, mas também muito importante para uma interface do usuário, são os controles de seleção. Existem diversos, mas vou falar especificamente de três. A lógica deles é simples de entender, e quando utilizar é mais simples ainda.

1- Radio button

Este elemento pode ser utilizado em formulários e são utilizados quando precisamos coletar apenas uma informação do usuário dentro de uma lista.

Se, por exemplo, queremos saber o estado civil, podemos facilmente utilizar o radio button. Ninguém é “casado” e “solteiro” ao mesmo tempo.

Em outras palavras, ele deve ser utilizado em momentos onde não existam múltiplas respostas.

2- Checkbox

O checkbox é utilizado para coletar múltiplas respostas.

Caso queira saber quais são os animais de estimação que o seu usuário possui em casa, por exemplo, o checkbox é o controle de seleção mais indicado, pois conseguimos múltiplas respostas para esta pergunta.

3- Toggle

Este controle também é conhecido como interruptor eletrônico.

O toggle ganhou este nome por ser um controlador que indica o estado “on” e “off” dos campos de uma interface.

Utilize-o quando quiser ofertar duas opções em um único item, como por exemplo “ligar e desligar o modo avião” no celular.

Conclusão

Ufa, finalizamos!

Curti muito escrever este artigo, acima de tudo porque esse assunto está comigo por mais de 10 horas diárias e sempre tô comentando com outras pessoas sobre ele.

Se você gostou da forma como este assunto foi abordado, não esqueça de interagir com este post, e caso queira saber mais sobre o tema, me siga no Instagram, onde frequentemente compartilho dicas com a galera.

Até mais.

O post Botões, Campos de texto e Controles de seleção: saiba mais sobre esses 3 elementos fundamentais de uma interface apareceu primeiro em Designerd.

Botões, Campos de texto e Controles de seleção: saiba mais sobre esses 3 elementos fundamentais de uma interface publicado primeiro em: https://www.designerd.com.br/