La regla del prototipo de papel.

He tenido la suerte de haber trabajado con algunos de los mejores diseñadores de la industria, incluidos Zhenya Rynzhuk, Louis Paquet, María de la Paz Vargas y, por supuesto, docenas de los increíbles diseñadores de MediaMonks. Muchos de los proyectos en los que hemos trabajado requieren animaciones y pautas personalizadas que permitan a los desarrolladores ser completamente creativos y superar los límites de lo que creemos que es posible con CSS y JavaScript.

Luego hay otros proyectos que carecen de recursos. Estos son los que terminan convirtiéndose en una oportunidad para nosotros, como desarrolladores, de tomar la iniciativa sobre cómo se animan ciertos elementos de la interfaz de usuario y si las pautas que creamos contribuyen a una excelente experiencia de usuario. Generalmente son aquellos proyectos en los que un simple truco puede ayudarnos a determinar si vamos por buen camino.

Resulta que tengo un truco simple que me ha ayudado a probar rápidamente si mis animaciones dan en el blanco. Me gustaría compartirlo contigo ahora. Yo lo llamo La regla del prototipo de papel .

La mentalidad impresa

El diseño web (quizás inconscientemente) hereda muchas cosas del diseño impreso. Si lo piensas bien, algunos de los patrones web interactivos más básicos, como acordeones o pestañas, son solo una representación digital de cómo hemos almacenado principalmente la información en el pasado.

Aunque la industria ha adoptado una mentalidad más digital y ha ido más allá del paradigma impreso en la última década, a menudo nos cuesta salir de esa mentalidad impresa. Como desarrolladores, podemos sentir como si estuviéramos programados para animar elementos de la interfaz de usuario de una forma aburrida y estándar que no va más allá de la referencia de mover trozos de papel.

La regla del prototipo de papel.

He aprendido algunos consejos y mejores prácticas durante mis años trabajando con otras personas y los he desarrollado en algunas reglas simples para trabajar con animación. Aunque considero las reglas más como pautas o una referencia personal, recientemente ha desbloqueado más valor al comenzar a transmitirlas a mi equipo.

Y es gracias a The Paper Prototype Rule que establece:

Si puedes utilizar un prototipo en papel para recrear la animación, probablemente necesites dedicarle más tiempo.

La intención no es complicar demasiado las animaciones, sino aprovechar las ventajas de crear una experiencia digital que se gradúe de los conceptos impresos. Y el principio es bastante simple. ¿Se puede crear un prototipo de la animación con papel? En caso afirmativo, podemos hacerlo mejor. Si no, entonces estamos en algo.

La regla del prototipo de papel en la práctica.

No me malinterpretes, la creación de prototipos en papel ha demostrado ser una gran herramienta para las pruebas de usuarios. Pero podemos utilizar la simplicidad de su naturaleza para determinar cuándo nuestras interacciones son demasiado simples.

Probemos un ejemplo.

Casi todos los sitios web estándar tienen algún tipo de navegación. Entonces, supongamos que heredamos una composición de diseño que proporciona dirección para los estados de navegación activos e inactivos. Claro, podemos hacer eso. No es tan difícil.

¿Podemos replicar esta experiencia con la impresión? Claro que sí. Todo lo que necesitas es apilar una hoja de papel encima de la otra. Podemos hacerlo mejor.

Suponiendo que las composiciones que recibimos carecen de dirección para la transición entre los estados del menú abierto y cerrado, podemos mejorar un poco la animación con la propiedad de transformación. Solo eso mejora significativamente la experiencia:

Simplemente deslizar el estado activo del menú de izquierda a derecha ayuda al usuario a comprender la transición y proporciona un contexto sobre dónde se encuentra. No hay duda de que el menú es una superposición que cubre el contenido de la página. Eso no era evidente antes de que añadiéramos la transformación. Podríamos decir que, con una simple línea de CSS, ya estamos haciendo el trabajo.

Entonces preguntamonos: ¿podría representar esta interacción en un prototipo de papel? Mi respuesta inmediata es: sí . Esto significa que hay mucho margen de mejora.

Podemos utilizar nuestra mentalidad digital para crear algo que no sólo haga el trabajo, sino que mejore la experiencia. Podemos jugar con técnicas como desvanecimiento, enmascaramiento, paralaje, escalonamiento o simplemente dividir el menú en diferentes partes que se animan de forma independiente. Esta es la oportunidad de ser creativo y utilizar nuestras habilidades de front-end para crear una experiencia digital única.

Con el ánimo de simplificar las cosas, veamos cómo quedaría después de aplicar algunas técnicas básicas:

¡Aquí vamos! Ahora estamos empezando a alejarnos de la mentalidad del papel. ¿Se puede deslizar el papel de izquierda a derecha? Si. Pero, ¿puede aparecer y desaparecer el contenido con una animación desplazada? ¡No es que lo haya visto!

Y, como dije antes, hay mucho más que podemos hacer aquí. Pero creo que entiendes el punto. Podrías dedicar más tiempo a jugar con las animaciones para encontrar la interacción “perfecta”, pero eso dependerá en gran medida del proyecto. El objetivo de esta regla es alejarnos de la mentalidad del diseño impreso y aprovechar las posibilidades que tenemos para crear experiencias exclusivamente digitales.

Una vez que comience a poner en práctica la regla del prototipo de papel como parte de su proceso de desarrollo, probablemente se encontrará esforzándose por encontrar las herramientas para continuar mejorando su oficio. Siempre recomiendo leer sobre los principios básicos de la animación y estar siempre buscando nueva inspiración en otros sitios web.

Entonces, la próxima vez que trabajes en un carrusel, modal o cualquier otro componente interactivo, tómate un momento para verificar tu enfoque de animación. ¿Pasa la prueba del prototipo de papel?

Imagen de encabezado de JJ Ying vía Unsplash.