El documento presenta información sobre el uso de prototipos para alinear los esfuerzos de desarrollo. Explica que los prototipos permiten exponer rápidamente soluciones ante los usuarios, evidenciar problemas antes de construir, y generar soluciones realistas que ayuden a definir un roadmap. Se describen diferentes tipos de prototipos como de baja, mediana y alta fidelidad, indicando cuándo usar cada uno, y se presentan herramientas recomendadas para prototipar como UXPin, Pop App e InVision. También se
3. www.sgcampus.com.mx @sgcampus
1. ¿Qué está sucediendo?
2. ¿Qué es un prototipo?
3. Clases de prototipo
4. ¿Cuándo usar cuál?
5. ¿Por qué validar el prototipo?
6. Actividades de validación
La agenda de hoy...
8. www.sgcampus.com.mx @sgcampus
Un prototipo…
1. Expone rápidamente una solución ante los
usuarios (o el equipo)
2. Evidencia problemas críticos antes de
construir
3. Genera una solución realista. Ayuda al PM a
definir un roadmap preciso
4. Permite validar la idea y seguir aprendiendo
La Solución
10. www.sgcampus.com.mx @sgcampus
1. Simulación del producto final en diferentes
grados de fidelidad
2. Es una herramienta de validación
3. Convencer, aterrizar, confirmar ideas
estéticas y/o estructurales de una interface
4. Inversión mínima basada en lo que quieres
aprender
5. De la versión ideal a la versión mínima
(MVP)
¿Qué es un prototipo?
11. www.sgcampus.com.mx @sgcampus
1. Baja Fidelidad / Sketch en papel
2. Mediana Fidelidad / Wireframe
3. Alta Fidelidad / Interactive Prototype
4. Demo Funcional / HTML - CSS
Niveles de Fidelidad
16. www.sgcampus.com.mx @sgcampus
Prototipado en Papel
Fidelidad baja
Pros Contras
● Rápido
● Sin costo
● Produce acuerdos
● No es realista
● No es detallado
● No mides reacciones
viscerales
¿Cuándo usarlo?
● Etapas tempranas de conceptualización
● Descartar ideas iniciales rápidamente
21. www.sgcampus.com.mx @sgcampus
Prototipado Digital
Fidelidad mediana
Pros Contras
● Más realista
● Flexible
● Iteración rápida
● Requiere tiempo
● Requiere curva de
aprendizaje
● No interacciones
¿Cuándo usarlo?
● Para probar la mayoría de los elementos de una
interface
● Para validar controversias de usabilidad
27. www.sgcampus.com.mx @sgcampus
Prototipado Codeado
Fidelidad alta / HTML-CSS
Pros Contras
● Fundamento técnico
del producto
● Diferentes plataformas
● Certero a la realidad
● Producción lenta
● Puede inhibir creatividad
● No es flexible
¿Cuándo usarlo?
● Para obtener una representación realista de lo que
se va a construir
● Para definir hasta el detalle más mínimo
31. www.sgcampus.com.mx @sgcampus
Validación
Sin User Research no hay User Experience
1. Decisión basada en datos vs Puntos de
vista basados en suposiciones
2. Conocer modelo mental y estilo de vida de
usuarios = Solución más realista
3. Empatía para resolver problemas vs
Concentrarse en feature release
4. Pobre planeación = Resultados peligrosos
34. www.sgcampus.com.mx @sgcampus
Tres Métodos de Validación
1. First Click Test / Qué tan rápido un diseño
provee una solución al usuario
2. Usability Testing / Cómo el diseño guía al
usuario a realizar una tarea
3. Kano Analysis / Qué features incluir en el
producto
36. www.sgcampus.com.mx @sgcampus
First-Click Test
Un estudio para medir primeras impresiones.
Te dice si los usuarios fueron capaces de
encontrar fácil y rápidamente en tu diseño la
opción correcta… o de lo contrario cuáles
fueron las opciones en donde hicieron click.
¿Qué es?
37. www.sgcampus.com.mx @sgcampus
First-Click Test
1. Muestra prototipos a tus usuarios
2. Pídeles que completen una tarea predefinida
3. Los usuarios indicarán en dónde harían
click primero para encontrar la información
correcta
4. Te fijas dónde hicieron click primero
5. Mides el tiempo en que tardaron en encontrar la
opción correcta
¿Cómo hacerlo?
38. www.sgcampus.com.mx @sgcampus
First-Click Test
Datos para decidir sobre...
1. El contenido y elementos visuales para
priorizar para tu audiencia
2. El lenguaje para tus botones, etiquetas,
links y contenido
3. Donde colocar elementos como botones,
íconos de compra, menús, secciones, etc
¿Qué obtienes?
39. www.sgcampus.com.mx @sgcampus
First-Click Test
Según Jeff Sauro de Measuring Usability con
13 usuarios puedes identificar los errores más
críticos.
Si automatizas la tarea puedes probar hasta
con 200 usuarios para confianza estadística
¿Cuántos usuarios probar?
42. www.sgcampus.com.mx @sgcampus
Usability Testing
Es un estudio de uso. El objetivo es identificar
problemas críticos de usabilidad. Durante la
prueba los usuarios tratan de completar tareas
mientras observas su comportamiento,
escuchas sus impresiones y tomas notas de
sus acciones.
¿Qué es?
43. www.sgcampus.com.mx @sgcampus
1. Haz un plan de tareas y recluta usuarios
2. Muestra prototipos a tus usuarios
3. Pídeles que completen una tarea
predefinida
4. Observa todo lo que hacen para lograrlo
5. Pide que piensen en voz alta
6. Toma notas y graba la sesión
7. Analiza y reporta resultados
¿Cómo hacerlo?
Usability Testing
44. www.sgcampus.com.mx @sgcampus
1. Aprender si el diseño guía a los usuarios
2. Identificar tiempos en completar tareas
3. Descubrir niveles de satisfacción
4. Identificar cambios para mejorarlo
5. Descubrir expectativas de usuarios y trucos
escondidos
¿Qué obtienes?
Usability Testing
45. www.sgcampus.com.mx @sgcampus
Según Norman Nielsen Group necesitas probar
con tan solo 5 usuarios.
“Si sigues añadiendo más usuarios, aprenderás
cada vez menos y menos porque seguirás
viendo los mismos errores una y otra vez.”
¿Cuántos usuarios probar?
Usability Testing
48. www.sgcampus.com.mx @sgcampus
Kano Analysis
Es un estudio de preferencias. El objetivo es
identificar cuáles funcionalidades (features)
causarán mayor satisfacción e impacto entre
los usuarios. Durante la prueba muestras
ejemplos de funcionalidades e indagas en las
preferencias de los usuarios sobre si estuviera
presente esa feature en el producto o no.
¿Qué es?
49. www.sgcampus.com.mx @sgcampus
1. Crea prototipos de las funcionalidades y
recluta usuarios
2. Explica cómo funciona cada feature y pon un
ejemplo de uso… un escenario
3. Pregunta cómo se sentiría si la feature
estuviera presente
4. … Y si no estuviera presente
5. Grafica resultados
¿Cómo hacerlo?
Kano Analysis
50. www.sgcampus.com.mx @sgcampus
1. Agrupar cada feature en 5 categorías con
comportamientos muy predecible
2. Definir qué features desarrollar primero
3. Ahorrar tiempo y dinero al no construir
features que no son necesarias
4. Identificar cuáles features son más atractivas
y cuáles pueden ser un diferenciador de
producto
¿Qué obtienes?
Kano Analysis
51. www.sgcampus.com.mx @sgcampus
Kano Analysis
Resultados
1. Attractive / Inesperadas / Diferenciadores
2. One-Dimensional / Principales / Confianza
3. Must-Have / Básicas / Desconfianza si ausentes
4. Unimportant / Sin importancia / Da igual
5. Undesired / Actúan en reversa
52. www.sgcampus.com.mx @sgcampus
Según Jan Moorman necesitas probar de 12 a
24 usuarios
Toma en cuenta..
1. La diversidad de los usuarios
2. La granularidad de las diferencias que
quieras medir
¿Cuántos usuarios probar?
Kano Analysis
57. www.sgcampus.com.mx @sgcampus
1. Define ideas iniciales con tu equipo
2. Prueba con usuarios… junto con tu equipo
3. Valida tus supuestos… junto con tu equipo
4. Itera tu diseño… junto con tu equipo
5. Arreglar, rehacer y desechar es muy
costoso… mucho
Conclusiones
61. Useful Tools for Prototyping
UXPin To make digital wireframes
Pop App To make paper “apps”
InVision To create visual prototypes
Moqups To create rapid wireframes
Balsamiq To create rapid wireframes
Unbounce To create landing pages
Proto.io To create rapid wireframes
Comp CC To create rapid wireframes
Sketch For hi-fi prototypes
Fluid UI For mobile prototypes
Atomic.io To create visual prototypes
Macaw For responsive prototypes