Caixas de seleção ou botões de opção? Deixe a batalha do design da interface do usuário começar!

Caixa de seleção vs botão de opção – revisitando o debate final sobre o design. Seu guia para projetar sempre com o widget certo. Saiba mais aqui!

Todo designer de interface do usuário estará familiarizado com caixas de seleção e botões de opção. Esses widgets ajudam o usuário a progredir em muitas tarefas on-line e geralmente podem ser encontrados no mesmo site ou aplicativo.

Mas, embora agora sejam comuns, caixas de seleção e botões de opção ainda são usados ​​de maneira incorreta e intercambiável nas interfaces da Web e móveis. O uso inadequado desses widgets causa confusão, aumenta a carga cognitiva e afeta a experiência geral do usuário – como você verá em nossa postagem.

Portanto, aproveite ao máximo as caixas de seleção e os botões de opção neste artigo. Aprenda a reconhecer, entender e criar uma estrutura de ambos com o Justinmind e comece a melhorar a usabilidade e a conveniência de seus projetos.

Caixa de seleção x botão de opção – qual é a diferença?

A caixa de seleção

No design da interface da Rádio online do Brasil, a caixa de seleção é apresentada como uma pequena caixa quadrada na tela. Possui dois estados: marcado e desmarcado. Quando marcado, o quadrado será preenchido com uma marca de seleção.

As caixas de seleção são usadas para apresentar ao usuário uma variedade de opções, nas quais o usuário pode selecionar qualquer número de opções para concluir sua tarefa. Dentro de um grupo de caixas de seleção, cada uma delas opera individualmente, para que o usuário possa marcar ou desmarcar as opções independentemente.

checkbox-v-radio-buttons-checkbox

O botão de opção

O botão de opção é apresentado como um pequeno círculo na tela. Ele também possui dois estados e, quando selecionado, o círculo é preenchido com um ponto sólido.

Ao contrário dos grupos de caixas de seleção, os grupos de botões de opção se comportam como um único controle e limitam a escolha do usuário a apenas uma opção do intervalo fornecido.

caixa de seleção-v-radio-buttons-radio-button

Caixa de seleção vs botão de opção. Tudo o que você precisa, protótipo com Justinmind

Quando usar caixas de seleção e botões de opção no design da interface do usuário

Como Michael Meadhra menciona aqui, as pessoas freqüentemente confundem caixas de seleção e botões de opção no design da interface do usuário. No entanto, cada um tem seu próprio trabalho distinto.

As caixas de seleção são usadas em formulários e bancos de dados para indicar uma resposta a uma pergunta, aplicar um lote de configurações ou permitir que o usuário faça uma seleção múltipla a partir de uma lista. Como alternativa, uma única caixa de seleção pode ser usada para fazer seleções únicas – como instruções Booleanas True ou False (por exemplo, “Deseja se juntar à nossa lista de discussão? Sim ou não”).

Por sua vez, os botões de opção são usados ​​para definir uma configuração específica, alternar entre opções ou ativar ou desativar algo. Eles geralmente podem ser encontrados em pesquisas em que o usuário precisa digitalizar uma lista e fazer uma única seleção.

A seguir, veremos alguns casos de uso específicos.

3 exemplos de design de caixa de seleção

As caixas de seleção geralmente são usadas para capturar as preferências do usuário, pois você pode marcar quantas caixas desejar.

# 1 Fazendo uma reserva

Ao reservar um hotel, as caixas de seleção permitem que o usuário selecione opções de uma ampla variedade de comodidades do hotel. O Booking.com usa uma série de grupos de caixas de seleção para ajudar o usuário a filtrar os critérios de pesquisa e encontrar a acomodação ideal com mais eficiência. De fato, o artigo de Renee Lin mostra que os usuários da Booking.com costumam usar os filtros da caixa de seleção ao fazer uma reserva.

Aceitar ou recusar uma oferta (a caixa de seleção de seleção única)

Além disso, há a caixa de seleção única. Você os encontrará na parte inferior de qualquer formulário on-line que você preencher, solicitando que aceite ou recuse uma oferta. Por exemplo, as caixas de seleção “Assinale para receber nossa newsletter” e “Assinale para confirmar que você leu e concorda com os termos e condições”. Confira o exemplo da Levi abaixo:

checkbox-v-radio-buttons-levis

Interessado em design de formulário? Dê uma olhada em nosso cadastro e assine formulários aqui.

3 exemplos de design de botão de opção

Como regra geral, botões de opção devem ser usados ​​para permitir que o usuário selecione uma opção em um conjunto. É isso que os torna o candidato ideal para fazer uma seleção de opções mutuamente exclusivas.

# 1 O processo de checkout

