Tamanho da área de toque: por que 24px é pouco e a regra de 44pt e 48dp
Um ícone de 24px está ótimo, uma área de toque de 24px não. A Apple pede 44 pt, o Android 48 dp, e os 24 px do WCAG são apenas um piso. Quatro correções, refeitas lado a lado, e o código para passar ao seu dev.
Um ícone de 24 px está ótimo. Uma área de toque de 24 px, não. As pessoas usam a ponta do dedo, muitas vezes com uma mão só e em movimento, e um alvo tão pequeno é errado ou acerta o vizinho. Desenhe o ícone pequeno e a área de toque grande, e siga os números abaixo.
Por que 24 px é o número que todo mundo desenha
Ícones são desenhados em 24. O Material Symbols, por exemplo, vem com 24 px como tamanho preferido. Então o designer entrega um ícone de 24 px, o dev faz o botão do tamanho do ícone, e a área de toque acaba do tamanho de um selo postal.
A segunda fonte do número é a acessibilidade. O WCAG 2.2 pede alvos de ponteiro de pelo menos 24 por 24 pixels CSS no nível AA. Isso é um mínimo, e vem com exceções. É fácil ler um piso como uma meta, e um design que fica exatamente no piso passa no verificador e ainda assim frustra as pessoas.
Os quatro números que você precisa saber
| Fonte | Tamanho | O que é |
|---|---|---|
| Apple, iOS e iPadOS | 44 por 44 pt | O tamanho padrão de controle |
| Apple, iOS e iPadOS | 28 por 28 pt | O menor tamanho de controle |
| Android, Material | 48 por 48 dp | O alvo de toque recomendado |
| WCAG 2.2, 2.5.8 (AA) | 24 por 24 px CSS | O mínimo, com exceções |
| WCAG 2.2, 2.5.5 (AAA) | 44 por 44 px CSS | O alvo aprimorado |
A orientação da própria Apple é direta: um botão precisa de uma região de toque de pelo menos 44 por 44 pontos. Pontos, dp e pixels CSS são todos unidades independentes de densidade, então designers as usam lado a lado numa mesma grade, como na imagem.
Uma das exceções do WCAG vale a pena conhecer. Dois alvos abaixo do tamanho são permitidos se um círculo de 24 px centralizado em cada um não tocar o outro alvo. É uma regra sobre espaçamento, e é por isso que uma fileira de ícones minúsculos bem afastados pode passar, enquanto os mesmos ícones amontoados falham.
Correção 1: expanda o ícone até 44
Área de toque de 24 x 24
Área de toque de 44 x 44
A área de toque é o quadro do botão, não a imagem dentro dele. Então a correção é dimensionar o botão, não o ícone: mantenha o glifo em 24 e dê ao botão pelo menos 44 nos dois lados. Vale para todo controle pequeno que fica sozinho: a seta de voltar, os botões de compartilhar e mais numa barra de ferramentas, o botão de info numa linha, uma estrela de favorito, um checkbox, o mais e o menos de um stepper.
Quando dois deles ficam lado a lado, as caixas podem se encostar. Tudo bem, já que caixas encostadas não deixam vão para errar.
Correção 2: deixe a linha inteira tocável
Só o switch
Linha inteira
A linha já está ali, já é legível e é muito maior que 44. Envolva o rótulo e o controle em um único elemento tocável para que a linha inteira alterne. Isso também ajuda quem usa leitor de tela ou switch access, porque há um controle com um nome, não um rótulo e um switch solitário.
Correção 3: dê ao botão de fechar um alvo de verdade
16 x 16
44 x 44
O mesmo vale para o botão de dispensar de um banner, o botão de limpar dentro de um campo de busca e o pequeno ícone de remover numa tag. Desenhe a marca leve e o alvo pesado.
Correção 4: ponha a ação principal embaixo
Canto superior
Embaixo, largura total
Esta é uma regra de design, não uma estatística medida: o ponto é que onde um controle fica importa tanto quanto o tamanho dele. A ação principal vai embaixo e larga. Cancelar e outras ações secundárias podem ficar na barra de cima.
Como construir
Na web, dimensione o botão, não o ícone:
.icon-button {
display: inline-grid;
place-items: center;
min-width: 44px;
min-height: 44px;
}
.icon-button svg { width: 24px; height: 24px; }
/* one tappable row: label and switch together */
.row { display: flex; align-items: center; min-height: 44px; }
No Android, a orientação do Google é usar android:minWidth e android:minHeight para definir um limite inferior quando um controle se dimensiona pelo conteúdo:
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:minWidth="48dp"
android:minHeight="48dp" />
No iOS, com SwiftUI, dê ao controle um frame e faça o frame inteiro responder:
Button(action: close) { Image(systemName: "xmark") }
.frame(minWidth: 44, minHeight: 44)
.contentShape(Rectangle())
Os três trechos são nossos exemplos da regra, não código copiado de uma plataforma.
Revise suas próprias telas em cinco minutos
- No seu arquivo de design, desenhe tudo que é tocável como uma caixa de 44 por 44, por cima do ícone. Toda caixa que não couber é um alvo a ser ampliado.
- Linhas de lista, abas, chips e controles de paginação: o item inteiro é tocável, ou só a parte com a palavra?
- Encontre todo controle de fechar, limpar e remover. Cada um precisa dos seus próprios 44.
- Encontre a ação principal de cada tela. Ela está onde o polegar está?
- Num celular de verdade, com uma mão só, percorra o fluxo principal. Tudo que você errar duas vezes é pequeno demais.
FAQ
Qual é o tamanho mínimo de uma área de toque?
No iPhone, o padrão da Apple é 44 por 44 pontos e o menor tamanho de controle é 28 por 28. No Android, a recomendação é 48 por 48 dp. Na web, o WCAG 2.2 define um mínimo de 24 por 24 pixels CSS no nível AA, com exceções.
Qual deve ser o tamanho de um botão no celular?
Pelo menos 44 por 44 pontos no iOS e 48 por 48 dp no Android, tanto na largura quanto na altura. Um botão principal de largura total na parte de baixo da tela já fica bem acima dos dois.
O ícone em si precisa ter 44 px?
Não. O ícone pode continuar com 24 px ou menos. O que precisa ter 44 é a área que responde ao toque, ou seja, o botão ao redor do ícone. Adicione padding ou uma largura e altura mínimas ao botão.
Um alvo de 24 por 24 px basta para o WCAG?
Para o nível AA, sim, na maioria dos casos: o critério pede pelo menos 24 por 24 pixels CSS, com exceções para espaçamento, links em texto e alguns outros. O nível aprimorado, AAA, pede 44 por 44. Passar no AA é um mínimo de conformidade, não um bom tamanho para se projetar.
Qual a diferença entre pt, dp e px?
São todas unidades independentes de densidade. Ponto é a unidade do iOS, dp é a do Android e pixel CSS é a da web. Não são fisicamente idênticas, mas designers as organizam na mesma grade, então 44 pt e 48 dp são tratados como tamanhos mais ou menos equivalentes.
Onde deve ficar o botão principal no celular?
Na parte de baixo da tela, em largura total, onde o polegar descansa. Coloque ações secundárias como Cancelar na barra de cima. Esta é uma regra prática de layout, não um número medido.
Fontes
- Apple Human Interface Guidelines, Accessibility: tamanho padrão de controle no iOS e iPadOS de 44 por 44 pontos, tamanho mínimo de controle de 28 por 28 pontos.
- Apple Human Interface Guidelines, Buttons: um botão precisa de uma região de toque de pelo menos 44 por 44 pontos.
- Android Accessibility Help, Touch target size: pelo menos 48dp de largura e altura, e
android:minWidtheandroid:minHeightcomo limite inferior para controles dimensionados pelo conteúdo. - W3C, WCAG 2.2, 2.5.8 Target Size (Minimum): pelo menos 24 por 24 pixels CSS no AA, incluindo a exceção de espaçamento, e 2.5.5 Target Size (Enhanced): 44 por 44 no AAA.
- Google Fonts, Material Symbols guide: 24 px como tamanho preferido de ícone.
- As telas acima são exemplos nossos. O conselho sobre posicionamento embaixo é uma regra de design, não uma estatística.
- Mais posts de uma regra só como este no UX Brainy.
Want every tap in your app to land the first time? Our team designs and builds mobile UI with the hit areas decided once, in the system.
Get Started
