Diseñar interacciones con propósito

Descubra los principios clave del diseño de interacción con propósito, qué desafíos de diseño puede resolver la interacción y cómo incorporarlos a su proceso.

Cuando pensamos en el diseño de interacción y la animación en la experiencia del usuario, es fácil confundirlo con cosas sofisticadas: las campanas y silbidos, o los objetos voladores aleatorios que "dan a un sitio web el factor sorpresa". Puede traer placer a corto plazo, pero pronto puede volverse irritante para los usuarios habituales.

Para combatir este tipo de futilidad, analizaremos los principios básicos del diseño de una interacción significativa, cómo puede resolver los desafíos de diseño comunes y cómo puede introducirlo en sus sistemas y procesos de diseño. La interacción ya no debería ser un toque final que se descarta del alcance como algo "agradable de tener", sino una parte integral de la experiencia general del usuario.

Cuatro principios clave del diseño de interacción significativa

1. Evite crear obstáculos

Piense en un "menú de hamburguesas" que tarda dos o tres segundos en animar la pantalla completa. Cada vez que un usuario quiere navegar por el sitio, tiene que esperar. Crear tiempos de tarea más largos para el usuario es una forma garantizada de hacerlos rebotar hasta el sitio web o la aplicación de un competidor.

Sin embargo, hay algunos casos en los que puede resultar beneficioso retrasar el progreso de una interacción. Cuando la interacción es compleja, ralentizarla puede brindar al usuario un mejor contexto y comentarios. A continuación, se muestran algunos ejemplos de situaciones en las que podría retrasar interacciones y animaciones:

• Incorporación de nuevos usuarios a una nueva interfaz. Asegúrate de reducir los obstáculos con la opción de saltar.
• Interfaces de arrastrar y soltar que muestran causa y efecto. Demasiado rápido y los usuarios pueden preguntarse dónde fue ese archivo.
• Agregar un producto al carrito. Esto no debería crear una barrera prolongada para el pago, pero debería brindarle al usuario suficiente retroalimentación para que sepa que su tarea fue exitosa.

Como regla general, las interacciones simples deben ser rápidas y las interacciones complejas deben retrasarse lo suficiente para que el usuario comprenda el contexto.

2. Haga coincidir la moción con el mensaje

Si Apple decidiera que todas sus interacciones en iOS serían rápidas, nítidas, en tu cara y harían un montón de cosas espinosas, ¿se sentiría como si estuvieras usando un producto de Apple? Si estuviera utilizando la aplicación Alton Towers y viera una animación que se desvanece lentamente y una gran cantidad de transiciones al estilo de Ken Burns, ¿se sentiría como un lugar mágico de diversión y emoción, o un anuncio de televisión de M&S?

La forma en que se anima una interacción siempre debe representar el tono que busca y que se siente bien para sus usuarios; hace que la experiencia sea más inmersiva y consistente. Si es un sitio de entretenimiento para niños, entonces puede ser un poco loco y chillón. Si se trata de una boutique de alta gama, manténgala lenta, sofisticada y de buen gusto.

3. Dale un propósito

El diseño de interacción tiene mucho potencial para mejorar la experiencia del usuario, por lo que es tan tentador abusar y usar sin un propósito. ¿Recuerda los sitios web Flash?

Desplácese un poco más y eche un vistazo a los ocho desafíos que puede resolver el diseño de interacción. Si sus interacciones no siguen estos patrones, es muy probable que no tengan otro propósito que el de deleitar a los usuarios.

4.Hazlo invisible

Eso suena bastante desgarrador dado el tiempo invertido en diseñar las interacciones, pero si pasa desapercibido, probablemente sea porque han hecho un trabajo increíble. Tendemos a prestar más atención al uso de una pieza de tecnología o una interfaz cuando va mal o algo se siente torpe. Cuando todo va bien, el usuario puede concentrarse en el contenido.

La cantidad de consideración del diseño de interacción en aplicaciones y sitios web ampliamente utilizados como Facebook, Pinterest, Twitter y productos de Google es incomprensible. Y, sin embargo, nunca lo notarías hasta que alguien te lo señaló. Hacen que el diseño sea invisible para que pueda disfrutar de la experiencia y construir una conexión emocional más fuerte con el producto, servicio o contenido.

Seis desafíos de diseño que el diseño de interacción puede resolver

1. Orientación y contexto

Este es un desafío particular para el diseño de dispositivos móviles cuando el espacio de la pantalla es limitado. Muestre todo al aire libre y el usuario se sobrecargará cognitivamente. Mostrar cosas vitales y ocultar cosas menos críticas es lo que buscamos; sin embargo, oculta una parte de la experiencia. Entonces, al usar interacciones significativas, podemos enseñar visualmente al usuario dónde viven las cosas, por lo que es fácil de recordar e intuitivo.

A continuación, se muestran algunos ejemplos de cómo crear contexto mediante la interacción:

• Cambiador de color de fondo de fuentes de Google. Los colores se sienten como si vivieran dentro del icono del cubo de pintura.
• El proceso de agregar al carrito y pagar en Cotton Bureau. En lugar de llevarlo a una nueva página de la cesta, es como un carrusel que vive a la derecha de la página visible.

2. Demostrar causa y efecto

