Diseño multiplataforma: Parte 3: Mejora de la interfaz de usuario y diseño de interacción

El cuerpo humano ha existido mucho antes de que fuera posible todo lo que vemos a nuestro alrededor hoy en día y ha creado sistemas intrincados que impulsan la forma en que nos relacionamos con el mundo y, ahora, son el punto de atención de toda la investigación en TI, ya sea biotecnológica o de diseño. Estos sistemas dirigen nuestras experiencias en la vida. Nuestros sentidos son nuestras brújulas, que distinguen lo placentero de lo repugnante, lo reconfortante de lo abrumador.

A medida que el flujo de señales entrantes se vuelve más abundante y una mayor parte de nuestras vidas gira en torno a dispositivos digitales, el papel de los diseñadores de UI y UX se ha vuelto más importante que nunca. En la actualidad, nuestros sentidos trabajan a tiempo completo sin descansos, y los diseñadores deben crear experiencias que agreguen valor en lugar de restarle valor.

Ajustar los detalles más pequeños es lo que crea la experiencia que buscamos: intuitiva, placentera y optimizada.

Pero para garantizar que cada paso que das sea en la dirección correcta, necesitas una comprensión más profunda no sólo del objetivo que quieres alcanzar, sino también de las herramientas y los conceptos que pueden ayudarte a lograrlo.

En esta parte, exploraré el "Diseño de interacción y pulido de la interfaz de usuario" : el proceso de perfeccionamiento y mejora de los aspectos visuales e interactivos de una interfaz de usuario para crear experiencias agradables en todos los aspectos. Echemos un vistazo a los aspectos que le ayudarán a crear experiencias que resuenen en un nivel más profundo con sus usuarios.

Cómo se perciben las aplicaciones

Lo bueno de la interfaz de usuario y la experiencia de usuario es que cada diseñador es también un usuario, y la sensación de disfrutar del flujo de una interfaz es genial independientemente de tu ocupación. ¡No hay duda! La única diferencia es que, mientras que para los usuarios, todo termina en el deleite, para nosotros, el trabajo continúa.

Empecemos por ser más específicos. El placer en el contexto de la interfaz de usuario se refiere a las emociones positivas que experimenta un usuario al interactuar con un producto, una interfaz o un servicio, y va más allá de simplemente satisfacer una necesidad funcional. Es un aspecto clave de la experiencia del usuario porque hace que la experiencia sea memorable, impulsando la satisfacción y la lealtad del usuario. Hace que tu aplicación sea realmente especial.

Este es el siguiente nivel después de diseñar la arquitectura de un producto, el esqueleto, y este paso consiste en agregar los músculos, la piel y hacer que el producto cobre vida.

Para lograrlo, los diseñadores necesitan comprender en profundidad cómo las personas perciben y experimentan un producto. Veamos la teoría del diseño emocional de Don Norman . Explica que los usuarios interactúan con los productos en tres niveles : visceral, que es la reacción emocional inmediata a cómo se ve y se siente un producto, conductual, que abarca lo bien que funciona el producto y lo agradable que es usarlo, y reflexivo, que es la conexión a largo plazo que desarrollan los usuarios a medida que reflexionan sobre su experiencia a lo largo del tiempo.

