it-swarm-pt.tech

Tamanho do elemento do formulário acionável

Eu não sou um designer de interface do usuário, por qualquer meio. Eu notei no último ano ou dois que botões/links importantes ... etc em muitos sites agora têm zonas de cliques muito grandes. Devo dizer que aprecio isso, pois pegar o cursor apenas para agir é uma dor. Eu diria que provavelmente é mais relevante agora com dispositivos móveis, o que pode até ser o driver para essas mudanças de design.

Então, existe uma regra de ouro para tamanhos de botão/link em uma página da web?

8
rick schott

É tudo baseado em lei de Fitts , que fornece o tempo médio necessário para o usuário colocar o cursor no botão. Você pode encontrar artigos diferentes sobre o assunto, como Lei da interface do usuário de Fitts aplicada à Web ou até o podcast de Jared Spool .

E a regra geral é fácil: um botão importante deve ser tão grande que possa ser pressionado com, literalmente, um polegar (Olá, iPad) :-)

10
Kostya

Aqui está uma regra prática para o iPhone, de Diretrizes de interface humana da Apple .

Crie controles com pelo menos 29 pixels de altura e forneça uma área de destino com 44 pixels Alto.

Mais do livro, Tapworthy , onde eu realmente o descobri.

Mas quão grande é grande o suficiente quando se trata de alvos de toque do iPhone? Bem, qual é o tamanho de uma ponta do dedo? Apple atribui-o precisamente a 44 pixels e esta medida aparece de forma confiável nos controles padrão do iPhone

5
Patrick McElhaney

Não existe uma regra geral, mas há uma conscientização crescente de que nem todos os usuários da Internet têm a destreza e a agilidade de um designer de interface profissional em período integral. Em 1999/2000, você viu muitos designs de "pixels" onde as coisas eram pequenas e usavam botões de 8x8 grandes. Desde o boom da usabilidade inspirado por Steve Krug, Kathy Sierra, 37signals, Jakob Nielsen e outros ao longo dos anos 2000, as pessoas se tornaram mais conscientes da utilidade de seus aplicativos e sites e começaram a projetar de acordo.

Outro lado da história é que as telas e as resoluções de tela em geral estão aumentando. A média de hoje é provavelmente de 1280 x 1024 ou mais, enquanto há dez anos você teria a sorte de encontrar um visitante de 1280 x 1024 em seu site, já que a maioria das pessoas ainda calculava a média de 800 x 600. Como as resoluções são maiores, mais pixels cabem na tela e o que antes era bastante fácil de ver agora está ficando ainda menor (e, como tal, mais difícil de clicar).

E, finalmente, a introdução de dispositivos baseados em toque levou muitos desenvolvedores a começar a levar a sério a área de cliques, já que é difícil atingir um alvo pequeno com algo tão impreciso quanto um dedo quando comparado à extrema precisão do ponteiro do mouse.

Todas essas alterações provavelmente levarão a regras práticas em algum momento, mas, em geral, a melhor coisa a fazer é identificar que tipo de público está visitando seu site e projetá-lo adequadamente, levando em consideração quem são, quais dispositivos são usando e outros elementos, como quanto espaço você tem na tela/janela.

4
Rahul

Até certo ponto, o tamanho da zona de clique é relativo aos outros elementos na página. Não tenho um padrão estrito, mas geralmente acho que meus botões têm uma altura de pelo menos 40 px e meu tamanho de texto geralmente é de pelo menos 13 px. Também acho que, para navegação e outros botões com pelo menos algum componente gráfico, é importante tornar a área inteira clicável, em vez de apenas o texto.

0
Virtuosi Media