Buscador

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

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.

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.

ElementoDescripciónEjemplo
Wireframe o StoryboardEs 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.


plantilla que muestra como se debe diligenciar el documento para los wireframes o storyboard

Tema 5: Pregunta tipo examen.

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

A) Es un área en donde se definen los macroprocesos, procesos, procedimientos, políticas y acuerdos para garantizar el valor de los productos y servicios de TI.

B) Es la aplicación de técnicas y/o herramientas orientadas para que la persona identifique las habilidades y competencias que desea desarrollar para su crecimiento profesional.

C) Es un gráfico que nos permite visualizar el estado de las características del producto por iteración.

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



Tema 6: 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.