Resultado de Aprendizaje (RAP)

Validar el informe de requisitos
de acuerdo con las necesidades del cliente

Guía 3 — Prototipado Estático, Interfaz de Usuario (UI) y Validación Continua

❝ El prototipo es el contrato visual con el cliente. ❞

Comenzar la práctica ↓

El Camino de la Especificación

¿Cómo se conectan las 4 guías de la fase de Análisis y Planeación?

🎙️

Guía 1

Descubrimiento & Elicitación

Se recolecta información usando entrevistas, encuestas y observación (Qué duele).

Entrega: Hallazgos y dolores del usuario.

➔

📝

Guía 2

Ingeniería de Contexto

Los hallazgos se traducen a Requisitos Funcionales y No Funcionales (Qué se necesita).

Entrega: Historias de Usuario y Criterios BDD.

➔

🎨

Guía 3 (Aquí)

Prototipado & Validación

Las historias toman forma. Se construye un prototipo visual para validar (Cómo se verá).

Entrega: Prototipo validado y Matriz UI-RF.

➔

⏱️

Guía 4

Planeación Ágil

El prototipo aprobado se divide en tareas técnicas pequeñas (Cuándo se programa).

Entrega: Sprints, DoR y DoD.

Analogía Visual

Entender el prototipo a través de la arquitectura civil

🏗️

Arquitectura Civil

FASE 1 — Visible

Planos y Fachada

El arquitecto primero diseña los planos y la fachada. El cliente aprueba lo que ve antes de invertir en la construcción.

📐 Planos arquitectónicos
🏠 Maqueta / Render 3D
🎨 Colores y acabados
✅ Firma del cliente

Solo después de la aprobación…

FASE 2 — Oculta

Cimientos y Plomería

Luego se construyen los cimientos, la plomería y la instalación eléctrica. Lo que el cliente nunca ve pero sostiene todo.

🧱 Cimientos / Estructura
🔧 Plomería / Tubería
⚡ Instalación eléctrica

💻

Desarrollo de Software

FASE 1 — Visible

Prototipo / UI

El desarrollador diseña primero el prototipo y la interfaz de usuario. El cliente aprueba lo que ve en pantalla.

🖼️ Wireframes / Mockups
🖥️ Interfaz de Usuario (UI)
🎭 Diseño de interacción (UX)
✅ Validación del cliente

Solo después de la validación…

FASE 2 — Oculta

Backend y Base de Datos

Luego se construye el backend, la base de datos y la lógica de negocio. Lo que el usuario nunca ve pero hace funcionar todo.

🗄️ Base de Datos
⚙️ API / Lógica de negocio
🔐 Autenticación / Seguridad

💡

Conclusión clave: Así como nunca se construyen los cimientos sin antes aprobar los planos, en software nunca se codifica el backend sin que el cliente haya validado el prototipo de la interfaz. El prototipo es la firma del contrato visual.

01.1 · Validación de Requisitos

Mapeo: Componente UI ⟷ Requerimiento Funcional (RF)

Cada elemento en la pantalla del prototipo debe estar justificado por un Requisito Funcional previamente analizado.

🖼️ Componente UI Prototipado Vista Cliente

Formulario con Campo Cédula y Botón "Buscar"

Caja de texto numérica con validación visual y botón destacado para consulta rápida.

🎯 Requisito Funcional Validado (RF-02): "El sistema debe permitir buscar visitantes por número de documento en la base de datos."

📋 Componente UI Prototipado Tabla de Resultados

Tabla DataGrid con Filtros y Estado

Columnas para Serial, Marca, Propietario, Fecha/Hora de Ingreso y Badge de Estado (En Sitio / Salida).

🎯 Requisito Funcional Validado (RF-04): "El sistema debe listar los equipos activos en las instalaciones con su respectivo estado."

🔔 Componente UI Prototipado Modal de Confirmación

Pop-up de Alerta con Botones "Autorizar" / "Rechazar"

Modal flotante para pedir confirmación al instructor cuando no hay cita previa en sistema.

🎯 Requisito Funcional Validado (RF-01): "El sistema debe requerir autorización explícita antes de permitir el ingreso de excepciones."

Instrumentos para decidir antes de programar

Usa la especificación de la Guía 2 como entrada, prueba la interfaz con personas y entrega decisiones verificables a la Guía 4.

Entrada · Guía 2HU, RF/RNF, criterios BDD, datos candidatos y prioridad.

Trabajo · Guía 3Flujo, vistas, estados, prueba de usabilidad y ajustes.

Salida · Guía 4Historia lista (DoR), alcance del Sprint y criterio de terminado (DoD).

Instrumento 1 · Flujo de pantalla

Mapa de navegación con estados

