Mouse Over

Se trata de una funcionalidad que consiste en activar una acción cuando un usuario mueve su puntero en un área específica de un sitio web. La función del mouse over o eventos del ratón es utilizada con frecuencia para mostrar anuncios pop up.

📌 ¿Qué es mouse over?

Es una herramienta que se utiliza en sitios web para llevar a cabo una acción dependiendo de los movimientos del cursor de un usuario. Este recurso se implementa en el diseño de landing pages con frecuencia, para mostrar una promoción final cuando el usuario intenta cerrar la página.

La mayoría de las veces se trata de un anuncio pop up, de esta forma, es más fácil llamar la atención del usuario sin que éste tenga que hacer clic en un enlace para visualizar una promoción. Sin embargo, actualmente esta función no es muy utilizada en los diseños UX o de experiencia del usuario.

📌 ¿Para qué sirve?

Su principal función es llamar la atención del usuario, usualmente, cuando el mouse over activa un anuncio, éste se abre en toda la pantalla, por lo que tendrá la atención del usuario al Instante. Sin embargo, es un método muy invasivo, por lo que los expertos en diseño web recomiendan no utilizarlo, para garantizar una experiencia de navegación más natural.

Aun así, se puede utilizar para optimizar el contenido, por ejemplo, para proporcionar más información. Es algo que se ve con frecuencia en el sitio web de Wikipedia, el usuario puede posar el puntero sobre un enlace y verá una vista previa de su definición, es un caso muy útil para el UX de la enciclopedia.

📌 Tipos de eventos del ratón

Pero, el mouse over no es la única acción que se lleva a cabo de forma similar, hay varios eventos del ratón que se pueden incluir en la interfaz del usuario, como los siguientes.

  • Out: Se lleva a cabo cuando el cursor abandona una zona determinada, por ejemplo, cuando deja de navegar por la página y se dirige a la zona de pestañas del navegador.
  • Clicked: Se inicia la acción únicamente cuando el cursor hace clic en una zona determinada.
  • Double-clicked: Es similar al anterior, pero se lleva a cabo solo cuando existe doble clic.

📌 Ejemplos del Mouse Over

Un ejemplo muy común es que al pasar el ratón por encima de las diferentes secciones que te ofrece el menú superior, se ilumina cada uno aclarando el color de las letras, ampliando las imágenes y reflejando así el contenido que necesita el usuario.

Esta es la forma correcta de utilizar el mouse over, pero si se utiliza para mostrar anuncios pop up es probable que Google y otros motores de búsqueda sancionen estas prácticas, así el sitio web no podrá posicionarse fácilmente.

ejemplo-mouse over

📌 Más información sobre mouse over

Si tienes la tarea de programar la experiencia del usuario en tu sitio web, debes tener en cuenta cómo tener acceso a estos eventos con diferentes herramientas. Mira los siguientes enlaces para saber más.

Pin It on Pinterest