Cuando hablamos de proponer o diseñar una interacción en algún proyecto, sea un producto digital, o un producto físico, nos referimos a la capacidad de brindar una experiencia a nuestros usuarios desde un punto más emocional y tangible. Sin embargo, la mayoría de las veces, nos cuesta realizar este tipo de propuestas, en ocasiones por falta de tiempo, o por desconocimiento para argumentar el motivo de la construcción de este proceso, que en sí, resaltaría mucho más el producto final. Otros factores por lo que no se ejecutan estas propuestas son por falta de presupuesto, alcance y tiempo; quitándole prioridad a la propuesta desde diseño y obteniendo un producto sin ese valor emocional.
Si lo miramos desde una perspectiva más técnica, podemos detallar que carecemos de conocimiento o de un proceso creativo donde se pueda llevar a cabo la construcción de una buena propuesta de interacción, en cambio, podemos aplicar algunas metodologías de trabajo, ya sea en equipo o individual, que nos lleven a obtener una buena documentación; esto nos permitirá llegar a una propuesta ideal que se acomode al producto desde la experiencia y el desarrollo técnico, adicional vamos a tener un argumento claro sobre la idea.
Conozcamos los conceptos
Para embarcarnos en esta tarea, debemos tener claro algunos términos teóricos sobre los principios de usabilidad de interface, los principios de diseño de interacción y los 12 principios de usabilidad en movimiento. Una vez claras estas bases podemos argumentar y trazar un objetivo más claro a lo que queremos lograr: no agregar una animación simplemente para que se vea estéticamente bien, sino, apuntarle a unos de los principios de usabilidad de interface.
Una vez claro el uso en la interfaz, continuamos en la búsqueda de obtener una buena microinteracción, ahora revisando estas 4 reglas fundamentales para una buena implementación:
Disparador: cómo funciona el objeto o control que activa la interacción.
Reglas: son las condiciones que determinan el comportamiento de la interacción, en algunos casos el usuario tendría que ejecutar una acción con un orden lógico para que suceda, o en otros casos solo sucederían orgánicamente.
Retroalimentación: es el feedback, el mensaje que recibe el usuario, que le indica lo que está sucediendo o que algo está sucediendo. En este momento volvemos a referenciar el principio de usabilidad en movimiento como guía de eventos que queramos que sucedan.
Modos: define la duración de la microinteracción, podemos decidir el tiempo y transición de esta. Existirán ciclos donde sean de una secuencia única, o bucles infinitos; inclusive eventuales dentro de la aplicación, como por ejemplo, una notificación.
Finalmente, una vez evaluados estas 4 reglas, podemos pasar a construir un documento que nos servirá para determinar como puede comportarse el usuario, la partitura de interacción. Para su construcción debemos tener presentes 3 pilares fundamentales: la interfaz, el usuario y el sistema.
Construyamos creativamente
A veces se torna complicado plasmar nuestras ideas y pensamientos, pasa que en nuestra cabeza todo se ve muy bien, pero no sabemos como expresarlo. Pues bien, para ello debe haber un proceso creativo donde experimentemos una forma de proponer sin el miedo a equivocarnos, a borrar y trazar nuevamente. Aquí es donde recurrimos a un storyboard.
Comencemos con la parte digital
Luego de tener la construcción de nuestra idea plasmada en un papel o tablero, podemos proceder a la construcción de la idea en un entorno más adaptado y digital, el software elegido dependerá de tus capacidades y habilidades para realizarlo, así que podemos tomar dos caminos: si solo tenemos la capacidad de diseñar podemos optar por programas como Adobe Photoshop, Adobe Illustrator, Affinity Designer, entre otros. Pero si en cambio, sí podemos diseñar y animar nuestra idea podemos recurrir a Adobe XD, Adobe Photoshop, Adobe After Effects. En este caso recomiendo estos programas porque es posible trabajar en conjunto, por ejemplo, podemos diseñar en Illustrator y animarlo en After Effects.
Presentar y planear con equipo de trabajo
Para el equipo de desarrollo es fundamental conocer toda la documentación que se tiene hasta el momento, tener un prototipo para observar la animación que se propone y realizar una investigación de tecnologías a aplicar, para la construcción de la misma. Se deben tener en cuenta una estimación el tiempo de ejecución y de aprendizaje.
Es muy importante generar espacios de contexto y comunicación, donde el desarrollador y el diseñador revisen la posibilidad de desarrollar la propuesta (técnicamente factible y financieramente viable), para reconocer sus limitantes.
Revisemos las partes técnicas
Hay una enorme diferencia en usabilidad si el producto final es físico o digital. Si es un producto físico, el usuario lo observa y se prepara para experimentar con él, esto lo lleva a una experiencia más perceptiva que visual, que lo lleva a determinar algo que les gusta o no.
Para construir una interacción en un producto físico debemos tener en cuenta: el peso, resistencia, textura, velocidad, fuerza, temperatura, entre otros elementos que se puedan modificar para despertar emociones en el usuario. El objeto puede tener el mismo propósito, pero la experiencia puede ser muy diferente según el diseño.
Si el producto es digital, el usuario tiene en cambio, una experiencia mucho más visual que emocional. Para realizar la aplicación de este medio es muy importante conocer el lenguaje de programación en el que está construido, y que limitantes pueda tener la herramienta de desarrollo. Luego viene la parte de implementar lenguajes visuales que nos orientan a realizar las animaciones de todo tipo de formas, esto se puede lograr con lenguajes como JavaScript, Java, CSS3, SVG, entre otros más que nos pueden aportar visualmente a las construcciones de las propuestas. Actualmente también hay muchas librerías, frameworks y lenguajes que facilitan la implementación de animaciones.
Veamos qué tal quedó la interacción: https://johnbeto20.github.io/BotonEnviar/
¡A animar!
En este proceso es muy valioso trabajarlo de la mano con la persona que haya diseñado la propuesta, esto los orientará a una propuesta más robusta.
No olvidemos tener en cuenta toda la documentación, el diseño, la animación propuesta y todos los insumos dados anteriormente, pues es la vía para obtener un insumo de valor, donde además lograremos aportar una entrega del lado más emocional al usuario.
