prototipos de interfaces
DESCRIPTION
Esta presentación la usé en Noviembre 2010 para un taller en el Grupo KPR.TRANSCRIPT
![Page 2: Prototipos de Interfaces](https://reader035.vdocuments.net/reader035/viewer/2022062300/5571f88d49795991698da97d/html5/thumbnails/2.jpg)
![Page 3: Prototipos de Interfaces](https://reader035.vdocuments.net/reader035/viewer/2022062300/5571f88d49795991698da97d/html5/thumbnails/3.jpg)
”Lo que oigo lo olvido. Lo que veo lo recuerdo. Lo que hago lo entiendo!”
Lao Tse
![Page 4: Prototipos de Interfaces](https://reader035.vdocuments.net/reader035/viewer/2022062300/5571f88d49795991698da97d/html5/thumbnails/4.jpg)
Introducción al prototipeado
HCI / CHI y diseño
Rol de la evaluación (ej: testeos de usabilidad): son herramientas para la evaluación de éxito o fracaso.
Rol generativo (herramientas para la generación de diseño): para posibilitar el pensamiento en diseño(Lim et al. 2008)
Los prototipos son un medio de comunicación(Eriksson 1995)
![Page 5: Prototipos de Interfaces](https://reader035.vdocuments.net/reader035/viewer/2022062300/5571f88d49795991698da97d/html5/thumbnails/5.jpg)
Los prototipos son concretosAyudan a comunicar y
evaluar ideas
![Page 6: Prototipos de Interfaces](https://reader035.vdocuments.net/reader035/viewer/2022062300/5571f88d49795991698da97d/html5/thumbnails/6.jpg)
= tipos de prototipos
Y se usan con diferente propósito
… boceto de lapiz, modelo en cartón para un objeto, seguidilla de imágenes, video mostrando un comportamiento simulado, simulación de de un software, versión parcialmente terminada de un producto
• Cruda/bocetada/prototipos no interactivos capturan ideas tempranas en estado de boceto
• Prototipos más pulidos sirven para comunicar la idea clave de un diseño.
• Prototipos interactivos pueden ser usados para pedir opinión de los usaurios.
(Eriksson 1995)
![Page 7: Prototipos de Interfaces](https://reader035.vdocuments.net/reader035/viewer/2022062300/5571f88d49795991698da97d/html5/thumbnails/7.jpg)
Prototipos visionarios& prototipos de trabajo
Los prototipos visionarios pueden ser borradores o pulidos. Los que son muy pulidos, tienen ventajas y desventajas.
Ej. Apple Computer's "Knowledge Navigator”.
Son parte del proceso iterativo de diseño, para enganchar a los diseñadores entre ellos, pero también a los usuarios en el proceso de diseño.
Los prototipos de trabajo tienen que tener dos propiedades: accesibilidad y tosquedad.
![Page 8: Prototipos de Interfaces](https://reader035.vdocuments.net/reader035/viewer/2022062300/5571f88d49795991698da97d/html5/thumbnails/8.jpg)
Ejemplo: desarrollo de Urban Mediator
Prototipo visionario– animación para el público
![Page 9: Prototipos de Interfaces](https://reader035.vdocuments.net/reader035/viewer/2022062300/5571f88d49795991698da97d/html5/thumbnails/9.jpg)
Prototipo visionario– boceto entre los socios del proyecto
Ejemplo: desarrollo de Urban Mediator
![Page 10: Prototipos de Interfaces](https://reader035.vdocuments.net/reader035/viewer/2022062300/5571f88d49795991698da97d/html5/thumbnails/10.jpg)
Prototipos de trabajo– bocetos para el grupo de diseño
Ejemplo: desarrollo de Urban Mediator
![Page 11: Prototipos de Interfaces](https://reader035.vdocuments.net/reader035/viewer/2022062300/5571f88d49795991698da97d/html5/thumbnails/11.jpg)
Prototipos de trabajo– papel- sesiones de co-diseño
Ejemplo: desarrollo de Urban Mediator
![Page 12: Prototipos de Interfaces](https://reader035.vdocuments.net/reader035/viewer/2022062300/5571f88d49795991698da97d/html5/thumbnails/12.jpg)
Prototipos de trabajo– prototipo en el celular (actividades de co-diseño)
Ejemplo: desarrollo de Urban Mediator
![Page 13: Prototipos de Interfaces](https://reader035.vdocuments.net/reader035/viewer/2022062300/5571f88d49795991698da97d/html5/thumbnails/13.jpg)
Prototipos de trabajo– “imanes” (para el equipo de diseñadores)
Ejemplo: desarrollo de Urban Mediator
![Page 14: Prototipos de Interfaces](https://reader035.vdocuments.net/reader035/viewer/2022062300/5571f88d49795991698da97d/html5/thumbnails/14.jpg)
Prototipos de trabajo– wireframes
Ejemplo: desarrollo de Urban Mediator
![Page 15: Prototipos de Interfaces](https://reader035.vdocuments.net/reader035/viewer/2022062300/5571f88d49795991698da97d/html5/thumbnails/15.jpg)
Prototipos de trabajo– prototipos en papel (grupo de diseñadores)
Ejemplo: desarrollo de Urban Mediator
![Page 16: Prototipos de Interfaces](https://reader035.vdocuments.net/reader035/viewer/2022062300/5571f88d49795991698da97d/html5/thumbnails/16.jpg)
Prototipos en software (“beta version”)
Ejemplo: desarrollo de Urban Mediator
![Page 17: Prototipos de Interfaces](https://reader035.vdocuments.net/reader035/viewer/2022062300/5571f88d49795991698da97d/html5/thumbnails/17.jpg)
Urban Mediator v2.0
Ejemplo: desarrollo de Urban Mediator
![Page 18: Prototipos de Interfaces](https://reader035.vdocuments.net/reader035/viewer/2022062300/5571f88d49795991698da97d/html5/thumbnails/18.jpg)
Principios del prototipo
(Lim et al. 2008)
![Page 19: Prototipos de Interfaces](https://reader035.vdocuments.net/reader035/viewer/2022062300/5571f88d49795991698da97d/html5/thumbnails/19.jpg)
En breve
Cuando creamos un prototipo es importante considerar:
• el material
• la resolución
• el objetivo
![Page 20: Prototipos de Interfaces](https://reader035.vdocuments.net/reader035/viewer/2022062300/5571f88d49795991698da97d/html5/thumbnails/20.jpg)
Métodos de baja fidelidad Bajo costo, fácil y rápido.
Para evaluar diseños múltiples de manera temprana.
Flexibles, sin miedo a las computadoras, focalizando en lo importante.
PERO: Los casos de error son potencialmente difíciles de encontrar, y no produce especificaciones de detalles. No es real!
Lo típico es sólo bocetar con lapiz y papel
No se necesita ser un excelente dibujante para comunicar ideas
![Page 21: Prototipos de Interfaces](https://reader035.vdocuments.net/reader035/viewer/2022062300/5571f88d49795991698da97d/html5/thumbnails/21.jpg)
Mago de Oz
El usuario se sienta frente a una compu y usa el sistema Las respuestas están generadas por un operador que manualmente simula el sistema.
Necesita material en versión digital.
Ejemplo del Arenero de Arki.
![Page 22: Prototipos de Interfaces](https://reader035.vdocuments.net/reader035/viewer/2022062300/5571f88d49795991698da97d/html5/thumbnails/22.jpg)
Métodos de Alta Fidelidad
Cuando se contruye un prototipo del sistema
Por ejemplo usando: Flash, Director o Visual Basic
Pros: la funcionalidad parece real, puede ser usado para testeos de usuarios Se ve y se siente real, es muy usable para las especificaciones de ventas o marketing.
Cons: caro y lento para desarrollar, no se puede usar temprano y puede dirigir la atención a detalles irrelevantes, la gente que testea puede no sugerir cambios grandes, o de aspectos importantes, puede tender a expectativas poco realísticas.
![Page 23: Prototipos de Interfaces](https://reader035.vdocuments.net/reader035/viewer/2022062300/5571f88d49795991698da97d/html5/thumbnails/23.jpg)
En el diseño de software, un prototipo muy detallado y realista puede hacer pensar al cliente que el proyect está más avanzado de lo que está en realidad. Cuidado!
![Page 24: Prototipos de Interfaces](https://reader035.vdocuments.net/reader035/viewer/2022062300/5571f88d49795991698da97d/html5/thumbnails/24.jpg)
PROTOTIPOS EN PAPEL
![Page 25: Prototipos de Interfaces](https://reader035.vdocuments.net/reader035/viewer/2022062300/5571f88d49795991698da97d/html5/thumbnails/25.jpg)
![Page 26: Prototipos de Interfaces](https://reader035.vdocuments.net/reader035/viewer/2022062300/5571f88d49795991698da97d/html5/thumbnails/26.jpg)
“Los prototipos en papel son bajos en tecnología y en costo, pero muy eficaces para los testeos de
usabilidad, por ejemplo de diseño web.”
Helen M. Grady
![Page 27: Prototipos de Interfaces](https://reader035.vdocuments.net/reader035/viewer/2022062300/5571f88d49795991698da97d/html5/thumbnails/27.jpg)
Prototipos de papel
Son buenos para las interfaces en 2D, en el diseño web.
Para 3D o contenifdo altamente interactivo es menos útil.
![Page 28: Prototipos de Interfaces](https://reader035.vdocuments.net/reader035/viewer/2022062300/5571f88d49795991698da97d/html5/thumbnails/28.jpg)
Testeos de usabilidad al final del proceso de diseño
Se encuentran problemas estructurales
El re- diseño puede ser imposible
Problema
![Page 29: Prototipos de Interfaces](https://reader035.vdocuments.net/reader035/viewer/2022062300/5571f88d49795991698da97d/html5/thumbnails/29.jpg)
Herramientas simples como papel, tijeras, y post-its
Separación del diseño y el contenido que permite focalizarse en el contenido
“hands-on” diseñar manipulando contenido físico
todo el grupo puede seguir todos los pasos
no se necesitan habilidades con la computadora
![Page 30: Prototipos de Interfaces](https://reader035.vdocuments.net/reader035/viewer/2022062300/5571f88d49795991698da97d/html5/thumbnails/30.jpg)
Los usuarios reconocen que el prototipo está crudo y se sienten libres para criticar y hacer recomendaciones.
Multiples testeos con poca cantidad de usuarios es más útil para identificar problemas que elaborar testeos de usabilidad.
Los prototipos en papel permiten separar el contenido del diseño visual.
![Page 31: Prototipos de Interfaces](https://reader035.vdocuments.net/reader035/viewer/2022062300/5571f88d49795991698da97d/html5/thumbnails/31.jpg)
Los cambios se pueden hacer en el camino, durante el testeo
Después de varias iteraciones de testeos y diseño en papel, hacer el sitio web no llevará mucho tiempo.
La información tiene que ser lo más real posible.
![Page 32: Prototipos de Interfaces](https://reader035.vdocuments.net/reader035/viewer/2022062300/5571f88d49795991698da97d/html5/thumbnails/32.jpg)
“Pretendé que tu dedo es el mouse y señalá en la página que querés
cliquear”.
Nielsen
![Page 33: Prototipos de Interfaces](https://reader035.vdocuments.net/reader035/viewer/2022062300/5571f88d49795991698da97d/html5/thumbnails/33.jpg)
Roles en el equipo
-el facilitador/ introductor(el único que habla con el usuario)“Contá en voz alta lo que elegis”
-la máquina(navegar entre los papeles/ encontrar el correcto)“Yo actuo de computadora, pasando las páginas y manejando el sitio”
-el observador(toma notas del comportamiento del usuario/ problemas/ sugerencias)
![Page 34: Prototipos de Interfaces](https://reader035.vdocuments.net/reader035/viewer/2022062300/5571f88d49795991698da97d/html5/thumbnails/34.jpg)
Foco temprano en usuarios y tareas
Medición empírica del uso del producto
Diseño iterativo, modificado y testeado
![Page 35: Prototipos de Interfaces](https://reader035.vdocuments.net/reader035/viewer/2022062300/5571f88d49795991698da97d/html5/thumbnails/35.jpg)
Les muestro acá diferentes maneras de hacer prototipos en papel
![Page 36: Prototipos de Interfaces](https://reader035.vdocuments.net/reader035/viewer/2022062300/5571f88d49795991698da97d/html5/thumbnails/36.jpg)
![Page 37: Prototipos de Interfaces](https://reader035.vdocuments.net/reader035/viewer/2022062300/5571f88d49795991698da97d/html5/thumbnails/37.jpg)
![Page 38: Prototipos de Interfaces](https://reader035.vdocuments.net/reader035/viewer/2022062300/5571f88d49795991698da97d/html5/thumbnails/38.jpg)
![Page 39: Prototipos de Interfaces](https://reader035.vdocuments.net/reader035/viewer/2022062300/5571f88d49795991698da97d/html5/thumbnails/39.jpg)
![Page 40: Prototipos de Interfaces](https://reader035.vdocuments.net/reader035/viewer/2022062300/5571f88d49795991698da97d/html5/thumbnails/40.jpg)
![Page 41: Prototipos de Interfaces](https://reader035.vdocuments.net/reader035/viewer/2022062300/5571f88d49795991698da97d/html5/thumbnails/41.jpg)
![Page 42: Prototipos de Interfaces](https://reader035.vdocuments.net/reader035/viewer/2022062300/5571f88d49795991698da97d/html5/thumbnails/42.jpg)
![Page 43: Prototipos de Interfaces](https://reader035.vdocuments.net/reader035/viewer/2022062300/5571f88d49795991698da97d/html5/thumbnails/43.jpg)
![Page 44: Prototipos de Interfaces](https://reader035.vdocuments.net/reader035/viewer/2022062300/5571f88d49795991698da97d/html5/thumbnails/44.jpg)
![Page 45: Prototipos de Interfaces](https://reader035.vdocuments.net/reader035/viewer/2022062300/5571f88d49795991698da97d/html5/thumbnails/45.jpg)
ENCUENTRO CON EL USUARIO
![Page 46: Prototipos de Interfaces](https://reader035.vdocuments.net/reader035/viewer/2022062300/5571f88d49795991698da97d/html5/thumbnails/46.jpg)
Cuestiones generales
La entrevista que pueden ir mal y afectan la calidad del testeo y la felicidad / comodidad del usuario.
Respeten al usuario- los están ayudando a hacer su trabajo
La situación del testeo pueden ser estresante para el usuario; es responsabilidad de ustedes ayudar a mantener el estrés al mínimo. Por ejemplo el lider / facilitador puede actuar con confianza y relajado.
Un escenario de testeo típico tiene un lider y otros que operan el equipamiento y toman notas. Demasiados alrededor del usuario puede inhibir la situación.
El usuario se comunica solo con el lider- Los otros no tienen que molestar. Estar fuera del camino/visión, preferiblemente.
![Page 47: Prototipos de Interfaces](https://reader035.vdocuments.net/reader035/viewer/2022062300/5571f88d49795991698da97d/html5/thumbnails/47.jpg)
Recrutar usuarios
Puede ser difícil de encontrar si querés resultados estadísticos o el usuario es un grupo muy especializado.
Pueden venir de la empresa que los contrata, o de reclutadores externos.
Tienen que naturalmente representar al target para el que diseñan- no tus compañeros de trabajo
Usuarios novatos se convierten en expertos con el tiempo, entonces tienen que buscar nuevos para tener resultados relevantes.
Ahora las computadoras y los celulares están en todos lados, entonces encontrar a principiantes es difícil pero a la vez es un grupo menos relevante.
![Page 48: Prototipos de Interfaces](https://reader035.vdocuments.net/reader035/viewer/2022062300/5571f88d49795991698da97d/html5/thumbnails/48.jpg)
Antes de encontrar al usuario Tener todo listo. El lío da la impresión de poco profesional y distrae al usuario.
El equipamiento para el testeoApaguen los celulares!Ofrescánle algo para tomar/comer, charlen con el usuario normalmente para relajar la situación
El lider se introduce y presenta a las otras personas.
Piden permiso para hacer un video y cuentan como van a usar el material (cuestiones de ética). Digan que puede interrumpir en cualquier momento para hacer preguntas.
Enfaticen que están testeando el sistema y NO la persona.
![Page 49: Prototipos de Interfaces](https://reader035.vdocuments.net/reader035/viewer/2022062300/5571f88d49795991698da97d/html5/thumbnails/49.jpg)
Durante el testeo
Den instrucciones claras. Les pueden dar las tareas a los usuarios en un pedazo de papel. Un papel por vez.
Pregunten si está bien empezar.
Díganle al usuario cuando la tarea está completa
Hablen el idioma del usuario- sin lunfardo de diseñadores o términos inventados entre ustedes
Empiecen por una tarea fácil- le da al usuario confianza
Motiven al usuario a pensar en voz alta si no vienen naturalmente y si usan este protocolo.
![Page 50: Prototipos de Interfaces](https://reader035.vdocuments.net/reader035/viewer/2022062300/5571f88d49795991698da97d/html5/thumbnails/50.jpg)
Durante el testeo
Preguntas como:
- Qué ves ahora? - Cuál es tu próximo paso? - Qué estás buscando?
Es sorprendentemente fácil (inconcientemente) ayudar al usuario con gestos, sonidos, etc. Observensé en el video y traten de aprender de esto. Si el usuario queda empantanado lo pueden suavemente interrumpir la tarea para que no se estrese la situación o ayudarlo a completar la tarea y marcarla como un fracaso.
Las sesiones no pueden ser más largas que una hora, en principio: - dejen tareas de lado
![Page 51: Prototipos de Interfaces](https://reader035.vdocuments.net/reader035/viewer/2022062300/5571f88d49795991698da97d/html5/thumbnails/51.jpg)
![Page 52: Prototipos de Interfaces](https://reader035.vdocuments.net/reader035/viewer/2022062300/5571f88d49795991698da97d/html5/thumbnails/52.jpg)
![Page 53: Prototipos de Interfaces](https://reader035.vdocuments.net/reader035/viewer/2022062300/5571f88d49795991698da97d/html5/thumbnails/53.jpg)
![Page 54: Prototipos de Interfaces](https://reader035.vdocuments.net/reader035/viewer/2022062300/5571f88d49795991698da97d/html5/thumbnails/54.jpg)
Consejiitos
Pueden testear diferentes partes del sistema
O Le pueden dar un escenario al usuario(vos querés hacer esto y esto)
Focalizarse en que los usuario reaccionen naturalmente
60-90 minutos para la entrevista con el usuario
Focalizarse en lo que hacen no en lo que dicen
![Page 55: Prototipos de Interfaces](https://reader035.vdocuments.net/reader035/viewer/2022062300/5571f88d49795991698da97d/html5/thumbnails/55.jpg)
Ofrecen algo para tomar. NO durante el testeo.
Tiempo para el cuestionario post-testeo- o una discusión sin forma especial
Reserven tiempo para comentarios y sugerencias
Agradezcan la cooperación del usuario
Muchas veces se les regala algo, preferiblemente no dinero
Después del testeo
![Page 56: Prototipos de Interfaces](https://reader035.vdocuments.net/reader035/viewer/2022062300/5571f88d49795991698da97d/html5/thumbnails/56.jpg)
Sugerencias para el trabajo de hoy
Hagan grupos de 3 personas. Elijan el proyecto sobre el que van a trabajar
Elijan una parte para desarrollar. Hagan un prototipo de papel.
Hagan un escenario Testéenlo dos veces con colegas.
Practiquen todo el discurso, incluida la presentación.
Reformen el prototipo. Testéenlo de nuevo con 2 nuevos usuarios.
Reflecciones y conclusiones con todos
![Page 57: Prototipos de Interfaces](https://reader035.vdocuments.net/reader035/viewer/2022062300/5571f88d49795991698da97d/html5/thumbnails/57.jpg)
QUÉ OBSERVAR?
![Page 58: Prototipos de Interfaces](https://reader035.vdocuments.net/reader035/viewer/2022062300/5571f88d49795991698da97d/html5/thumbnails/58.jpg)
Descubrimientos positivos- qué funcionó bien?
Situaciones problemáticas - caminos de navegación incorrectos - pausas largas - empatanamiento
Observen los gestos de los usuarios
El prototipo describe un modelo mental correcto?
Qué correcciones hicieron?
Sus reflecciones sobre el método en sí mismo.
Observación
![Page 59: Prototipos de Interfaces](https://reader035.vdocuments.net/reader035/viewer/2022062300/5571f88d49795991698da97d/html5/thumbnails/59.jpg)
Tasa de errores, tiempo de finalización de tareas, pasos en la navegación etc.Es más fácil analizar esto con estadísticas
Posibilita una comparación directa de los dos sistemas como los prototipos o las versiones mejoradas.
Es presentada con números, gráficos y cuadros..
Pros: Precisa, convincente, fácil de entender, breve, y muchas veces se puede recolectar automáticamente.
Cons: puede ser laboriosa para recolectar a mano, no cuenta mucho sobre la manera de pensar del usuario, sentimientos o apoyo al proceso creativo.
Información cuantitativa
![Page 60: Prototipos de Interfaces](https://reader035.vdocuments.net/reader035/viewer/2022062300/5571f88d49795991698da97d/html5/thumbnails/60.jpg)
Se usan casos reales para contruir historias
Anécdotas y algunos video clips sirven como el material para mostrar el material en forma de historia.
Tomar notas, buscar pautas que emergen del material, y agrupar.
Verificá tus resultados con el usuario.
Forma abierta, rica, convincente, orientada a los usuarios- Pero, no es exacta
Información cualitativa
![Page 61: Prototipos de Interfaces](https://reader035.vdocuments.net/reader035/viewer/2022062300/5571f88d49795991698da97d/html5/thumbnails/61.jpg)
Buscar pautas e incidentes: retrazos, errores, empantanamiento.
Hacer categorías
Muchos diseñadores analizan la misma información
Hacer categorias
![Page 62: Prototipos de Interfaces](https://reader035.vdocuments.net/reader035/viewer/2022062300/5571f88d49795991698da97d/html5/thumbnails/62.jpg)
Descripción de un problema o situación, quizás una foto de pantalla para mostrarlo.
Agrupar problemas
0-3 jerarquizarlos (comentario, superficial, adecuado, fatal)
Criterio de clasificación: parte del sistema, importante, tipo de problema.
Sugerencias para solucionarlos
Informes sobre un problema
![Page 63: Prototipos de Interfaces](https://reader035.vdocuments.net/reader035/viewer/2022062300/5571f88d49795991698da97d/html5/thumbnails/63.jpg)
HACER INFORMES DE RESULTADOS
![Page 64: Prototipos de Interfaces](https://reader035.vdocuments.net/reader035/viewer/2022062300/5571f88d49795991698da97d/html5/thumbnails/64.jpg)
Qué grabar? Al usuario, las manos, la pantalla de la computadora?
Documentar con video
![Page 65: Prototipos de Interfaces](https://reader035.vdocuments.net/reader035/viewer/2022062300/5571f88d49795991698da97d/html5/thumbnails/65.jpg)
Hacer prototipos produce mucha cantidad de data: videos/ audios, fotos, bocetos, diarios, notas, etc.
Qué hacemos con toda esta información?Analizar y documentar, aprender de lo recolectado
A quién estamos escribiendo? Las diferentes partes necesitan diferentes información y en diferente orden de precisión.
Quiénes son el target de esta información? Gerentes, diseñadores de software/interfaces, clientes y otros
Siempre ofrezcan un resumen donde se ven los resultados más importantes
Recuerden incluir en el informe también los descubrimientos positivos!
![Page 66: Prototipos de Interfaces](https://reader035.vdocuments.net/reader035/viewer/2022062300/5571f88d49795991698da97d/html5/thumbnails/66.jpg)
Lecturas
Buchenau, Marion and Fulton Suri, Jane (2000) Experience prototyping. DIS ´00, Brooklyn, New York
Hendry et al. (2005) Evaluating paper prototypes on the street. In Proceedings of CHI 2005.
Rettig, Mark (1994) Prototyping for tiny fingers. Communications of the ACM, April 1994/ Vol.37, No.4
![Page 67: Prototipos de Interfaces](https://reader035.vdocuments.net/reader035/viewer/2022062300/5571f88d49795991698da97d/html5/thumbnails/67.jpg)
Kiitos! Gracias!
Agradezco a Joanna Saad Sulonen con quien preparamos este material en el 2009 para el taller de prototipos de interfaces en el Media Lab Helsinki.
Mariana Salgado- [email protected]