6 increíbles ejemplos de diseño UX para inspirarte

El diseño UX es muy importante, pero es fácil dejarse llevar por tendencias de diseño llamativas, sobrecargar tu producto y olvidar que el mejor diseño UX no trata de ti en absoluto: se trata de resolver los problemas de los usuarios.

No te preocupes: este artículo te mostrará el camino a seguir mostrándote seis geniales ejemplos de diseño de UX centrado en el usuario. Inspírate para crear una experiencia de usuario increíble y utiliza nuestros consejos prácticos para poner en práctica estos ejemplos.

Diseño UX bueno y malo

El diseño UX consiste en crear productos que satisfagan las necesidades del usuario de forma fácil, eficaz y agradable. Todos y cada uno de los puntos de contacto con el cliente contribuyen a esta experiencia del usuario, desde el momento en que se carga la página de destino hasta la exploración del producto, la conversión, la incorporación y el uso de las funciones.

¿Qué es un buen diseño UX?

Un buen diseño de UX se centra en empatizar con los usuarios para garantizar que su viaje a través de tu producto, sitio o aplicación sea funcional y placentero. Varía en función de los clientes y de la marca: un buen diseño de UX es lo que es bueno para tus clientes y tu producto.

El mejor diseño UX:

• Se centra en ayudar a los usuarios a hacer lo que han venido a hacer

• Responde al comportamiento de los clientes, a sus comentarios y a la evolución de sus necesidades.

• Elimina las fricciones en el flujo del cliente.

• Anticipa -y elimina- los posibles obstáculos y fuentes de confusión.

• Ofrece una interfaz de usuario atractiva y accesible.  

• Incorpora oportunidades para satisfacer al cliente

• Permite a los usuarios hacer oír su voz facilitando comentarios o conectando con el servicio de atención al cliente.

¿Qué es un mal diseño UX?

En lugar de guiar a los usuarios a través de una experiencia de producto fluida, los errores de diseño de UX impiden a los clientes satisfacer sus necesidades y causan confusión o frustración. 

Mal diseño UX: 

• Se centra en suposiciones en lugar de profundizar en la investigación de UX

• Prioriza la estética sobre la usabilidad y la accesibilidad

• Permanece estática y no evoluciona con las expectativas y necesidades cambiantes de los usuarios.

• Abruma o sobrecarga a los usuarios con información y opciones mal organizadas.

• No engancha al usuario para mantenerlo comprometido

Inspírese con 6 ejemplos de gran diseño UX

Seamos más concretos: ¿cómo es realmente un buen diseño de UX? 

Echa un vistazo a estos seis brillantes ejemplos de diseño UX en acción. A lo largo del camino, te mostraremos cómo utilizar estos conocimientos para crear una experiencia de usuario perfecta.

¡Vamos!

1. N26: anticiparse a las necesidades de los usuarios

La banca en línea y la aplicación móvil de N26 ofrecen a los usuarios una forma sencilla y personalizada de gestionar sus finanzas.

Por qué es un excelente diseño UX 

La interfaz sencilla e intuitiva nos recuerda que el mejor diseño de UX no consiste en deslumbramientos innecesarios o gráficos extravagantes. N26 pone a los usuarios en el centro de atención y se esfuerza por satisfacer todas las necesidades que puedan tener de una aplicación de tecnología financiera.

Hay montones de opciones entre las que elegir para organizar la información financiera: puedes ver extractos de cuenta estándar, pero también infografías en profundidad y estadísticas sobre el gasto.

N26 ofrece muchas posibilidades de personalización que son a la vez bonitas y funcionales. Los usuarios pueden crear diferentes espacios de "ahorro" y añadir diferentes imágenes o descripciones; por ejemplo, podrían poner una foto de su próximo destino de vacaciones en su espacio de "fondo de viaje". Es una experiencia de usuario flexible y personalizable.

La aplicación de N26 también tiene opciones predeterminadas disponibles en cada etapa para que los usuarios no se vean obligados a tomar muchas decisiones adicionales si no lo desean.

