Las microinteracciones son una excelente manera de mejorar la experiencia de usuario de su sitio web. Y en esta publicación, aprenderá exactamente qué son, además de cómo usar las microinteracciones en WordPress sin necesidad de ningún conocimiento técnico especial.

Las ‘microinteracciones’ son pequeños momentos en los que su sitio responde a las acciones de un visitante. Sin embargo, no dejes que la parte ‘micro’ te engañe. Prestar atención a estos pequeños detalles en realidad puede generar algunos efectos positivos bastante grandes, como una mayor participación del usuario e incluso conversiones adicionales .

Una introducción a las microinteracciones

Si bien es posible que no esté familiarizado con el término «microinteracciones», no hay duda de que las ha visto en acción. De hecho, esta técnica se ha vuelto tan omnipresente en la web que ahora se espera de la mayoría de los sitios.

Una microinteracción es una pequeña pieza de contenido dinámico en una página web. En otras palabras, cuando un usuario realiza una acción específica, algo menor pero notorio cambia en la página:

Animaciones del botón 'me gusta' de Facebook.

En el ejemplo anterior, puede ver que a medida que el espectador pasa el mouse sobre cada ícono en Facebook , se agranda ligeramente y se mueve. Probablemente encuentre características como esta todo el tiempo, a veces sin darse cuenta.

Hay muchos tipos de microinteracciones , pero algunas de las más comunes incluyen:

  • Un elemento (como un botón o un enlace) que cambia de tamaño o color cuando se pasa el cursor por encima o se hace clic en él.
  • Un elemento emergente, como información sobre herramientas u opciones para compartir en redes sociales , que aparece cuando resaltas texto o pasas el cursor sobre una parte específica de la página.
  • Pequeñas animaciones que se reproducen en respuesta a una acción particular del usuario, como animaciones de «estado» para informarle que hay una descarga en curso o que se está procesando una compra.

Además, hay muchas razones para implementar este tipo de microinteracciones en tu propio sitio. Para empezar, los usuarios esperan verlos en este punto y hacen que sus páginas sean más divertidas. Además, brindan comentarios directos sobre la acción de un usuario e incluso pueden servir como una pequeña recompensa psicológica por interactuar con su sitio.

Resulta que el uso de microinteracciones es una de las mejores formas de mejorar la experiencia del usuario (UX) en su sitio web. Cuando se utilizan como parte de su llamada a la acción (CTA) , pueden incluso aumentar las ventas y otras conversiones .

Las microinteracciones brindan tantos beneficios que no hay razón para no incluirlas en su sitio de alguna manera. Esto significa que deberá aprender cómo puede emplear microinteracciones en WordPress.

Cómo usar microinteracciones en WordPress (3 técnicas fáciles)

Hay muchos tipos de microinteracciones y una forma casi infinita de usarlas en tu sitio. Para comenzar, le mostraremos cómo incorporar rápidamente algunas de las microinteracciones más comunes en WordPress. ¡Vamos a ver!

1. Agregue animaciones divertidas a elementos importantes

Comencemos con las animaciones. Esto es algo que mencionamos anteriormente, cuando vimos los botones de «me gusta» de Facebook. Puede crear un efecto similar haciendo que los elementos de sus páginas reproduzcan animaciones breves en respuesta a activadores específicos (como un clic).

Uno de nuestros complementos favoritos para hacer esto es Animate It!:


¡Anímalo!

Este complemento es gratuito, fácil de usar y ofrece muchas opciones de personalización. Sin embargo, no es necesario que cree elementos nuevos. En cambio, puede agregar animaciones a prácticamente cualquier elemento preexistente en su sitio, incluidos texto simple, enlaces, botones e incluso imágenes.

Para usar Animate It!, primero deberá instalarlo y activarlo (naturalmente). Luego, simplemente abra una página o publicación que contenga el elemento que desea animar:

El editor de WordPress con un botón CTA.

Aquí, puede ver que tenemos un CTA simple y un botón en el que queremos que los visitantes hagan clic (agregado usando el complemento MaxButtons ):

Una simple página de WordPress con un botón.

Hagamos que este botón sea un poco más atractivo. Para hacer esto, lo resaltaremos y seleccionaremos el botón rojo Animate It! icono en la barra de herramientas de la página de edición. Esto da como resultado un menú de configuración bastante completo:

¡Anímalo!  ajustes.

Aquí podemos seleccionar el tipo de animación y su duración. Incluso podemos configurar diferentes animaciones para que se activen en función del rollover. Además, en Opciones , podemos decidir si se repetirá y elegir el disparador para que suceda:

¡Anímalo adicional!  ajustes.

Para nuestro ejemplo, elegiremos la animación Pulse . Haremos que se repita y lo configuraremos para que se dispare cuando se desplace el botón, antes de finalmente hacer clic en el  botón Insertar :

¡Anímalo!  código en el editor de WordPress.

