Inspiración para crear deliciosas microinteracciones en su sitio
Publicado: 2022-04-27Aterrizar en un gran sitio de WordPress se siente como encontrar dinero que olvidaste cuando metes la mano en el bolsillo. Es inesperado, pero familiar. Se carga rápido, se ve increíble y puede alegrarte el día por completo.
Toda la experiencia está increíblemente bien pensada. Ni siquiera comienza a escribir ideas sobre cómo puede implementar este tipo de UX en su propio sitio hasta que tiene al menos cinco páginas de profundidad.
“La diferencia entre un sitio sólido y uno increíble radica en los detalles. ”
La funcionalidad es importante, pero el diferenciador real entre los sitios web decentes es el trabajo que se dedica a los pequeños aspectos que catapultan la experiencia del usuario al siguiente nivel.
Introduzca: microinteracciones.
Una microinteracción es la realización de una sola tarea. Presionando snooze en la alarma. Haciendo clic en Me gusta en Facebook. Saltando a la siguiente canción en Spotify.
La humilde microinteracción no parece gran cosa en la superficie. Es simple, discreto y completamente autoexplicativo. Pero es esa pequeña interacción, casi invisible, la que hace que un sitio web pase de ser una mera funcionalidad a una usabilidad alucinante.
Si desea que su sitio de WordPress vaya más allá, los pequeños detalles son increíblemente importantes. Son lo que realmente eleva un diseño sólido al nivel que inspira delirantes suspiros de placer.
Desglosando las microinteracciones
Una microinteracción se compone de cuatro partes separadas: el activador, las reglas, la retroalimentación y los bucles y modos.
1. El gatillo
El desencadenante es la parte física real que desencadena la experiencia. Puede ser manual, como un botón de inicio de sesión, o automático, como una ventana emergente de salida.
Los activadores automáticos del sistema elevan un poco más la experiencia del usuario al moldear la interacción según sus preferencias y acciones pasadas. Por lo tanto, si visitó un sitio varias veces y descargó tipos específicos de contenido, podría obtener un tipo de ventana emergente completamente diferente en comparación con alguien que llegó allí por primera vez.
2. Las reglas
Las reglas definen el alcance de la interacción y determinan cómo funciona todo. Deben ser invisibles para el usuario y ocurrir estrictamente entre bastidores.
3. La retroalimentación
La retroalimentación es lo que el usuario realmente ve. Es la barra en la parte superior de un formulario de suscripción que le indica que queda el 50 % o la caricatura de carga cuando inicia sesión para acceder al contenido restringido.
4. Bucles
El ciclo dicta la duración de la microinteracción. Determina si tiene un final definido o continúa.
El verdadero poder de las microinteracciones
Las microinteracciones crean una sensación de continuidad. Un sentido de cuidado. Hacen que un sitio se sienta menos intimidante y le permiten al usuario saber claramente lo que está sucediendo en un momento dado.
La mayoría de nosotros nos angustiamos un poco cuando nos enfrentamos a lo desconocido. Cuando vamos a una página en particular, generalmente es con un propósito en mente, como leer una publicación de blog, suscribirnos a un nuevo producto o descargar un gran recurso. Y si no funciona como esperamos, es muy frustrante.
Las microinteracciones ayudan a agregar un toque personal a la falta de familiaridad que se avecina. Les hacen saber a sus usuarios que están en el camino correcto, que van a llegar exactamente a donde quieren estar.
Algunas microinteracciones deliciosas
Los tipos específicos de microinteracciones que incluye en su sitio web dependen del propósito de su sitio. ¿Por qué hay gente allí y cómo puedes facilitarles las cosas?
Lo que funciona mejor depende de tu marca, tu producto, tu audiencia y tus preferencias estilísticas.
¡Echemos un vistazo a un par de sitios de WordPress que están generando microinteracciones para sus audiencias!
Hacer clic o no hacer clic
Blue Cadet es un sitio web con muchos medios que utiliza microinteracciones para integrar la experiencia y agregar texto sin interrumpir el flujo de la página.
Puedes desplazarte por los videos y cuando pasas el cursor sobre cualquiera de ellos, el título de la pieza hace un pequeño movimiento para indicar que puedes hacer clic en él.
Es una forma simple pero efectiva de hacer que sus medios funcionen para usted y crear interés visual.
La barra de desplazamiento casi allí
Los formularios en línea pueden ser bastante frustrantes. Pasa años completando cuidadosamente toda su información solo para presionar enviar y darse cuenta de que quedan tres páginas más por hacer.
La barra de desplazamiento en la parte superior le permite saber exactamente cuánto ha hecho y cuánto le queda por completar.
Esto funciona muy bien para formularios que son más largos que una página, pero también es increíblemente efectivo para formularios de una sola página como el de arriba.
Cuando se trata de microinteracciones, menos es más
Es fácil dejarse llevar por la creación de una experiencia de usuario increíble. Desea que su sitio web sea especial y llame la atención de todas las formas correctas.
A veces, a pesar de nuestras mejores intenciones, nos dejamos llevar y, en nuestro deseo de hacer algo súper intuitivo, creamos interacciones innecesariamente complejas.
Agregar animación a las microinteracciones puede ser increíblemente efectivo, pero asegúrese de que no reste valor a la sensación general y la funcionalidad de su sitio.
Y, necesitan encajar con su narrativa.
¿Cuál es la historia que estás contando a través de tu sitio de WordPress? ¿Qué experimenta el usuario?
Deliciosas microinteracciones mejoran la narrativa. Se suman a la historia sin interrumpir el flujo.
Las microinteracciones bien diseñadas resisten el paso del tiempo. Desea que los usuarios lo encuentren tan interesante la quincuagésima vez que visitan su sitio como la primera vez.
deleitando al usuario
“Las microinteracciones más deliciosas ayudan al usuario a sentirse como en casa. ”
En un mundo ideal, todas las páginas se cargarán a velocidades que el ojo humano no puede captar y todo funcionará siempre. Pero en realidad, incluso los mejores sitios web enfrentan problemas a veces. Es posible que los problemas ni siquiera sean de su parte; podría ser la conexión a Internet del usuario, su dispositivo en particular o cualquier otro número de factores externos.
Las microinteracciones son excelentes para reconocer esas situaciones y agregar un toque de ligereza cuando las cosas salen mal. Disminuyen la frustración y crean una transición suave de una acción a otra.
Cuando los usuarios llegan a su sitio, quiere que sientan que han estado allí antes. Al igual que la experiencia es acogedor. Como si fueran buscados y usted está personalmente encantado de que estén allí.
Las microinteracciones son su oportunidad de mostrar el lado extravagante, humano y reflexivo de su marca al demostrar que pensó en lo que es importante para el usuario y lo entregó sin problemas.