Antes de comenzar

Pautas del Trabajo

💬 Puedes participar por chat, micrófono y pizarra colaborativa

📷 Se recomienda activar tu cámara en los momentos de discusión

🎯 Procura que tus intervenciones sean breves y fundamentadas

❓ Puedes hacer tus preguntas por el chat durante toda la sesión

👥 Trabajarás en salas pequeñas para las actividades colaborativas

Sesión Anterior

¿Qué recuerdas?

Responde en el chat — no hay respuestas incorrectas

01

¿Qué diferencia hay entre un diseño within-subjects y un diseño between-subjects?

Within-subjects: el mismo participante realiza todas las condiciones del experimento.
Between-subjects: cada participante solo realiza una condición; se usan grupos distintos.

02

Menciona una métrica de usabilidad según la ISO 9241-11 y qué mide.

Efectividad — grado en que el usuario completa la tarea correctamente
Eficiencia — recursos utilizados (tiempo y esfuerzo) para completarla
Satisfacción — percepción subjetiva del usuario al usar el sistema

03

¿Para qué sirve la evaluación experimental en HCI?

Permite medir con rigor científico cómo los usuarios interactúan con una interfaz, controlando variables para obtener conclusiones válidas y replicables.

Conocimientos Previos

¿Cuánto sabes sobre esto?

Usa las reacciones de Zoom o escríbelo en el chat — una reacción por concepto

✅ Lo domino 😮 Lo he escuchado ❤️ Es nuevo pero me interesa 😂 No tengo idea

A Evaluación de Prototipos

Proceso de revisar una interfaz antes de desarrollarla

B Heurísticas de Nielsen

Principios para evaluar la usabilidad de una interfaz

Utilidad del Tema

¿Dónde lo usarías tú?

Escribe en el chat la letra que más se acerque a tu realidad — puedes elegir más de una

A 💼

Trabajo o práctica profesional

Evaluaré interfaces de productos reales en mi trabajo o empresa

B 🎓

Proyectos académicos

Aplicaré estos métodos para evaluar prototipos en mis cursos o tesis

C 🚀

Proyecto propio o emprendimiento

Tengo o quiero una idea de producto y necesito validar la experiencia

Evaluación de Prototipos

Análisis, Usabilidad y Mejoras

Aprenderemos a evaluar prototipos aplicando métodos de análisis de usabilidad y las heurísticas de Nielsen.

Sesión 7

Logro de Aprendizaje

Al finalizar esta sesión, serás capaz de:

Evaluar prototipos de interfaces aplicando métodos formales
Identificar problemas usando las heurísticas de Nielsen
Generar retroalimentación estructurada con propuestas de mejora

Evaluación de Prototipos

¿Qué es evaluar un prototipo?

Evaluar no es opinar. Es aplicar criterios objetivos para detectar si una interfaz permite al usuario completar sus tareas antes de escribir una línea de código.

1 Definir

Qué tareas debe poder completar el usuario

→

2 Evaluar

Aplicar método: heurístico, prueba o walkthrough

→

3 Documentar

Registrar hallazgos con severidad y contexto

→

4 Mejorar

Proponer cambios concretos y re-evaluar

Evaluación de Prototipos

Análisis de Prototipos Previos

Antes de proponer cambios, es fundamental entender qué ya existe y por qué se tomaron esas decisiones.

🔍 ¿Qué analizar?

Flujos de navegación principales
Consistencia visual y de interacción
Manejo de errores y estados vacíos
Jerarquía visual y legibilidad
Accesibilidad básica

📋 ¿Cómo documentarlo?

Capturas anotadas de cada pantalla
Tabla de hallazgos con heurística violada
Nivel de severidad (1–4)
Frecuencia de aparición del problema
Propuesta de mejora por hallazgo

Análisis de Prototipos Previos

Ejemplo: Jerarquía visual en formulario

Un prototipo sin jerarquía visual obliga al usuario a leer todo para entender qué hacer.

❌ Sin jerarquía

Crear cuenta

