Prototipado iterativo rápido en papel <ul><li>Guillermo Ermel </li></ul><ul><ul><li>@guillermoermel </li></ul></ul>
<ul><li>Guillermo Ermel, 34 años. </li></ul><ul><li>Usability Senior Analyst, MercadoLibre.com  </li></ul><ul><li>¿Ustedes...
<ul><li>La mayor plataforma de compras y ventas por Internet de América Latina.   </li></ul><ul><li>Nació de un  proyecto ...
<ul><li>+1000 empleados . </li></ul><ul><li>+58 millones de usuarios registrados  en 12 países. </li></ul><ul><li>Dentro d...
1. Introducción 2. Diseño grupal de sitio web 3. Test con usuarios Hoja de ruta
Prototipado en papel
<ul><li>Simulación de la funcionalidad de un diseño  </li></ul><ul><ul><li>para poder evaluarlo  </li></ul></ul><ul><li>He...
Ejemplos
Ejemplos
Ejemplos
<ul><li>Rápido y económico   </li></ul><ul><li>Facilita modificación y evaluación  </li></ul><ul><li>Puede participar un e...
Cómo hacer y testear  un prototipo en papel
Guiarán el armado y testeo del prototipo. Paso 1: definir TUC Ejemplo Tarea:  regalar flores y enviarlas a un ser querido ...
Dibujar “pantallas” en papel, con botones, links, etc... Paso 2: dibujar
Moderador/observador Usuaria (usando prototipo) Computadora  (poniendo papelito)
<ul><li>Roles: </li></ul><ul><ul><li>Moderador : </li></ul></ul><ul><ul><ul><li>Explica mecánica del test al usuario </li>...
<ul><li>Luego de varios usuarios, surgirán  patrones de problemas </li></ul><ul><li>Modificar   lo que anduvo mal </li></u...
Un test de usabilidad en ML
¡A diseñar y testear!
Sitio web de 1 a 4 páginas (¡porque hay poco tiempo!). ¿Qué vamos a diseñar?
Intercambio post-test ¿Ocurrió algo inesperado durante el test?
<ul><li>Ajustar el prototipo  con lo aprendido en el test. </li></ul><ul><li>Volver a probar  con usuarios para verificar ...
<ul><li>paperprototyping.com </li></ul><ul><li>nngroup.com/reports/prototyping/ </li></ul>Recursos
[email_address]
Prototipado iterativo rápido en papel Guillermo Ermel
Upcoming SlideShare
Loading in...5
×

Prototipado iterativo rápido en papel - Taller

1,048

Published on

Guillermo Ermel
http://www.disenoinclusivo.org.ar/evento-2011/programa/prototipado-iterativo-rapido-en-papel/

