it-swarm-es.com

Tamaño de elemento de formulario accionable

No soy un diseñador de interfaz de usuario de ninguna manera. He notado en el último año o dos que los botones/enlaces importantes ... etc. en muchos sitios web ahora tienen zonas de clics muy grandes. Debo decir que lo aprecio, ya que presionar el cursor para actuar es un dolor. Diría que probablemente sea más relevante ahora con los dispositivos móviles, que incluso pueden ser el motor de estos cambios de diseño.

Entonces, ¿hay una regla general para los tamaños de botón/enlace en una página web?

8
rick schott

Todo se basa en Ley de Fitts que le da el tiempo promedio que le lleva al usuario colocar el cursor sobre el botón. Puede encontrar diferentes artículos sobre el tema como Ley de IU de Fitts aplicada a la web o incluso el podcast de Jared Spool .

Y la regla general es fácil: un botón importante debe ser tan grande que se pueda presionar con, literalmente, un pulgar (hola, iPad) :-)

10
Kostya

Aquí hay una regla general para el iPhone, de Pautas de interfaz humana de Apple .

Cree controles que tengan al menos 29 píxeles de alto y proporcione un área objetivo que sea 44 píxeles alto.

Más del libro, Tapworthy , donde realmente lo descubrí.

Pero, ¿qué tan grande es lo suficientemente grande cuando se trata de objetivos táctiles de iPhone? Bueno, ¿cuál es el tamaño de la punta de un dedo? Apple lo fija con precisión a 44 píxeles y esta medida aparece de manera confiable en todos los controles estándar de iPhone

5
Patrick McElhaney

No existe una regla general, ya que existe una conciencia creciente de que no todos los usuarios de Internet tienen la destreza y la agilidad de un diseñador de interfaz profesional y de tiempo completo. En 1999/2000 viste muchos diseños de "píxeles" donde las cosas eran pequeñas y usaban botones de 8x8 grandes. Desde el auge de la usabilidad inspirado por Steve Krug, Kathy Sierra, 37signals, Jakob Nielsen y otros a lo largo de la década de 2000, las personas se han vuelto más conscientes de cuán utilizables son sus aplicaciones y sitios y han comenzado a diseñar en consecuencia.

Otro lado de la historia es que las pantallas y las resoluciones de pantalla en general se están volviendo más grandes. El promedio de hoy es probablemente de 1280x1024 y más, mientras que hace diez años sería afortunado encontrar un visitante de 1280x1024 en su sitio, ya que la mayoría de la gente todavía promediaba alrededor de 800x600. Debido a que las resoluciones son más grandes, caben más píxeles en la pantalla y lo que antes era bastante fácil de ver ahora se está volviendo aún más pequeño (y como tal, más difícil de hacer clic).

Y finalmente, la introducción de dispositivos táctiles ha causado que muchos desarrolladores comiencen a tomar en serio el área de clics, ya que es difícil alcanzar un objetivo pequeño con algo tan impreciso como un dedo en comparación con la extrema precisión del puntero del mouse.

Todos estos cambios probablemente conducirán a reglas generales en algún momento, pero en general lo mejor que puede hacer es identificar qué tipo de audiencia está visitando su sitio y diseñar en consecuencia, teniendo en cuenta quiénes son, qué dispositivos son usando, y otros elementos como cuánto espacio tiene en su pantalla/ventana.

4
Rahul

Hasta cierto punto, el tamaño de la zona de clic es relativo a los otros elementos en la página. No tengo un estándar estricto, pero generalmente encuentro que mis botones tienen una altura de al menos 40 píxeles y mi tamaño de texto suele ser de al menos 13 píxeles. También creo que para la navegación y otros botones con al menos algún componente gráfico, es importante hacer clic en toda el área, en lugar de solo el texto.

0
Virtuosi Media