prototipado iterativo rápido en papel - taller
DESCRIPTION
Guillermo Ermel http://www.disenoinclusivo.org.ar/evento-2011/programa/prototipado-iterativo-rapido-en-papel/TRANSCRIPT
![Page 1: Prototipado iterativo rápido en papel - Taller](https://reader036.vdocuments.net/reader036/viewer/2022062300/557ba17fd8b42aa0758b5507/html5/thumbnails/1.jpg)
Prototipado iterativorápido en papelGuillermo Ermel
@guillermoermel
![Page 2: Prototipado iterativo rápido en papel - Taller](https://reader036.vdocuments.net/reader036/viewer/2022062300/557ba17fd8b42aa0758b5507/html5/thumbnails/2.jpg)
• Guillermo Ermel, 34 años.
• Usability Senior Analyst, MercadoLibre.com
• ¿Ustedes?– Diseño
– Marketing
– Sistemas
– Usabilidad
– Otros...
Presentémonos
![Page 3: Prototipado iterativo rápido en papel - Taller](https://reader036.vdocuments.net/reader036/viewer/2022062300/557ba17fd8b42aa0758b5507/html5/thumbnails/3.jpg)
• La mayor plataforma de compras y ventas por Internet de América Latina.
• Nació de un proyecto universitario mientras Marcos Galperín terminaba su maestría.
• Empresa pública,cotiza en Nasdaq.
Acerca de MercadoLibre
![Page 4: Prototipado iterativo rápido en papel - Taller](https://reader036.vdocuments.net/reader036/viewer/2022062300/557ba17fd8b42aa0758b5507/html5/thumbnails/4.jpg)
• +1000 empleados.
• +58 millones de usuarios registrados en 12 países.
• Dentro de los 50 sitios con más páginas vistas del mundo, según informe de comScore Networks.
• La mayor plataforma de negocios por Internet de América latina.
Acerca de MercadoLibre
![Page 5: Prototipado iterativo rápido en papel - Taller](https://reader036.vdocuments.net/reader036/viewer/2022062300/557ba17fd8b42aa0758b5507/html5/thumbnails/5.jpg)
1. Introducción
2. Diseño grupal de sitio web
3. Test con usuarios
Hoja de ruta
![Page 6: Prototipado iterativo rápido en papel - Taller](https://reader036.vdocuments.net/reader036/viewer/2022062300/557ba17fd8b42aa0758b5507/html5/thumbnails/6.jpg)
Prototipado en papel
![Page 7: Prototipado iterativo rápido en papel - Taller](https://reader036.vdocuments.net/reader036/viewer/2022062300/557ba17fd8b42aa0758b5507/html5/thumbnails/7.jpg)
• Simulación de la funcionalidad de un diseño
– para poder evaluarlo
• Herramienta de comunicación
– Para poder discutirlo
¿Qué es un prototipo de papel?
![Page 8: Prototipado iterativo rápido en papel - Taller](https://reader036.vdocuments.net/reader036/viewer/2022062300/557ba17fd8b42aa0758b5507/html5/thumbnails/8.jpg)
Ejemplos
![Page 9: Prototipado iterativo rápido en papel - Taller](https://reader036.vdocuments.net/reader036/viewer/2022062300/557ba17fd8b42aa0758b5507/html5/thumbnails/9.jpg)
Ejemplos
![Page 10: Prototipado iterativo rápido en papel - Taller](https://reader036.vdocuments.net/reader036/viewer/2022062300/557ba17fd8b42aa0758b5507/html5/thumbnails/10.jpg)
Ejemplos
![Page 11: Prototipado iterativo rápido en papel - Taller](https://reader036.vdocuments.net/reader036/viewer/2022062300/557ba17fd8b42aa0758b5507/html5/thumbnails/11.jpg)
• Rápido y económico
• Facilita modificación y evaluación
• Puede participar un equipo multidisciplinario
• Fomenta la creatividad
• Es divertido :-)
Ventajas de prototipar en papel
![Page 12: Prototipado iterativo rápido en papel - Taller](https://reader036.vdocuments.net/reader036/viewer/2022062300/557ba17fd8b42aa0758b5507/html5/thumbnails/12.jpg)
Cómo hacer y testear un prototipo en papel
![Page 13: Prototipado iterativo rápido en papel - Taller](https://reader036.vdocuments.net/reader036/viewer/2022062300/557ba17fd8b42aa0758b5507/html5/thumbnails/13.jpg)
Guiarán el armado y testeo del prototipo.
Paso 1: definir TUC
Ejemplo
Tarea: regalar flores y enviarlas a un ser querido
Usuarios: 25 - 55 años, navegan diariamente, poca o ninguna experiencia en compras online.
Contexto: navegan desde su trabajo (apurados y con interrupciones)
![Page 14: Prototipado iterativo rápido en papel - Taller](https://reader036.vdocuments.net/reader036/viewer/2022062300/557ba17fd8b42aa0758b5507/html5/thumbnails/14.jpg)
Dibujar “pantallas” en papel, con botones, links, etc...
Paso 2: dibujar
![Page 15: Prototipado iterativo rápido en papel - Taller](https://reader036.vdocuments.net/reader036/viewer/2022062300/557ba17fd8b42aa0758b5507/html5/thumbnails/15.jpg)
Moderador/observador
Usuaria(usando prototipo)
Computadora (poniendo papelito)
![Page 16: Prototipado iterativo rápido en papel - Taller](https://reader036.vdocuments.net/reader036/viewer/2022062300/557ba17fd8b42aa0758b5507/html5/thumbnails/16.jpg)
Roles:
– Moderador:
• Explica mecánica del test al usuario• Le da consignas• Lo anima a pensar en voz alta
– Usuario:
• usa pantallas para cumplir consigna del moderador.• "clickea" botones, links, etc. con los dedos• "tipea" escribiendo con lápiz
– "Computadora":
• Cambia pantallas en respuesta a "clicks" y "tipeos"
Paso 3: probar con usuarios
![Page 17: Prototipado iterativo rápido en papel - Taller](https://reader036.vdocuments.net/reader036/viewer/2022062300/557ba17fd8b42aa0758b5507/html5/thumbnails/17.jpg)
• Luego de varios usuarios, surgirán patrones de problemas
• Modificar lo que anduvo mal
• Volver a testear las veces que haga falta
Paso 4: iterar
![Page 18: Prototipado iterativo rápido en papel - Taller](https://reader036.vdocuments.net/reader036/viewer/2022062300/557ba17fd8b42aa0758b5507/html5/thumbnails/18.jpg)
Un test de usabilidad en ML
![Page 19: Prototipado iterativo rápido en papel - Taller](https://reader036.vdocuments.net/reader036/viewer/2022062300/557ba17fd8b42aa0758b5507/html5/thumbnails/19.jpg)
¡A diseñar y testear!
![Page 20: Prototipado iterativo rápido en papel - Taller](https://reader036.vdocuments.net/reader036/viewer/2022062300/557ba17fd8b42aa0758b5507/html5/thumbnails/20.jpg)
Sitio web de 1 a 4 páginas(¡porque hay poco tiempo!).
¿Qué vamos a diseñar?
![Page 21: Prototipado iterativo rápido en papel - Taller](https://reader036.vdocuments.net/reader036/viewer/2022062300/557ba17fd8b42aa0758b5507/html5/thumbnails/21.jpg)
Intercambio post-test
¿Ocurrió algo inesperado durante el test?
![Page 22: Prototipado iterativo rápido en papel - Taller](https://reader036.vdocuments.net/reader036/viewer/2022062300/557ba17fd8b42aa0758b5507/html5/thumbnails/22.jpg)
• Ajustar el prototipo con lo aprendido en el test.
• Volver a probar con usuarios para verificar si los problemas mejoraron o desaparecieron.
• A esto llamamos “Iterar el diseño”
Iterar
![Page 23: Prototipado iterativo rápido en papel - Taller](https://reader036.vdocuments.net/reader036/viewer/2022062300/557ba17fd8b42aa0758b5507/html5/thumbnails/23.jpg)
• paperprototyping.com
• nngroup.com/reports/prototyping/
Recursos
![Page 25: Prototipado iterativo rápido en papel - Taller](https://reader036.vdocuments.net/reader036/viewer/2022062300/557ba17fd8b42aa0758b5507/html5/thumbnails/25.jpg)
No deje de completar su evaluación online
disenoinclusivo.org.ar/encuesta¡Muchas gracias!
Prototipado iterativo rápido en papel
Guillermo Ermel