¿Es incorrecto usar el cursor de la mano para elementos clicables como botones?


Siempre he pensado que el cursor de mano es el indicador visual ideal para "puede hacer clic aquí" para el usuario. Estamos acostumbrados a verlo en este contexto a diario debido a su uso en hipervínculos y, por lo tanto, en todos los botones web.

                 texto alt

Sin embargo, la mayoría de las aplicaciones de escritorio parecen mantener la flecha del puntero defeault para los botones.

                                 

Realmente me siento mejor cuando los botones y otros elementos clicables tales como casillas de verificación y botones de radio utilizan el cursor de la mano. De alguna manera, me parece personalmente agradable ver este cursor cuando cierro el cursor sobre los elementos en los que se puede hacer clic, tal vez porque es consistente con cómo lo hacen las páginas web e incluso muchos juegos.

Pero como desarrolladores, tenemos que pensar en el usuario hijos y a veces hacer las cosas no como nos gustan sino como al usuario le gustan. El problema es que me siento tan confuso sobre el cursor de la mano en los botones que Estoy ciego a la posibilidad de que sea inapropiado . Muchos errores de diseño son causados por tales decisiones personales.

                                      introduzca la descripción de la imagen aquí

¿Qué te parece?

Edit: Recientemente me he dado cuenta del uso del cursor de mano en Photoshop (CS3 en XP), pero probablemente solo porque lo estaba usando más ampliamente. Captura de pantalla:

                                         introduzca la descripción de la imagen aquí

Tenga en cuenta que muchos de los lugares donde se usó la mano son obviamente se puede hacer clic en .
EDIT2: También tenga en cuenta que incluso han utilizado un cursor personalizado, que para ser honesto nunca lo haría, especialmente para algo trivial como un cursor de mano que es tan ubicuo. Y ni siquiera es bonito.

Author: Camilo Martin, 2010-11-08

7 answers

La razón por la que el cursor cambia de forma cuando pasa por un hipervínculo probablemente tiene que ver con lo siguiente:

  • los hipervínculos comenzaron en bloques de texto y, como tal, no era obvio que pudiera hacer clic en ellos para abrir otra página.
  • el cambio en el estilo de visualización de los enlaces en sí mismo probablemente no fue suficiente para comunicar la "clickability" de un enlace. Posiblemente también porque los cambios en el estilo de visualización no están exactamente estandarizados, mientras que el cursor ser.
  • los botones en las páginas web solían ser "normalmente" clicables, aunque creo que no puedo recordar si causaron que el cursor cambiara de forma. Hoy en día, los" botones "a menudo se" falsifican " usando css y necesita alguna otra forma de decirle al usuario que puede hacer clic en él => handshape cursor se ha convertido en el valor predeterminado para eso.

Todo lo anterior, sin embargo, está orientado a comunicar "clickablity" dentro del contenido de una página web. Botones, botones en barras de herramientas, elementos de menú, etc siempre han sido se puede hacer clic sin cambiar la forma del cursor. Y usted no ve los navegadores cambiando la forma del cursor, ya sea cuando se pasa el cursor sobre un elemento de menú o botón de la barra de herramientas.

En una aplicación de escritorio, probablemente no cambiaría el cursor sobre cada elemento de un árbol, incluso si eso muestra información diferente en un panel al lado del árbol. O para cada elemento se puede seleccionar en un listbox? O para los botones de radio o casillas de verificación en un formulario? Entonces, ¿por qué hacerlo para los botones de formulario que en un las aplicaciones de escritorio siempre han sido fáciles de identificar y se puede hacer clic por naturaleza.

No cambiaría la forma del cursor por nada en una aplicación de escritorio que sea (siempre se ha entendido que es) "clickable por naturaleza". Solo usaría formas de cursor "similares a la web" cuando muestre información de una manera" similar a la web". Por ejemplo, partes de texto en las que se puede hacer clic en una cuadrícula en la que normalmente no se puede hacer clic en el texto. De lo contrario me quedaría con las formas de cursor estándar. También ayuda a mantener el control el "ruido" en la interfaz de usuario.


Update in response to comment(s)

@Camilo: Entiendo tu distinción "comando" vs "selección". Incluso añadiría "navegación" a esa mezcla. Sin embargo, todavía no veo la necesidad de cambiar las formas del cursor en un comando ui-element.

La distinción entre navegación y comando puede quedar un poco borrosa si piensa en ambos simplemente como respuestas a las acciones del usuario. Para mí hay una clara distinción entre los dos. La navegación son todas las acciones para abrir formularios, seleccionar elementos, etc. En general, sólo hurgar alrededor... Los comandos son todas las acciones que hacen que los datos cambien, que se envíen notificaciones (correo, mensajes de cualquier tipo) o donde la acción iniciada puede tardar más de un segundo o dos (establecer una conexión, filtrar un conjunto de datos grande).

Libremente: si usted enviara un formulario en la web usando un" POST "(o" DELETE"), probablemente sería un comando, mientras que cualquier otra cosa sería navegación.

De todos modos, una cosa que nunca haría es tener un elemento de interfaz de usuario que naturalmente está más orientado a la navegación y la selección (como un treeview) ejecutar un comando. Así que cuando hacer clic en un elemento treeview probablemente cambiará el contenido de alguna otra parte de la interfaz de usuario, en mis aplicaciones nunca iniciaría un pago...

