Herramientas UX: diseño de interfaz

HERO-diseño-de-interfaz.jpg

Una vez que los wireframes se han completado y el equipo UX pudo establecer la jerarquía de los contenidos, ¿qué sigue? El siguiente paso es trabajar el diseño de interfaz.

¿De qué se trata? El diseño de interfaz o diseño UI (sigla de User Interface) es básicamente el diseño visual. Hasta este punto, el diseñador de interacción UX ha trabajado el diseño racional —mapa de clases y wireframes— del producto o servicio digital, y ahora ha llegado el momento de avanzar con el diseño emocional.

¿Cómo queremos que se sienta el usuario al interactuar con el producto digital? Hay distintos elementos que entran en juego para construir relaciones emocionales con los usuarios: colores, tipografías, recursos gráficos, imágenes, videos, etc. Todo esto tiene que ver con el aprendizaje. Es decir, no se trata solamente de despertar emociones sino además de brindar los recursos adecuados para que el usuario aprenda a usar un sistema rápidamente y sin problemas.

Diseño de interfaz: mucho más que creatividad

El diseñador de interfaz toma los wireframes y comienza a construir el diseño visual a partir de allí. Vale la pena aclarar algo importante: a diferencia de lo que muchos creen, el wireframe no tiene por qué limitar y restringir el trabajo del diseñador. Funciona más como guía que como cárcel. Todo lo que el diseñador pueda proponer para optimizar la experiencia y la interacción, bienvenido.

Pero eso no quiere decir que el diseñador es 100% libre de hacer lo que quiera sin prestar atención al diseño racional. Muchos productos o sistemas digitales fracasan porque durante la etapa de diseño de interfaz, el diseñador se enfoca en hacer algo “bonito” y la experiencia de los usuarios es dejada de lado.

Si bien el diseño de interfaz, como mencionamos, se centra en lo emocional, las decisiones nunca deben perder de vista los aspectos técnicos. Nada debe quedar librado al azar o al gusto del diseñador.

Ahora vamos a detenernos en la ejecución en sí. ¿Qué pasos sigue el diseñador de interacción UX para realizar su trabajo? Son 5 las etapas esenciales que resumen sus responsabilidades:

  1. Lectura del contexto: interpretar el brief y las hipótesis de diseño

  2. Diseño cromático: definir los colores que se utilizan

  3. Diseño tipográfico: establecer las tipografías 

  4. Dirección de arte fotográfico: escoger y trabajar fotos, imágenes, gráficos y videos 

  5. Diseño de maqueta: construir la interfaz en base a los recursos elegidos

La definición de estos 5 pasos está fuertemente ligada a la estrategia general, los objetivos, la usabilidad y la experiencia de los usuarios. Entra en juego, por parte del diseñador, un trabajo que va mucho más allá de la capacidad creativa en sí y que involucra principalmente decisiones de corte técnico.

En un proyecto UX profesional, las elecciones de color o tipografía tienen que ver con aspectos técnicos y cognitivos. El objetivo es ayudar al usuario a comprender el sistema, a adoptarlo y —muy importante— a gobernarlo. Un buen diseño de interfaz establece un balance entre gobernación y estilo para establecer una comunicación fluida entre producto y usuario. El objetivo es agregar valor a la experiencia a través de la conjunción entre diseño racional y emocional.

Veamos ahora los entregables que surgen al finalizar este proceso de diseño de interfaz. Si bien dependen del/los destinatario/s, básicamente podemos nombrar 3:

  • Maquetas para mostrar a stakeholders y/o probar con usuarios reales

  • Archivos de diseño originales —editables—, con documentación sobre la toma de decisiones realizadas en el proceso de diseño

  • Y tal vez la “cascada de estilos”, que más adelante analizaremos si debe ser responsabilidad del diseñador de interacción UX o del desarrollador front-end

Algo importante para decir acerca de las maquetas: es cierto que los stakeholders estarán ansiosos de verlas y de brindar su opinión, pero nunca hay que perder de vista al usuario. Por eso, si priorizamos a los usuarios por sobre el gusto estético —totalmente subjetivo, por cierto— de los stakeholders, primero conviene probar las hipótesis de diseño con usuarios reales, antes de presentar la interfaz a los dueños del proyecto.

La importancia del diseño de interfaz

El diseño de interfaz es una herramienta fundamental y hay mucho más para aprender sobre su ejecución, los entregables y su enorme importancia dentro del proceso de diseño. Esta herramienta UX es la que define el éxito —o fracaso— de cualquier proyecto de experiencia de usuarios, así que sin duda debemos prestarle especial atención.

Si la curiosidad y las ganas de saber más te motivan a seguir capacitándote, revisa los programas y cursos que ofrecemos en nuestra Escuela UX. ¡Aprovecha para aprender de la mano de profesionales con experiencia y trayectoria en proyectos UX de gran calado!

¡No te detengas! ¡Continúa aprendiendo!

entrenamiento ux capacitacion ux

Capacitación para empresas

Entrenamiento transversal en Diseño de Experiencia de Usuarios para tus equipos