IntuiFace y las tendencias de experiencia de usuario de 2017 - Tendencia nº 1: Microinteracciones

Tendencia nº 1 en experiencia de usuario: microinteracciones

Microinteracciones: ¿Qué son?

Una microinteracción es una pequeña señal visual que se activa cuando un usuario realiza una acción determinada o se le anima a realizarla. Proporcionan información útil y entretenida para que los usuarios sepan qué hacer y qué está ocurriendo en la pantalla. Pueden ayudar a que acciones sencillas resulten divertidas y proporcionar una retroalimentación importante.

Quizá la microinteracción más famosa esté representada por las nuevas opciones del botón "Me gusta" de Facebook. Cuando un usuario pasa el ratón por encima de estos botones de emoción, se animan.

Crear buenas microinteracciones no es fácil. Las buenas microinteracciones distinguen a los productos de éxito de los demás. Para que funcionen correctamente, deben tener un único propósito, no sólo hacer que su aplicación parezca bonita. Los diseñadores inteligentes son capaces de hacerlas divertidas y funcionales a la vez. Las microinteracciones eficaces atraen e informan al mismo tiempo. 

Microinteracciones: ¿Cuándo utilizarlas?

Cada vez que un usuario realiza una acción. Las microinteracciones pueden afinar el diseño centrado en el ser humano de las siguientes maneras:

• Reconocer una acción: el usuario entiende que su acción ha sido aceptada.
  
• Guiar a los usuarios a través de una serie de pasos
  
• Conceda recompensas visuales
  : efectos pequeños pero gratificantes que mejoran la experiencia del usuario.

En el mundo actual de la Web y las aplicaciones, las microinteracciones son la norma, por lo que su ausencia podría hacer que una experiencia pareciera anodina.

Microinteracciones: ¿Cómo crearlas en IntuiFace?

Hay una microinteracción que probablemente ya estés utilizando. Cuando un botón cambia de color al ser pulsado, eso es una microinteracción.

‍

Puedes ir más allá y elegir, por ejemplo, asociar la pulsación del botón con alguna animación sencilla. Digamos que quieres que tu botón se haga un poco más grande cuando es tocado. Sólo tiene que añadir una acción al disparador del botón para que cuando se pulse/suelte el botón, el botón se ajuste a un nuevo tamaño.: 

Resultando en:

Por supuesto, puedes optar por crear animaciones más complejas.
En este caso, considera que los gifs animados y la animación IntuiFace son tus mejores amigos. Por ejemplo, digamos que quieres que este pequeño botón de corazón se anime cuando lo pulses así:

A continuación se explica cómo hacerlo en IntuiFace. En primer lugar, cree un botón de imagen con las imágenes liberadas y pulsadas similares (el corazón gris). 

Luego crea un gif animado de ese corazón siendo presionado. Coloca este gif animado directamente encima del botón de imagen, vincula sus propiedades X,Y de anchura y altura al botón de imagen y luego ocúltalo.

A continuación, crear una acción para cuando se toca el botón. Específicamente, cuando el botón es presionado y soltado, muestra el gif animado. Utilice las propiedades Tiempo y Animación para especificar una duración de la animación igual a la duración de la animación gif. En el ejemplo siguiente, la animación dura 1,3 segundos.

‍

En general, utiliza la animación y los gifs animados tanto para guiar como para proporcionar feedback de formas pequeñas, divertidas y significativas. Sí, hay que ser un poco creativo y aprender a crear buenas

Esperamos que te haya servido para dar rienda suelta a tu creatividad.

‍

‍

A continuación, la tendencia nº 2: cuadrículas personalizadas