Guía para documentar en UX/UI

A continuación, me enfocaré específicamente en cuáles son las cosas que deben documentar tanto el área de UX como la de UI. Esto, según mi criterio y experiencia, no debe faltar a la hora de dejar registro de nuestro trabajo.

Aspectos Clave en el Área de UX

1. Investigación de personas usuarias:

Este apartado debe abordar resultados sobre necesidades, puntos de dolor, comportamientos y preferencias de las personas usuarias.

2. Mapas de empatía y customer journeys:

Elementos cruciales para guiar decisiones que proporcionan una comprensión profunda de la experiencia de las personas usuarias. Permiten contar con una visión holística que nos ayuda a identificar áreas problemáticas o momentos clave en la experiencia con nuestro producto.

3. User persona:

Trazar y definir este punto es la clave para entender y abordar las necesidades del recurso más importante en el diseño de un producto que es, por supuesto, la persona usuaria.

4. Análisis de competencia:

Dejar asentado quiénes son los principales competidores, en qué aspectos queremos parecernos y en cuáles no, y realizar un análisis del producto/servicio que ofrece. Fundamental para comprender el universo de competencia y así tomar decisiones estratégicas.

5. Wireframes:

Luego de haber transitado los pasos anteriores, ya estamos en condiciones de empezar a trazar los primeros wireframes para su posterior documentación.
Estas representaciones visuales ofrecerán un panorama y nociones sobre la estructura y flujo de la interfaz de nuestro producto. Es importante documentarlos de forma ordenada y versionada para probar de manera rápida algunos conceptos y validar ideas.

6. Test de usabilidad:

Estas evaluaciones del producto que realizamos con las personas usuarias son clave para garantizar que vamos por buen camino o, en caso de ser necesario, ajustar algunos aspectos.

7. Arquitectura de la información:

Documentar la AI es crucial para que todos los interesados tengan una visión clara de la estructura y organización de nuestro producto. Incluye mapas de sitio, diagramación de flujos y jerarquía de contenidos.

8. Workflows:

Podemos documentarlos a través de diagramas simples que representen los pasos que una persona usuaria debe tomar para completar una tarea. Esencial para comprender y optimizar los procesos.

Elementos Cruciales en el Área de UI

1. Guias de estilo:

Para garantizar coherencia y uniformidad en el diseño de nuestro producto, necesitamos documentar estas guías que nos ayudan a establecer normas visuales y de comportamiento.
Garantizan también una consistencia visual, eficacia en el diseño y una buena usabilidad ya que la persona usuaria puede familiarizarse rápidamente con los elementos.
Dentro de la guía de estilos se incluyen las paletas de colores, elección tipográfica, los elementos de la interfaz (estilo y diseño de formularios, menús y demás componentes), iconografía, dimensiones, espaciados, imágenes y, por último pero no menos importante, normas de accesibilidad que garanticen que nuestro producto pueda ser usado por todas las personas.

2. Biblioteca de componentes:

Debemos crear un catálogo con todos los componentes que utilizamos, podemos organizarlos por categorías o tipos. Es importante también brindar información sobre cada uno de ellos incluyendo su funcionalidad, cambios de estados, comportamientos, propiedades y variables.
Dentro de este punto, es importante incluir los error states y los empty states que son componentes cruciales para que el diseño sea coherente y comprensible en situaciones inusuales o cuando no hay datos disponibles.

3. Mockups:

Documentar los mockups de forma ordenada, clara y por flujos es fundamental para comunicar nuestra visión del producto.
Con ellos podemos fijar puntos de referencia para que durante la etapa de desarrollo, la implementación sea lo más fiel posible al diseño propuesto.
Es importante en esta instancia nombrar cada una de las pantallas y acomodarlas de forma que sea entendible. Establecer los caminos de las personas usuarias y dejar comentarios junto a descripciones que ayuden a entender cómo es la interacción con diferentes elementos.

4. Guidelines responsive:

Para garantizar una consistencia en diferentes dispositivos, es importante definir breakpoints y explicar su elección.
También podemos añadir mockups donde indicaremos cómo se ajusta o reorganizan ciertos contenidos según los dispositivos y tamaños de pantallas.
Si contamos con menús o formularios, mostraremos cómo cambian y se adaptan, también aquí podemos especificar si tendremos cambios en las tipografías tanto en tamaños, estilos y límites de longitud.

5. Guidelines de animaciones, interacciones y microinteracciones:

Estas directrices proporcionan pautas para implementar y utilizar animaciones que mejorarán la usabilidad y estética del producto. Es importante detallar transiciones entre pantallas, animaciones en elementos individuales, duración y velocidad.
Debemos aquí también mencionar cómo ciertos gestos o acciones de las personas usuarias activan animaciones, incluir sonidos asociados y proporcionar ejemplos y prototipos interactivos.

6. Ejemplos y casos de uso:

La documentación de ejemplos y casos de uso es fundamental para comprender cómo las personas usuarias interactúan con el producto en situaciones específicas. Proporciona insights valiosos sobre el flujo de trabajo y la utilidad del diseño en contextos prácticos.
Nos orienta a realizar ajustes y mejoras basadas en la retroalimentación de casos de usos reales.
También es útil para el área de desarrollo ya que les facilita comprender la lógica detrás del diseño de la interfaz.
Para documentar estos casos de uso es necesario definir el objetivo que una persona usuaria debe lograr en cada caso específico indicando las opciones y decisiones que pueden tomar durante el proceso. Aquí podemos valernos de los taskflows.
Por último, en esta instancia es útil documentar también las situaciones alternativas que podrían ocurrir en el caso de uso y cómo el sistema maneja los posibles errores o situaciones inesperadas.

7. Versiones y actualizaciones:

Contar con versiones de nuestros diseños permite garantizar una transición fluida entre diseños. Es importante enumerar las versiones y fecharlas para contar con un registro histórico. También es una buena práctica hacer un resumen de cambios por cada versión para dar énfasis a cualquier nueva funcionalidad añadida.

Esta guía ofrece una aproximación para llegar a una documentación efectiva en ambas áreas, esencial para el éxito de cualquier proyecto de diseño UX/UI.

Te invito a que me cuentes si en tu día a día realizás la práctica de documentar y cómo es tu proceso.

Si llegaste hasta acá, muchas gracias.

Nos leemos.