Como tal, un árbol de posibles servidores a los que conectarse, para mí sigue siendo un elemento de selección. Espero que la conexión real no se haga en un solo clic, pero solo cuando se hace doble clic en un elemento o después de que se haya seleccionado un elemento cuando se hace clic en un botón "conectar". Y por lo tanto, en este caso particular, todavía no usaría un cursor en forma de mano en el árbol.

 9
Author: Marjan Venema,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2010-11-08 12:55:58

Personalmente, he encontrado en mi investigación que esto se percibe generalmente como una de esas situaciones de "siempre lo hemos hecho de esta manera, por lo que es la mejor y esperada manera de hacerlo".

El cursor de mano hizo una de sus primeras apariciones en pilas de Hypercard. Que estaban dirigidos a usuarios menos experimentados. Así que, como muchas cosas, fue recogido y llevado con nosotros.

Sin embargo, debido a su uso inconsistente, no creo que realmente haya una" mejor " opción entre la flecha y la mano... las personas están acostumbradas a uno y / o ambos, por lo que cualquier uso consistente y reflexivo de ambos parece ser generalmente efectivo.

Para mí, aunque voy por la siguiente directriz:

Las flechas son para elementos que obviamente se pueden hacer clic, como cosas que parecen botones, botones de radio, menús desplegables y cosas por el estilo. La mano es útil cuando se necesita dar algo que puede o no aparecer botón-como un poco extra atención. Realmente refuerza la llamada a acción de " click-me!", "click-me!".

También, en Internet, he notado que la mano tiende a indicar elementos que cuando se hace clic, expondrá contenido MÁS relevante con respecto a lo que acaba de hacer clic, mientras que la flecha parece ser más "comando" impulsado, es decir, "hacer esto ahora".

Pero, como he dicho, siempre y cuando sea consistente, los usuarios se ajustarán rápidamente al uso de cualquier cursor de su sitio porque ya han estado expuestos a ambos durante tanto tiempo. El único problema real parece ocurrir cuando usted es inconsistente en su manejo de los dos tipos de cursor.

En mi humilde opinión - No hay nada que sea inherentemente "intuitivo". Intuitivo es solo otra forma de decir "más familiar" o "menos familiar".

 6
Author: exoboy,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-10-13 17:27:56

La mano de AFAIK se eliminó para las aplicaciones cliente fat, y en su lugar tiene botones y otros elementos de usuario que emiten consejos de herramientas o tienen efecto de 'hover'.

Manténgase con el cursor de la mano SOLO si desea imitar la apariencia de la aplicación web.

 1
Author: Daniel Mošmondor,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2010-11-08 13:29:04

Punto Interesante .. déjame tratar de hacerlo simple.

Flechas - son sugestionables para aplicaciones de escritorio + interfaces que son muy intuitivas

Hand - must there for HYPER TEXT, for average user its important to know which text is click-able.

 1
Author: Rajesh R. Nair,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2010-11-09 17:49:50

Creo que también necesitamos recordar que la mano generalmente indica que es un enlace a otro lugar.

No creo que haya una respuesta clara, pero para mí si la plataforma para la que estoy codificando (Windows) solo seguiré los ejemplos del sistema operativo subyacente para mantenerlo consistente, lo que significa que no hay iconos de mano para los botones en Windows.

Como usuario creo que se siente incómodo ver el icono de la mano en una interfaz gráfica de usuario de Windows (a menos que esté haciendo clic en un enlace que me llevará a un sitio web)

 1
Author: dr. evil,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2010-12-21 12:30:30

Vine aquí pensando que esta pregunta tendría una respuesta clara, pero mirar estas respuestas, así como ir a los principales sitios muestra distinciones muy borrosas. A medida que la línea entre la web y el cliente de escritorio se difumina, estoy observando un desenfoque similar de los comportamientos.

Antes... los clientes de escritorio casi siempre usaban un solo cursor, y el cursor causaba que el botón cambiara el estado visible indicando el área de clickability. Las páginas web tenían el cambio de cursor en los enlaces, y ningún comportamiento consistente cuando una acción fue manejada por javascript.

Voy a algunos de los sitios web y aplicaciones más utilizados, me parece... Como usuario, no me importa tanto como pensaba. Los clientes de Deskstop en su mayoría solo cambian el botón, y si el cursor cambia, no me doy cuenta. Los clientes web tienden a cambiar el cursor Y, a menudo, aplican un estado de suspensión de botón visual, y rara vez me doy cuenta cuando no lo hacen.

Hasta que alguien haga un argumento convincente de lo contrario, voy con la regla más simple para nuestro diseño: siempre cambiando el cursor en las acciones y aplicando botones flotantes para los botones utilizados regularmente.

 0
Author: Will Budreau,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-04-03 13:32:39

El cursor "puntero" debe usarse para hiperenlaces o cualquier objeto que funcione como un hiperenlace. de lo contrario, el cursor" predeterminado " debe usarse para todos los demás elementos clicables, como botones, conmutadores, interruptores, menús desplegables, etc. como por naturaleza "debería" verse como un elemento clicable.

Busque la definición de hipervínculo para obtener más información.

Ejemplo: Google Drive

 0
Author: user3018646,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-09-16 22:29:30