Cómo diseñar tanto para quienes disfrutan del movimiento como para quienes prefieren evitarlo

Un gran poder conlleva una gran responsabilidad. Ese viejo refrán es cierto para Spiderman, pero también para los diseñadores web.

Como uno de los diseñadores de marca sénior de Webflow para la web, mi trabajo consiste literalmente en usar Webflow para construir cosas para Webflow, y en superar los límites de nuestra plataforma, explorando e innovando sobre la marcha.

Así que pienso mucho en el consejo atemporal del tío Ben de Spiderman. Webflow es una plataforma realmente potente y puedes usarla para crear experiencias hermosas. Especialmente con el movimiento, como veremos en breve. Pero tengo que detenerme y pensar que el hecho de que pueda hacer algo no significa que deba hacerlo. (Ahora estamos entrando en territorio del Dr. Ian Malcolm, pero ya entiendes a lo que me refiero).

Porque, como diseñadores web, tenemos la responsabilidad de considerar el potencial de daño en todo lo que construimos. Y parte de la razón por la que amo mi trabajo es que a Webflow le importa mucho hacer el bien en el mundo, especialmente cuando se trata de accesibilidad. Queremos que todo lo que creamos sea accesible para la mayor cantidad de personas posible.

Así que, cuando me encargaron colaborar en el sitio web de nuestra No-Code Conf 2021, tenía en mente tanto la innovación como la accesibilidad. Y terminé aprendiendo algunas técnicas nuevas que son bastante efectivas para ambas cosas.

Cuándo tiene sentido el movimiento y cuándo puede causar daño

Como mencioné, puedes crear animaciones e interacciones bastante complejas en tu sitio de Webflow sin necesidad de saber ni una pizca de CSS o Javascript. Pero, como solemos hacer los diseñadores, he visto a algunos miembros de nuestra comunidad probar el poder de las interacciones y llevar la tendencia de diseño de los sitios cargados de movimiento demasiado lejos. A veces, olvidamos usar la animación con buen gusto y descuidamos considerar a todas las audiencias, no solo a nuestros colegas diseñadores.

Tenía esta tentación en mente cuando comencé a trabajar en el sitio web de la No-Code Conf. Pero el equipo creativo había desarrollado unas ilustraciones ingeniosas para representar los bloques de construcción y los elementos del marco de trabajo sin código, mostrando cómo se supone que estas piezas encajan y trabajan en conjunto para crear algo mayor que la suma de sus partes.

Y esas ilustraciones pedían a gritos movimiento. Sabía que podíamos contar esta historia de forma más completa si los visitantes pudieran ver cómo estos elementos cobran vida: uniéndose, interactuando entre sí y construyendo algo hermoso.

Así que este fue un caso en el que el movimiento tenía sentido. Era temático, importante y, con la interfaz de diseño de Webflow, era posible.

Pero necesitábamos pensar en la accesibilidad. Las personas con sensibilidad al movimiento pueden experimentar vértigo o sentirse físicamente enfermas debido a diseños interactivos en la web. Algunos ejemplos de movimiento excesivo pueden incluir: escalado activado por el ratón, zoom y desenfoque 3D, efectos de paralaje, desplazamiento de velocidad variable, desplazamiento con cambio de plano y contenido parpadeante.

Es por eso que la mayoría de los principales sistemas operativos móviles y de escritorio ahora tienen configuraciones de accesibilidad que permiten a los usuarios reducir la cantidad de movimiento que experimentan al usar sus dispositivos, como efectos de paralaje para iconos y vistas previas de vídeo de reproducción automática.

Desafortunadamente, mientras construía el sitio de la No-Code Conf, aún no teníamos una forma sencilla de ayudar a nuestros sitios web a adaptarse a esas configuraciones. Nota: Estamos trabajando activamente para que la accesibilidad relacionada con el movimiento sea más fácil de gestionar. En abril de 2021, lanzamos una actualización que garantiza que la animación de desplazamiento suave respetará las preferencias del visitante del sitio para desactivar las animaciones. Mantente atento a más mejoras de nuestro equipo de accesibilidad.‍

Pero mientras mis colegas de ingeniería continúan integrando más funcionalidades de accesibilidad en la plataforma, quería encontrar una manera de usar una solución de código bajo para cerrar la brecha y brindar una mejor experiencia a más personas, el mismo enfoque que alentamos a nuestra comunidad a usar en nuestra lista de verificación de accesibilidad.

Después de experimentar un poco, llegué a una solución de código bajo que me permitió diseñar una página para todos. Al crear cada fotograma de mis interacciones como SVG y usar una breve consulta de medios CSS, pude reemplazar automáticamente las animaciones con una ilustración estática para las personas que ya me indicaban a través de la configuración de su sistema operativo que no querían movimiento. Para todos los demás, las interacciones cobraban vida cuando llegaban al sitio web.

Así es como funciona:

Crea la animación como archivos SVG

Paso 1: Enmarca la ilustración completa, asegurándote de que las dimensiones exteriores tengan una relación de aspecto que funcione bien para el lugar donde se utilizará. Usé Figma, pero podrías usar Sketch, Illustrator, Adobe XD, etc.‍

Paso 2: Duplica el marco para cada elemento que se moverá. También es posible que necesites un marco adicional para cualquier elemento que se superponga a un elemento que se moverá.

‍Paso 3: En cada marco duplicado, elimina todos los elementos de la ilustración excepto aquellos que se moverán o se superpondrán a otro elemento.‍

Paso 4: Exporta los marcos como archivos SVG.