Tamanho dos ícones para acções

Hoje em dia existem os mais variados dispositivos de onde se pode aceder à Internet: computadores de secretária, computadores portáteis, netbooks, telemóveis e, mais recentemente, o iPad da Apple. Os tamanhos de ecrã são os mais variados e, em número crescente, os ecrãs passam a ter a funcionalidade acrescida de serem sensíveis ao toque.

Os que produzem conteúdos para a Web devem estar conscientes da miríade de combinações possíveis de dispositivos, resoluções de ecrã e touch screens. Por esse motivo, torna-se impossível desenhar especificamente para cada uma destas formas de aceder à Internet. O ideal seria que os conteúdos se adaptassem ao dispositivo e ao tamanho de ecrã em questão e isso pode ser parcialmente feito por uma CSS bem estruturada. Também é certo que alguns browsers disponibilizam funcionalidades para colmatar as limitações de determinados dispositivos. No entanto, isso não chega.

Neste post vou concentrar-me mais sobre a problemática do tamanho dos ícones responsáveis por executarem determinada acção numa página Web. Não se incluem neste grupo os ícones que transmitem apenas informação visual.

Os ícones que executam acções devem ser fáceis de clicar, quer com o botão do rato, quer com a ponta do dedo, se o ícone estiver a ser visualizado num ecrã sensível ao toque. Esta facilidade de clicar está directamente ligada com o tamanho do ícone em questão. Se um ícone for demasiado pequeno, alguns utilizadores poderão ter dificuldade em "acertar no alvo". Pense-se, por exemplo, nos utilizadores seniores, nos utilizadores com mobilidade reduzida ou nos utilizadores que possuem como interface o pequeno touch screen de um telemóvel. Por esse motivo, o tamanho mínimo desses ícones deverá ser 12 x 12 pixeis. Se o interface é pensado principalmente para touch screens, deveremos aumentar a fasquia para os 20 x 20 pixeis.

Existe também outra coisa a ter em conta: o espaço vazio não clicável à volta dos ícones. Se estivermos a falar de um conjunto de ícones, cada um com a sua função e que partilhem o mesmo ecrã, deverá ser proporcionado um espaço vazio mínimo não clicável à sua volta, na proporção da metade da medida mínima dos ícones que compõem esse espaço. Exemplo: se estivermos a falar de uma matriz de ícones com 20 x 16 pixeis, o espaço à volta desses ícones deverá ter no mínimo 8 pixeis. Este espaço vazio não clicável é de extrema importância, uma vez que previne cliques acidentais ou acções erradas por parte dos utilizadores.

Estes valores que referi são empíricos e derivam da minha experiência pessoal pela observação das aplicações e dispositivos existentes no mercado e pelos desenvolvimentos que faço para a Web.