Diseño de Interfaz de Usuario: Principios y Buenas Prácticas

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:

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

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.