Los botones no deberían tener un cursor de mano

Esta es la parte 1 de una serie de 3 partes. Aquí están la parte 2 y la parte 3.

Existe la creencia de que el cursor de la mano (puntero) significa que se puede hacer clic, pero esto es incorrecto y potencialmente problemático.

La mano no significa hacer clic

No es casualidad que los navegadores no le den a los botones (y otros elementos) un cursor de puntero, es porque no están destinados a hacerlo. Ver la siguiente captura de pantalla:

Página de búsqueda de Google en Chrome en Mac OS

Casi todos los elementos son interactivos y se puede hacer clic en ellos: el menú, las pestañas, los espacios en blanco, los botones del navegador, la barra de marcadores y el cuadro de búsqueda de Google; ninguno de ellos tiene un cursor de puntero.

Hay más elementos interactivos y en los que se puede hacer clic que no se muestran arriba: seleccione menús, controles deslizantes, casillas de verificación, radios, etiquetas, imágenes, espacio vacío (por ejemplo, clic derecho - ver fuente) y texto; nuevamente, ninguno de ellos tiene un cursor de puntero.

Lo mismo se aplica para el sistema operativo. Puede tocar, arrastrar, seleccionar, presionar, hacer clic con el botón izquierdo y hacer clic con el botón derecho en una gran cantidad de elementos diferentes, incluidos los botones. Sin embargo, los botones no están representados por el cursor del puntero que se muestra al pasar el mouse.

El Acuerdo de licencia es un enlace y obtiene el cursor del puntero. Los botones no.

La capacidad percibida se proporciona por la forma en que se ve algo, independientemente del cursor. Recuerde, el cursor solo está disponible cuando se desplaza con un dispositivo señalador como un mouse.

Por eso, por ejemplo, las casillas de verificación nunca son redondas (y las radios nunca son cuadradas). Esta es también la razón por la cual los enlaces están subrayados. Esta es la razón por la cual los enlaces tienen, de hecho, un cursor de mano.

Lo que dicen las autoridades

Las guías de diseño de Microsoft hablan sobre el bajo costo:

Los enlaces de texto y gráficos usan un puntero de mano [...] [...] debido a su poca capacidad de pago. Si bien los enlaces pueden tener otras pistas visuales para indicar que son enlaces (como subrayados y ubicaciones especiales), mostrar el puntero de la mano al pasar el mouse es la indicación definitiva de un enlace.
Para evitar confusiones, es imperativo no utilizar el puntero de mano para otros fines. Por ejemplo, los botones de comando ya tienen una gran capacidad de pago, por lo que no necesitan un puntero de mano. El puntero de la mano debe significar "este objetivo es un enlace" y nada más.

Las pautas de la interfaz humana de Apple establecen que el cursor de la mano debe usarse cuando "el contenido es un enlace URL". Las pautas de la interfaz de usuario del W3C dicen lo mismo de nuevo con "El cursor es un puntero que indica un enlace".

El cursor de la mano es para enlaces.

La mano (y el texto a menudo subrayado) significa un enlace. Los enlaces no son botones. Los enlaces llegaron junto con la web. Para ayudar a los usuarios a comprender que son diferentes, se les da el cursor de mano. Sirve como una pista extra. Este es el por qué:

  1. Al hacer clic en un enlace, se abre una página web o recurso.
  2. (En el escritorio) Puedo hacer clic derecho en un enlace y hacer muchas cosas (que no puedo hacer con un botón). Abrir en una nueva pestaña / ventana, guardar un enlace, copiar la dirección, agregar a la lista de lectura, marcarlo y más.
  3. (En dispositivos móviles) Puedo tocar y mantener presionado un enlace y obtener un menú contextual similar al del punto anterior.
  4. Un enlace también me dice que me voy a otro lado. No estoy modificando ningún dato ni haciendo cambios de ninguna manera (como es probable que haga un botón).

Resumen

Cuando un botón tiene el cursor de mano, sugiere sutilmente que el usuario está interactuando con un enlace cuando no lo está. Si desea proporcionar comentarios visuales cuando el usuario se desplaza, puede hacerlo con otros cambios de estilo, como el color de fondo. Un botón bien diseñado no necesita un cursor de mano para ayudar al usuario a darse cuenta de que hace algo.

El cursor de la mano está reservado para enlaces. Esto se debe a que son únicos en su comportamiento. Los navegadores y los sistemas operativos han hecho el trabajo por usted, porque, contrariamente a la creencia popular, los navegadores lo saben mejor.

Los enlaces siempre se han manejado de esta manera desde que apareció la web: esta es la convención de la web en la que no necesita innovar. Puede descansar tranquilo sabiendo que los navegadores lo tienen cubierto. Esto te deja a ti y a tu equipo para resolver problemas reales.

Seguimiento de publicaciones

  • Pero a veces los enlaces parecen botones
  • Los botones no deberían tener un cursor de mano Parte 2

Por cierto, estoy escribiendo un libro llamado Form Design Patterns. Si quieres saber cuándo se publica, suscríbete aquí y te mantendré informado.