Convierte una historia de usuario (Guía 2) en una secuencia visual. No diseñes solo el estado "feliz", debes considerar todos los escenarios.

Ejemplo · HU-003 Registrar Equipo

(Viene de Guía 2: "Como guarda, quiero registrar un equipo para llevar control de ingreso")

Carga inicial → formulario con campos vacíos.
Validación (Error) → el campo "Serial" muestra borde rojo si se deja vacío (RF-05).
Procesamiento → botón "Registrar" muestra spinner.
Éxito → mensaje verde y limpieza de formulario.

Decisión clave: Cada pantalla y estado de tu prototipo debe corresponder a un Criterio de Aceptación (BDD) de la Guía 2.

Instrumento 2 · Guion de prueba

Observación de usabilidad

Usa los "dolores del usuario" descubiertos en las entrevistas de la Guía 1 para probar tu diseño. Pide al usuario que ejecute una tarea y observa.

Ejemplo de Validación (Hallazgo Guía 1)

(El guarda mencionó: "Pierdo mucho tiempo buscando si un serial ya está registrado")

Guion aplicado al guarda de seguridad
Tarea Solicitada	Comportamiento Observado	Decisión (UI)
"Busca este equipo antes de registrarlo"	No encontró la barra de búsqueda rápida	Mover la barra al header global
"Registra el serial X-123"	Digitó mal y no notó el error	Añadir texto grande y validación en vivo

Decisión clave: Un hallazgo produce un ajuste en el prototipo, una pregunta pendiente o una razón documentada para no cambiar.

Instrumento 3 · Trazabilidad

Matriz UI ↔ RF ↔ RNF

Relaciona cada elemento de interfaz con la función (RF) y la calidad (RNF) definidas en la Guía 2.

Matriz de Mapeo Bidireccional
Elemento Visual (UI)	Requisito (Guía 2)	Regla / Prueba
Caja "Serial" + Botón Buscar	RF-02: Consulta de equipo	RNF-01: Respuesta en ≤ 2 segundos.
Mensaje de error rojo brillante	RF-03: Validación de entrada	Accesibilidad: Contraste WCAG y texto claro.
Modal de confirmación	RF-01: Autorización explícita	Seguridad: No permitir envío doble.

Decisión clave: Si un botón o texto en el prototipo no tiene requisito o criterio en la Guía 2, se elimina o se devuelve a análisis.

Simulador Interactivo

Validador de Trazabilidad y Constructor de UI

📌 Selecciona una Historia de Usuario:

Historia de Usuario #HU-003

Criterios de Aceptación:

📋 Matriz de Trazabilidad

0 / 0 requisitos

🧩 Paleta de Componentes HTML

Arrastra o haz clic en los bloques para agregarlos al canvas →

<form> Formulario

<label> Etiqueta

<input text> Campo Texto

<input number> Campo Numérico

<input date> Campo Fecha

<select> Lista Desplegable

<textarea> Área de Texto

<button> Botón

<fieldset> Grupo de Campos

<table> Tabla

📐

Arrastra componentes HTML aquí
para construir tu wireframe

Los elementos se organizarán automáticamente con CSS Grid/Flexbox

📄 Código HTML Generado

Evaluación Teórica

Ponte a prueba sobre Prototipado, Fidelidad y Validación

1. ¿Cuál es el objetivo principal del prototipado de baja fidelidad (wireframes) antes de codificar el backend?

a) Probar el rendimiento de las consultas SQL a la base de datos. b) Validar la estructura visual y flujo de interacción con el cliente al menor costo posible. c) Reemplazar la documentación técnica de arquitectura del software.

2. ¿Qué relación existe entre la Matriz de Trazabilidad y la Interfaz de Usuario (UI)?

a) Asegura que cada requisito y criterio de aceptación tenga una representación equivalente en la UI. b) Es un documento exclusivo del administrador del servidor web. c) Sirve únicamente para definir la paleta de colores CSS.

3. ¿Qué ocurre si se construye la base de datos antes de validar la UI con el cliente?

a) Se ahorra tiempo de desarrollo siempre. b) Se corre un alto riesgo de retrabajo severo si el cliente exige cambios en los campos o flujos. c) La interfaz se genera automáticamente sin necesidad de HTML.

Validación y Sign-off

Solicita la aprobación formal del cliente

Resumen de Validación

Antes de solicitar la aprobación, verifica que tu prototipo cumple con todos los criterios de la Historia de Usuario activa.

0 Componentes

0/5 Requisitos

0% Cobertura

Nombre del Aprendiz:

Completa todos los requisitos de la matriz de trazabilidad para habilitar la validación.

Formación SENA por Proyectos

Producto Entregable del Proyecto Formativo