Published in: Design
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,048
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
25
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide
  • navegabilidad diseño de información redacción etc. Puede participar un equipo multidisciplinario (no sólo diseñadores o programadores) Como todo proceso de diseño en equipo, Fomenta la creación de un lenguaje común
  • (Este paso es común a otras formas de diseño y evaluación)
  • ¿El usuario usó la pagina de la forma en que ustedes habían pensado? ¿Qué dificultades encontraron? (tanto en el diseño como en test.) ¿Qué ventajas encontraron al usar papel frente a usar una computadora para diseñar? ¿Qué descubrieron con el test? ¿Qué aprendieron? ¿Qué cambios harían al prototipo antes de testear nuevamente?
  • navegabilidad diseño de información redacción etc. Puede participar un equipo multidisciplinario (no sólo diseñadores o programadores) Como todo proceso de diseño en equipo, Fomenta la creación de un lenguaje común
  • Prototipado iterativo rápido en papel - Taller

    1. 1. Prototipado iterativo rápido en papel <ul><li>Guillermo Ermel </li></ul><ul><ul><li>@guillermoermel </li></ul></ul>
    2. 2. <ul><li>Guillermo Ermel, 34 años. </li></ul><ul><li>Usability Senior Analyst, MercadoLibre.com </li></ul><ul><li>¿Ustedes? </li></ul><ul><ul><li>Diseño </li></ul></ul><ul><ul><li>Marketing </li></ul></ul><ul><ul><li>Sistemas </li></ul></ul><ul><ul><li>Usabilidad </li></ul></ul><ul><ul><li>Otros... </li></ul></ul>Presentémonos
    3. 3. <ul><li>La mayor plataforma de compras y ventas por Internet de América Latina. </li></ul><ul><li>Nació de un proyecto universitario mientras Marcos Galperín terminaba su maestría. </li></ul><ul><li>Empresa pública ,cotiza en Nasdaq . </li></ul>Acerca de MercadoLibre
    4. 4. <ul><li>+1000 empleados . </li></ul><ul><li>+58 millones de usuarios registrados en 12 países. </li></ul><ul><li>Dentro de los 50 sitios con más páginas vistas del mundo, según informe de comScore Networks. </li></ul><ul><li>La mayor plataforma de negocios por Internet de América latina. </li></ul>Acerca de MercadoLibre
    5. 5. 1. Introducción 2. Diseño grupal de sitio web 3. Test con usuarios Hoja de ruta
    6. 6. Prototipado en papel
    7. 7. <ul><li>Simulación de la funcionalidad de un diseño </li></ul><ul><ul><li>para poder evaluarlo </li></ul></ul><ul><li>Herramienta de comunicación </li></ul><ul><ul><li>Para poder discutirlo </li></ul></ul>¿Qué es un prototipo de papel?
    8. 8. Ejemplos
    9. 9. Ejemplos
    10. 10. Ejemplos
    11. 11. <ul><li>Rápido y económico </li></ul><ul><li>Facilita modificación y evaluación </li></ul><ul><li>Puede participar un equipo multidisciplinario </li></ul><ul><li>Fomenta la creatividad </li></ul><ul><li>Es divertido :-) </li></ul>Ventajas de prototipar en papel
    12. 12. Cómo hacer y testear un prototipo en papel
    13. 13. 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)
    14. 14. Dibujar “pantallas” en papel, con botones, links, etc... Paso 2: dibujar
    15. 15. Moderador/observador Usuaria (usando prototipo) Computadora (poniendo papelito)
    16. 16. <ul><li>Roles: </li></ul><ul><ul><li>Moderador : </li></ul></ul><ul><ul><ul><li>Explica mecánica del test al usuario </li></ul></ul></ul><ul><ul><ul><li>Le da consignas </li></ul></ul></ul><ul><ul><ul><li>Lo anima a pensar en voz alta </li></ul></ul></ul><ul><ul><li>Usuario : </li></ul></ul><ul><ul><ul><li>usa pantallas para cumplir consigna del moderador. </li></ul></ul></ul><ul><ul><ul><li>&quot;clickea&quot; botones, links, etc. con los dedos </li></ul></ul></ul><ul><ul><ul><li>&quot;tipea&quot; escribiendo con lápiz </li></ul></ul></ul><ul><ul><li>&quot; Computadora &quot;: </li></ul></ul><ul><ul><ul><li>Cambia pantallas en respuesta a &quot;clicks&quot; y &quot;tipeos&quot; </li></ul></ul></ul>Paso 3: probar con usuarios
    17. 17. <ul><li>Luego de varios usuarios, surgirán patrones de problemas </li></ul><ul><li>Modificar lo que anduvo mal </li></ul><ul><li>Volver a testear las veces que haga falta </li></ul>Paso 4: iterar
    18. 18. Un test de usabilidad en ML
    19. 19. ¡A diseñar y testear!
    20. 20. Sitio web de 1 a 4 páginas (¡porque hay poco tiempo!). ¿Qué vamos a diseñar?
    21. 21. Intercambio post-test ¿Ocurrió algo inesperado durante el test?
    22. 22. <ul><li>Ajustar el prototipo con lo aprendido en el test. </li></ul><ul><li>Volver a probar con usuarios para verificar si los problemas mejoraron o desaparecieron. </li></ul><ul><li>A esto llamamos “ Iterar el diseño” </li></ul>Iterar
    23. 23. <ul><li>paperprototyping.com </li></ul><ul><li>nngroup.com/reports/prototyping/ </li></ul>Recursos
    24. 24. [email_address]
    25. 25. Prototipado iterativo rápido en papel Guillermo Ermel
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×