Tamanho de elemento

As dimensões dos componentes da interface, que afetam uso, acessibilidade e hierarquia.

Hard

O que é

Tamanho de elemento é a dimensão de cada peça da interface, seja botão, campo, imagem ou ícone. Ele define se a pessoa consegue interagir com facilidade e se o layout fica equilibrado entre aparelhos diferentes.

No uso, o tamanho errado custa caro. Um botão pequeno demais frustra no celular, enquanto um elemento grande demais entulha a tela e tira clareza, e é por isso que guias como o Material Design e o Human Interface Guidelines recomendam um tamanho mínimo de alvo, pra que dê pra tocar ou clicar sem erro.

A acessibilidade depende disso de forma direta. Quem tem limitação motora erra alvo pequeno, enquanto quem tem baixa visão se beneficia de texto e controle maior e com mais contraste, ou seja, seguir uma referência como a WCAG no tamanho de alvo deixa o produto usável por bem mais gente.

Em uma frase

O botão era pequeno demais e errava o toque no celular, então vamos aumentar o alvo pro mínimo recomendado pela WCAG.

A pergunta que ele responde

Qual o tamanho mínimo de um botão pra pessoa conseguir tocar sem errar no celular?

Quando usar

Ajuda na hora de desenhar qualquer componente interativo, principalmente pensando no toque do celular e na acessibilidade.

Como não usar

O cuidado é não fazer alvo pequeno demais pra tocar, nem usar imagem fora de escala, que pesa o carregamento e quebra a responsividade.

Na prática

Pense num botão de ação que ficava pequeno no celular e fazia as pessoas errarem o toque. Ao aumentar o alvo pro mínimo recomendado, o time vê o erro cair.

Não confunda com

Vale separar tamanho de elemento de hierarquia, que costuma ser confundida com ele. O tamanho é a dimensão real do componente, enquanto a hierarquia é o modo como esse tamanho, entre outras pistas, ordena a importância visual. Um é a medida, o outro é o efeito que a medida produz.

Design

Em inglês

Element Size

Pronúncia

n/a

Também chamado de

element size, dimensão de elemento, tamanho de alvo

Origem

Referências como WCAG, Material Design e Human Interface Guidelines.

Fonte

Saiba mais

W3C, WCAG 2.1 (critério de tamanho de alvo, Target Size)