Las microinteracciones son respuestas que suceden cuando un usuario interactúa con tu plataforma, estas informan al usuario sobre qué está pasando a partir de la interacción entre los elementos y el usuario.
Existen interacciones de:
Acción
Creación
Borrado
Añadir
Actualizar
Las 4 Fases por las que viaja una microinteracción según Dan Saffe son:
Trigger o disparador: acciones que desencadenan la interacción, como click, time, scroll, etc.
Reglas: Son los requerimientos que se necesitan para que suceda la interacción, por ejemplo tener dinero en la cuenta, llenar todos los campos de un formulario, etc.
Retroalimentación o Feedback: Es la respuesta que te da de vuelta el elemento que tiene la microinteracción, por ejemplo una animación.
Bucles o modos: son los ciclos que dura la interacción y, si se repiten, cómo cambia a lo largo del tiempo.
Las microinteracciones son respuestas que suceden cuando un usuario interactúa con tu plataforma, estas informan al usuario sobre qué está pasando a partir de la interacción entre los elementos y el usuario.
Existen interacciones de:
Acción
Creación
Borrado
Añadir
Actualizar
Las 4 Fases por las que viaja una microinteracción según Dan Saffe son:
Trigger o disparador: acciones que desencadenan la interacción, como click, time, scroll, etc.
Reglas: Son los requerimientos que se necesitan para que suceda la interacción, por ejemplo tener dinero en la cuenta, llenar todos los campos de un formulario, etc.
Retroalimentación o Feedback: Es la respuesta que te da de vuelta el elemento que tiene la microinteracción, por ejemplo una animación.
Bucles o modos: son los ciclos que dura la interacción y, si se repiten, cómo cambia a lo largo del tiempo.
Grandioso!, se que llevarlo a la programación va a demorar pero los detalles son lo que hacen único e innovador!.
Considero que aunque implica más tiempo y trabajo por la parte de diseño y programación, no hay que olvidar que mientras más destaque nuestro producto, mejor posicionamiento en el mercado y fidelización de consumidores. Las microinteracciones y el swag (estilo visual) son dos poderosas herramientas para lograrlo.
Se ve súper.
¿Podemos exportar el prototipo en algún formato diferente a XD para que lo vea nuestro equipo o usuario?
En Adobe XD puedes exportar tus diseños en png, svg, pdf y jpg
Gracias Angel, me refería al prototipo animado ;)
Esta cool animar nuestro diseño
Solo usar Figma pero tengo que admitir que XD me solucióna más la vida, aunque recomiendo muchísimo Figma.
Excelente clase y vuelvo a decir Auto-Animate es excelente.
Si te facilita la vida
Al programador no xd
23. Definición y prototipado de microinteracciones.
Microinteracciones
Interacciones de la personas con el software
Acción
Creación
Borrado
Añadir
Actualizar
Fases de las interacciones
Trigger / disparadores: Las acciones que disparan la interacción
Reglas: Cosas en particular que se tienen que cumplir para que esta interacción se realice
Retroalimentación: La comunicación de vuelta que da el trigger al usuario
bucles o modos: acción en bucle
Loading: microinteracción de un bucle
Aquí mi aporte:
uU No tengo XD pero si Figma :D para practicar
Fases por las que viaja una microinteracción segun Dan Saffe:
Trigger o disparador
Reglas
Feedback
Bucles o modos
Entiendo que estas microinteracciones se pueden lograr desde XD en el prototipo, pero como se pasan al equipo de desarrollo para que las puedan poner en el producto final? O sea, hay alguna forma de exportar las indicaciones de interacciones que diseñé entre elementos, para que un developer lo entienda y lo aplique?
MICROINTERACCIONES: Persona + -interacción- + Software , se informa al usuario que está pasando con la interacción, acá podemos encontrar estas fases:
Acción
Creación
Borrado
Añadir
Actualizar
Hacemos el ejemplo en Adobe XD
Los experimentos y pruebas de micro animaciones son super buenas.
Gracias, lo hice e mi XD con tu ejemplo y se ve súper.
me tardé más buscando como quitarle el fondo a las imagenes que haciendo las animaciones.
PD: lo hice en powerPoint
Por que en powerPoint D:
Lo que noto de las microinteracciones es que complican la etapa de desarrollo. Es así?
Es cierto que las microinteracciones toman algo de tiempo en la etapa de desarrollo, sin embargo lo cierto es que le agrega mayor identidad a tu sitio sí las implementas de buena manera. Tampoco es que sobrecargues tu sitio de microinteracciones pues la carga de este podría afectarse.
El efecto de animación es muy similar a la de Keynote de Apple "Movimiento mágico"
Así es :D están muy parecidos y funcionan increíble :rock
Buenas tardes, tengo una consulta: estoy usando la versión 28.5 de Adobe XD y cuando quiero seleccionar el Trigger de Tiempo sólo me lo permite hacer en la primera pantalla, luego no me aparece dentro de las opciones, por ejemplo si lo quiero hacer entre la segunda y tercera.
Y otra consulta: cómo hago para adjuntar imágenes en las preguntas y comentarios? Perdón por la ignorancia jeje! 😅
Saludos!
Ivana
A tu primera duda el trigger de tiempo solo funciona si selecciona toda el artboard, es decir si tomas un elemento en concreto.
la que esta resaltada es seleccionando el artboard, pero si selecciono un elemento Xd lo va tomar como un acción por parte del usuario por eso no te va salir la opción tiempo.
y para subir una imagen solo haz esto:
Nota: en el navegador mozilla no funciona, o bueno por lo menos a mi no me funciona.