La teoría de Norman explica que estos niveles ( visceral (primeras impresiones) , conductual (cómo funciona) y reflexivo (impacto emocional a largo plazo) no son lineales, sino que interactúan constantemente. El atractivo visual de un producto (visceral) continúa afectando a los usuarios mientras interactúan con él funcionalmente (conductual), y cada acción alimenta cómo se sienten los usuarios con respecto a él a lo largo del tiempo (reflexivo).

Por ejemplo, la interfaz elegante de un teléfono con una navegación fluida probablemente genere entusiasmo inmediato, pero es la combinación de facilidad de uso y satisfacción a largo plazo lo que genera una lealtad duradera. En el diseño, centrarse en cómo se superponen estos niveles es clave para crear una experiencia de usuario que uno recordará.

Por eso, el deleite se encuentra en la intersección de estos niveles en el marco. No está ligado a un solo aspecto de la experiencia. Es la sinergia entre el aspecto de un producto, su funcionamiento y cómo hace sentir a los usuarios a lo largo del tiempo lo que crea una experiencia que vale la pena recordar.

¿Qué hace que las aplicaciones sean tan agradables?

Estos aspectos del diseño están profundamente ligados a los niveles de percepción y, en el proceso de perfeccionamiento de la interfaz de usuario, esta conexión se hace mucho más evidente. La usabilidad desempeña un papel directo en la creación de un placer conductual , esa sensación que tienen los usuarios cuando todo funciona a la perfección.

Tomemos, por ejemplo, la experiencia de guardar una foto en el feed de descubrimiento de Pinterest.

Cuando un usuario selecciona una foto, esta se amplía sin problemas, lo que permite una vista detallada sin salir del feed, lo que mejora instantáneamente la interacción visual. Luego, una pulsación prolongada característica sobre la foto revela acciones rápidas como guardar la imagen en una colección o compartirla con otros.

Todas las acciones esenciales están al alcance de la mano, lo que añade un toque divertido a la funcionalidad. Este diseño no solo simplifica el proceso de selección de colecciones personales, sino que también enriquece la satisfacción general del usuario.

Además de eso, viene el atractivo estético y la emoción . Estos añaden la capa visceral , la respuesta emocional inmediata a la apariencia y la sensación del producto. Una interfaz limpia y bien diseñada con animaciones sutiles o elecciones de color bien pensadas invita a los usuarios a entrar, haciéndoles sentir a gusto desde el principio. Es el factor "wow" lo que llama la atención, pero hace más que simplemente verse bien: atrae a los usuarios a la experiencia, reforzando la usabilidad y haciendo que las interacciones sean agradables.

En el ejemplo de Pinterest, más allá de la usabilidad fundamental, la aplicación agrega capas de mejora que hacen que la experiencia sea mucho más "completa". Por ejemplo, al mantener presionada una foto y seleccionar acciones como "Me gusta", "Guardar" o "Compartir", los usuarios pueden notar una respuesta háptica sutil.

Además, Pinterest cuenta con ciertos gestos que muchas aplicaciones utilizan actualmente, como volver al feed de descubrimientos deslizando el dedo hacia abajo o navegar por los elementos deslizando el dedo hacia la izquierda y la derecha. Estos detalles pueden parecer menores, pero contribuyen significativamente al placer y la satisfacción general de la experiencia.

Pero la verdadera magia ocurre en el punto intermedio, cuando la usabilidad y la estética trabajan juntas, creando una experiencia unificada que resuena en múltiples niveles. Es entonces cuando los usuarios pasan de “Esto funciona” a “¡Me encanta esto!”. Ya no se trata solo de entregar el producto.

Cada elemento, cada patrón implementado, contribuye a la percepción que se tendrá de tu aplicación. Una interacción, como pedir un servicio, puede afectar solo a la experiencia conductual o a ambas, la conductual y la emocional. Compara la forma antigua de pedir un taxi por teléfono, que a menudo implicaba esperar en espera, conversaciones no siempre agradables con desconocidos y tiempos de espera poco claros, con el proceso moderno y simplificado de la aplicación Uber.

No solo simplifica el proceso de pedido, sino que también mejora la experiencia del usuario al ofrecer actualizaciones en tiempo real sobre la ubicación del conductor, una visualización clara de las tarifas y transiciones fluidas entre las diferentes etapas del proceso de viaje. ¡Qué cambio, no?

Sin embargo, la división entre estética y función en la interfaz de usuario es en realidad más una formalidad. Cualquier interfaz puede ser agradable y cualquier elemento "estético" puede volverse "funcional". Tomemos como ejemplo la Dynamic Island de Apple, la famosa muesca negra de los iPhones anteriores. En los modelos posteriores, evolucionó de una mera necesidad de diseño a una característica funcional y elegante. Al principio, la muesca era un compromiso para albergar la cámara frontal y los sensores y, al mismo tiempo, maximizar el espacio de la pantalla.

Luego, con el tiempo, Apple lo transformó en una parte crucial de la tecnología Face ID, ofreciendo un método de autenticación rápido y seguro que los usuarios adoptaron rápidamente.

A continuación se muestran algunos ejemplos de cómo los elementos puramente "utilitarios" pueden elevarse con toques de deleite:

La verdadera habilidad de un diseñador para crear aplicaciones atractivas radica en comprender cuándo, cómo y por qué incorporar elementos emocionales. Esto depende del caso de uso, el contexto y el enfoque : los tres pilares fundamentales que guían cada decisión de diseño. Se trata de discernir cuándo priorizar la usabilidad, cuándo introducir capas emocionales y cuándo integrarlas a la perfección para crear experiencias que conecten profundamente con los usuarios.

Seamos realistas, incluso la animación más encantadora puede convertirse en una fuente de frustración si la miras ansiosamente mientras no se procesa un pago de $1000.

Ejemplo 1. Animación de palabras clave de iMessage

Cuando envías ciertas palabras clave como "Felicitaciones" o "Feliz cumpleaños" en iMessage, el texto activa una animación de pantalla completa, como globos o confeti, agregando una celebración visual divertida y atractiva al mensaje.

Ejemplo 2. Fotos de perfil de marca en Google Docs/Sheets

Google Docs y Sheets muestran imágenes de perfil de marca coloridas que muestran quién está editando el documento en tiempo real. Esto no solo hace que la colaboración sea más personal, sino que también ayuda a los usuarios a identificar rápidamente a sus coeditores.

Ejemplo 3. Memoji de iOS después del campo de ingreso de contraseña

Al ingresar una contraseña en un dispositivo iOS, un personaje Memoji cobra vida dentro del campo de contraseña, reflejando tus expresiones faciales. Si la ingresas incorrectamente, puede que frunza el ceño o se encoja de hombros como respuesta. Si se demora al escribir, el Memoji puede incluso bostezar, lo que agrega un toque caprichoso a esta tarea tan mundana. Le infunde un poco de personalidad y humor a tu rutina diaria.

Ejemplo 4. El dinosaurio de Google cuando no hay Internet

Google Chrome cuenta con un juego de dinosaurio oculto que aparece cuando no hay conexión a Internet. Es un juego simple y adictivo, pero lo más importante es que es una excelente manera de convertir la frustración momentánea en un poco de diversión.

Ejemplo 5. Eliminación de un mensaje en Telegram

En Telegram, cuando eliminas un mensaje, este desaparece con una animación ordenada que destruye visualmente el mensaje como si fuera papel antes de desaparecer, lo que brinda a los usuarios una sensación de control sobre sus conversaciones digitales intangibles.

No me hagas pensar: Patrones de diseño y componentes

El corazón de una interfaz de usuario pulida son los patrones y los componentes. Los patrones de diseño son soluciones establecidas para los desafíos comunes de la interfaz. Proporcionan una estructura familiar con la que los usuarios pueden interactuar. Estos, a su vez, consisten en componentes: los bloques de construcción de la interfaz, como botones, campos de entrada y modales.

Juntos, los patrones y los componentes crean una experiencia de usuario perfecta donde los usuarios comprenden intuitivamente cómo navegar por la aplicación.

Para realzar los elementos funcionales (como menús, formularios o botones), podemos mejorarlos con técnicas estéticas y emocionales. Puedes agregar animaciones sutiles, realizar microinteracciones y un uso reflexivo del color y la tipografía, yendo más allá de la mera función. Todo esto se convierte en tu sistema de diseño: una colección de componentes y patrones reutilizables guiados por reglas claras, lo que garantiza la coherencia en toda la aplicación.

Las animaciones, los esquemas de color y los patrones de interacción predefinidos evocan emociones específicas, por lo que el sistema de diseño se convierte en una herramienta poderosa para crear interfaces cohesivas y atractivas. Este enfoque permite a los diseñadores aplicar estas mejoras de manera consistente sin comenzar desde cero, lo que refuerza la identidad de la marca y genera confianza en los usuarios.

Ejemplo 1. El widget lúdico de Duolingo

En Duolingo, cuando respondes una pregunta de forma incorrecta, la aplicación no solo muestra un mensaje de error, sino que responde con una animación amigable y palabras de aliento de su mascota, Duo the Owl. Este enfoque convierte un posible momento de frustración en una experiencia de aprendizaje positiva, manteniendo a los usuarios motivados y reduciendo las emociones negativas asociadas con los errores. Tácticas del mundo real, pero animadas.

Ejemplo 2. Animación de tarjetas de Netflix

La animación de la tarjeta de presentación de Netflix ejemplifica un diseño de interfaz de usuario impecable, que mejora la interacción del usuario en todos los dispositivos. Cuando un usuario selecciona un programa, la tarjeta se expande y se convierte en un avance en pantalla completa , lo que proporciona una vista previa cinematográfica que capta la atención. Esta transición fluida, que agrega un toque de deleite, es constante, incluso en su aplicación de TV, donde la misma animación conduce a un avance que se reproduce automáticamente.

Este enfoque unificado en todas las plataformas garantiza una experiencia de usuario coherente, reduciendo la carga cognitiva y simplificando la navegación.

Ejemplo 3. Comandos rápidos de Slack

El deleite y el compromiso emocional también pueden surgir de las características del producto, no solo del diseño de la interfaz de usuario. Los Comandos rápidos de Slack ejemplifican esto al mejorar la productividad y agilizar las interacciones dentro de la aplicación. Diseñados con un enfoque en la productividad, los Comandos rápidos permiten a los usuarios ahorrar una cantidad significativa de tiempo simplemente escribiendo el comando necesario. Por ejemplo, los usuarios pueden actualizar su estado con /status o silenciar las notificaciones con /mute directamente en el cuadro de entrada de mensajes.

Esto no solo acelera el flujo de trabajo, sino que también minimiza las interrupciones, lo que permite a los usuarios concentrarse en sus tareas. La naturaleza intuitiva y que ahorra tiempo de los Comandos rápidos es precisamente la razón por la que a los usuarios les encantan tanto. Mi favorito personal es /shrug, que agrega ¯\(ツ)/¯ al final del mensaje, ¡y es muy divertido!

El papel del diseño de interacción

Si bien los patrones de diseño y los componentes son los elementos básicos de una interfaz de usuario pulida, el diseño de interacción le da vida a todo. El diseño de interacción se centra en cómo los usuarios interactúan con esos componentes: cómo hacen clic, tocan, deslizan y navegan por la aplicación.

Por ejemplo, un menú es un elemento común de la interfaz de usuario de navegación, pero es el diseño de interacción el que determina cómo se siente. ¿El menú se desliza suavemente? ¿Responde instantáneamente a un gesto de deslizamiento? ¿Responde al tacto al finalizar? ¿Tiene animaciones sutiles que hacen que la transición sea agradable?

Un gran ejemplo de diseño de interacción eficaz es el efecto "Genio" de macOS , que se utiliza para minimizar las ventanas del Finder. Esta animación hace que la ventana pase al dock de forma suave, como si fuera la lámpara de un genio. Es visualmente atractiva y funcionalmente informativa, y muestra a los usuarios exactamente dónde va la ventana, lo que ayuda a mantener la orientación espacial.

El diseño de interacción y el sistema de diseño funcionan en armonía. En el diseño de interacción, los comportamientos consistentes de todos los componentes, como la forma en que responden los botones cuando se hace clic o la forma en que los formularios validan la entrada, garantizan que la aplicación se comporte de manera predecible en todas las pantallas. Esta coherencia es lo que genera confianza en el usuario, lo que significa que los usuarios se sienten cómodos sabiendo cómo responderá la aplicación, lo que reduce la fricción y mejora la experiencia general.

Cuando el diseño de interacción se realiza correctamente, funciona junto con patrones y componentes para crear una experiencia cohesiva en la que cada toque, clic y deslizamiento se siente intuitivo. Esto es algo que realmente da vida a las interfaces.

En otros artículos, he hecho hincapié en la importancia de formar un equipo con los desarrolladores. Los diseñadores tienen que colaborar con los desarrolladores porque, gracias a ellos, estas animaciones e interacciones pueden implementarse y se implementan de manera eficaz. Es fundamental proporcionar al equipo especificaciones detalladas y claras para las animaciones (incluidos los tiempos, la aceleración y el comportamiento). De esta manera, la visión de diseño prevista se traduce con precisión en el producto final, lo que lo hace pulido, profesional y emocionalmente resonante para el usuario.

Yendo más allá de lo ordinario

El disfrute de la vida va mucho más allá de realizar las acciones técnicas que pueden llevarte allí. Es una suma de los detalles más minúsculos que crean una experiencia completa y satisfactoria. El diseño es lo mismo. Una interfaz funcional es una base sólida, pero es insulsa. Comprender cómo los usuarios ven y usan tu aplicación ayuda a crear experiencias que sean fáciles de usar y significativas. Creo que la teoría del diseño emocional de Don Norman es una gran guía para las intrincadas conexiones entre todos los aspectos que hacen que un buen diseño sea agradable.

La conexión emocional, los patrones de diseño, la coherencia y el diseño de interacción son los elementos que le dan vida. Además, es un poderoso recordatorio de que, en el diseño de productos, el viaje es tan importante como el destino. Mediante animaciones sutiles, microinteracciones atractivas y detalles visuales bien pensados, puede convertir las interacciones rutinarias en momentos agradables para millones de usuarios. Esa es la magia del diseño.