Diseño de Interfaz de Usuario: Principios y Buenas Prácticas
Contenido del curso
Como vimos en las clases anteriores, el diseño de Interfaz de Usuario de un producto digital es todo aquello que se puede percibir por los sentidos, es decir, la interfaz con la que está en contacto el usuario.
La UI o Interfaz de usuario es la vista o pantalla que permite que una persona usuaria pueda interactuar de forma correcta con un producto digital, y se refiere a todo aquello con lo que las personas usuarias interactúan directamente.
Cuando diseñamos interfaces tenemos que buscar la funcionalidad y la facilidad de uso. Esto lo conseguimos gracias a la arquitectura de la información, los elementos visuales, los colores y tipografías, los botones, los patrones de interacción o incluso los sonidos de las notificaciones.
El trabajo de un UI Designer es crear visualmente cómo va a ser la interfaz de un producto digital para que esté alineada con la UX y la CX.
¿Cómo crear la Interfaz de Usuario?
Hay varias pautas que debemos seguir para mejorar el diseño de las interfaces de forma que aumentemos la usabilidad y mejoremos la Experiencia de Usuario. Cuando se diseñan las interfaces hay que tener en cuenta:
Un ejemplo de un buen diseño sería cuando se le señala al usuario en qué paso está de un proceso de varios pasos. Un ejemplo de un mal diseño sería un error que muestra un código de error en lugar de un mensaje significativo y leíble por humanos.
Otra recomendación que debemos seguir cuando estamos creando el diseño de la interfaz es crear un Sistema de Diseño. Esto nos permitirá agilizar el proceso de trabajo y mejorar la consistencia de los elementos de la interfaz. También nos permitirá ajustar el diseño de la interfaz a las guías de estilo que debe seguir el producto.
Por otro lado, cuando creamos las interfaces de usuario, debemos seguir las diferentes etapas de diseño de forma que vayamos incorporando todos los elementos que deben componer el diseño visual del producto. Algunas de estas etapas se corresponden con las etapas de diseño de UX.
Adicionalmente, tras plantear los wireframes de alta fidelidad del diseño tendremos que pasar a diseñar los Mockups del producto, de forma que el diseño tenga el mismo aspecto visual que poseerá cuando el producto esté desarrollado.
El mockup es una representación más avanzada del diseño gráfico y comunicativo del proyecto. En general, en esta fase se toman los wireframes como plantillas y se añaden los elementos gráficos y visuales, simulando la interfaz real del producto.
CONCLUSIÓN:
En esta clase hemos repasado los conceptos básicos relacionados con la Interfaz de Usuario. Hemos aprendido algunas de las consideraciones que se deben tener en cuenta cuando se diseña la Interfaz de Usuario y hemos conocido el concepto de mockup. En la próxima clase conoceremos conceptos básicos del diseño de interfaces como los sistemas de diseño y el diseño atómico.
RETO:
Escoge un producto digital en el que creas que se ha realizado un buen diseño UI aunque la UX no suponga un valor añadido al producto. Explica a la comunidad de Platzi por qué crees que el diseño de la Experiencia de Usuario no se ha creado de la forma correcta y señala los motivos por los que crees que la Interfaz de Usuario tiene un gran diseño.
Elegí como producto digital a HBO max: Creo que tiene un muy buen diseño UI, posee iconos fácilmente reconocible, no está sobrecargada visualmente, los titulos más nuevos/vistos aparecen en recuadros más grandes que los demás. Pero considero que en UX deja que desear, es muy común que a la hora de reproducir un contenido tarde mucho en cargar y si se quiere adelantar o atrasar es muy complicado, ya que solo permite hacerlo cada 15 segundos, en vez de poder hacerlo más rápido con la barra de progreso (tal como lo hace netflix).
Estoy de acuerdo contigo, recientemente he adquirido HBO max y tengo la impresión de que a pesar que la interfaz de usuario es demasiado similar a todas las plataformas de streaming, se han esforzado en entregar mejor la información del servicio al usuario.
O Disney+ tiene un diseño muy lindo, y fácil de manejar, pero a la hora de reproducir algún título en el caso de PC, se demora y cuando lo vas a pausar tienes que clicar con el mouse porque con la barra espaciadora solo se reduce el tamaño de la pantalla y cuando va a cambiar de episodio en una serie también se sale de la pantalla completa y de nuevo toca volver a hacer uso del mouse para ponerla en pantalla completa y la verdad es molesto tener que pararte a organizar la pantalla cada episodio
Spotify tiene un buen diseño ui, tiene una fácil navegación y esta diseñada por carpetas sencillas visualmente para identificar lo que podríamos encontrar, la ux es muy coda por que puedes buscar algo especifico o simplemente seguir una lista de reproducción establecida por la aplicación, también te sugiere y te crea listas dependiendo de lo que estas buscando,
Diría que Binance. Es un producto que tiene una interfaz bien cuidada en aspectos de diseño y orden. Para el registro e inicio de sesión todo bien explicado. Y pues, en cuanto a iconos y diagramas, se entiende (Podría ser mejor si se simplifica, pero está bien para la cantidad de funcionalidades que quisieron incluir).
Sin embargo, es muy complicada de entender, son necesarios demasiados tutoriales para utilizarla, ya que encontrar lo que necesitas es difícil. Y al final del día por mucho que la uses no terminas de comprender como funcionan o para que son ciertos apartados o etc. Por ejemplo, utilizan el gesto de deslizar la pantalla hacia abajo, para entrar a una sección de mercado. Cuando lo más intuitivo sería para actualizar los resultados. ++Es bastante frustrante utilizarla. ++
Siento que un mejor UX podría ayudar a la gente a entender mejor y lograr sumarse.
https://clickup.com/ la uso en uno de mis trabajos, es para seguimiento de proyectos. es muy util y el deseño ui es simple... no obstante tiene una arquitectura de information confusa que hace que la experiencia del usuario sea frustrante. nunca encuentro la informacion que busco
La página del SAT (Servicio de Administración Tributaria) en México es un perfecto ejemplo para esto. Hace unos años mejoraron su UI, pero la UX sigue siendo una pesadilla.
Slowly
Su UI es única, dedicada a la simplificación y emulación del "pen paling", el desarrollo de "estampillas" es mucho más que acertado. Dentro de los principales inconvenientes está las cuentas abandonadas o usuarios poco frecuentes que rompen toda la magia de enviar y recibir cartas.
.
En una versión anterior, MI SALDO, de Guadalajara, México, tenía unos problemas de UI graves.
En mi experiencia, a pesar de que la UI siempre estuvo súper guapa, realizar abonos a la tarjeta era una tortura. Los tiempos de espera cuando te equivocabas de contraseña podían ser de hasta 20 segundos, y era relativamente complicado seleccionar las tarjetas.
Un producto digital con un excelente diseño de UI, pero con una UX deficiente, podría ser Apple Music en sus versiones anteriores.
UI bien lograda:
UX deficiente:
Uy Spotify1
Es muy bonita, el UI considero que compone todo lo que debe componer, es consistente, a la hora de escuchar una canción en general los elementos gráficos son comprensibles.
But en UX... a lo mejor es una percepción sesgada, pero honestamente me costó mucho aprender a usarlo, que ahora me parece sencillo pero en su momento complejo, y que no te hacen como una guía de cómo usarlo cuando eres usuario por primera veza, siento que es una app que no se comporta como otras plataformas de música y eso dificulta mucho la impresión y la navegabilidad. Por otro lado sé que se integró la parte de los videos, honestamente me di cuenta una vez y lo pillé por error, pero esas cosas nuevas que se agregan... siento que no son intuitivas de lograr llegar a ellas, a menos de que sea con un tutorial.
Disney+ puede tener un buen diseño, es agradable pero al momento de las búsquedas tarda en cargar, si quieres retroceder para elegir otra película casi que tienes que regresar al home, tienes que hacer muchos clics para hacer aglo que pudieses hacer mas rápido.
Elegí mercado libre, tiene una gran interfaz pero he detectado problemas como: -Los envíos no siempre llegan el mismo día como se promocionan aunque los compres temprano (dentro del rango horario). -Las opiniones se agrupan por producto y no por vendedor por tanto esto podría comprometer tu compra dependiendo a que vendedor elijas.
Uber tiene un buen diseño de interfaz, sobre todo porque tiene "feedback" de todo el proceso. Además indica claramente la hora, el lugar, el destino, etc.
Diría que Nequi es una plataforma con un buen UI, es entendible y lo puede manejar cualquier persona (incluso una abuelita) creo que los términos que usan también son muy culturales lo cual a mi parecer lo hace más atractivo.
Lo comente antes y lo comentare nuevamente:
Considero que su UI es excelente, tanto desde el diseño en los colores como su facilidad en el uso y en la navegación, es una APP muy simple -entendiendo que maneja dinero- y que tendría la capacidad de interactuar mucho mas cómodamente con el usuario
No sé si es algo que solo me pasa a mí pero cuando estoy viendo un Live e Instagram y hago un comentario le doy inmediatamente a salir cuando lo termine porque mi costumbre es que así voy de nuevo a lo anterior que vendría a ser cuando no estaba escribiendo el comentario pero eso me saca del Live y me tengo que volver a meter.
El diseño UI de Instagram en general es muy bueno tiene una estandarización bastante clara pero pequeños detalles como ese creo que podrían mejorar.
Comparto mi propio trabajo de diseño UI para recibir sus críticas :-D https://www.behance.net/gallery/167279731/Prototipo-en-Figma-para-plataforma-Tulu En este caso no profundicé mucho con Ux y CX, porque el cliente ya me trajo má so menos digerida esa parte.
Netflix es un buen ejemplo de UI, se ve bien, es entendible, intuitivo, pero como UX a veces pasa que solo tienen un idioma, o los subtítulos no andan, cuando buscas una película figura como que está pero no está realmente
Yo escogí como producto digital la app de food delivery llamada Didi. Pienso que en cuanto a UI está todo bastante bien, tienen un diseño minimalista pero 'divertido' a la vez, por los colores que utilizan. En cuanto a su UX siento que deja mucho qué desear. La app, desde que entras, te llena de información, lanzándote al principio y en grande alguna promoción que tengan del momento. La quitas y te aparece otra notificación en la parte de arriba con otra promo. Una vez que la quitaste que estás con la pantalla 'libre', te siguen apareciendo promociones y son muchas cosas por procesar, que en lo último que piensas es en qué vas a pedir o por qué ibas a pedir.
Elegí como producto digital a NEQUI, tiene un sistema de iconográfica, manejo tiógráfico y de color impecables y fáciles de identificar y diferenciar frente a otras plataformas de productos bancarios. Los sistemas de diseño están muy bien establecidos y estructurados. Su navegación es muy intuitiva debido a su buen diseño UI. Sin embargo, a nivel de UX deja mucho que desear, constantemente aparecen errores, desde el inicio de sesión al entrar en la app, pasando por tareas tan simples como pasar el dinero a la tarjeta, hasta tareas complejas como retirar dinero de un cajero y enviar dinero a otras cuentas. El sistema se cae constantemente e incluso hay un lack en la app que tarda en aparecer los movimientos realizados con el dinero.
Un producto digital que creo que tiene un buen diseño UI pero la UX no supone un valor añadido al producto es la aplicación Instagram.
La aplicación cuenta con una interfaz atractiva, cuenta con un diseño consistente, minimailista y elegante. La paltea de colores y los icosnos son coherentes.
En cuanto a UX le hace falta mucho desarollo, sigue siendo la misma aplicación que se lanzo en sus inicios. Además, se han olvidado de incluir busquedas mas sencillas en su lupa de busquedas.