Consejos de diseño UX para punteros de ratón personalizados

Diseño UX
16/7/2021
|
Torresburriel Estudio
Punteros de ratón personalizados

Una de las tendencias de diseño web que estamos viendo de manera más insistente es el uso de punteros de ratón personalizados. Este recurso estético puede ayudar a mejorar la experiencia de usuario, por ejemplo, añadiendo un mayor contexto a la información visual en la pantalla si el cursor se adapta a la acción a realizar.

Junto a las clásicas opciones de accesibilidad para personas con baja visión (halos o tamaños), también hay que tener en cuenta los comportamientos habituales de cambio del cursor:

  • En áreas de texto para escribir o seleccionar
  • Cambios de tamaño o de anchura o altura
  • Botones o elementos accionables

La UX en los videojuegos lleva aplicando los cursores personalizados desde hace mucho tiempo y de ello podemos extraer varias conclusiones a aplicar al diseño del cursor de nuestro producto digital, siendo la mayor de ellas el contexto y la adaptación visual.

Pero primero, empecemos por identificar nuestro objetivo.

punteros de raton
Los 12 tipos de punteros más habituales, vía The Cold Wire

Por qué modificar el comportamiento del cursor

La primera razón suele ser puramente estética: mantener la coherencia visual con el resto de elementos de diseño de la UI del producto o web. Pero hay otras razones:

  1. Dar sentido a las interacciones: por ejemplo, cambiando el cursor básico por una flecha para indicar hacia dónde se producirá el movimiento. 
  2. Mostrar al usuario la acción: cambiar el cursor por el mismo icono de la acción (lápiz, área de selección) permite evitar dudas en el resultado o la selección de la misma.
  3. Mostrar estados del sistema: aunque la temida pelota arcoiris de los Mac siempre genere cierta ansiedad, hay momentos en los que su uso puede indicar un estado de espera o un posible bloqueo.

Consejos de diseño

Además de tener en cuenta ciertos componentes clave como la accesibilidad y todos los principios de diseño, el primer condicionante ha de ser siempre la integración con el diseño general, el sentido de la misma.

No obstante, podemos identificar otros consejos que nos permitirán entender si el uso de un cursor o puntero de ratón personalizado es útil para nuestra experiencia y, en general, cumple con los objetivos que nos marcamos. 

Usar varios cursores

Utilizar diferentes formas de cursor puede ayudarnos a generar una sensación de aspecto cuidado, además de generar contexto de cara a su uso.

En este sentido, modificar el comportamiento del cursor en función del elemento con el que se interactúa, ayuda a comprender mejor la acción a realizar. 

No obstante, deberemos hacer un trabajo de revisión de los tamaños, ampliando o reduciendo el puntero en función del elemento con el que se interactúa.

Adaptarlos a la interacción

Toca insistir en esto: el uso de convenciones permite la comprensión de productos, especialmente cuando las acciones han de ser intuitivas.

Punteros de ratón personalizados en la web de Photopea
La interfaz de Photopea ajusta los cursores en función de la acción

Por ejemplo, modificar el cursor en una navegación a pantalla completa usando flechas direccionales, permitirá entender cuál es el movimiento que deberá realizar el usuario, incluso mejor que modificarlo imitando un ratón que hace scroll. ¿Por qué?

Adaptarlos al usuario

Siguiendo con el ejemplo anterior, no hay una única forma de ratón. En ocasiones se ha modificado el cursor estándar para mostrar un scroll con una forma muy similar al Mighty Mouse de Apple, pero no es ni de lejos el ratón más utilizado. 

Por eso, deberemos tener en cuenta a qué tipo de usuario nos vamos a dirigir y hacer nuestro diseño adaptado a sus circunstancias. No podemos hablar de user centered design si aplicamos sesgos personales o no trabajamos lo suficiente la empatía.

Saber cuándo usarlo

Si queremos usarlo, deberemos pensar en las circunstancias de uso de ese puntero. Por ejemplo, en muchos productos generalistas se opta por no realizar cambios respecto al aspecto del sistema. Las razones son muy simples: al ir dirigidas a un número indeterminado de personas, el comportamiento predeterminado es más que suficiente.

Sin embargo, si nuestro producto tiene un público objetivo muy concreto, podemos utilizar cursores que se adapten a esas circunstancias. 

Volviendo a los videojuegos que comentábamos antes, el cambio de puntero permite conocer con qué tipo de elemento se está interactuando en ese momento y afinar la precisión del mismo. De esta manera, se consigue mejorar la comprensión y jugabilidad general.

También hemos de tener en cuenta que el cambio de diseño puede implicar problemas de rendimiento o visuales en equipos antiguos, sobre todo si vamos a utilizar toda la potencia que actualmente nos ofrecen las tarjetas gráficas. Esto puede perjudicar la experiencia de uso general a la hora de navegar por el diseño.

Ojo con las pantallas táctiles

Aunque podría ser parte del consejo anterior, es importante destacar que los cursores en pantallas táctiles, especialmente en móviles, no son una buena idea. 

Probablemente ocuparán un espacio precioso en pantalla, además de ocultar elementos o impedir la lectura. En este caso, además la utilización de los dedos es suficiente para conocer en todo momento dónde se realizará la acción o desplazamiento, aunque puede ser útil incorporar una microinteracción para el caso de acciones que requieren un pulsar-y-mantener (tap and hold actions en inglés), ayudando a situar el rango máximo de acción.

ejemplo puntero personalizado acción tap hold
Ejemplo de acción de clic-arrastrar en sssolitaire.com

Cómo modificar el cursor

Aunque hay muchos manuales por ahí, nos ha gustado especialmente por su sencillez este de Suprabha en dev.to en el que, además de un repaso a todos los cursores soportados vía CSS, también muestra algunos ejemplos de cursores personalizados y el código para añadirlos a nuestro producto.

En conclusión, hemos de tener en cuenta que el cambio en el cursor ha de hacerse siempre teniendo en cuenta quién usará nuestro producto, por lo que será importante identificar el contexto de la acción y si no dificultará la comprensión de la misma.

¿Quieres darnos tu impresión sobre este post?

Deja una respuesta

Aquí va tu texto personalizado.

Blog

Nos encanta compartir lo que sabemos sobre diseño de producto y experiencia de usuario.
Ver todo el blog
Puedes consultarnos lo que necesites
Envíanos un mensaje
Nombre
Email
Mensaje
Gracias por escribirnos. Nuestro equipo se pondrá en contacto contigo tan pronto como sea posible.
Ha ocurrido un error. Estamos trabajando para resolverlo. Puedes escribirnos al chat.