Componentes Principais UI
Independentemente de quão único seja o design de um produto digital, existem certos componentes de interface do usuário que você provavelmente encontrará. Esses componentes são familiares aos usuários e os ajudam a se orientar em um site ou aplicativo, melhorando a UX geral do produto.
Como a grande maioria dos frameworks são escritos em inglês, é comum identificarmos os componentes com uma nomenclatura “universal”. Os mais comuns que você encontrará incluem buttons, inputs, forms, cards, modals, menus, headers, e footers. Quando você entende como esses componentes de interface do usuário funcionam e como incorporá-los em seus designs, você aumenta a experiência positiva que seus usuários têm.
1. Buttons (Botões)
As origens dos botões da interface do usuário remontam aos botões físicos que apareceram pela primeira vez em eletrônicos e outros gadgets.
Nos produtos digitais, os botões são um dos principais blocos de construção interativos. Eles permitem que os usuários executem ações com um único clique ou toque. A função de um botão é incentivar os usuários a agir.
Os rótulos dos botões são tão importantes quanto seu design. Use verbos de ação para informar aos usuários o que o botão faz para que eles possam agir sem ler o texto de apoio. Use a forma imperativa em voz ativa para rótulos para minimizar o número de palavras e facilitar a leitura do rótulo.
2. Checkbox (Caixa de Seleção)
Caixas de seleção também são comumente encontradas em formulários. Eles permitem que várias opções sejam selecionadas simultaneamente e permitem que os usuários ativem ou desativem uma opção. Quando ativados, eles exibem uma marca de seleção. Quando desativados, eles estão vazios.
As caixas de seleção têm um rótulo ao lado delas e podem ser usadas sozinhas (como uma caixa de seleção que concede permissão para serem adicionadas a uma lista de e-mail) ou empilhadas umas sobre as outras.
3. Radio Button (Seleção Circular)
Enquanto as caixas de seleção permitem que várias opções sejam selecionadas, os botões de opção permitem apenas uma. Eles são usados em grupos, onde as opções disponíveis são mutuamente exclusivas (como “sim” ou “não”).
Os botões de opção estão vazios quando não estão selecionados e preenchidos com um ponto quando estão.
Geralmente são exibidos inicialmente sem nenhuma opção selecionada. Depois que uma opção é selecionada, eles não podem retornar a esse estado interagindo apenas com os botões (os usuários só podem alternar sua seleção entre os botões).
Se o estado desmarcado for importante, você precisará fornecer aos usuários uma maneira alternativa de retornar a esse estado.
Botões de rádio são nomeados após os botões encontrados em rádios antigos.
4. Toggle Switch (Interruptor)
Os interruptores de alternância são vistos com mais frequência em telas de configurações em aplicativos. Um switch permite que os usuários alternem entre duas opções mutuamente exclusivas, tipicamente estados “on” e “off” para um elemento.
De um modo geral, eles devem ser usados apenas para coisas em que o feedback é imediato, como ativar o modo escuro ou o modo avião. Ocasionalmente, um switch pode ser usado em um formulário ou menu, mas isso é menos comum.
Certifique-se de que os estados “ligado” e “desligado” para suas chaves de alternância sejam imediatamente aparentes.
5. Text Input (Campo de Texto)
As entradas de texto são o tipo de entrada de formulário mais comum. Eles podem assumir muitas formas e formatos, dependendo da situação e do tipo de dados que estão sendo inseridos. Você pode usar a entrada de texto para coisas como nomes, endereços de e-mail, números de telefone ou texto de formato mais longo (como comentários).
A criação de entradas de texto que reconheçam determinados tipos de dados, como números de telefone ou endereços de e-mail, para que os dados sejam formatados corretamente (e o teclado mude em dispositivos móveis) pode melhorar a experiência do usuário.
6. Menu
Os menus são elementos temporários que se abrem após interações específicas, como tocar em uma lista suspensa ou clicar com o botão direito. Eles exibem uma lista de opções contextuais com base na interação que os aciona. A vantagem de usar menus é que você pode adicionar muitas opções de ação adicionais a uma interface sem ocupar espaço na tela quando elas não forem relevantes.
7. Form (Formulário)
Os formulários são indiscutivelmente um dos componentes de interface do usuário mais importantes que você encontrará. Um formulário eficaz pode aumentar as conversões, enquanto um formulário mal projetado pode afastar os usuários.
Os formulários incluem vários controles de entrada, permitindo entrada estruturada ou complexa por meio de caixas de seleção, botões de opção, entradas de texto e outros tipos de campos de entrada. Formulários bem desenhados coletam o mínimo de informação necessário para completar a ação do usuário.
8. Modal
Os modais podem ser usados para o “bem” ou para o “mal”. Um modal bem projetado usado com responsabilidade pode melhorar a experiência do usuário e tornar sua interface menos confusa. Quando usado mal (como para um pop-up de publicidade que interrompe a experiência do usuário), eles são apenas irritantes.
Os modais devem ser usados com moderação, seja em resposta a uma ação que o usuário realizou ou para avisá-lo sobre algo importante. Sempre que um modal é acionado indiretamente, ele interrompe o fluxo de tudo o que o usuário estava fazendo. Use-os apenas quando o benefício superar essa interrupção.
9. Card
Os cartões na interface do usuário se assemelham a cartões comerciais na vida real — eles são retangulares e geralmente incluem uma imagem e algum texto. Eles também podem conter elementos interativos para atuar no conteúdo do cartão, como um botão “Saiba mais”.
Os layouts baseados em cartão são úteis para interfaces com muitos conjuntos semelhantes de informações, como uma página que lista membros ou funcionários ou um site como o Pinterest.
10. Table (tabela)
Certa vez (antes de CSS se tornar o padrão para layouts), tabelas eram usadas em interfaces para criar páginas inteiras de sites. Felizmente, devolvemos as tabelas ao uso adequado: organizar os dados de uma maneira que facilite a leitura e a compreensão.
As tabelas (também chamadas de data tables) são comumente vistas para itens como classificação de equipes esportivas, horários de voos de companhias aéreas, listas de inventário e conjuntos de dados semelhantes em que várias informações estão relacionadas. As tabelas podem fornecer mais funcionalidades aos usuários, permitindo que classifiquem, editem, pesquisem ou filtrem os dados que contêm.
— — -
Texto traduzido e adaptado de: Uxcel