Nombre completo

Correo electrónico

Teléfono

País de residencia

Fecha de nacimiento

Contraseña

Confirmar contraseña

Código de referido

✅ Con jerarquía

Crear cuenta

Datos personales

Nombre completo

Correo electrónico

Acceso

Contraseña

Confirmar contraseña

Paso 1 de 2

Análisis de Prototipos Previos

Ejemplo: Consistencia de navegación

Cuando el mismo patrón aparece diferente en cada pantalla, el usuario pierde orientación.

❌ Inconsistente

Flujo de compra — 3 pantallas

Carrito

Dirección

Pago

✅ Consistente

Flujo de compra — 3 pantallas

Carrito

Dirección

Pago

Análisis de Prototipos Previos

Ejemplo: Estado vacío sin orientación

Los estados vacíos son oportunidades perdidas: el usuario no sabe qué hacer a continuación.

❌ Sin orientación

Mis proyectos

No hay proyectos.

✅ Con orientación

Mis proyectos

📁

Aún no tienes proyectos

Crea tu primer proyecto y comienza a colaborar con tu equipo.

Identificación de Problemas

¿Cuándo algo es un problema de usabilidad?

No toda fricción cuenta. Un hallazgo es un problema real cuando cumple al menos una de estas condiciones:

1 Impide la tarea

El usuario no puede completar lo que necesita hacer

→

2 Genera confusión

El usuario no sabe qué pasó ni qué debe hacer

→

3 Aumenta el esfuerzo

La tarea exige más pasos o tiempo del necesario

Identificación de Problemas

Escala de severidad de Nielsen

Asignar severidad permite priorizar qué problemas corregir primero y con qué urgencia.

0 Sin problema

No es un problema de usabilidad real

1 Cosmético

Solo corregir si queda tiempo disponible

2 Menor

Baja prioridad — puede esperar

3 Mayor

Alta prioridad — corregir en la próxima iteración

4 Catastrófico

Crítico — debe corregirse antes de lanzar

Identificación de Problemas

Ejemplo: Lenguaje del sistema vs. lenguaje del usuario

¿Cuál viola una heurística? Analiza las etiquetas antes de revelar.

❌ H2 violada — lenguaje técnico

Crear cuenta

usr_email

pwd_hash

conf_pwd_hash

usr_birthdate_ISO

✅ H2 cumplida — lenguaje del usuario

Crear cuenta

Correo electrónico

Contraseña

Confirmar contraseña

Fecha de nacimiento

Identificación de Problemas

Ejemplo: Acción destructiva sin confirmación

¿Cuál viola una heurística? Observa qué ocurre al intentar eliminar un archivo.

❌ H5 violada — sin prevención de errores

Mis archivos

📄 Informe_final.pdf

📄 Presupuesto_2024.xlsx

Sin confirmación — el archivo desaparece al instante

✅ H5 cumplida — confirmación antes de eliminar

Mis archivos

📄 Informe_final.pdf

📄 Presupuesto_2024.xlsx

Haz clic en Eliminar para ver el flujo

Retroalimentación y Mejoras

Retroalimentar no es opinar

Una opinión dice qué no le gustó. La retroalimentación estructurada dice qué falló, por qué importa y cómo corregirlo.

1 Describir

¿Qué problema específico existe en la interfaz?

→

2 Conectar

¿Qué heurística o criterio viola?

→

3 Impacto

¿Qué le ocurre al usuario cuando lo encuentra?

→

4 Proponer

¿Qué cambio concreto resuelve el problema?

Retroalimentación y Mejoras

Ejemplo de hallazgo documentado

Así se ve un hallazgo bien registrado — cada fila responde una de las 4 preguntas.

Problema

Al hacer clic en "Enviar", el botón no cambia de estado ni aparece ninguna señal de que la acción fue recibida por el sistema.

Heurística

H1 — Visibilidad del estado del sistema: el sistema debe mantener informado al usuario sobre lo que ocurre, en un tiempo razonable.

Impacto

