Mejorar la usabilidad cambiando el cursor con CSS
Diseño web, Maquetación HTML y CSS, Usabilidad Añadir comentario
A medida que día a dia continua imponiéndose el uso de Ajax a la hora de crear webs más dinámicas, se hace más necesario proveer un mejor feedback al usuario, de forma que le permita saber de forma instantánea y con claridad qué está trabajando con elementos con los que puede interactuar directamente.
Muchos usuarios aún no están acostumbrados y tienen problemas para identificar elementos que generalmente no suelen ser clickables, como filas o columnas de tablas, divs, etc. .. por lo que en éste caso, puede ser muy util la posibilidad de cambiar el cursor para que puedan saber que hacer click sobre ese objeto realizará alguna acción concreta.
Pongamos el ejemplo de un link que abre un cuadro de diálogo o nos lleva a una página con ayuda sobre un tema en concreto (tooltips, acrónimos…):
En éste caso hemos incluido 2 links, que abren en una nueva ventana las respectivas páginas de la wikipedia. Ambos links incluyen un título que ofrece suficiente información acerca del vínculo a nivel semántico.
A continuación el mismo ejemplo, pero en éste caso ambos links tienen el estilo ‘cursor:help’ aplicado.
En éste segundo caso una vez situamos el cursor en cualquiera de los vínculos, éste cambia de forma automática a un cursor de ayuda, lo cual ofrece al usuario una referencia visual inmediata acerca del objetivo del link.
Si bien puede no ser el mejor ejemplo, ilustra perfectamente la utilidad de los cursores. Además, son especialmente útiles en aplicaciones que ofrecen interactividad a la hora de mover, reordenar o redimensionar elementos, para los que disponemos de cursores específicos que podemos utilizar. Ejemplos claros de ésto puede ser Facebook o Netvibes.
Ver lista de cursores disponibles y compatibilidad con navegadores >
Comentarios recientes