Como puede ver, el botón ahora está encerrado en un código que refleja la configuración que elegimos. Veámoslo en la parte delantera:

un ejemplo de microinteracciones en wordpress

Esto es mucho más interesante que un botón estático y alienta al usuario a hacer clic en nuestra página de ventas. Hay muchas cosas que puede lograr con este complemento, por lo que definitivamente le recomendamos que lo pruebe usted mismo.

2. Muestre información útil sobre herramientas para sus lectores

Las animaciones son divertidas, pero las microinteracciones en WordPress también pueden ser informativas. Demostremos de qué estamos hablando usando «información sobre herramientas». Estos son pequeños fragmentos de información que aparecen al pasar el cursor sobre una sección específica de texto, un enlace u otro elemento. Esta es una excelente manera de proporcionar un valor adicional a los visitantes de su sitio web.

Puede explicar un término, concepto o instrucción con mayor claridad sin ocupar espacio adicional en la página. Además, al hacer que la información sobre herramientas sea un elemento opcional, no se arriesga a ser condescendiente con los lectores que no necesitan la información.

Para implementar microinteracciones de información sobre herramientas en WordPress, puede usar el complemento gratuito Simple Tooltips:


Información sobre herramientas simples

Una vez que haya activado el complemento, obtendrá un nuevo botón Agregar información sobre herramientas en el editor de WordPress:

El ícono Simple Tooltips en el editor de WordPress.

Al hacer clic en el icono, se obtendrá un fragmento de código. Querrá reemplazar Este es el contenido de la burbuja de información sobre herramientas  con lo que quiera que diga la información sobre herramientas. Luego, pegue el texto, la imagen u otro elemento que desee usar en lugar de Esto activa la información sobre herramientas :

El código de información sobre herramientas simple.

Si desea personalizar cómo se ve realmente su información sobre herramientas, deberá visitar Información sobre herramientas simple> Configuración dentro de su panel de WordPress:

La configuración de información sobre herramientas simple.

Aquí puede elegir colores de fondo y de texto , cambiar la posición de la información sobre herramientas y mucho más. No hay muchas opciones, pero el resultado será una información sobre herramientas limpia, legible y que encaja perfectamente con su contenido:

Un GIF del complemento Simple Tooltips.

¡No hay nada más simple que eso!

3. Intercambio social rápido en sus publicaciones

Las dos técnicas anteriores crean microinteracciones que se pueden usar para una variedad de propósitos. Sin embargo, algunas microinteracciones en WordPress están diseñadas para lograr un objetivo específico. Tal es el caso de nuestro último ejemplo.

Animar a los visitantes a compartir el contenido de tu sitio web es una excelente estrategia. Consigues que interactúen más directamente con tu contenido y, a cambio, recibes algo de marketing gratuito. Además, se puede decir que las redes sociales son la herramienta más poderosa que tiene para crear una audiencia en línea.

Afortunadamente, puede usar microinteracciones en WordPress para que a los usuarios les resulte sencillo compartir fragmentos de texto que consideren valiosos. Todo lo que necesitará es el complemento Resaltar y compartir:


Resaltar y compartir: resaltar texto y compartirlo

Una vez más, esta es una herramienta que hemos seleccionado porque es gratuita, fácil de usar y confiable. Además, requiere muy poca configuración. De hecho, las características del complemento se implementarán automáticamente al momento de la instalación.

Esencialmente, si un visitante resalta parte del texto en una de sus publicaciones de WordPress, el complemento le presenta algunos botones para compartir:

Botones de redes sociales en texto resaltado.

Al hacer clic en uno de estos botones, se abrirá el perfil del visitante y se le pedirá que cree una publicación que incluya tanto el texto que resaltaron como la URL de la página de la que proviene.

Si lo desea, puede modificar la configuración del complemento para personalizar esta función. Para hacerlo, visite la nueva pestaña Configuración> Resaltar y compartir dentro de WordPress:

La configuración del complemento Resaltar y compartir.

Aquí puede decidir para qué tipo de contenido se habilitarán los botones para compartir en redes sociales, agregar más plataformas de redes sociales e incluso incluir enlaces cortos. Además, puede optar por utilizar iconos simples en los botones:

Un GIF del complemento Resaltar y compartir.

Con esta simple microinteracción, ha hecho que sea mucho más probable que los usuarios piensen en compartir su contenido con sus propias redes sociales.

Conclusión

En las secciones anteriores, le mostramos lo fácil que es crear microinteracciones divertidas y útiles en WordPress. En resumen, aquí hay tres de las técnicas más simples:

  1. Agregue animaciones divertidas a elementos importantes.
  2. Muestre información útil sobre herramientas para sus lectores.
  3. Intercambio social rápido en sus publicaciones.

¿Hay otros tipos de microinteracciones que le gustaría usar en su sitio de WordPress? ¡Comparta sus pensamientos con nosotros en la sección de comentarios a continuación!

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Nuestra web usa cookies para mejorar tu experiencia.