El usuario hace clic varias veces pensando que no funcionó, lo que puede generar envíos duplicados o abandono del formulario. Severidad: 3 — Mayor.

Propuesta

Deshabilitar el botón al primer clic, mostrar un spinner de carga y reemplazarlo por un mensaje de confirmación ("✓ Enviado") al completarse la operación.

Retroalimentación y Mejoras

Ejemplo: Feedback vago vs. estructurado

Ambos comentan el mismo problema. ¿Cuál le sirve al equipo de diseño para actuar?

❌ No accionable

Comentarios del evaluador

"El menú está mal"

"Hay cosas confusas en la pantalla"

"No me gusta el flujo de registro"

"El botón no funciona bien"

✅ Accionable

Comentarios del evaluador

Problema El botón "Continuar" desaparece en pantallas pequeñas

H4 Consistencia — 3 pantallas usan estilos de botón distintos

Impacto Sev. 3 — Usuario no puede avanzar en móvil

Mejora Fijar el botón al pie de pantalla con posición fija

Retroalimentación y Mejoras

¿Por dónde empezar a mejorar?

No todos los problemas se resuelven al mismo tiempo. Prioriza según severidad e impacto en la tarea.

Corregir ahora

Sev. 3–4

Bloquea la tarea del usuario
Ocurre en flujos principales
Genera datos incorrectos

Próxima iteración

Sev. 2

Ralentiza al usuario pero no lo bloquea
Aparece en flujos secundarios
Causa confusión puntual

Si hay tiempo

Sev. 0–1

Detalles visuales o estéticos
No afecta la tarea principal
Mejora marginal de experiencia

Actividad Práctica

Observa este prototipo

Hay 5 problemas de usabilidad marcados con N. Escribe en el chat qué falla en cada número — avanza cuando hayas anotado tus respuestas.

miapp.cl / tareas / nueva

Crear nueva tarea

Título

Reunión de equipo

1

Due date

dd/mm/aaaa

2

Descripción

Escribe aquí…

TypeError: Cannot read properties of null (reading 'id')

3

Responsable

Seleccionar…

4

5

Actividad Práctica · Paso 1

¿Cuándo es un problema de usabilidad?

Para cada hallazgo, ¿impide la tarea, genera confusión o aumenta el esfuerzo? Discute antes de revelar.

✗ Impide la tarea ✓ Genera confusión — el usuario no sabe qué campos son obligatorios ✓ Aumenta el esfuerzo — debe intentar enviar para descubrirlo

✗ Impide la tarea ✓ Genera confusión — mezcla de idiomas desorienta al usuario ✓ Aumenta el esfuerzo — el usuario debe inferir qué significa el campo

✓ Impide la tarea — el usuario no puede recuperarse sin ayuda externa ✓ Genera confusión — el mensaje no explica qué salió mal ni cómo resolverlo ✓ Aumenta el esfuerzo — debe buscar solución por su cuenta

✓ Impide la tarea — puede cancelar el trabajo por error al hacer clic en el botón equivocado ✓ Genera confusión — la jerarquía visual no corresponde a la acción principal ✓ Aumenta el esfuerzo — el usuario debe detenerse a leer antes de hacer clic

✓ Impide la tarea — si elimina por error, pierde todo el trabajo realizado ✓ Genera confusión — no hay advertencia sobre la gravedad de la acción ✓ Aumenta el esfuerzo — si no hay deshacer, debe recrear la tarea desde cero

Actividad Práctica · Paso 2

¿Qué severidad tiene cada problema?

Usa la escala de Nielsen 0–4. Asigna un nivel a cada problema antes de revelar.

2 — Menor No bloquea al usuario, pero genera un paso extra frustrante al intentar enviar. Corregir en la próxima iteración.

1 — Cosmético El usuario puede inferir el campo. No afecta la funcionalidad. Corregir si queda tiempo.

3 — Mayor Impide la recuperación. El usuario queda bloqueado sin instrucciones claras. Alta prioridad.