La facilidad de uso es un principio clave del diseño, pero también es fundamental un alto nivel de seguridad. En cuestión de unos pocos clics, los usuarios pueden realizar transacciones que normalmente llevan mucho tiempo (como cancelar una tarjeta o pedir una nueva), pero se les pide que reconozcan la huella dactilar o la contraseña para mantener la seguridad. También es fácil alternar entre distintas opciones para mostrar o no la información confidencial de la tarjeta y la cuenta. 

Se trata de un diseño UX ágil y accesible que ofrece una variedad de funciones sin confundir al usuario y hace que los procesos bancarios notoriamente dolorosos resulten sencillos e incluso placenteros.

Pasa de la inspiración a la acción

Emula esta potente experiencia de usuario situando a tus usuarios en el centro de atención.

Al navegar por su producto, da la sensación de que N26 ha pensado mágicamente en todas las posibles necesidades o preferencias que pueda tener un usuario...  

Pero ellos no leen la mente. Saben que una buena experiencia del usuario consiste en hablar con los usuarios, empatizar con ellos e implementar sus feedbacks.

Utiliza la información sobre experiencia del producto y las herramientas de UX para comprender cómo los usuarios están experimentando tu producto y por qué se comportan de una determinada manera en tu sitio web.

Las Grabaciones de sesión de Hotjar te ayudarán a entrar en la cabeza de tus usuarios y a vivir virtualmente junto con ellos sus recorridos por el producto.

El Widget de Feedbacks te ayudarán a comprender por qué los usuarios se comportan de una determinada manera, y te permite recoger sus sugerencias y comentarios para así saber qué funciones adicionales, opciones de personalización o de asistencia necesitan.

2. ASOS: interactivo e informativo

ASOS ofrece una tentadora experiencia de compra en línea.

Por qué es un excelente diseño UX 

El comercio electrónico de moda tiene que ser visualmente impactante y, al mismo tiempo, satisfacer todas las necesidades prácticas de los usuarios. La página de aterrizaje de ASOS tiene una imagen brillante y viva para capturar la atención de sus clientes, y hay botones de llamado a la acción (CTA) y de navegación perfectamente ubicados para que los clientes se sientan atraídos a explorar secciones y productos específicos. 

La enorme gama de productos que ofrecen podría resultar abrumadora, por lo que la experiencia del usuario se ha diseñado en torno a la "fragmentación" de la información en categorías y de filtros de producto avanzados que permiten a los usuarios acceder rápidamente al tipo de ropa que buscan. 

Una vez que el cliente llega a la página del producto elegido, existe una jerarquía visual clara. Es fácil encontrar más información relevante como el gráfico de tallas, y todos los extras se abren en la misma página, por lo que no hay peligro de desviar al cliente hacia nuevas pestañas. La interfaz de usuario es continua, de modo que los usuarios pueden seleccionar una talla, comprobar el precio y añadir al carrito en solo un par de clics. 

La experiencia de usuario de ASOS es muy receptiva: Motiva a los clientes a explorar la información visual y escrita de diversas formas. Las fotos de los productos son interactivas, por lo que se puede hacer clic en un montón de vistas diferentes desde distintos ángulos, y la función "Pasarela virtual" de ASOS muestra la ropa sobre una modelo mientras esta se mueve en vídeo: es una forma estupenda de entusiasmar a los usuarios con el producto y responde a su necesidad de saber cómo se ve un producto en la vida real antes de comprarlo.

Pasa de la inspiración a la acción

Está claro que ASOS ha llevado a cabo un billón (esa es la cifra exacta) de pruebas y validaciones de UX para abordar todos los obstáculos y fallos que podrían hacer que los usuarios tuvieran menos probabilidades de realizar una acción de conversión, ya sea permanecer en la página de un producto el tiempo suficiente para ver el vídeo o completar el pago. Su brillante UX consiste en comprender cómo se comportan los usuarios y por qué.  

