¿Alguna vez ha tenido un día en el trabajo en el que se le asignaba constantemente una nueva tarea a medida que avanzaba en la actual? Se siente discordante en el mejor de los casos y completamente frustrante y una pérdida de tiempo en el peor. En los últimos años, los empleadores de las grandes empresas han comenzado a considerar el costo del cambio de contexto: el tiempo dedicado a reajustar su cerebro a una tarea diferente se acumula, causa frustración en los empleados y, por lo tanto, pierde dinero. De ello se deduce que la experiencia del usuario en un sitio web funciona de la misma manera.
Cada vez que un nuevo usuario visita su sitio web, lo hace con temor. Es la razón por la que todos los sitios comienzan a usar los mismos patrones con el tiempo. Por ejemplo, la gente tiende a saber cómo funciona un grupo de botones de opción. Estás dando a tus usuarios una interacción que ya entienden. Pero muchos sitios grandes no consideran que al cambiar la ubicación de los elementos en la interfaz de usuario por completo al interactuar, también le está pidiendo a su usuario que se reajuste a esta nueva vista. Esta falta de contexto es un antipatrón: no le estamos mostrando al usuario con gracia qué cambió y por qué.
Las asociaciones de espacio, tiempo y ubicación pueden ayudar a que una interacción parezca más fluida e intuitiva. No es necesario que sea exagerado. Piense en diseños de interfaz de usuario minimalistas y limpios. Pueden ser fáciles de navegar y verse muy elegantes, pero eso no significa que sean más fáciles de hacer.
Démosle un nombre a estas interacciones de cambio de ubicación: UX que cambia de contexto. Luego intentaremos desmitificar con algunos ejemplos y técnicas.
Antes de sumergirnos en las soluciones, es importante tener en cuenta que cualquiera de estas puede ser exagerada. Nuestros cerebros (y, posteriormente, la mayoría de los seres vivos) han evolucionado para tomar nota especialmente de algo en movimiento. Este rasgo evolutivo está en su lugar para mantenernos seguros y alertas, sin embargo, la parte de su cerebro que dispara la adrenalina instintiva para la supervivencia es la parte que se activa cuando algo inesperado se mueve. ¡La animación es fantástica! La web es una caja estática y graciosa sin ella. Pero cuando se trata de animación UX, la sutileza es clave.
El poder de la mayoría de las técnicas que cubriremos está en combinarlas. A lo largo del artículo, ilustraré esto con enfoques complementarios, como el Pen a continuación. Se recomienda ver la demo completa.
Vea el Pen map 30 de Sarah Drasner (@sdras) en CodePen.
revelador
Imagina un modal que se revela al hacer clic. Cualquier cosa que aparezca en la pantalla sin previo aviso tiene el potencial de causar malestar. Los modales son poderosos porque tienen un estado dominante y llamativo, pero a menudo no les gustan, en parte porque pueden ser muy discordantes.
Si podemos revelar el modal de una manera más matizada, por ejemplo, expandiéndolo, escalando o volteándolo, de repente creamos la oportunidad de guiar a nuestros usuarios de un estado a otro. Obtendremos tanta atención como un modal discordante, o tal vez incluso más, porque nuestros cerebros han evolucionado para detectar el movimiento.
Los estados reveladores (piense en un modal como un “estado”) son particularmente útiles porque podemos jugar algunos trucos manuales que hacen que todo parezca muy rápido. Podemos cargar de forma diferida el estado oculto después de que el resto de la página haya terminado, pero mantenerlo inactivo y en pausa, de modo que pueda aparecer fácilmente cuando lo llame un disparador, como un botón o incluso un evento de desplazamiento. Esto tiene el potencial de hacer que esta técnica se sienta fluida e intuitiva. No soy la única persona que está considerando UX y revelando estados en la animación, consulte también este gran artículo de Val Head en A List Apart.
Morphing
Una técnica de transición visualmente obvia es la transformación. Si necesita pasar de un estado a otro, lo más simple que puede hacer para relajar esa transición es transformar una forma en otra. ¡Puede ser un efecto encantador!
Las florituras de la interfaz de usuario que usan conceptos como transformicons se han vuelto populares porque son elegantes, informativas y agradables.
Tanto SVG como CSS son buenas opciones para este tipo de animaciones de interfaz de usuario. Descubrí, al trabajar con ambos, que cada uno tiene sus fortalezas y debilidades. CSS cambia fácilmente de redondo a cuadrado y viceversa con border-radius. También puede manejar grandes cantidades de transformaciones de escala con gracia, mientras que SVG, más allá de unas pocas multitudes, aparecerá pixelado antes de recuperarse. Sin embargo, SVG está diseñado para dibujar. Es muy adecuado para formas complejas. Puede interpolar la ruta o incluso dar forma a los datos con JavaScript, anteriormente con SMIL (ya no se recomienda debido a la interrupción del soporte), y pronto CSS con algunas nuevas propiedades de estilo SVG en borrador de trabajo con el W3C. Snap.svg es bien conocido por interpolar datos de ruta con un número similar de puntos con gracia, y GSAP ofrece capacidades similares con su complemento Attr. También puede hacer que un SVG parezca que se está dibujando a sí mismo para efectos de transformación al animar el stroke-dashoffset, como ves en la demo cuando desaparece el botón de cerrar.
La transformación y la revelación, cuando se orquestan en conjunto, pueden crear patrones de UX informativos e intuitivos, como se demuestra en el Pen anterior.
La combinación de efectos significa que la interfaz de usuario puede aparecer cuando se le llama.
En lugar de moverse a través de modales emergentes o varias pantallas, el marcador de mapa se transforma en la información que el usuario necesita, las entradas se apartan para que el usuario escriba en su correo electrónico y el estado de envío le indica de inmediato que algo se está cargando.
Ya está todo en la página esperando a ser activado.
Aislamiento
Las personas no se enfocan constantemente en su interfaz de usuario sin importar cuán limpia sea su experiencia de usuario. Los ojos se mueven en un fenómeno llamado Saccade, creando un mapa mental tridimensional de una escena, pero centrándose en los puntos de interés. Si considera que su sitio idealmente desvía una amplia base de usuarios en secciones más pequeñas según su interés, es útil reducir el alcance de lo que están escaneando.
Aquí, ilustramos cómo una vez que el usuario decide su ruta de interés relativa, el diseño cambia para guiarlo, dándole menos área para escanear y dejando más claro dónde debe poner su atención (vea la pluma completa aquí):
Vea el Pen map 30 de Sarah Drasner (@sdras) en CodePen.
Estilo
Cualquiera de estas técnicas debe casarse con el estilo apropiado. He escrito antes sobre cómo lograr un estilo apropiado y una comunicación de marca dentro de un lenguaje de diseño de movimiento. El lápiz revelador/morfador que mostré anteriormente tiene una curvatura sinusoidal/simple. Compare esto con la relajación hinchable en este bolígrafo:
Vea el Pen map 30 de Sarah Drasner (@sdras) en CodePen.
El relajamiento rebotante le da a las cosas un tono más expresivo y elástico. Tanto el ejemplo anterior como el ejemplo del mapa complementan la paleta y el tipo de diseño. El lenguaje de movimiento en el cambio de contexto tiene que casarse con el resto del diseño. Si no fuera así, parecería fuera de lugar. Imagina la sensación de rebote en el elegante diseño del mapa: sería extraño. Hemos utilizado diferentes técnicas de cambio de contexto en cada ejemplo para respaldar la marca del sitio.
El estilo también puede cambiar la forma en que la acción de cambio de contexto se registra en nuestro cerebro. Este menú pegajoso de Lucas Bebber es una manera más memorable y única de registrar adónde van los artículos y adónde han ido que otras formas de lograr los mismos estados iniciales y finales. Ser memorable por la creatividad y el estilo siempre es algo bueno. ¡La serie de bolígrafos de Lucas que demuestra esta técnica relativamente simple tiene un recuento combinado de vistas de casi 320,000!
El estilo relativo de suavizado se puede usar de la misma manera que podría pensar en una paleta de colores. La mayoría de las empresas utilizan colores de acento con moderación para equilibrar una paleta de colores completa y llamar la atención sobre ciertos puntos clave:
Podemos aplicar la misma lógica de acento que conocemos desde la creación de paletas hasta la creación de facilidades de un sitio (imágenes hechas con Adobe Color CC y el visualizador de facilidades de GreenSock)
Digamos que todas las aceleraciones en su sitio son más lineales, y algo que intenta llamar la atención se ajusta o rebota en la pantalla. Eso hace que se destaque en importancia. En la demostración anterior, la única facilidad de rebote que usé fue en el cheque, luego de la confirmación del éxito.
tl.fromTo(check, 0.2, {
scale: 0,
rotation: -30
}, {
scale: 1,
rotation: 0,
transformOrigin: "50% 50%",
// ease out with back ease which has a single exaggerated bounce
ease: Back.easeOut
// begin according to a relative label
}, "done+=7.1");Este es solo un ejemplo de este tipo de lógica en toda la interacción.
Arrastrar y soltar
Aprendes más haciendo. Es un viejo adagio, pero exacto. Usemos esta antigua sabiduría y apliquémosla a nuestros patrones de UX teniendo en cuenta el cambio de contexto.
En lugar de simplemente seleccionar un elemento y hacer que cambie ante los ojos del espectador, la interconectividad entre los estados de una interfaz de usuario se puede reforzar considerablemente cuando el propio usuario es el que lleva adelante la acción. Considere estas interacciones de arrastrar y soltar muy bien hechas por Mary Lou (Manoela Ilic) en Codrops.
Ella muestra una gran cantidad de formas en que el usuario puede lograr esto para una variedad de casos de uso, cada vez que la interfaz llega rápidamente para saludar al usuario, imponiendo una fluidez de movimiento de una yuxtaposición a otra.
Los cajones salen y se guardan cuando el usuario ha terminado su selección. Sería difícil mover cualquier pieza a un compartimento separado sin que el usuario recuerde que la colocó allí, mucho más difícil que si se hubiera derrumbado o simplemente desaparecido por su propia cuenta.
Colocación
Es posible que descubras que no estás tan entusiasmado con la animación como yo. La facilitación del cambio de contexto continuo aún se puede lograr sin animación, pero en su lugar, con una ubicación más calculada de los objetos. El curso más claro es simplemente colocar elementos cerca uno del otro. Aquí hay un ejemplo de esto en términos de colapsar la navegación.
Esto tiene el potencial de ser mucho más complejo de lo que parece. Con docenas o más de enlaces e interacciones en una página, mantener el siguiente estado cerca de la transición anterior requiere una planificación previa y podría significar una reorganización del diseño.
Cualquier buen flujo de usuarios de UX considerará la trayectoria relativa de un usuario que navega por el sitio. Este tipo de organización debe ser algo que se base en algo como un Story Map donde esto ya se tenga en cuenta. Se recomienda menos una implementación de cambio de contexto solo de ubicación, porque es menos maleable a medida que las piezas de la interfaz de usuario se vuelven más como piezas de un rompecabezas y, debido a su falta de fluidez, la ubicación de los elementos se vuelve más frágil.
Señales sutiles
Cambiar de una vista a otra no es el único comportamiento importante de cambio de contexto. Algunos simbolizan algo que ha sucedido y sucederá. Pequeños ejemplos de esto son:
- Una selección desplegable que cambia otros contextos en la página
- Un estado de carga
- Un botón siendo presionado
- Un inicio de sesión siendo rechazado
- Un formulario que se está enviando pero que aún no se ha procesado
- algo salvador
Cuando ocurren este tipo de cambios, es posible que no tenga sentido tener un gran cambio, pero aun así significa que el estado de la página ha cambiado o está en proceso de transición, creando un contexto en sí mismo. Teniendo en cuenta las técnicas de las que hablábamos anteriormente, podríamos preguntarnos:
- ¿Estamos cautivando al espectador durante el estado de transición, o es simplemente un pequeño medio para llegar al estado final?
- ¿Se reutilizará este estado de transición para otras instancias? ¿Es necesario diseñarlo para que sea lo suficientemente flexible para múltiples ubicaciones y condiciones de falla?
- ¿El movimiento necesita expresar la actividad? Un ejemplo de esto sería que el usuario guarde algo que aún no está completo, en cuyo caso una antropomorfización de “esperar” ayudaría a comunicarlo.
Hacer preguntas como esta antes de implementar el diseño nos ayuda a discernir cómo comunicarnos sin palabras con nuestra audiencia.
Nuevamente, estas técnicas son más fuertes cuando se combinan. Al escribir este artículo, no estoy sugiriendo que las personas solo usen lo que describí. Por el contrario, el cambio de contexto es una pieza fundamental del diseño de interfaz intuitivo, y solo hemos tocado la punta del iceberg. El propósito de detallar cada uno es proporcionar a las personas un punto de partida para que sientan que pueden experimentar. Los diseños de interfaz de usuario se vuelven aburridos cuando son redundantes. Hay mucho espacio entre el monótono ocultar y mostrar y una ventana emergente confusa que se desplaza por la pantalla. Hay espacio para la invención, donde el diseño reflexivo se encuentra con la interactividad.