El diseño de interfaz (UI/UX) materializa la interacción de las personas con el sistema. Aplicando la metodología de Formación por Proyectos del SENA, este recorrido web (principios de usabilidad, maquetación de prototipos, trazabilidad de requisitos y registro de validación) constituye una evidencia de trabajo para tu Proyecto Formativo; no reemplaza la evaluación del instructor.

🛠️

Insumos Logrados en el Recorrido Web

Sección 01 & 02: Dominio de principios de jerarquía visual, contraste y diseño centrado en el usuario.
Sección 03 (Simulador UI & Trazabilidad): Construcción iterativa del prototipo y vinculación directa con las Historias de Usuario.
Sección 05 (Validación): Revisión de la Matriz de Trazabilidad y registro de una constancia no oficial del ejercicio.

📦

Estructura del Producto a Entregar (Documento PDF)

Consolida un dossier de prototipado UI/UX en formato PDF con la siguiente estructura:

Portada Institucional SENA: Nombre del Proyecto Formativo, Integrantes, Ficha y Centro Agroempresarial.
Prototipos Estáticos (Mínimo 3 vistas): Wireframes o Mockups de alta fidelidad (Login, Dashboard principal, Formulario de registro/gestión).
Mapa de Navegación y Usabilidad: Explicación de flujos de interacción entre pantallas y criterios de accesibilidad aplicados.
Informe de Validación con Usuario: Registro de pruebas simples de usabilidad (feedback del cliente/usuario final y ajustes realizados).
Registro de validación: Anexo de la ficha de prueba, hallazgos, decisiones y retroalimentación del usuario/instructor.

📤

Protocolo y Nomenclatura de Entrega SENA

Sube tu dossier PDF a la plataforma LMS (Zajuna / Territorium) en la actividad correspondiente a:
Evidencia sugerida: GA3-220501093-AA2-EV01 — Prototipado estático de interfaz de usuario y validación de trazabilidad

Nomenclatura de ejemplo (confirma el código con tu instructor): GA3-220501093-AA2-EV01_PrimerNombre_PrimerApellido.pdf

Validar el informe de requisitos
de acuerdo con las necesidades del cliente

El Camino de la Especificación

Descubrimiento & Elicitación

Ingeniería de Contexto

Prototipado & Validación

Planeación Ágil

Analogía Visual

Arquitectura Civil

Planos y Fachada

Cimientos y Plomería

Desarrollo de Software

Prototipo / UI

Backend y Base de Datos

Mapeo: Componente UI ⟷ Requerimiento Funcional (RF)

Formulario con Campo Cédula y Botón "Buscar"

Tabla DataGrid con Filtros y Estado

Pop-up de Alerta con Botones "Autorizar" / "Rechazar"

Instrumentos para decidir antes de programar

Mapa de navegación con estados

Observación de usabilidad

Matriz UI ↔ RF ↔ RNF

Genera tu ficha de validación

Simulador Interactivo

Evaluación Teórica

1. ¿Cuál es el objetivo principal del prototipado de baja fidelidad (wireframes) antes de codificar el backend?

2. ¿Qué relación existe entre la Matriz de Trazabilidad y la Interfaz de Usuario (UI)?

3. ¿Qué ocurre si se construye la base de datos antes de validar la UI con el cliente?

Validación y Sign-off

Resumen de Validación

Producto Entregable del Proyecto Formativo

Insumos Logrados en el Recorrido Web

Estructura del Producto a Entregar (Documento PDF)

Protocolo y Nomenclatura de Entrega SENA

Prototipado Visual UI

Descubrimiento & Elicitación

Ingeniería de Contexto

Prototipado & Validación

Planeación Ágil

Arquitectura Civil

Planos y Fachada

Cimientos y Plomería

Desarrollo de Software

Prototipo / UI

Backend y Base de Datos

Mapeo: Componente UI ⟷ Requerimiento Funcional (RF)

Formulario con Campo Cédula y Botón "Buscar"

Tabla DataGrid con Filtros y Estado

Pop-up de Alerta con Botones "Autorizar" / "Rechazar"

Mapa de navegación con estados

Observación de usabilidad

Matriz UI ↔ RF ↔ RNF

Genera tu ficha de validación

🖥️ Canvas — Wireframe Builder

1. ¿Cuál es el objetivo principal del prototipado de baja fidelidad (wireframes) antes de codificar el backend?

2. ¿Qué relación existe entre la Matriz de Trazabilidad y la Interfaz de Usuario (UI)?

3. ¿Qué ocurre si se construye la base de datos antes de validar la UI con el cliente?

Resumen de Validación

Producto Entregable del Proyecto Formativo

Insumos Logrados en el Recorrido Web

Estructura del Producto a Entregar (Documento PDF)

Protocolo y Nomenclatura de Entrega SENA

Prototipado Visual UI