5 Grandes Ejemplos de Diseño de Interfaz de Usuario (UI)

Todos sabemos que un gran diseño de interfaz de usuario genera un gran éxito.

Por gran éxito, me refiero a GRANDE hasta el punto de que puedes aumentar la tasa de conversión de tu sitio web en un 200% gracias a tus mejoras en el diseño de la interfaz de usuario, como sugiere un informe.

¿Qué es exactamente un gran diseño de interfaz de usuario y cómo puede conseguirlo un diseñador?

En este artículo intentaré explicar en qué consiste un gran diseño de interfaz de usuario con ejemplos de distintos formatos y empresas.

Enfoque en el usuario

Sí, sé que parece una obviedad, pero a veces, como diseñador de interfaz de usuario, debes comprobar una y otra vez las necesidades de los usuarios. Definir lo que los usuarios quieren ver y experimentar cuando utilizan tu producto digital o visitan tu sitio web no es una tarea de una sola vez.

Por ejemplo, elige elementos de diseño que resulten familiares a tus perfiles de usuario. ¿Suelen utilizar Instagram? Puedes adoptar un diseño similar para tus iconos.

En realidad, así es como puedes construir un diseño de interfaz de usuario intuitivo.

Los usuarios buscan estas tres cosas en un diseño:

1. Realizar la tarea con facilidad
2. No perder tanto tiempo haciéndola
3. Disfrutar de la experiencia

Y para proporcionar cada uno de ellos, es necesario atenerse a la regla KISS.

No, no es un beso literal.

La regla KISS significa "Keep It Simple, Stupid!".

Es decir, no intentes añadir más y más a tu diseño si no son necesarios.

Un gran diseño de interfaz de usuario convierte lo complicado en simple y parece estúpido, cubriendo todas las funciones complejas que trabajan en segundo plano. De esta forma, sirve a las necesidades de los usuarios que he mencionado antes. Aunque en este artículo me centraré más en la parte del disfrute, intentaré tocar también algunos aspectos funcionales.

Por cierto, si te interesan las tendencias de diseño de UI y UX, consulta vistazo a este artículo del blog de UG.

Sin más preámbulos, veamos grandes ejemplos que aplicaron esas reglas a su diseño o fallaron en algunos puntos…

1. Asana

¿Qué me gusta de Asana?

Asana es un producto SaaS con un diseño excepcional.

Lo que lo hace sobresaliente es principalmente el uso de animaciones en su diseño. Por ejemplo, un unicornio aparece en tu pantalla para celebrarte cuando completas una tarea. ¿No es una monada?

Te sentirías agradecido de estar acompañado por estos personajes animados mientras trabajas en una tarea estresante. Así es exactamente como puedes hacer que la experiencia del usuario sea más divertida.

Además, la estupenda interfaz de usuario de Asana es extremadamente fácil de usar y casi no requiere información previa.

Por último, el diseño de la tarjeta ofrece una mejor experiencia visual al usuario.

¿Qué podría mejorar?

Debo decir que aunque su diseño intuitivo lo convierte en un gran producto, tiene sus problemas.

Como indica un usuario en el foro de la comunidad de Asana, tienes que abrir cada tarea para ver si hay subtareas bajo su encabezado. En otras palabras, no puedes ver los detalles de las tareas sin hacer clic en ellas y ver la totalidad de la tarea. Podría haber una barra lateral para previsualizar las subtareas y sus asignatarios.

Además, un problema muy sutil del producto en términos de diseño es la aparición de los botones de cierre [X] y [hecho] al mismo tiempo, a pesar de que funcionan igual.

Este es un buen ejemplo de presentación de elementos innecesarios que te alejan del cumplimiento de la regla KISS.

2. Gumroad

¿Qué me gusta de Gumroad?

Gumroad decidió dar el paso hacia un nuevo sistema de diseño a partir de 2021 y ha seguido con él desde entonces. Si no conoces Gumroad, es un producto de comercio electrónico para la publicación digital, y su diseño de interfaz de usuario es más que impresionante.

Pero, ¿qué es un sistema de diseño? Un sistema de diseño es una base de datos de componentes y directrices que pueden combinarse en otras aplicaciones y utilizarse varias veces. La mayoría de las grandes aplicaciones que conoces, como Dropbox, Google y Mailchimp, lo utilizan para ser más eficientes.