Você costuma ver botões de opção no processo de checkout ao fazer uma compra on-line. Por exemplo, na Amazon. Ao acessar a tela de pagamento, você será solicitado a escolher uma opção de pagamento:

checkbox-v-radio-buttons-amazon-1

Observe que você só pode escolher uma opção. Céu de botão de rádio.

E depois para as opções de entrega. A Amazon oferece as seguintes opções: remessa padrão, expedida e prioritária:

checkbox-v-radio-buttons-amazon-2

# 2 Personalizando sua área de trabalho

Os botões de opção podem reduzir o trabalho pesado da personalização do perfil ou da área de trabalho. Organizar todas as opções disponíveis em uma ordem lógica e fazer com que o usuário escolha uma exige muito do trabalho de adivinhação da personalização da interface do usuário.

Este é um exemplo de como os botões de opção são usados ​​no Android Oreo:

checkbox-v-radio-buttons-android-2

# 3 Pedir comida (estritamente para opções mutuamente exclusivas)

Nos aplicativos de entrega de comida, os botões de opção fazem exatamente o oposto das caixas de seleção. Embora as caixas de seleção ajudem a personalizar a experiência do usuário, os botões de opção restringem as opções do usuário para garantir que cada pedido seja realizado com êxito.

Se você já encomendou pizza no Uber Eats, é necessário escolher um tamanho: pequeno, médio, grande ou extra grande? Crosta grossa ou fina?

Aqui, uma única seleção é absolutamente necessária e os botões de opção garantem que seu pedido seja concluído e coerente antes do checkout e que a acessibilidade não seja danificada.

Quando não usar caixas de seleção

Quando não projetadas para o usuário, as caixas de seleção apresentam alguns possíveis desafios de design.

Para iniciantes, eles implicam uma resposta padrão. Embora isso possa não parecer particularmente perturbador, se a opção pré-selecionada for a favor da marca e não do usuário, elas podem ser um pouco irritantes. Inscreva-se na lista de discussão sem nem perceber ou ter seus dados enviados a terceiros. Ter que desmarcar essas opções e depois perceber que você perdeu esta etapa é igualmente frustrante.

Solução: se você deseja oferecer uma seleção padrão, escolha a opção mais segura ou conveniente.

Além disso, não use caixas de seleção se você exigir que o usuário faça uma escolha ativa. Como destaca a equipe do Salesforce, nem sempre é claro se um usuário deixou uma caixa de seleção intencionalmente ou não em branco nos formulários.

Solução: para evitar comprometer a integridade de seus dados, opte por botões de opção ou mensagens de erro quando o usuário precisar se envolver com uma seção.

Quando não usar botões de opção

Nunca divida uma lista de botões de opção em subcategorias. Como Jakob Nielsen aconselha, uma lista de botões de opção sempre deve aparecer unificada para que o usuário saiba que todas as opções fazem parte do mesmo conjunto.

Outra coisa a ter em mente é que os botões de opção nunca devem ser acionados diretamente. Depois que o usuário faz sua seleção, um botão deve ser fornecido para permitir que você aplique / confirme / salve sua seleção.

Solução: para cada seleção de botão de opção, mantenha as opções da lista agrupadas e acompanhadas por um botão para evitar carga cognitiva.

E lembre-se, às vezes nenhum deles fará o truque. Como mencionamos aqui, se você tiver mais de 5 opções em um conjunto, considere usar uma lista suspensa. É uma ótima economia de espaço e muito mais organizada.

Introdução às caixas de seleção e botões de opção no design da interface do usuário

Talvez você queira tentar criar caixas de seleção e botões de opção. Se você está procurando uma ferramenta com elementos pré-fabricados para começar, tente o Justinmind.

Para aqueles que já conhecem o Justinmind, provavelmente já provaram nossas bibliotecas de widgets de interface do usuário. Para quem é novo na ferramenta de criação de protótipos, apresentamos um resumo rápido:

Nossa ferramenta possui mais de 2000 widgets, telas e ícones de interface do usuário prontos (incluindo kits de interface do usuário compatíveis com Android e iOS) para ajudá-lo a criar wireframes e protótipos.

Nossos widgets básicos, comumente encontrados em designs para web e móveis, são pré-carregados na paleta da biblioteca de widgets. Você encontrará a paleta da biblioteca Widgets assim que abrir um novo protótipo no editor Justinmind. Nesta biblioteca, você encontrará os widgets Caixa de seleção e Botão de opção.

O widget Checkbox

O widget Caixa de seleção exibe um dos dois estados (marcado / desmarcado). Você pode alterar facilmente seu estado padrão clicando duas vezes nele na tela.

O widget do botão de opção

O widget do botão de opção exibe uma opção de um conjunto de itens mutuamente exclusivos. Altere seu estado padrão da mesma maneira que na caixa de seleção.