Son tantos los factores que influyen en la experiencia del usuario que pueden pasarse por alto fácilmente. Por ejemplo, los cursores son un elemento subestimado que puede tener un gran impacto en la UX de un sitio web.
Con un uso adecuado, cursores informar sobre lo que está sucediendo o lo que es posible en el sitio. Por ejemplo, cuando pasa el cursor sobre un elemento de la tabla, el cursor puede cambiar para indicar que el usuario puede cambiar el tamaño de la fila o columna. O bien, cuando intenta arrastrar y soltar una imagen en una sección específica de un sitio web, el cursor puede cambiar para indicar que la acción está prohibida.
Además de señalar una funcionalidad específica, los cursores se pueden animar para agregar algo de interactividad a la experiencia de visualización del usuario. Echemos un vistazo a algunos de los posibles efectos e ideas del cursor a continuación, y luego lo guiaremos a través del proceso de creación de un cursor animado.
Efectos de cursor
Los cursores personalizados son populares en el diseño de sitios web porque le brindan la oportunidad de sorprender a los visitantes que esperan el puntero del mouse predeterminado de su sistema operativo. Son especialmente populares en sitios web creativos como agencias y carteras de diseñadores. A continuación se muestran sitios web reales con efectos de cursor únicos.
1. Efecto de cursor giratorio
Advanced Team utiliza un efecto de cursor avanzado que hace que la ruta de desplazamiento del usuario parezca un despertar o una perturbación del agua del arco iris. Esto ayuda al usuario a realizar un seguimiento de dónde se encuentra en el sitio web y agrega puntos únicos a ese diseño de sitio web en blanco y negro.
Lo que nos gusta: El efecto de cursor de remolino del arcoíris contrasta brillantemente con el fondo negro intenso.
2. Efecto de cursor de linterna
En el sitio web interactivo Moooi Paper Play, los usuarios se desplazan a través de diferentes «capas inmersivas» que contienen diferentes productos. En una capa con revestimiento de paredes Dandelion Cranes, el cursor tiene un efecto de linterna, lo que permite al usuario iluminar diferentes elementos en la página.
Lo que nos gusta: El efecto de cursor de linterna le da al usuario control sobre el desplazamiento.
3. Efecto de distorsión del cursor
Utsobo es uno de los mejores sitios web interactivos. A medida que los usuarios mueven el cursor por la página, el fondo se distorsiona y se vuelve más grande y oscuro. Se alienta a los usuarios a «dibujar en la página» manteniendo presionado y arrastrando el cursor. Esto congelará temporalmente el efecto del cursor para que aparezca como pinceladas en la imagen.
Lo que nos gusta: El efecto de distorsión del cursor crea una experiencia interactiva única, haciendo que el usuario se sienta como si ya fuera parte de un proceso de diseño colaborativo.
4. Efecto de cursor de ojo
Thinkingbox tiene un cursor de punto naranja único con un efecto de sombra. Esto se convierte en un círculo blanco con un ícono de ojo naranja cuando pasa el mouse sobre las miniaturas de video en la página. Esta es una excelente manera de que sus visitantes sepan que estos son videos, no imágenes.
Lo que nos gusta: El efecto de cursor de ojo distingue sutilmente los videos de otros elementos en la página.
5. Sigue el efecto del cursor
Tappezzeria Novecento tiene un cursor único que consta de dos círculos: uno actúa como el puntero del mouse predeterminado, el otro parece un efecto de sombra pero comienza a «seguir» el cursor a medida que te mueves por la página. Este efecto hace que el cursor sea más visible, lo que facilita a los usuarios ubicar su lugar y navegar a través de un sitio web rico en contenido.
Lo que nos gusta: El efecto de cursor a continuación facilita a los lectores navegar por este sitio audaz y rico en contenido.
6. Efecto de cursor de texto
En la página de CraieCraie, el cursor es un punto negro que encaja perfectamente con el logo. Sin embargo, cuando pasa el cursor sobre una foto de cartera, el punto negro se transforma en un círculo transparente que contiene la palabra. En la captura de pantalla anterior, notará que el cursor contiene la palabra découvrir, que significa «descubrir» o «descubrir». Esto anima a los usuarios a obtener más información sobre este proyecto en particular.
Lo que nos gusta: El efecto de cursor de texto ayuda a informar al usuario qué hacer a continuación en el sitio.
7. Efecto de cursor de flecha
Mutt utiliza efectos de cursor para mejorar la navegación de su sitio de cartera único. A medida que el usuario se desplaza hacia arriba o hacia abajo en la página, el cursor se convierte en una flecha que le indica a dónde ir a continuación.
Lo que nos gusta: El efecto de cursor de flecha ayuda a guiar el viaje del usuario y lo anima a continuar navegando.
8. El efecto del cursor giratorio.
thePenTool combina animaciones flotantes y efectos de cursor para ayudar a los usuarios a explorar los diversos productos que ofrecen. Cuando el usuario se desplaza sobre el producto, el color de fondo cambia y el cursor cambia a un lápiz en el centro del círculo negro. La rueda también tiene un texto giratorio que anima a los usuarios a familiarizarse con el producto.
Lo que nos gusta: El efecto de cursor giratorio ayuda a llamar la atención del usuario sobre cada producto.
9. Efecto de desvanecimiento del cursor
SIX SOCKS tiene uno de los efectos de cursor más exclusivos. Cuando ingresa a la página por primera vez, el puntero del mouse está rodeado por un texto giratorio que dice «haga clic y arrastre». Una vez hecho esto, aparecerán elementos basados en el diseño de su tarjeta.
Lo que nos gusta: El efecto de desvanecimiento del cursor es una forma única e interactiva de dar a los usuarios una idea de la apariencia del producto.
10. Efecto cursor final
PPP utiliza el efecto de seguimiento del cursor para marcar la ruta de desplazamiento del usuario. A medida que se desplaza por la página, aparecerá una serie de círculos de colores detrás del cursor. Es una reminiscencia de un juego retro de serpiente para PC, pero con un toque moderno y divertido. Esta es precisamente una marca con PPP que tiene como objetivo diseñar experiencias que combinen diversión y gamificación.
Lo que nos gusta: El efecto de cursor flotante no solo mejora la navegación, sino que también se adapta perfectamente a la marca.
Ideas de cursores
Si se siente inspirado por los ejemplos anteriores, desea implementar efectos de cursor en su propio sitio. A continuación se presentan ideas tomadas de CodePen para que pueda copiar y pegar fácilmente el código.
1. Cursor de sombra
ver la pluma Cursor animado de Kinet por Georgy Marchuk (@Gmrchk) en CódigoPen.
En el ejemplo anterior, el puntero del mouse predeterminado tiene una sombra azul. Sigue al puntero a medida que se mueve, luego vuelve a su lugar cuando el puntero se detiene.
Lo que nos gusta: Este cursor de color ayuda a los usuarios a ubicar fácilmente dónde se encuentran en una página web en blanco y negro.
2. Cursor de icono animado al pasar el cursor por encima
ver la pluma Cursor animado al pasar el mouse por Nharox (@Nharox) en CódigoPen.
Arriba, verá el puntero del mouse predeterminado de su sistema operativo, a menos que pase el mouse sobre uno de los bloques de colores. Luego, el cursor se vuelve animado, comenzando con el ícono «X» y girando hasta que se convierte en un ícono más blanco en un círculo.
Lo que nos gusta: Este cursor distingue sutilmente los elementos en los que se puede hacer clic del fondo de la página web.
3. Finalizar cursor
ver la pluma Reaccionar cursor personalizado animado por Stephen Scaff (@Stephenscaff) en CódigoPen.
Este cursor combina los objetivos de los dos ejemplos anteriores. El cursor de punto rojo se mueve a través del punto translúcido a medida que se mueve. Sin embargo, cambia a una sombra cuando el cursor está sobre un enlace.
Lo que nos gusta: Este cursor hace que el desplazamiento sea más atractivo y distingue los enlaces del texto.
4. Cursor con texto giratorio
ver la pluma Interacción de cursor animado por Sikriti Dakua (@dev_loop) en CódigoPen.
En el Pen de arriba, verás un cursor formado por dos círculos. Cuando pase el cursor sobre uno de los elementos, el segundo círculo se convertirá en texto. Por ejemplo, si pasa el cursor sobre el ícono de YouTube, el círculo estará rodeado por el texto giratorio «YouTube». Si pasas el cursor sobre el enlace, el texto giratorio dirá «¡Ve aquí!»
Lo que nos gusta: Este cursor ayuda a brindar a los usuarios un contexto adicional para que sepan exactamente sobre qué están pasando el mouse y puedan alejarse con confianza de la página o continuar desplazándose.
5. Extender el cursor sobre el hover
ver la pluma Cursor animado + efecto de desplazamiento de enlace por Roeslein (@roesinn) en CódigoPen.
En el Pen de arriba, el cursor comienza como un círculo blanco. Cuando pasas el cursor sobre una de las palabras, el círculo blanco se ensancha. El cursor se convierte en un puntero de mano con una sombra blanca. El cursor parece estar enfocado en el fondo negro de la página web.
Lo que nos gusta: Este efecto de cursor hace que el texto que representa las diversas opciones de navegación sea el punto focal al pasar el mouse sobre ellas.
Si quieres saber cómo codificar este tipo de cursor animado desde cero, échale un vistazo. vídeo de CodeGrid:
Cómo hacer un cursor animado
Tiene dos opciones para crear un cursor animado. Puede usar un editor como IcoFX para crear un cursor animado para su sistema operativo, o puede codificarlo desde cero e incrustarlo en su sitio web. Este último requiere HTML, CSS y JavaScript, y es mejor para programadores experimentados.
Para usuarios con menos experiencia técnica, echemos un vistazo a cómo crear un cursor animado con Editor de IcoFX.
Cómo hacer un cursor animado con IcoFX
IcoFX le permite crear un cursor personalizado o personalizar uno de los cursores animados precargados. Describiremos el proceso para crear un cursor personalizado a continuación.
1. Abra el editor IcoFX y seleccione el elemento de menú «Archivo / Nuevo / Nuevo cursor…» para abrir el cuadro de diálogo Nuevo cursor.
2. Luego, seleccione el color y el tamaño del cursor que desea crear y seleccione el botón de opción Cursor animado. haga clic aquí OKEY.
3. Use el elemento de menú «Imagen / Agregar nueva imagen» para insertar varios marcos para animar el cursor.
4. Si es necesario, puede reorganizar los marcos, eliminarlos o duplicarlos.
5. Use el elemento de menú «Imagen / Animación / Tasa de cuadros …» para cambiar la tasa de cuadros.
6. Use el elemento de menú «Imagen / Cursor / Punto caliente …» para configurar el punto de acceso del cursor.
7. Use el elemento de menú «Imagen / Cursor / Test Cursor …» para probar esto.
8. Cuando esté listo, use el elemento de menú «Archivo / Guardar …» para guardarlo.
Cómo crear un cursor animado usando CSS y JavaScript
Si prefiere construir desde cero, aquí tiene vídeo de DevEd que muestra cómo crear un cursor animado usando CSS y JavaScript:
Animando el cursor
Ya sea que desee animar el cursor de su sistema operativo o los sitios web, esta tendencia de diseño puede ayudarlo a personalizar su computadora y su sitio web.