La paleta de colores es lo que la distingue de otras plataformas de comercio electrónico.

Es como volver a los años 80 con sus tonos vivos. Se llama diseño Memphis, y es famoso por sus atrevidos contrastes de colores y sus formas abstractas. Podría llamarse retro o vintage, pero funciona hoy en día.

¿Qué podría mejorar?

Hay mucha gente que odia el nuevo diseño de Gumroad.

Incluso hay un vídeo en YouTube que critica su página de inicio.

La razón principal de esas críticas es su aspecto anticuado y su estilo chillón. No puedo decir que esté de acuerdo con ellos, ya que yo también soy un poco hipster, tal vez. 🤭

Aunque estoy de acuerdo en que no coincide totalmente con su objetivo comercial, sigo estando del lado de los esquemas de colores atrevidas para brillar entre las demás.

3. Headspace

¿Qué me gusta de Headspace?

Hoy todos estamos más abiertos a la diversidad, y algunas aplicaciones móviles también parecen estar adaptadas a ella.

Una de las aplicaciones de bienestar y mindfulness más famosas, Headspace, se gana mi corazón con su diseño de interfaz de usuario inclusivo con herramientas de accesibilidad.

También puedes cambiar la fuente y el color de los textos dentro de la aplicación, lo que es una gran ventaja.

Pero lo más importante es que Headspace integra VUI (interfaz de usuario por voz) en su diseño. Se trata básicamente de una interfaz de reconocimiento de voz para responder a la voz humana y convertirla en texto.

¿Qué podría mejorar?

"Nada" puede ser una respuesta a veces.

Realmente no puedo decir nada malo sobre el excelente diseño de la interfaz de usuario de Headspace, y mi investigación también llegó a la conclusión de que es inigualable en términos de combinación de UX y UI. Te recomiendo que leas este artículo que me ha encantado.

4. Hello Monday

¿Qué me gusta de Hello Monday?

Hello Monday es un estudio creativo digital, y demuestra su éxito con su página web.

El uso del espacio en blanco hace que todos los elementos sean más pegadizos y significativos.

Y las tarjetas interactivas hacen que el usuario sienta algo, como tocar un charco y ver cómo se mueven los reflejos.

Las ilustraciones y los dibujos personalizados son una parte importante de su diseño visual y tienen muy buena apariencia. Nos proporciona una experiencia especial y única, al contrario que el mundo prefabricado de elementos de diseño e imágenes. Además, da una sensación genuina de pasar más tiempo en la página.

¿Qué podría mejorar?

No hay barra de navegación en la parte derecha de la página, en contra de lo esperado. Aparece el icono de navegación que no me sirve para ver el resto de la página rápida y fácilmente.

Aunque a veces sea interesante ir en contra de las convenciones del diseño, no creo que desplazarse hacia abajo mediante la alfombrilla del ratón sea una experiencia agradable.

5. Dribbble

¿Qué me gusta de Dribbble?

Dribbble es una base de datos viva y enorme para diseñadores UI/UX. Por eso su diseño de interfaz de usuario es todo un éxito.

Las tarjetas cumplen la función de crear una galería y ver muchas piezas de diseño maravillosas a la vez.

También es agradable cómo se puede buscar en base a códigos de color para ver los diseños con ese color dominante.

¿Qué podría mejorar?

Me gustaría que las tarjetas fueran interactivas. Por ejemplo, me encantaría ver algunos detalles del diseñador o leer sobre el diseño cuando me acerco a una tarjeta con el cursor.

Las tarjetas se aprovechan mucho mejor cuando se construyen pensando en un diseño interactivo.

Conclusión

El proceso de diseño de la interfaz de usuario requiere algo más que habilidades o herramientas de diseño. Puedes ser un gran diseñador gráfico pero fracasar a la hora de satisfacer a los usuarios reales. Para evitarlo, el diseño de UI y UX trabajan juntos en todos los ejemplos exitosos que he mencionado en este artículo.

Por lo tanto, intenta centrarte en el usuario cuando busques inspiraciones de diseño.