Cuando los usuarios abren un sitio web o una aplicación, lo primero que notan son los elementos de diseño obvios: el logotipo, los colores, los iconos, las ilustraciones y las imágenes. Aunque estos elementos contribuyen a la experiencia general del usuario, en realidad son piezas de un rompecabezas mayor: el diseño de interacción. Este concepto puede ser más sutil para los usuarios finales que una nueva y llamativa página de inicio, pero es esencial para crear una experiencia digital atractiva e intuitiva.

¿Qué es el diseño de interacción?

El diseño de interacción consiste en facilitar las interacciones entre los usuarios y los productos (la mayoría de las veces, esos productos son aplicaciones o sitios web). Según la Interaction Design Foundation, «el objetivo del diseño de interacción es crear productos que permitan al usuario alcanzar su(s) objetivo(s) de la mejor manera posible.» En otras palabras, los diseñadores de interacción son responsables de crear todos los elementos de una pantalla con los que un usuario podría interactuar, ya sea mediante un clic, un deslizamiento, un toque o algún tipo de acción.

Las cinco dimensiones del diseño de interacción sirven como modelo útil para entender lo que implica. Introducido por primera vez por Gillian Crampton Smith, una académica del diseño de interacción, el modelo sólo incluía cuatro dimensiones. Kevin Silver, diseñador de interacción sénior de los laboratorios IDEXX, añadió la quinta.

1D: Las palabras deben ser fáciles de entender y deben comunicar la cantidad adecuada de información al usuario (demasiados detalles pueden abrumar, mientras que muy poca información puede causar confusión).

2D: Las representaciones visuales, como las imágenes, la tipografía y los iconos, deben complementar las palabras para comunicar la información al usuario.

3D: Los objetos físicos o el espacio se refieren al hardware y los objetos reales con los que interactúa el usuario. Por ejemplo, ¿utilizan un smartphone o un ordenador portátil con un ratón? ¿Y dónde están, en su escritorio o en un metro abarrotado?

4D: El tiempo se refiere a cómo los usuarios podrían medir el progreso, con el sonido y la animación, por ejemplo, así como el tiempo que pasan interactuando con las tres primeras dimensiones.

5D: El comportamiento fue añadido por Kevin Silver e incluye cómo las dimensiones anteriores definen las interacciones de un producto. También incluye las reacciones de los usuarios y del producto.

Relacionado: 6 razones por las que los diseñadores de UX deberían explorar la interacción gestual

10 ejemplos de diseño de interacción

¿Cómo se ve la interacción de diseño en la vida real? Aquí están algunos de nuestros ejemplos favoritos encontrados en Dribbble.

Por Jony vino. Dividir la cuenta con tus amigos no siempre es tan fácil como parece, sobre todo si eres una persona más visual que numérica. Este concepto de aplicación te permite introducir el total de la cuenta, seleccionar el porcentaje de la propina y luego ver cuánto pagará cada persona. ¿Y lo mejor? En lugar de ajustar manualmente la parte de cada persona y tener que actualizar constantemente la parte de cada uno, puedes simplemente cambiar el tamaño de la sección de cada persona en la aplicación y los números se recalcularán automáticamente para todos.

Por Prem Gurusamy. En la mayoría de los sitios de comercio electrónico, tienes que navegar a una parte completamente diferente del sitio web o de la aplicación para ver tu carrito. Con esta interacción, puedes ver instantáneamente tus artículos «volar» a tu carrito tan pronto como haces clic en el botón «Añadir al carrito». El carrito continúa visualmente en la superficie de tus artículos, incluso mientras exploras otras partes del sitio.

Por Igor Pavlinski. Las aplicaciones de las redes sociales son famosas por su sobrecarga de información, ya que te muestran todas las historias principales, los vídeos o artículos que son tendencia y las noticias de última hora al mismo tiempo. Este concepto para una nueva aplicación de redes sociales devuelve el control al usuario, organizando el contenido por fuentes (como YouTube, Vimeo, Twitter o Reddit) y permitiéndole elegir qué canal explorar. Esta disposición en forma de tarjeta también elimina la necesidad de saltar entre aplicaciones para consumir tu contenido favorito. En su lugar, es fácil alternar entre fuentes dentro de la misma experiencia.

Por tubik. Hay un millón de maneras de personalizar tu hamburguesa. Y cuando se pide en el smartphone, seleccionar cada ingrediente individual en una pantalla pequeña puede ser un ejercicio de destreza. Este concepto de interfaz de usuario para la aplicación Tasty Burger simplifica la experiencia de pedido al agrupar los ingredientes por tipo. En lugar de mostrar una larga lista de todas las variaciones posibles de queso, producto, carne o bollo, primero se pulsa la categoría del ingrediente (como el queso) y luego se presentan los distintos tipos, como el gouda o el comte.

Por Rahul.Design. Si estás buscando casa y no puedes ver la propiedad en persona, la siguiente mejor opción es hacer una visita virtual. Este concepto de aplicación inmobiliaria, Spec, aprovecha nuestro comportamiento natural al ver un nuevo espacio. Puedes hacer clic en cualquier habitación, como la cocina o el salón, y mover el teléfono para obtener una vista de 360 grados. Es fácil cambiar de habitación con un solo toque.

Por Forest Plasencia. Los filtros ofrecen una forma potente y sencilla de sacar a la superficie diferentes fragmentos de información. Pero el problema de muchas interacciones con filtros es que abren una ventana emergente o una nueva página en la aplicación, ocultando la misma información que quieres filtrar. Esta micro-interacción mantiene todo en la misma vista, incluso cuando filtras. De este modo, puedes ver cómo cambian los datos al instante cuando seleccionas diferentes criterios de filtrado.

Por Dmitro Petrenko. Es más fácil que nunca armar y vigilar tu casa gracias a las aplicaciones para smartphones, pero entre el 94%-99%

Relación: Creando una herramienta que registra las interacciones del usuario

Por Gil. Esta simple interacción con la página mejora la experiencia del usuario en el sitio y ayuda a la empresa a mantener a los visitantes en sus páginas, durante más tiempo. El objetivo principal del sitio es mostrar cómo se pueden utilizar estas propiedades en la naturaleza, como oficina y como extensiones. En lugar de crear experiencias separadas para cada propósito, esta página imita el flujo del usuario comparando y contrastando los diferentes usos, y rebotando sin problemas entre ellos.

Por Dominik Martin. Las interacciones no necesitan ser audaces y notorias para causar un impacto. Este concepto de aplicación simplifica un comportamiento que todos despreciamos: elegir nuestro país de residencia de una larga lista. En lugar de hacer que los usuarios se desplacen por la lista y encuentren su país, esta microinteracción hace que primero elijan la primera letra de su país y luego lo encuentren en una lista de países mucho más pequeña y centrada.

Por Mykolas Puodziunas. Cada vez son más los sitios de venta que facilitan la «vista rápida» de un artículo, en lugar de hacer clic en cada página de detalles y tener que volver a los resultados de la búsqueda para ver más artículos. Este concepto va un paso más allá y te permite ver cada producto en sus diferentes colores disponibles, sin tener que salir de la página de la categoría.

¿Nos hemos perdido tu ejemplo de diseño de interacción favorito? Compártelo con nosotros en Twitter: @InVisionApp.