Arredondado ou quadrado? Essa é a questão.

Preciso mudar os botões apontados usuais para os arredondados? Quais são melhores para a usabilidade? Como tomamos essas decisões?

São precisamente esses problemas que você encontrará quando imerso no UX associado aos botões redondos nos aplicativos. Já sabemos que tamanho, contraste e a própria sombra projetada podem tornar o botão perceptível, mas nem sempre é fácil encontrar o equilíbrio certo para os elementos da ação principal e secundária. A redondeza, neste caso, pode vir ao resgate.

Variáveis ​​usadas para melhorar a visibilidade

O arredondamento aumenta o reconhecimento?

Elementos arredondados são mais fáceis de ler. É mais fácil contar o número de cartões seguidos se os cantos não estiverem nítidos.

Elementos arredondados são mais fáceis de reconhecer do que nítidos

Isso ocorre porque uma redondeza melhor distinguível ajuda nossos olhos a distinguir rapidamente entre as próprias cartas. Pelo contrário, os cartões com cantos afiados parecem unificados e uniformes, o que dificulta o reconhecimento.

No layout da grade, o arredondamento funciona ainda melhor.

Por exemplo, em um painel do TurboTax, os olhos se agarram a elementos com cantos arredondados na seção superior, melhor do que a seção do meio, onde os cartões têm cantos afiados.

Painel de Turbotax

Preciso usar botões totalmente arredondados?

Botões totalmente arredondados ficam ótimos em interfaces em que há uma quantidade adequada de espaço livre. Um exemplo de um arranjo muito bem-sucedido desses botões é o Spotify, onde a chamada à ação é bem sentida.

Botões arredondados no Spotify

De um modo geral, neste exemplo em particular, como o trabalho com o Spotify sempre se resume à reprodução (faixas, podcasts, listas de reprodução), a ação principal é definida de forma exclusiva. E os botões de reprodução totalmente arredondados são muito distintos dos álbuns e listas de reprodução da interface do usuário, o que, por sua vez, incentiva o usuário a clicar em "Reproduzir".

"Reproduzir" no Spotify

Quando os botões totalmente arredondados NÃO funcionam?

Em alguns casos, a redondeza pode prejudicar a usabilidade, por exemplo:

1. Quando os botões arredondados se parecem com tags

Se não for fácil distinguir um botão de uma tag (filtro), as pessoas ficarão confusas: "Clico em um botão ou em um filtro?"

O que é: botões ou filtros? Nem um pouco óbvio.

2. Botões arredondados não podem mostrar opções aninhadas

Botões totalmente arredondados geralmente usam o ícone "seta" para indicar a presença de opções aninhadas. Mas a área de clique (ou carrinho de mão) para exibir opções é limitada pelo tamanho do ícone (geralmente 16x16 ou 24x24 px).

Será conveniente visualizar as opções em cada caso?

Se usarmos apenas botões ligeiramente arredondados, podemos ocultar a seta para que o botão se comporte como um botão pop-up. Essa abordagem funciona melhor.

A Apple não recomenda o uso de botões arredondados para ações (consulte os botões ). Os botões totalmente arredondados são reservados para a " Ajuda " ou para fornecer opções mutuamente exclusivas (consulte os botões de opção ).

Ilustrações das Diretrizes de interface humana da Apple

3. Botões totalmente arredondados não são adequados para pilhas

Quando colocamos botões arredondados em linhas em mesas e cartões, eles parecem fora de lugar. Por exemplo, para uma tabela de 10 linhas, obtemos uma coluna de 10 botões, cada um dos quais se parece com um botão para a ação principal.

Como alternativa, você pode experimentar os botões "sem bordas", como é feito nas novas notificações do macOS, ou mostrar os botões apenas quando passar o mouse. Ao minimizar a visibilidade dos botões, deixamos o usuário focar na área de trabalho principal.

Botões "sem bordas" na pilha

Estética dos cantos arredondados

A redondeza parece moderna. A aplicação do arredondamento completo começou em interfaces móveis e migrou para a web. A falta de nitidez causa sentimentos de simplicidade, otimismo e acessibilidade. É provavelmente por isso que muitos sistemas de design adotaram elementos arredondados e são amplamente utilizados para ícones, botões ou até imagens.

No Chrome, após uma atualização recente (seis meses após a publicação do artigo original - aprox. Transl.), A barra de endereços foi arredondada para expressar melhor a disponibilidade do uso simultâneo de pesquisa. Os usuários podem ver parte dos resultados da pesquisa no momento da impressão, mesmo antes de ir para a página.

Nova barra de pesquisa no Chrome (fonte - blog do Google )

De acordo com o novo conceito, os botões na barra de ferramentas começaram a ser destacados, arredondados ao passar o mouse. É fácil encontrar elementos arredondados em outros aplicativos do Google, como Calendário, Gmail e Drive.

Resumindo

Não existe uma resposta definitiva que seja melhor - redondeza ou nitidez. Mas os elementos arredondados podem ajudar a incentivar o usuário a interagir com o aplicativo sem se distrair com uma interface do usuário secundária.

---

Lista de recursos para um estudo aprofundado da questão:

Use formas redondas nos designs de materiais

Características dos cantos arredondados

Por que cantos arredondados são mais fáceis para os olhos