Para hacerlo tú mismo, mantente al tanto de todas las métricas de UX y realiza análisis de UX. Realiza pruebas A/B o experimentos multivariantes para saber cómo responden los clientes a diferentes diseños de página. 

Utiliza los Mapas de calor de Hotjar para ver dónde estás perdiendo clics y clientes. Puede que descubras que algo tan sencillo como cambiar la posición de tu CTA podría aumentar drásticamente las conversiones.

3. Calma: empatía emocional y deleite del usuario

La aplicación Calm ofrece una gama de meditaciones y pistas de audio de bienestar de fácil navegación.

Por qué es un excelente diseño UX 

Desde el principio, está claro que Calm se ha diseñado teniendo en cuenta las necesidades del usuario. La interfaz de usuario convierte la aplicación en un oasis para los usuarios estresados, con colores y sonidos relajantes que comienzan incluso antes de que hayas hecho clic en una pista de audio.

La jerarquía del diseño es racional y clara, lo que garantiza que los usuarios no se sientan abrumados con montones de opciones diferentes. Solo se ven los iconos básicos de reproducción, pausa, rebobinado y compartir cuando se hace una meditación.  

La experiencia inicial también es buena. La aplicación hace que los clientes respondan rápidamente a preguntas sencillas e intuitivas para empezar: en unos pocos clics, ya están configurados y realizando una meditación personalizada. Tus respuestas se utilizan para personalizar aún más la experiencia del usuario, con notificaciones y recordatorios de otras funciones que podrían interesarte. 

Hay pequeños detalles repartidos por toda la aplicación que hacen las delicias del usuario, ofrecen funciones adicionales, efectos de sonido y meditaciones exclusivas con celebridades. 

Calm incluso convierte los obstáculos de la UX en oportunidades para el disfrute. Los momentos de alta fricción, como la espera para que se cargue una meditación, se integran en la experiencia de la aplicación. Se pide a los usuarios que respiren profundamente mientras esperan, lo que transforma una experiencia de impaciencia (y un momento en el que los usuarios podrían abandonar la aplicación) en un miniejercicio de atención plena que ofrece un valor añadido. 

Pasa de la inspiración a la acción

Sigue el ejemplo de Calm y trata de comprender profunda y emocionalmente a tus clientes. 

Puedes utilizar grabaciones para crear empatía con la experiencia del usuario, pero realmente necesitas hablar con tus usuarios para conectar más profundamente. Realiza entrevistas a clientes y encuestas de UX y utiliza las herramientas de encuesta Hotjar para saber lo que ellos piensan y sienten en sus propias palabras. 

Empatizar con los usuarios te ayudará a eliminar errores, barreras y fricciones. Pero también te ayudará a identificar oportunidades en las que puedes añadir alegría y disfrute a la experiencia y así retener a los clientes. 

Pero no sólo les preguntes qué está mal en la experiencia del usuario: pregúntale también a los clientes qué más quisieran ver y cómo les gustaría sentirse al utilizar tu producto, y así utiliza sus respuestas para darles valor añadido.

4. Keurig: racionalizar la información para el comprador

Keurig ofrece una experiencia informativa de compra para sus cafeteras de gama alta y cápsulas de bebidas aromatizadas.

Por qué es un excelente diseño UX 

Las cafeteras Keurig son conocidas por su elegante diseño y facilidad de uso, por lo que el recorrido de su sitio web también prioriza la estética del diseño y la facilidad de uso. 

Su diseño de UX logra un sólido equilibrio, ofreciendo simplicidad visual pero con todos los detalles técnicos del producto que desearía tener un comprador de electrónica doméstica. 

Los clientes pueden explorar imágenes en detalle de distintos productos y sus características desde diferentes ángulos para así hacerse una idea visual. Hay mucha información detallada sobre el producto, pero está dividida en grupos de especificaciones y explicada en un lenguaje claro e intuitivo. En lugar de enumerar especificaciones técnicas pormenorizadas, los detalles del producto explican a los usuarios cómo afectará cada característica a su taza de café matutina: se anima a los clientes potenciales a imaginar cómo el producto encajará en sus vidas cotidianas.

