Guía rápida: ¿Cómo aplicar los wireframes o storyboard?

Explicaciones + Diagramas o Ejemplo práctico.

¿Qué es los wireframes o storyboard?


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 la sección ejemplo del presente artículo.

Beneficios que ofrece los wireframes o storyboard.


    ✔ 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.

Buenas prácticas para la implementación.


    ✔ 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.


Pre-Condiciones y Post-Condiciones.


Este cuadro expone los pasos previos y posteriores que se deben ejecutar para aplicar correctamente las buenas prácticas enunciadas.

PasoAcción claveCondició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.

¿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.

Ejemplo.


Este ejemplo es una plantilla resultado del análisis, diseño e implementación de este portal, respaldado por el estudio de guías y buenas prácticas en transformación digital.

Caso práctico: Definición del guion gráfico para generar la acción que permita construir el mapa del sitio del portal web.

ElementoDescripción
Wireframe o StoryboardEs una secuencia de imágenes que permiten entender y guiar al equipo en la implementación del flujo.

Pregunta tipo examen.


Pregunta: La definición que mejor se ajusta para los wireframes o storyboard. ¿Debe ser?

A) Es un evento en donde el equipo de trabajo se reúnen para revisar los resultados obtenidos a la fecha del proyecto.

B) Es un evento en donde el Product Owner y el equipo de trabajo se reúnen para revisar los resultados obtenidos dentro del sprint a nivel de ciclo de vida del proyecto.

C) Es un evento en donde el Product Owner y el equipo de trabajo se reúnen diariamente para conocer el estado del incremento de producto del sprint.

D) Es el conjunto de diseños que definen la estructura y funcionalidad de una interfaz de usuario.