Documentando iteraciones de flujos e interfaces
¿Cómo documentar flujos y sus iteraciones? Ilustraciones por Georgina Canseco
¿Alguna vez has estandarizado y documentado tus archivos de diseño? Hay diseñadores que organizan bien y con minuciosidad sus archivos, nombrando carpetas, capas (sea Photoshop, Figma, Sketch, etc). Sin embargo, no es la norma entre equipos, ¿cierto?
Si en algún momento has documentado interfaces o creado sistemas de diseño, sabrás que tienes que describir tanto tamaños, formas, tipografías y colores, como comportamientos y estados, ya que son características útiles e imprescindibles para que el equipo de desarrollo entienda y pueda programar sin problema. Pero, ¿qué pasa cuando además tienes que documentar flujos e iteraciones? ¿te lo has preguntado?
Si vas a Google y buscas cómo documentar procesos de diseño, quizá no encuentres mucha información, o encuentres cosas aisladas. Después de investigar maneras eficientes de documentar, discutir con mi equipo y ponerlo a prueba, te comparto la manera para que puedas lograrlo. Así, diseñadores, desarrolladores y project managers podrán comprenderlo y tendrán un marco de referencia consistente. Tendrás las bases para alinear a tu equipo y fomentar una comunicación universal.
Definiendo y organizando archivos
Primer paso: Define los tipos de archivo a manejar.
Quizá te haya pasado… tener un archivo con el diseño final listo para entregar, pero vienen también todas las iteraciones o diseños descartados y termina en manos de programación. Sin indicaciones de qué hacer y qué no, ¡se desarrolla todo! Queremos evitar estas situaciones, ¿no?
Nadie quiere trabajar doble ni rezagar entregas. Evita imprevistos y clasifica tus archivos en todo momento: Draft, Work In Progress, Para desarrolladores, Archivado, etc. No solo en el nombre del archivo tal cual, intenta crear una página o layer que indique de primera mano el tipo de archivo que es. Especifica también quién o quienes pueden acceder a ese archivo.
Incluye:
Nombre del proyecto
Status/Tipo de archivo
Descripción breve
Segundo paso: Especifica e indica flujos
Personalmente me he sentido confundido cuando entro a Figma y veo flujos y pantallas a montones sin saber qué será lo correcto. Me pregunto, ¿habrá una fecha? ¿algún indicador? Si supiera quién lo creó, le preguntaría…
Una de las piezas fundamentales es el uso de etiquetas (tags). Figma y Sketch tienen plugins para el uso y manejo de tags como ‘Work In Progress’, ‘Content Required’, ‘On Hold’, ‘Draft’ y ‘Approved’…). Son de gran ayuda pero no es lo único que debería estar indicado.
Toma en cuenta lo siguiente además de las etiquetas:
Fecha
Título del flujo general
Funcionalidad específica del flujo
Version o número de iteración
Nombre de la persona de quien hizo el flujo
Indicadores para notas y retroalimentación (feedback)
Ejemplo (en inglés) de cómo documentar para un mejor control
Esta nomenclatura utilízala para cualquier tipo de archivo que hayas definido en el primer paso. En mi experiencia, añadir especificaciones e indicaciones da claridad y guía a los procesos. Así, los programadores preguntan directo al diseñador sobre un flujo o funcionalidad específica. También funciona para que project managers pueden comparar entre iteraciones e identificar posibles mejoras o fallas en el flujo.
Es importante diferenciar entre nota y feedback. Las notas sirven como marco de referencia a algún detalle del flujo sin modificarlo, por ejemplo: “Este flujo se empezará a programar en el Q4.” Mientras que el feedback sugiere que el flujo eventualmente se modificará, por ejemplo: “Quitar campos y color botón de login”. Estos elementos funcionan como referencia a quien esté revisando el flujo.
Crear archivos específicos ayuda a un mejor control
Tercer paso: Crea archivos específicos para flujos aprobados y completos
Es importante tener en un archivo adicional el último flujo aprobado. Así evitarás que iteraciones anteriores, ideas, exploraciones o diseños improvisados se tomen como finales. En este archivo también puedes indicar iteraciones. Sin embargo, como estos flujos generalmente son para equipos de programación, no contienen tantas iteraciones como los archivos que usa diseño.
Complementa este archivo con un registro de cambios (logs), ya sea en la misma página donde están los flujos o en una adicional. Contempla la fecha, descripción breve del cambio/adición, quién hizo el flujo y quién aprobó el cambio. Esto te ayudará a tener comunicación más directa y clara sobre el proceso.
Consideraciones
Porque a nadie le gusta esperar ya sea para bajar un archivo o abrir uno, toma en cuenta lo siguiente:
Si el archivo es viejo, etiquétalo. De una u otra forma indica que se archivo es viejo
Si el archivo es muy pesado, divide los flujos. Es válido tener Parte 1, Parte 2… etc. Esto facilitará el acceso (ya sea para abrirlo en Figma o descargarlo como Sketch) y mejorará la experiencia… al final hacemos UX ¿cierto?
Comunica a tu equipo la forma en que se manejarán los archivos. No solo a tu equipo de diseño, también a programadores, project managers, product managers, QA testers y a todo aquel que esté involucrado en el proceso. Realmente facilita el trabajo.
Crea toda esta nomenclatura y documentación como símbolos o componentes. Facilitará el trabajo si son varios equipos de diseño haciendo diferentes productos.
Siempre usa una paleta de colores accesible para tu documentación.
Aprendizajes
Claro que esto solo es una guía básica que te ayudará a documentar flujos e iteraciones. Conforme lo vayas aplicando, puedes ajustarla a las necesidades de tu equipo. Intenta integrarlo en tus procesos ya sea si trabajas con Sprints, Lean UX o Agile, por mencionar algunos…
Publicado originalmente en: