En un proyecto de diseño es necesario revisar cada una de sus partes y estar atento hasta al más mínimo detalle pues realmente puede hacer la diferencia. No es sorpresa, entonces, que se realicen diversas revisiones y el equipo evalúe los bocetos y avances antes de enviárselos a cliente. Al momento de detectar posibles errores o elementos que han sido pasados por alto, es muy conveniente trabajar con un equipo pues hay diferentes opiniones y perspectivas.
Incluso es posible que estos detalles mínimos permitan diferenciar al sitio web de otros, de manera que pueden reforzar la identidad de la marca. Es esencial que no te olvides de estar atento y comprobar cada una de estas peculiaridades del diseño. Uno de estos detalles son las micro-interacciones, empleadas en cualquier interfaz, se trate de un sitio web o aplicación móvil.
¿Qué son las micro-interacciones?
Las micro-interacciones son aquellos momentos en los que el usuario realiza cierta acción dirigida a un solo objetivo y, en respuesta, la interfaz presenta algún cambio inmediato. Como su nombre indica, las micro-interacciones se relaciones con acciones simples y pequeños momentos de intercambio entre el usuario y la interfaz.
En la actualidad, una gran cantidad de aplicaciones hace uso de las micro-interacciones en sus interfaces pues presentan una serie de beneficios como presentar información inmediata de modo visual, impulsar la interacción entre los usuarios y la interfaz, los usuarios pueden disfrutar estas pequeñas animaciones que permiten hacer el diseño más humano, etc.
Todos estos beneficios, en general, mejoran la experiencia de usuario de la aplicación o sitio web, así que definitivamente debes considerar añadir interesantes micro-interacciones en tus próximo proyecto de diseño.
Usos específicos de las micro-interacciones
En general, se puede decir que las micro-interacciones sirven para informar de forma visual al usuario sobre algún cambio de estado o alguna acción realizada exitosamente. Sin embargo, existen usos particulares que poseen las micro-interacciones, los cuales mencionaremos a continuación:
Destacar algún cambio en la interfaz
Las micro-interacciones tienen el poder de guiar la atención del usuario a ciertos elementos o acciones específicas. Esto se logra usualmente mediante animaciones sutiles o divertidas que tienen un impacto en los usuarios. Un ejemplo común de este tipo de uso son las notificaciones.
Cuando una aplicación no se encuentra abierta, usualmente se envía una notificación como texto, se distingue el sonido peculiar para notificaciones del móvil y vemos la notificación. Tenemos la opción de descartarla o ingresar a la aplicación de forma inmediata. Pero, cuando una aplicación se encuentra abierta y tiene nuevas notificaciones, el mensaje puede aparecer como una ventana popup o se puede añadir un útil icono en la barra de navegación para las notificaciones. Este icono usualmente es una campaña, que presenta un círculo rojo en la esquina superior derecha y un número dentro de este círculo que indica el número de notificaciones sin revisar. En estos casos suele añadir una pequeña animación e incluso el simple hecho de ver ese círculo rojo invita al usuario a ver sus notificaciones pendientes.
Disminuir el esfuerzo de los usuarios
En general, todo el diseño va dirigido a minimizar el esfuerzo de los usuarios y hacer el proceso de navegación más sencillo. Las micro-interacciones, a pesar de ser elementos mínimos, pueden contribuir con este propósito. Un ejemplo claro se da en los formularios de búsqueda o cualquier otro tipo de formulario web. Es probable que encuentres estos elementos en un gran porcentaje de sitios web, ya sea que se utilice como medio de contacto, proceso de pago, inscripción a un servicio gratuito, etc. Los formularios son esos elementos en los que el usuario puede invertir más tiempo de lo usual pues debe completar información y en este proceso es posible que se ingresen datos incorrectos. Por medio del autocompletado, este proceso puede ser simplificado y más sencillo para los usuarios.
El autocompletado es bastante popular y lo emplean diversos motores de búsqueda y páginas web pues realmente es de utilidad para tus usuarios. Y es un elemento donde se puede apreciar micro-interacción pues reacciones inmediatamente a las palabras que ingresa el usuario y muestra sugerencias en base a éstas.
Notificar sobre las acciones realizadas con éxito
Las micro-interacciones tienen el poder de reforzar las acciones que un usuario está realizando. No solo ofrecen información visual para indicar sobre el cambio de estado de ciertos elementos como botones, sino que también informan sobre ciertas acciones que están siendo realizadas en ese mismo momento por el sistema. Un ejemplo claro de esto es cuando aparecen animaciones de carga para informar al usuario que se están adquiriendo los recursos necesarios o se está procesando cierta información. Otro ejemplo sería cuando se ha realizado satisfactoriamente cierta acción como, por ejemplo, enviar un correo electrónico mediante un formulario o activar una cuenta de usuario nueva para su uso.
Aunque la mayoría de micro-interacciones hacen uso en su mayoría de elementos visuales, en ciertos casos se requiere información también información textual para que el mensaje sea mucho más claro para los usuarios.
Informar sobre el estado de algún elemento
En el punto anterior hemos mencionado que una gran parte de las micro-interacciones van dirigidas a informar a los usuarios sobre el estado de ciertos elementos y que usualmente se emplean pistas visuales que, por supuesto, pueden ser reforzadas con información textual de ser necesarias.
Un ejemplo básico en este caso serían los botones de llamada a la acción que presentan una gran cantidad de interfaces web y móviles. Estos botones poseen tres estados básicos: en reposo, cuando el cursor se posa sobre el botón y cuando se activa. Estos tres estados diferentes se indican mediante una pista visual muy clara: el cambio de color del botón, de esta manera el usuario sabe cuando el cursor se encuentra dentro de la zona de pulsado y puede ser activado mediante un click.
Otro ejemplo, también cercano a muchos usuarios se da en las aplicaciones de mensajería instantánea como WhatsApp, en donde se indica cuando la persona con la que estás manteniendo una conversación está redactando una respuesta. Este mismo estado se emplea en Facebook Messenger en donde se indican tres puntos suspensivos en la burbuja donde debería estar el mensaje. Estos indicadores son animados para poder mantener el interés de los usuarios.
En conclusión….
Incluso detalles mínimos como las micro-interacciones tienen el poder de mejorar la experiencia de usuario. Aunque en principio no hayas tenido una idea clara sobre el tema, al detallar sus usos principales has podido analizar y entender por qué las micro-interacciones son tan importantes en cualquier interfaz de usuario.
