Disfruta de nuestro contenido y eventos por un año a un precio especial

Antes: $179

Currency
$149/año
¡Suscríbete!

🔥 Te quedan 🔥

1D
17H
41M
6S
Curso Glosario Product Design

Curso Glosario Product Design

Daniel Torres Burriel

Daniel Torres Burriel

Introducción al diseño UI

10/19

Lectura

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.

tirza-van-dijk-o1SKqmgSDbg-unsplash (1).jpg

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:

  • Mantener la consistencia: se deben utilizar iconos, colores, jerarquía de menús, llamadas a la acción (CTAs) y flujos de usuario que les resulten familiares a los usuarios. Además, es importante estandarizar la manera en la que se presenta la información, de forma que los usuarios sean capaces de aplicar los conocimientos adquiridos en una parte de la interfaz para utilizar otras funcionalidades. La consistencia juega un papel importante ayudando a los usuarios a familiarizarse con tu producto digital de manera que puedan alcanzar sus objetivos fácilmente.
  • Permitir a los usuarios usar atajos: los usuarios con un gran nivel de conocimiento de la interfaz demandan el uso de métodos abreviados para ejecutar las tareas, ya que buscan realizar las acciones de forma rápida y eficiente. Debemos garantizar que el sistema operativo tenga atajos de teclado para copiar y pegar, de forma que los usuarios más experimentados puedan hacer esta tarea más rápidamente.
  • Ofrecer feedback informativo: El usuario debe conocer dónde está y qué va a pasar en todo momento. Para cualquier acción debe haber un feedback apropiado y comprensible por humanos en el periodo de tiempo que lo requieran.

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.

  • Reducir la carga de la memoria a corto plazo: la atención humana es limitada. Las interfaces deben ser tan simples como sea posible con la apropiada jerarquía de información, y eligiendo el reconocimiento del diseño sobre la memorización de la información o el aprendizaje forzado. Reconocer algo es siempre más fácil que memorizarlo.

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.

3526842.jpg

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.

Aportes 6

Preguntas 0

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.

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).

Disney+ tiene una UI muy linda, el uso del color la jerarquía del contenido, la buena utilización de la tipografía, los iconos describen muy bien a lo que se refiere. Pero en cuanto a la UX, cuando lo estas viendo desde la televisión y quieres reanudar un contenido no puedes, debes retroceder toda la pelicular porque no hay una opción de reanudar, así como lo tiene Netflix por ejemplo y el tiempo de carga es muy lento.

Amazon Prime TV APP
En general su diseño UI es llamativo pero a la hora de ver series hay varias cosas que son muy molestas de utilizar principalmente la función de atrasar y adelantar implica que me monte en la barra a través de la navegación del control remoto, para poder usar los otros botones de adelantar y atrasar y es necesario sostener el botón para que las funciones se activen es algo que en netflix es muy sencillo e intuitivo.

Pienso que Deezer es un buen ejemplo de un buen UI porque aunque es similar a spotify se identifica de esta y maneja su propia identidad. Con sus íconos y colores característicos. Es muy sencilla de usar, los botones son claros, tiene el menú completo. Permite el uso de atajos como copiar, pegar, seleccionar todo y tiene los objetos pertinentes sin sobrecargar la interfaz. Sin embargo siento que a la hora de iniciar a la app web es más complejo el inicio de sesión porque de una bombardea con los precios de Deezer. Además, acceder a los controles de la app y perfil no es tan rápido e intuitivo por ejemplo como en spotify.

El sitio web de Ryanair https://www.ryanair.com/es/es es un ejemplo de UI bien diseñado, aunque tiene algunas áreas de mejora, incluyendo su UX al momento de buscar un hotel, ya que en mi opinión, es más cómodo que desplieguen el mapa a tamaño grande para que el usuario pueda ubicar de forma rápida las ubicaciones cercanas a sus puntos de interés, ya que debes dar clic para ampliar el mapa, y esto podría simplificarse mostrando el mapa en una sección amplia de la pantalla que ve el usuario inmediatamente después de ingresar los datos de búsqueda en la barra del Home.

Definitivamente creo que de las mejores es AirBnB
A la fecha se pueden hacer muchos ajustes, permite ver la información en forma sencilla, pero ampliar si se necesita.
El usuario nunca esta perdido, siempre tiene todos los datos a manos y puede ir y venir sin pasar por un sinfin de pantallas