No es novedad que cada vez más usuarios navegan por Internet desde dispositivos móviles. Una interesante infografía de la agencia Logan recoge varios datos que reflejan este crecimiento a nivel nacional. Por ejemplo, para 2017 se espera que el 61% de los usuarios argentinos utilicen sus celulares como medio principal de conexión a Internet. Esta expansión es todavía más significativa en países del Primer Mundo.

El crecimiento de la conectividad mobile implica que el mouse esté perdiendo terreno frente a la interacción táctil. Sin embargo, el tradicional «ratón» todavía está lejos de desaparecer. Eso es lo que Microsoft no tuvo en cuenta al diseñar Windows 8, un sistema operativo pensado mayormente para tablets que recibió fuertes críticas por su desempeño en escritorio.

Por eso, vale la pena conocer el comportamiento ideal de los cursores. En una página web, el cursor adopta múltiples formas (flecha, dedo, etc.) para dar una idea del tipo de contenido que tiene debajo. Por ejemplo, es ideal que al pasar sobre un enlace la flecha se convierta en una mano con el dedo índice en alto. Pero hay muchas otras posibilidades. ¿Cuál es el tipo de cursor más adecuado para cada caso? A continuación presentamos los más comunes. Para conocer su implementación en CSS, sugerimos leer esta tabla, que indica los diferentes valores que puede tomar la propiedad cursor, con su posible representación visual (varían según el sistema operativo).

Flecha

Uso general. Existe cierto debate sobre si este sería el cursor indicado para los controles de los formularios, como botones de envío, selectores, radio buttons, etc. Algunos piensan que si el botón está bien diseñado, el usuario no necesitará de un cursor especial para reconocerlo como un botón, por lo que podemos conservar la flecha. Además, el usuario está acostumbrado a los programas de escritorio, donde los botones conservan el cursor por defecto.

Otros consideran que todos los controles «cliqueables» deberían usar el cursor dedo. Sin embargo, con ese criterio deberíamos usar el dedo incluso para selectores, radio buttons, checkboxes, selectores de fecha, etc., lo cual generaría un comportamiento extraño para la mayoría de los usuarios.

Dedo

• Enlaces de texto, imagen o multimedia (por ejemplo, banners rich media). Esto incluye enlaces que tienen aspecto de botones pero no están incluidos en ningún formulario, por lo que no entran en la categoría de botón (ver punto anterior).
• Controles para reproducir audio o video (play, stop, etc.).
• Switches y controles deslizantes de rangos.
• Otros controles de interfaz (abrir menú, cerrar modal, avanzar o retroceder en un slider, etc.).

Texto

Toda clase de texto, excepto cuando está enlazado o incrustado en una imagen.

Ayuda

Se usa en conjunto con el atributo title, para mostrar un tooltip con información adicional sobre una frase.

Cruz

Indica un punto preciso sobre un gráfico (por ejemplo, un sistema de ejes cartesianos en una aplicación de matemática).

Mano

Indica que podemos desplazarnos sobre el contenido manteniendo presionado el botón izquierdo del mouse, moviendo el cursor y luego soltando. Especialmente indicado para mapas.

Espera

El primer cursor indica que el sitio está cargando información pero el usuario todavía puede interactuar con él. El segundo le pide al usuario que espere antes de continuar navegando. La forma del cursor varía según el sistema operativo, pudiendo ser un reloj de arena o bien una rueda giratoria (spinner).

Estos cursores no son de uso frecuente en interfaces web. Por lo general, para indicar que se está cargando un elemento no se usa un cursor especial, sino que se muestra un spinner o una barra de progreso con diseño propio.

Mover y desplazarse

El valor move indica que el objeto que está debajo del cursor puede moverse (interfaz de arrastrar y soltar); mientras que all-scroll indica que se puede realizar scroll tanto vertical como horizontalmente. En Windows, ambos cursores se ven iguales, lo cual puede dar lugar a confusiones. Sin embargo, el cursor de mano (ya mencionado anteriormente) cumple una función parecida a la de all-scroll, por lo que se recomienda usarlo en su lugar.

Cursores para celdas

Estos cursores son indicados para hojas de cálculo y tablas, permitiéndonos transformar y seleccionar celdas. Serían útiles para aplicaciones online similares a Word o Excel (por ejemplo, el editor de texto de WordPress y Google Spreadsheets).

Personalizado

Existen varias formas de reemplazar el cursor del sistema operativo por una imagen personalizada. Esto puede ser un detalle divertido, pero confunde gravemente al usuario y entorpece el movimiento del cursor sobre la pantalla. Se lo desaconseja por completo, exceptuando casos donde realmente se necesite un cursor que no esté incluido entre los anteriores.

Existen otros cursores, pero todavía no han sido plenamente adoptados por todos los browsers.

Con un uso inteligente de los cursores, ayudaremos al usuario a interactuar de la mejor manera posible con nuestro sitio web.