Todo lo que necesitas saber sobre la regla CSS cursor

Mientras el mundo se está volviendo loco con las interfaces táctiles, este artículo se centra en un método más tradicional de interacción mediante el ratón. Te sugiero un enfoque de mejora progresiva para manejar el diseño de interacciones; más específicamente, una visión general de la regla cursor de CSS.

La estrategia de diseño móvil se está convirtiendo en algo cada día más importante. La introducción de la comunidad en el diseño responsive está dando forma y definiendo el diseño de las interacciones y controles conforme estos están siendo optimizados para pantallas táctiles. No obstante, el bien establecido y preciso método de interacción con el ratón no va a desaparecer. Este hecho, junto con la naturaleza universal de la web, apoyan las interacciones tradicionales y las táctiles, las optimizaciones deberían ser totalmente aceptadas en el diseño de interfaces web.

Objetivo de un cursor: Comunicar la función

La mayoría del software, desde las aplicaciones para escritorio para los sistemas operativos hasta las simples webs, emplean una gran variedad de punteros de GUI. Estos punteros ayudan en la interacción UI sugiriendo al usuario la tarea que podrían conseguir en ese específico punto dentro de las coordenadas de la aplicación.

¿Quieres introducir o manipular texto? Sabrás que podrás cuando veas un cursor en forma de «barra» (|). ¿Quieres redimensionar una ventana? Sabrás que puedes (y en qué dirección) cuando veas un cursor de redimensionamiento. En el ejemplo de arriba, puedes ver como el cursor sugiere visualmente las posibles direcciones hacia las que la ventana puede ser redimensionada.

Manipulando la representación gráfica del cursor dentro del contexto del control de las funciones de la interfaz, instruyes al usuario sobre cómo, dónde, y cómo podrían manipular el software.

Un ejemplo

Un gran ejemplo sobre como sacar partido al diseño del cursor para comunicar una función puede encontrarse en Adobe Creative Suite.

Los iconos de lasa herramientas en Adobe Creative Suite reflejan visualmente su funcionalidad. En muchos casos cuando una herramienta específica es seleccionada, el cursor se parece bastante o refleja de forma precisa el icono de la herramienta. Este sencillo paradigma de la interfaz de usuario o UI como le llamaremos a partir de ahora (de las siglas en inglés de User Interface), es muy útil para comunicar visualmente el propósito de cada elemento dentro del extensivo conjunto de herramientas de una aplicación.

Cursores en la Web

Los métodos de interacción mejor establecidos como el ratón, los stylus, y los teclados proporcionan una forma adicional de retroalimentación que no está disponible (todavía) en los dispositivos táctiles: hover. Las interacciones hover, permiten a los usuarios explorar y aprender sobre la aplicación a través de elementos hover UI asociados. Estos elementos ayudan a comunicarle al usuario qué objetos son interactivos y cómo pueden ser manipulados.

La naturaleza de la web demanda universalidad y accesibilidad… este tipo de enfoque hacia lo totalmente inclusivo y agnóstico respecto al dispositivo, representa un reto para el diseño.

De todas formas, las interacciones hover (como los «tooltipts» emergentes de ayuda contextual) fueron diseñados para resolver los problemas de UI específicamente referidos al ratón. Debido a que la naturaleza de la web demanda universalidad y accesibilidad, las aplicaciones web deben ser diseñadas para funcionar tanto para los dispositivos táctiles como para los que no lo son. Este enfoque inclusivo y agnóstico desde el punto de vista de los métodos de interacción presenta un desafío único para el diseño. Las interfaces deben tener en cuenta tanto los dispositivos táctiles como aquellos que no lo son.

Aquí tenemos otra vez esa fase: Mejora contínua

Este desafío particular del diseño web de abarcar una cadena de métodos de interacción necesita ser abordado como un proceso de mejora continua (por el cual se abogaba ya desde hace un tiempo).

Aunque el tráfico web proviene cada vez más de dispositivos móviles (y por tanto táctiles), la regla CSS cursor está lejos de quedar obsoleta. Puedes diseñar la interfaz de usuario de un sitio web o aplicación con un enfoque agnóstico respecto al método de interacción que funcione a través de una amplia variedad de dispositivos. Independientemente de que estos dispositivos estén controlados por una pantalla táctil o por un ratón, la regla CSS del cursor funcionará como característica de mejora adicional (aunque no imperativa) de la interfaz para ofrecer «feedback» visual en los dispositivos que la admitan.