Guía rápida: ¿Cómo aplicar los wireframes o storyboard?. Definiciones + ejemplo práctico.
Tema 1: ¿Qué es?
Los Wireframes o Storyboard, es el conjunto de diseños que definen la estructura y funcionalidad de una interfaz de usuario.
El elemento que hace parte de los wireframes o storyboard es el siguiente: wireframe o storyboard. El cual se implementa en el ejemplo. Una vez diligenciado cada elemento estaremos generando los siguientes beneficios:
✔ Tener una visual completa del flujo que se desea implementar.
✔ Tener un documento bien estructurado para entregarlo al equipo de implementación.
✔ Tener un insumo de apoyo para planear y ejecutar la solución.
Las buenas prácticas para materializar los beneficios enunciados, son las siguientes:
✔ Definir el objetivo de la historia que se desea diagramar.
✔ Construir el flujo de la historia.
✔ Generar un prototipo para cada elemento del flujo de la historia.
✔ Unir los diferentes prototipos para tener la visual completa y documentada.
✔ Las condiciones para aplicar correctamente las buenas prácticas enunciadas, se explican en pre-condiciones y post-condiciones.
Tema 2: Pre-Condiciones y Post-Condiciones para aplicar los wireframes o storyboard.
Este cuadro expone los pasos previos y posteriores que se deben ejecutar para aplicar correctamente las buenas prácticas enunciados en el tema: ¿Qué es?.
| Paso | Acción clave | Condición |
|---|---|---|
| 1. Los bocetos en papel. | Representación de un producto antes de iniciar su implementación. | Pre. |
| 2. Los Wireframes o Storyboard. | Ver el contenido de la presente guía. | N/A. |
| 3. Los mapas de empatía. | Descubrir el comportamiento del público objetivo para comprender sus deseos y necesidades. | Post. |
| 4. El User Journey. | Visualizar el recorrido del usuario al interactuar con un producto. | Post. |
Tema 3: ¿Quiénes son responsables?
El responsable de los wireframes o storyboard es el product owner, quien hace parte de la oficina de entrega de valor.
↩ Tema 4: Ejemplo.
Este ejemplo es una plantilla que se construyo durante el proceso de preparación para presentar los exámenes y obtener las certificaciones CAMP, PMP y PMI-ACP del PMI. Adicionalmente las certificaciones SMAC, STMAC y SPOAC del Scrum Institute.
Caso práctico: Definición del guion gráfico para generar la acción que permita construir el mapa del sitio del portal web.
| Elemento | Descripción | Ejemplo |
|---|---|---|
| Wireframe o Storyboard | Es una secuencia de imágenes que permiten entender y guiar al equipo en la implementación del flujo. |
Objetivo: Generar sitemap. Pasos: Ingresar al menú principal, seleccionar administración del portal, seleccionar posicionamiento SEO, seleccionar mapa del sitio, ejecutar construcción sitemap. Guion gráfico: Generar la secuencia de pasos enunciada en modo gráfico como se observa en la imagen del artículo. |
Tema 5: Sobre el autor.
Juan David López Pava: profesional en administración de empresas y desarrollo de software con certificaciones del PMI y Scrum Institute, apasionado por la transformación digital y la dirección de proyectos de tecnología.