Se puede obtener información imparcial accediendo fácilmente a las opiniones, y al hacer clic para leerlas no le apartará del producto que se estaba mirando. La compra se realiza sin fricciones y está muy claro qué modelos y colores están disponibles.

Una característica destacada son los cuadros comparativos, que facilitan a los clientes la comparación entre distintos modelos, conocer las opciones y entender sus diferencias.

Pasa de la inspiración a la acción

Dar a los clientes toda la información que necesitan sobre un producto técnico sin sobrecargarlos es todo un reto. Puedes intentar evitar los diseños recargados, el desorden o toneladas de jerga técnica, pero con un diseño racionalizado, ¿cómo determinas qué información es lo suficientemente importante como para incluirla? 

Lo realmente importante es aquello que es importante para tus usuarios. Tendrás que preguntarles, escuchar, poner en práctica sus sugerencias y volverles a preguntar. Es una cuestión de ensayo, error e iteración. Observa las grabaciones, utiliza encuestas y habla con los clientes antes y después de cada iteración. 

También puedes aprender de Keurig prestando especial atención a la información que les puede hacer falta a tus usuarios para dar los pasos finales hacia la conversión. Quizá mostrar las opiniones de forma más destacada u ofrecer una tabla comparativa diseñada para ayudar a los clientes a decidirse, podría marcar la diferencia: no lo sabrás a menos que preguntes.

Utiliza los widgets de Feedbacks de Hotjar para pedir a tus clientes que valoren su experiencia y preguntar qué información adicional les gustaría ver. 

Analiza también las grabaciones de sesiones de aquellos clientes que no se convirtieron en las etapas finales, y verifica si estaban haciendo clic para obtener más información, a continuación, utiliza las encuestas para preguntarle a estos la razón por qué no se convirtieron.

5. Airbnb: sencillez y flexibilidad

El sitio de Airbnb combina navegabilidad y estilo a la vez que ayuda a los usuarios a encontrar alquileres vacacionales o a alquilar sus casas como anfitriones.

Por qué es un excelente diseño UX 

Los clientes saben exactamente lo que deben hacer en cuanto llegan a la página de aterrizaje de Airbnb: hay una fuerte CTA en primera posición. 

El diseño UX de Airbnb consigue satisfacer las necesidades de dos públicos muy diferentes: anfitriones y huéspedes. Cada grupo de usuarios se prepara de forma diferente con elementos visuales que hablan de sus deseos (unas vacaciones relajantes para los huéspedes; una fuente de ingresos estable y sin preocupaciones para los anfitriones) y utilizan la narración de historias para crear una conexión. 

Las funciones de búsqueda son el corazón de la UX de Airbnb. Los usuarios empiezan con un cuadro de búsqueda limpio y sencillo, y luego es fácil aplicar filtros y desglosar por rango de precios, habitación o apartamento.

La experiencia del usuario está marcada por un diseño adaptable que ofrece distintas formas de visualizar la información, tales como organizar las propiedades por precio, por servicios (como piscinas o balcones) o ver las propiedades en un mapa interactivo y móvil.

También hay un sentido de urgencia bien empleado para impulsar las conversiones: el sitio te informa cuando queda poca disponibilidad para una propiedad, o cuando has encontrado una propiedad que suele estar reservada con mucha antelación.

Pasa de la inspiración a la acción

Para seguir el ejemplo de Airbnb, vuelve a lo básico. Antes de lanzar complejos rediseños de la UX, ten en cuenta factores sencillos como lo prominente que es tu CTA y si los usuarios se sienten atraídos a hacer clic en él o realizar una búsqueda inicial sin dudarlo. 

No confíes en conjeturas: utiliza herramientas de análisis de la experiencia del producto como Hotjar para obtener una combinación de datos cuantitativos y cualitativos que puedas utilizar para tomar decisiones informadas sobre la experiencia del usuario.

El brillante diseño de UX de Airbnb integra a la perfección la usabilidad con el diseño, la narrativa del producto y el marketing. Es claramente el resultado de la colaboración entre muchas funciones y roles diferentes: diseñadores especializados en UX y UI, equipos de producto, marketing y ventas, analistas de negocio y más. 

Inspírate en llevar el increíble diseño UX más allá de tu equipo de producto. Promueve una colaboración interfuncional para cubrir todas las bases, obtener diversas perspectivas e integrar las necesidades del usuario con las de la empresa.

6. Babbel: inmersión y gamificación

Babbel ofrece una interfaz de aprendizaje de idiomas simplificada que ayuda a los usuarios a concentrarse.

Por qué es un excelente diseño UX 

Desde el momento en que se prueba la aplicación, Babbel pretende atraer a sus clientes hacia un flujo inmersivo. 

Su diseño UX se basa en la investigación educativa y la investigación de usuarios para satisfacer las necesidades de un entorno de aprendizaje centrado y estimulante. Una vez que entras en una lección, vas a pantalla completa, sin distracciones ni botones adicionales, y las lecciones mezclan medios escritos, visuales y de audio para que las cosas sean variadas y atractivas.

La UX ofrece diferentes caminos a seguir: puedes hacer lecciones como parte de un curso estructurado y progresivo, o simplemente y jugar unos minutos aquí y allá. 

La experiencia Babbel busca ludificar el aprendizaje de idiomas. A los usuarios se les proponen retos y puntajes que superar, reciben refuerzos positivos en el proceso, y las lecciones están diseñadas para ofrecer un reto, pero no tanto como para desanimar a los clientes. 

La experiencia de usuario y la interfaz de usuario están diseñadas para que los clientes se incorporen rápidamente y sigan participando mientras disfrutan de su experiencia y alcanzan sus objetivos.

Pasa de la inspiración a la acción

El vicepresidente de diseño de producto de Babbel dice: "Llevamos a cabo regularmente investigaciones de usabilidad, con la expectativa de que los nuevos diseños pasen por al menos dos iteraciones hasta que estén bien".

Sigue su ejemplo descubriendo y adaptándote continuamente a la nueva información que aprendas sobre tus clientes.  

Mantente dispuesto a cuestionar tus suposiciones mediante una profunda investigación de los usuarios. 

El ejemplo de Babbel también demuestra que no todos los usuarios tienen las mismas necesidades o la misma forma de interactuar con un producto o sitio web: algunos pueden querer interacciones rápidas, mientras que otros pueden buscar una interacción más estructurada y regular.

Por eso es importante complementar los datos cuantitativos con información cualitativa sobre determinados segmentos de clientes. Utilizando los mapas de calor y datos analíticos, es posible que veas que un determinado porcentaje de usuarios está abandonando, pero puede haber más de una razón para ello. Utiliza las grabaciones -filtradas según datos demográficos del usuario para obtener información detallada-, herramientas de encuesta y entrevistas para descubrir cuales son esas necesidades específicas de los usuarios no se están satisfaciendo.

Recuerda: con Mapas de calor, Grabaciones de sesión y Encuesta de Hotjar puedes acceder a múltiples tipos de datos de clientes desde un solo lugar.

Crear una cultura de diseño UX centrada en el cliente

Como dejan claro estos ejemplos inspiradores, el diseño de UX es un proceso continuo. Los mejores equipos siempre están buscando formas de entender mejor a sus usuarios y optimizar su experiencia. 

Para conseguir un brillante diseño de UX, cada aspecto de su producto debe centrarse en satisfacer las necesidades de tus clientes. 

Las herramientas de análisis de la experiencia del producto te ayudan a combinar análisis con información cualitativa enriquecida. Al empatizar con los usuarios, puedes crear una UX centrada en el cliente que aumente la conversión, la retención y el impacto.