prototipado y testing de usabilidad rápido - @thinkleanedu / universidad de palermo
TRANSCRIPT
![Page 2: Prototipado y testing de usabilidad rápido - @ThinkLeanEdu / Universidad de Palermo](https://reader036.vdocuments.mx/reader036/viewer/2022070510/58a6f4381a28abcf0e8b690f/html5/thumbnails/2.jpg)
¿Qué es un test de usabilidad?
![Page 3: Prototipado y testing de usabilidad rápido - @ThinkLeanEdu / Universidad de Palermo](https://reader036.vdocuments.mx/reader036/viewer/2022070510/58a6f4381a28abcf0e8b690f/html5/thumbnails/3.jpg)
¿Qué es un test de usabilidad?Pedirle a usuarios representativos que intenten tareas representativas usando el diseño a testear. Observar lo que hacen, con qué tienen exito y qué problemas tienen con la interfaz.
(¡sin ayudarlos!)
https://www.nngroup.com/articles/usability-101-introduction-to-usability/
![Page 4: Prototipado y testing de usabilidad rápido - @ThinkLeanEdu / Universidad de Palermo](https://reader036.vdocuments.mx/reader036/viewer/2022070510/58a6f4381a28abcf0e8b690f/html5/thumbnails/4.jpg)
¿Qué es un prototipo?
![Page 5: Prototipado y testing de usabilidad rápido - @ThinkLeanEdu / Universidad de Palermo](https://reader036.vdocuments.mx/reader036/viewer/2022070510/58a6f4381a28abcf0e8b690f/html5/thumbnails/5.jpg)
¿Qué es un prototipo?Simulación de una funcionalidad para evaluarla
Soporte de discusión
Herramienta de comunicación
![Page 6: Prototipado y testing de usabilidad rápido - @ThinkLeanEdu / Universidad de Palermo](https://reader036.vdocuments.mx/reader036/viewer/2022070510/58a6f4381a28abcf0e8b690f/html5/thumbnails/6.jpg)
¿Qué es el prototipado en papel?Es una variación del testeo de usabilidad en la que usuarios representativos hacen tareas realistas interactuando con una versión en papel de la interfaz, manipulada por una persona “que hace de computadora”.
http://paperprototyping.com/what.html
![Page 8: Prototipado y testing de usabilidad rápido - @ThinkLeanEdu / Universidad de Palermo](https://reader036.vdocuments.mx/reader036/viewer/2022070510/58a6f4381a28abcf0e8b690f/html5/thumbnails/8.jpg)
¿Qué ventajasobtengo?
![Page 9: Prototipado y testing de usabilidad rápido - @ThinkLeanEdu / Universidad de Palermo](https://reader036.vdocuments.mx/reader036/viewer/2022070510/58a6f4381a28abcf0e8b690f/html5/thumbnails/9.jpg)
¿Qué ventajasobtengo?Rápido y económico Facilita modificación y evaluación Permite refinar la UI antes de implementarPuede participar un equipo multidisciplinario Fomenta la creatividadBajo compromiso emocional con el diseñoEs divertido :-)
http://paperprototyping.com/what_prosandcons.html
![Page 10: Prototipado y testing de usabilidad rápido - @ThinkLeanEdu / Universidad de Palermo](https://reader036.vdocuments.mx/reader036/viewer/2022070510/58a6f4381a28abcf0e8b690f/html5/thumbnails/10.jpg)
¿Qué desventajas?
![Page 11: Prototipado y testing de usabilidad rápido - @ThinkLeanEdu / Universidad de Palermo](https://reader036.vdocuments.mx/reader036/viewer/2022070510/58a6f4381a28abcf0e8b690f/html5/thumbnails/11.jpg)
¿Qué desventajas?No produce códigoNo encuentra todas las clases de problemas* Puede afectar la forma de interactuar con la UIAlgunos equipos temen lucir “poco profesionales”
*¡Al igual que cualquiera de los otros métodos!Fuente: http://paperprototyping.com/what_prosandcons.html
![Page 12: Prototipado y testing de usabilidad rápido - @ThinkLeanEdu / Universidad de Palermo](https://reader036.vdocuments.mx/reader036/viewer/2022070510/58a6f4381a28abcf0e8b690f/html5/thumbnails/12.jpg)
¿Cómo hacer un prototipo en papel y probarlo con usuarios?
![Page 13: Prototipado y testing de usabilidad rápido - @ThinkLeanEdu / Universidad de Palermo](https://reader036.vdocuments.mx/reader036/viewer/2022070510/58a6f4381a28abcf0e8b690f/html5/thumbnails/13.jpg)
Paso 1: Definir preguntas y tareas¿Logran hacer una compra con envío?
Le querés regalar una docena de rosas a tu tía y que le lleguen a su casa
Pregunta
Tarea
(Las tareas nos dirán cuáles pantallas dibujar)
(Qué queremos entender con la prueba)
https://www.nngroup.com/articles/task-scenarios-usability-testing/
![Page 14: Prototipado y testing de usabilidad rápido - @ThinkLeanEdu / Universidad de Palermo](https://reader036.vdocuments.mx/reader036/viewer/2022070510/58a6f4381a28abcf0e8b690f/html5/thumbnails/14.jpg)
Paso 2: DibujarpantallasDibujar a mano alzada, de manera rápida y clara
Dibujar solo aquellas pantallas que aporten valor a la prueba
Lápiz y Papel
Sólo lo necesario
(No olvidar las pantallas de feedback, status, etc)
(Evitar detalles innecesarios para esta etapa)
![Page 15: Prototipado y testing de usabilidad rápido - @ThinkLeanEdu / Universidad de Palermo](https://reader036.vdocuments.mx/reader036/viewer/2022070510/58a6f4381a28abcf0e8b690f/html5/thumbnails/15.jpg)
Paso 3: Probarcon usuarios
ComputadoraCambia pantalla en respuesta a clicks y tipeos
Usuario
Moderador/ObservadorComputadora
![Page 16: Prototipado y testing de usabilidad rápido - @ThinkLeanEdu / Universidad de Palermo](https://reader036.vdocuments.mx/reader036/viewer/2022070510/58a6f4381a28abcf0e8b690f/html5/thumbnails/16.jpg)
Paso 4: IterarSurgirán patrones de problemas
Modificar las pantallas que los causaron
Luego de 2-3 usuarios:
Una vez identificados los problemas
Las veces que haga falta / lo que permita el presupuesto / tiempos
Volver a testear
![Page 17: Prototipado y testing de usabilidad rápido - @ThinkLeanEdu / Universidad de Palermo](https://reader036.vdocuments.mx/reader036/viewer/2022070510/58a6f4381a28abcf0e8b690f/html5/thumbnails/17.jpg)
Ej. Proceso de pagos de Mercado Libre
![Page 18: Prototipado y testing de usabilidad rápido - @ThinkLeanEdu / Universidad de Palermo](https://reader036.vdocuments.mx/reader036/viewer/2022070510/58a6f4381a28abcf0e8b690f/html5/thumbnails/18.jpg)
Ej. MercadoShops
![Page 19: Prototipado y testing de usabilidad rápido - @ThinkLeanEdu / Universidad de Palermo](https://reader036.vdocuments.mx/reader036/viewer/2022070510/58a6f4381a28abcf0e8b690f/html5/thumbnails/19.jpg)
Ej. Mobile app
Taller de prototipado ISA15, Córdoba, Argentina
![Page 20: Prototipado y testing de usabilidad rápido - @ThinkLeanEdu / Universidad de Palermo](https://reader036.vdocuments.mx/reader036/viewer/2022070510/58a6f4381a28abcf0e8b690f/html5/thumbnails/20.jpg)
http://blog.tackmobile.com/article/interface-origami/
Revelar
![Page 21: Prototipado y testing de usabilidad rápido - @ThinkLeanEdu / Universidad de Palermo](https://reader036.vdocuments.mx/reader036/viewer/2022070510/58a6f4381a28abcf0e8b690f/html5/thumbnails/21.jpg)
http://blog.tackmobile.com/article/interface-origami/
Acordeón
![Page 22: Prototipado y testing de usabilidad rápido - @ThinkLeanEdu / Universidad de Palermo](https://reader036.vdocuments.mx/reader036/viewer/2022070510/58a6f4381a28abcf0e8b690f/html5/thumbnails/22.jpg)
http://wireframes.linowski.ca/2009/11/paper-prototype-cutouts/
Reusar el marco
![Page 23: Prototipado y testing de usabilidad rápido - @ThinkLeanEdu / Universidad de Palermo](https://reader036.vdocuments.mx/reader036/viewer/2022070510/58a6f4381a28abcf0e8b690f/html5/thumbnails/23.jpg)
https://uxmag.com/articles/eight-lessons-in-mobile-usability-testing
Scroll
![Page 24: Prototipado y testing de usabilidad rápido - @ThinkLeanEdu / Universidad de Palermo](https://reader036.vdocuments.mx/reader036/viewer/2022070510/58a6f4381a28abcf0e8b690f/html5/thumbnails/24.jpg)
http://alistapart.com/article/paperprototyping
Tabs
![Page 25: Prototipado y testing de usabilidad rápido - @ThinkLeanEdu / Universidad de Palermo](https://reader036.vdocuments.mx/reader036/viewer/2022070510/58a6f4381a28abcf0e8b690f/html5/thumbnails/25.jpg)
http://www.jeremyfriedland.com/portfolio/prototype.php
Transparencias
![Page 26: Prototipado y testing de usabilidad rápido - @ThinkLeanEdu / Universidad de Palermo](https://reader036.vdocuments.mx/reader036/viewer/2022070510/58a6f4381a28abcf0e8b690f/html5/thumbnails/26.jpg)
https://loft.io/guide/dfa/reference/build/lo-fi-paper-prototyping/
Transparencias
![Page 27: Prototipado y testing de usabilidad rápido - @ThinkLeanEdu / Universidad de Palermo](https://reader036.vdocuments.mx/reader036/viewer/2022070510/58a6f4381a28abcf0e8b690f/html5/thumbnails/27.jpg)
http://creative-jar.com/blog/experience-design-blog/paper-prototyping/
Modularizando con post-its
![Page 28: Prototipado y testing de usabilidad rápido - @ThinkLeanEdu / Universidad de Palermo](https://reader036.vdocuments.mx/reader036/viewer/2022070510/58a6f4381a28abcf0e8b690f/html5/thumbnails/28.jpg)
Wearables
http://april3rd.com/hcid521/?p=63
![Page 29: Prototipado y testing de usabilidad rápido - @ThinkLeanEdu / Universidad de Palermo](https://reader036.vdocuments.mx/reader036/viewer/2022070510/58a6f4381a28abcf0e8b690f/html5/thumbnails/29.jpg)
Wearables
https://dribbble.com/shots/1967417-Paper-prototyping
![Page 30: Prototipado y testing de usabilidad rápido - @ThinkLeanEdu / Universidad de Palermo](https://reader036.vdocuments.mx/reader036/viewer/2022070510/58a6f4381a28abcf0e8b690f/html5/thumbnails/30.jpg)
Hardware
http://nickremis.com/wp/?p=300
![Page 31: Prototipado y testing de usabilidad rápido - @ThinkLeanEdu / Universidad de Palermo](https://reader036.vdocuments.mx/reader036/viewer/2022070510/58a6f4381a28abcf0e8b690f/html5/thumbnails/31.jpg)
¡A diseñary testear!
Sitio o app que resuelva un problema puntual
![Page 32: Prototipado y testing de usabilidad rápido - @ThinkLeanEdu / Universidad de Palermo](https://reader036.vdocuments.mx/reader036/viewer/2022070510/58a6f4381a28abcf0e8b690f/html5/thumbnails/32.jpg)
Ahora con sus proyectos
Redactar una tarea para testear alguna parte de sus proyectosComenzar un prototipoCompartir
![Page 33: Prototipado y testing de usabilidad rápido - @ThinkLeanEdu / Universidad de Palermo](https://reader036.vdocuments.mx/reader036/viewer/2022070510/58a6f4381a28abcf0e8b690f/html5/thumbnails/33.jpg)
|
|
RecursosSketching user experiences workbook by Bill Buxton
Libro Paper prototyping by Carolyn Snyder y su sitio web paperprototyping.com
Libro Prototyping by Todd Zaki Warfel
DVD nngroup.com/reports/prototyping
Video: ejemplo cómo pensar en voz alta para un test de usabilidad (para participantes) bit.ly/pensar-en-voz-alta
Kit+tutorial: cómo hacer un test de usabilidad de principio a fin (by MercadoLibre User Research Team)