it-swarm-pt.tech

Menor tamanho e espaçamento dos botões para uma tela sensível ao toque

Para uma tela sensível ao toque, como o iPhone, qual é o menor tamanho de botão que você pode usar?

E quão perto eles poderiam ser empurrados juntos?

Eu tenho um aplicativo que tem muitos botões em uma tela e preciso projetá-lo para que seja utilizável.

13
Mongus Pong

(Como sou preguiçoso, começarei reimprimindo minha resposta de um tópico no SO)

Pesquisas científicas recentes descobriram que:

[A] tamanho do alvo de 9,2 mm para tarefas discretas [ou seja, tarefas de apontamento de destino único ] e os alvos de 9,6 mm para tarefas seriais devem ser suficientemente grandes para o uso do polegar com uma mão em computadores de mão com tela sensível ao toque, sem prejudicar o desempenho e a preferência.

Citado em Estudo do tamanho do alvo para o uso do polegar com uma mão em dispositivos pequenos com tela sensível ao toque (Parhi, Karlson & Bederson 2006). Outras fontes concordam com esta "regra de quase 0,4 polegadas" (por exemplo, Desenhando interfaces gestuais (Saffer 2008, p. 42)).

Dada a densidade de pixels do iPhone de 163 PPI (6,417px/mm), você deve, de preferência, apontar não inferior à 59px na diagonal para qualquer alvo.

(Observe que isso é verificado para uso do polegar com uma mão apenas.)


Se você seguir estas diretrizes, o espaçamento pode será eliminado.

tl; dr? Tudo se resume à densidade de pixels.

10
jensgram

Consulte as Diretrizes da interface humana do iPhone (esse link vai para as diretrizes para aplicativos da web) para obter recomendações da Apple. Há um capítulo chamado " Fornecer metas de tamanho de ponta de dedo " no qual você provavelmente pode usar para basear suas decisões.

Além disso, não adivinhe, teste. Convide algumas pessoas com dedos de tamanhos diferentes (dentro do seu público-alvo) e peça-lhes para pressionar botões de tamanhos diferentes em um protótipo. Isso ensinará muito sobre o que esperar.

Editar: Guia de Design e Interação de Interface do Usuário da Microsoft para Windows Phone 7 detalha "tamanhos mínimos de destino de toque" na página 4. No geral, isso O guia é excelente e uma leitura obrigatória para designers de interface do usuário que trabalham na interface touchscreen.

8
Rahul

Enquanto desenvolvia alguns aplicativos móveis baseados em Android, tive que testar a menor área de toque que o usuário pode acessar de maneira fácil e precisa com um dedo/toque (executar ações de clicar e arrastar).

Os testes foram feitos em 3 telefones baseados emAndroid: HTC Hero, Samsung Galaxy Spica, T-Mobile Pulse. Os telefones tinham telas de 3,2 polegadas, exceto o Pulse (que possui tela de 3,5 polegadas), todos com resolução de tela de 320x480 pixels e superfície capacitiva da tela.

Para encurtar a história, tudo que era menor que 20x20 pixels era inutilizável. Lembre-se também de que deve haver espaço ao redor do botão (margem de 5 pixels).

2
Bojan Gavrovski

Muitas diretrizes de UX giram em torno do tamanho da ponta do dedo e essas diretrizes variam em tamanho e espaçamento recomendados. Os tamanhos das pontas dos dedos não devem ser o único fator na determinação de quais controles e espaçamentos de tamanho mínimo devem ser.

Patch de contato

Considere o 'adesivo de contato' real feito pelo dedo/polegar ao fazer contato com uma tela sensível ao toque. Você também precisa considerar erros de julgamento cometidos pelo usuário ao pensar que eles centralizaram visualmente seu toque no alvo, mas, na verdade, o contato real feito com a tela pode estar levemente inclinado para o lado.

Tipo de dispositivo

Devido à maneira como diferentes dispositivos são mantidos e à diferença na distância do usuário (compare o telefone celular a um tablet, por exemplo, um telefone pode ficar mais próximo), o tamanho e o espaçamento mínimos do toque também podem variar. É possível que você se dê bem com mínimos mínimos em um telefone, porque eles são mantidos mais próximos do espectador e com menos chances de serem cometidos. Para um dispositivo maior, como um tablet mantido mais distante, pode ser necessário aumentar o tamanho mínimo para aumentar a chance de erros.


Existe um ótimo artigo falando sobre esse e outros fatores no UXmatters ( http://www.uxmatters.com/mt/archives/ 2013/03/common-misconceptions-about-touch.php ).

Trechos do artigo:

... apenas parte do dedo ou do polegar faz contato com a tela ... o adesivo de contato varia de acordo com a pressão e o ângulo

Os tamanhos físicos são importantes , portanto, todas as boas diretrizes estão em milímetros, polegadas, pontos de tipógrafos ou outras escalas do mundo real.

não há necessidade de aumentar o tamanho do alvo visível. Em vez disso, você pode simplesmente aumentar as dimensões da área clicável ao redor de um link ou botão

Design para áreas visuais e visuais por toque. Considere as expectativas dos usuários.

Tamanhos:

enter image description here

1
Dave Haigh

Apenas como uma adição: o design do material do Google sugere um mínimo de 7 a 10 mm para o tamanho do alvo de toque https://www.google.com/design/spec/search.html?q=Touch+target+size

0
Andi