3 — Mayor El usuario puede cancelar trabajo sin querer. Viola una convención ampliamente conocida. Alta prioridad.

4 — Catastrófico Puede provocar pérdida irreversible de datos con un clic. Corregir antes de cualquier lanzamiento.

Actividad Práctica · Paso 3

Documenta el hallazgo más grave

Tomemos el 5 y construyamos juntos la retroalimentación completa, fila por fila.

Problema

El botón "Eliminar tarea" tiene el mismo tamaño, color y posición que "Cancelar" y "Guardar", sin ninguna separación visual ni advertencia previa.

Heurística

H5 — Prevención de errores: el diseño debe prevenir que se produzca el problema antes de que ocurra, no solo informar después.

Impacto

El usuario puede eliminar una tarea crítica con un solo clic accidental. Si no existe función de deshacer, la pérdida es irreversible. Severidad: 4 — Catastrófico.

Propuesta

Separar el botón del resto de acciones, colorearlo en rojo con ícono ⚠, y requerir un diálogo de confirmación: "¿Eliminar tarea? Esta acción no se puede deshacer."

Actividad Práctica · Paso 4

Prioriza las mejoras

Con la severidad de cada problema asignada, ¿en qué orden las abordarías? ¿Coincide con tu propuesta anterior?

Corregir ahora

Sev. 3 – 4

5 Eliminar sin distinción · Sev. 4 3 Error técnico · Sev. 3 4 Botones invertidos · Sev. 3

Próxima iteración

Sev. 2

1 Campo sin marcar · Sev. 2

Si hay tiempo

Sev. 1

2 "Due date" en inglés · Sev. 1

Segunda Actividad Práctica

Encuentra los problemas

Analiza esta pantalla de reserva de vuelo. Hay 5 problemas marcados con N. Escribe en el chat qué falla en cada número — aplica lo aprendido antes de avanzar.

✈ AeroConnect

Vuelos Hoteles Mi cuenta

Busca y reserva tu vuelo

Tipo de vuelo

Origen

IATA Code

⇄

Destino

IATA Code

Salida

📅 DD/MM/AAAA

Regreso

📅 DD/MM/AAAA

Adultos

1

Niños

0

>

Cabina

Económica ▾

Err: INVALID_DATE_RANGE (422) — departure_date cannot precede current_timestamp

Cierre de Sesión

¿Qué nos llevamos hoy?

Haz clic en la tarjeta para enfocarla · el docente suma cada participación con el botón

💡 01 · Aprendizaje

¿Qué aprendiste hoy?

Una cosa concreta que no sabías antes de esta sesión

🔍 02 · Investigación

¿Qué quieres investigar más?

Una duda o tema que te quedó pendiente de explorar

🎯 03 · Conclusión

¿Por qué importa lo que vimos?

Tu conclusión personal sobre la relevancia de esta sesión

Cesar Zavaleta

Evaluación de Prototipos: Análisis de Usabilidad y Heurísticas de Nielsen | Semana 7

Pautas del Trabajo

¿Qué recuerdas?

¿Cuánto sabes sobre esto?

¿Dónde lo usarías tú?

Análisis, Usabilidad y Mejoras

Logro de Aprendizaje

¿Qué es evaluar un prototipo?

Análisis de Prototipos Previos

Ejemplo: Jerarquía visual en formulario

Ejemplo: Consistencia de navegación

Ejemplo: Estado vacío sin orientación

¿Cuándo algo es un problema de usabilidad?

Escala de severidad de Nielsen

Ejemplo: Lenguaje del sistema vs. lenguaje del usuario

Ejemplo: Acción destructiva sin confirmación

Retroalimentar no es opinar

Ejemplo de hallazgo documentado

Ejemplo: Feedback vago vs. estructurado

¿Por dónde empezar a mejorar?

Observa este prototipo

¿Cuándo es un problema de usabilidad?

¿Qué severidad tiene cada problema?

Documenta el hallazgo más grave

Prioriza las mejoras

Encuentra los problemas

¿Qué nos llevamos hoy?