Artefactos UX/UI que enriquecen el diseño de soluciones digitales

4 min read
7 de octubre de 2021

El trabajo que realizamos en el equipo UX/UI de Pragma tiene como propósito principal ofrecer al usuario un diseño intuitivo que le evoque emociones positivas.

Con esto, buscamos que el producto sea pertinente y útil para ofrecer experiencias de usuario grandiosas y memorables.

En este artículo identificamos actividades y algunos artefactos que podemos elaborar durante el diseño de un producto con la finalidad de lograr este propósito y mantener una relación y comunicación efectiva entre los miembros del equipo UX/UI, los cuales van más allá de las etapas iniciales del desarrollo de un proyecto.

Este equipo diseña la estructura y estética de un producto a lo largo de un proceso iterativo de diseño; específicamente, los diseñadores UX realizan una variedad de actividades enfocadas en el uso efectivo y placentero de un producto. Los diseñadores UI se centran en su apariencia, presentación y atractivo.

En definitiva, en el equipo UX/UI buscamos crear un diseño grandioso, trabajando de manera integrada para resolver problemas, satisfacer necesidades y deseos de los usuarios, tanto visual como funcionalmente. Una vez que este equipo tiene una visión general del producto, la audiencia y el entorno, comenzamos a realizar actividades que podemos inscribir en el proceso del Pensamiento en Diseño, tales como: empatía, investigación, definición, ideación, prototipado y evaluación.

En cada una de las actividades anteriores, construimos diversos artefactos con el objetivo de comunicar de manera efectiva nuestras ideas, resultados de investigación y contexto a todos los stakeholders. Un grupo destacado de artefactos que elaboramos durante este proceso incluye: informes Benchmarking, reportes de investigación, personas, user journeys, mapas de navegación, user flows, bocetos, wireframes, wireflows, moodboards, guías de estilo, prototipos interactivos, informes de user tests y evaluaciones heurísticas.

Como equipo de UX/UI, nos interesa describir aquellos artefactos que facilitan la labor y comunicación entre los miembros del equipo, tales como: mapas de navegación, user flows, wireframes, wireflows, moodboards, guías de estilo y prototipos interactivos.

Mapas de Navegación

Un mapa de navegación es un diagrama que representa la estructura o arquitectura de un producto. Es el documento que sirve de partida para distribuir, organizar y jerarquizar el contenido de cada pantalla. El mapa de navegación representa la distribución del contenido y la relación entre sus componentes, además, ofrece una representación visual de estos contenidos.

AdobeStock_456986840

User flows

Un user flow o flujo de usuario es la ruta o serie de pasos que sigue un usuario, así como las decisiones que toma en el uso de un producto, sitio web o aplicación, con la finalidad de completar una tarea. En un user flow se representan todos los pasos desde el acceso al producto hasta la culminación de una tarea determinada, identificando las distintas opciones dependiendo de ciertas condiciones y todos los caminos posibles para completar la tarea. 

Wireframes

Un wifeframe es una representación esquemática de una interfaz de usuario que permite visualizar la estructura de cada una de las pantallas del producto, donde representamos la distribución visual y la jerarquización de los contenidos. Los wireframes ayudan en la definición de la arquitectura de información, el espaciado del contenido, las funcionalidades, el diseño estructural y a comprender el funcionamiento de los flujos de usuario dentro del producto. 

Wireflows

Un wireflow es un diagrama que combina el diseño de páginas en wireframes con una representación de un user flow. El wireflow permite representar el flujo del usuario y los diseños iniciales de las pantallas que requiere manipular para realizar su tarea. Estos artefactos son especialmente útiles en el diseño de aplicaciones móviles y sitios web que ofrecen pocas páginas; los usamos para revisar y comunicar el diseño de interacción y los flujos de usuarios con los stakeholders.

Moodboards

Un moodboard o tablero de inspiración es una herramienta visual que puede ser física o digital, consiste en un collage de una selección de imágenes, fotografías o materiales. Estos elementos están relacionados y expresan conceptos vinculados con una posible solución o diseño. Al elaborar un moodboard tenemos una intención y aplicamos una estrategia a fin de agrupar ideas para una solución.

Guías de Estilo

Una guía de estilo es una colección de pautas de diseño y contenido acordadas entre los stakeholders que ayudan a establecer la coherencia y consistencia en el diseño de los productos. Esta colección puede incluir estilos visuales, colores, fuentes, tipografía y la especificación de comportamientos de UI, por ejemplo, mensajes de error.

Las guías de estilo no son estáticas por el contrario, recomendamos actualizarlas periódicamente, en función de cambios en las necesidades de los usuarios y tendencias de diseño.

Prototipos interactivos

Un prototipo interactivo es una versión más avanzada de los wireframes, donde se incorporan interacciones con una fidelidad media o alta en cuanto al diseño visual. Recomendamos que los prototipos interactivos sean responsive; mientras más cercano sea un prototipo al producto final, los resultados de los tests con usuario serán más confiables y permitirán corregir, mejorar o evolucionar el producto.

Es de hacer notar que los artefactos propuestos aquí no son limitantes ni es mandatorio elaborarlos todos, la selección de los que vamos a construir durante el proceso de diseño dependerá de los usuarios, cliente, objetivo del negocio y del tipo de proyecto en el que vamos a participar.

Complementando lo anterior, tenemos en Academia Pragma la Ruta de Aprendizaje denominada Diseño Centrado en las Personas, donde conseguirás información más detallada acerca de estos artefactos para profundizar en sus características, pertinencia y elaboración.

Nuevo llamado a la acción

Suscríbete al
Blog Pragma

Recibirás cada mes nuestra selección de contenido en Transformación digital.

Imagen form