Un ejemplo clásico de esto es una interfaz de arrastrar y soltar. Cuando recoges un objeto multimedia y lo mueves a la "zona de caída", el usuario debe recibir comentarios para decirle que lo ha recogido y que se ha movido al lugar correcto para dejarlo. Una vez que lo ingresan, debe haber una validación para decirle al usuario que tuvo éxito en su tarea. Esto se puede hacer mediante cambios de color, mensajes de validación positiva o incluso efectos de sonido.

3. Proporcionar comentarios

Para este ejemplo, tomemos un botón de pago. ¿Cuántas pasarelas de comercio electrónico mal ejecutadas ha experimentado en las que hace clic en ese bonito y brillante botón "Pagar ahora", solo para encontrarse con la confusión de si ha hecho clic en él o no porque se está procesando? No dijo que eso fuera lo que estaba haciendo. Entonces, la interacción puede cambiar el estado de un botón y, con un poco de animación, puede decirle al usuario que "se está procesando el pago" y luego decirle al usuario cuando "se recibe el pago" antes de reubicarlo en una página de confirmación de pedido. No más preguntas sobre lo que está sucediendo durante diez segundos y cuestionando si has roto Internet.

4. Resalta la información clave

Cuando algún contenido es de mayor prioridad dentro de la misma vista de pantalla, el uso del color y la tipografía para promoverlo puede romper la consistencia de su sistema de diseño o parecer fuera de lugar si se usa en exceso. La interacción puede ayudar a acentuar el contenido importante sin comprometer el diseño.

Piense en las aplicaciones de fitness: cuando carga por primera vez su panel, desea ver la actividad principal y las estadísticas de hoy. El uso de una animación simple puede mostrar este contenido sin diluir la cantidad de cosas que se muestran en la pantalla.

5. Crear percepción de desempeño

La velocidad es un tema candente y por una buena razón, ya que es un factor común asociado con las tasas de rebote. Habrá casos en los que haya maximizado la optimización de la velocidad en la página y todavía se está tardando un poco en cargar la página. Existen alternativas para no mostrar nada al usuario o mostrar un icono de carga.

La carga esquelética se puede utilizar para mostrar un diseño predecible en forma de estructura alámbrica, de modo que antes de que se cargue la página, el usuario sabe aproximadamente dónde buscar y cómo podría interactuar con la interfaz. Psicológicamente, parece que la página se ha cargado más rápido en comparación con no haber visto nada, pero en realidad, se carga al mismo tiempo.

También puede utilizar los tiempos de carga como una oportunidad para educar a los usuarios sobre lo que está sucediendo y lo que está a punto de suceder con mensajes amigables que difunden el tiempo de espera.

6. Agregar personalidad a la marca

Las marcas dirigidas por personajes pueden beneficiarse enormemente de la introducción de interacción para aportar personalidad a la experiencia. Puede aprovechar las características humanas de las mascotas. Cuando no tiene nada visual en su marca, aún puede agregar personalidad mediante el uso de velocidad y frecuencia. Piense en Google y sus extravagantes precargadores de puntos o la activación de comandos de voz que brindan un enfoque amigable y divertido de una manera simple.

Establecer una conexión emocional con el usuario es una excelente manera de obtener visitas regulares. El diseño de interacción puede hacer que la tecnología se sienta más centrada en el ser humano, lo que siempre es bueno tener como objetivo.

Introduciendo la interacción en su proceso de diseño

Bocetos y composiciones de baja fidelidad

Herramientas de diseño de interacción

• Keynote: si está buscando algo crudo y simple para transmitir su idea, Keynote es la solución rápida.
• Adobe Animate: manténgalo todo dentro de Adobe y combínelo sin problemas con otras herramientas. Esto es ideal para animaciones ilustrativas.
• Tumult Hype: si está familiarizado con la interfaz de Sketch y conoce las líneas de tiempo, se sentirá como en casa con Tumult.
• Framer: esta es una herramienta de diseño de interacción especialmente diseñada que tiene capacidades realmente avanzadas para hacer coincidir su animación con JavaScript.
• Principio: con un buen enlace de Sketch, Principle se está convirtiendo en el punto de referencia para la interacción. Es relativamente sencillo de aprender, y lo que puedes lograr con él es genial.
• Atómico: agregue datos, lógica y variables para que sus interacciones sean tan prácticas como la compilación final. Esto es para el diseñador avanzado que tiene algunos conocimientos de codificación.
• Invision Studio: aún es temprano, pero Invision Studio tiene algunas capacidades y similitudes excelentes con Principle. El tiempo dirá si esto será lo suficientemente avanzado como para dominar el mercado de creación de prototipos y colaboración.

Notas de traspaso detalladas

Dejar notas de desarrollador es una manzana de la discordia si se encuentra en un entorno altamente colaborativo, pero si está trabajando de forma remota, las notas detalladas contra sus ideas y prototipos con una buena transferencia pueden garantizar que sus interacciones se tengan en cuenta en la compilación.

Compile una biblioteca de demostraciones e inspiración

Agréguelo a su sistema de diseño

Si ha resuelto con éxito un problema común (probado correctamente) con la interacción, introdúzcalo en su sistema de diseño o biblioteca de patrones para reutilizarlo en escenarios similares sin la inversión de tiempo para hacer otra cosa desde cero.

Para obtener ayuda con el diseño web y la experiencia del usuario (UX), póngase en contacto con nosotros hoy.

Si necesita ayuda con su experiencia de usuario, no dude en contactarnos.