Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

7. Prototipos Básicos (Intro HCI)

3,642 views

Published on

Published in: Education
  • Be the first to comment

7. Prototipos Básicos (Intro HCI)

  1. 1. 7 Prototipos Básicos
  2. 2. Contenido <ul><li>Repaso </li></ul><ul><li>Prototipos básicos ( low fidelity ) </li></ul><ul><li>Técnica del Mago de Oz </li></ul><ul><li>Interfaces informales de usuario </li></ul><ul><li>Diagramas de UI de forma electrónica </li></ul><ul><li>Resumen </li></ul><ul><li>Tarea 6 </li></ul>
  3. 3. Modelo Humano Procesardor (MHP) <ul><li>Desarrollado por Card, Moran, y Newell (‘83) </li></ul>Memoria de largo plazo Memoria de trabajo Almacenamiento memoria visual Almacenamiento memoria auditiva Procesador perceptual Procesador cognoscitivo Procesador motor Ojos Oídos Dedos Búfers sensores (Dix)
  4. 4. Porqué desarrollar prototipos? <ul><li>Obtener retroalimentación del diseño </li></ul><ul><ul><li>Ahorra tiempo, dinero y esfuerzo </li></ul></ul><ul><li>Permite experimentar con diseños </li></ul><ul><li>Corrige problemas antes que se codifique </li></ul><ul><li>Mantiene el diseño centrado al usuario </li></ul>
  5. 5. Fidelidad en prototipos <ul><li>La fidelidad se refiere al nivel de detalle </li></ul><ul><li>Alta fidelidad </li></ul><ul><ul><li>Prototipos que se parecen al producto final </li></ul></ul><ul><li>Baja fidelidad </li></ul><ul><ul><li>Representación inicial sin detalles del producto </li></ul></ul>
  6. 6. Sketches de baja fidelidad
  7. 7. Storyboards de baja fidelidad <ul><li>De dónde vienen los storyboards? </li></ul><ul><ul><li>Cine y animación (CG o dibujos) </li></ul></ul><ul><li>Nos proporciona un script de eventos </li></ul><ul><ul><li>No se fija en detalles </li></ul></ul><ul><ul><li>Se concentra en interacciones importantes </li></ul></ul>
  8. 9. Porqué utilizar estos prototipos? <ul><li>Métodos tradicionales toman mucho tiempo </li></ul><ul><ul><li>sketches -> prototipos -> evaluar -> iteraciones </li></ul></ul><ul><li>Podemos simular en el prototipo </li></ul><ul><ul><li>sketches -> evaluar -> iteraciones </li></ul></ul><ul><ul><li>Los sketches sirven como prototipos </li></ul></ul><ul><ul><ul><li>El diseñador “le hace de computadora” </li></ul></ul></ul><ul><ul><ul><li>Otros miembros observan y graban </li></ul></ul></ul><ul><li>Habilidades de kinder necesarias </li></ul><ul><ul><li>Permite participar a todos </li></ul></ul>
  9. 10. Materiales básicos <ul><li>Hoja de cartulina negra, dura (11 x 17) </li></ul><ul><li>Tarjetas de 5x8 in. </li></ul><ul><li>Diurex, pegamento, corrector blanco </li></ul><ul><li>Plumas y marcadores (tamaños y puntos) </li></ul><ul><li>Acetatos transparentes </li></ul><ul><li>Tijeras, cutters, etc </li></ul><ul><li>Algo más? (Post It, lápiz y papel, etc) </li></ul>
  10. 12. Construcción del modelo <ul><li>Fije una fecha límite </li></ul><ul><ul><li>No ocupe más tiempo de lo debido </li></ul></ul><ul><li>Dibuje una ventana en una hoja grande </li></ul><ul><li>Dibuje diversas regiones en las tarjetas </li></ul><ul><ul><li>Todo lo que se mueva, cambie, aparezca, desaparezca </li></ul></ul><ul><li>Prepare respuestas para cualquier acción </li></ul><ul><ul><li>Menús, pull down, etc </li></ul></ul><ul><li>Fotocopie el modelo para tener versiones </li></ul>
  11. 13. Preparando para pruebas <ul><li>Seleccione a sus usuarios </li></ul><ul><ul><li>Conocer el background de los usuarios </li></ul></ul><ul><ul><li>Utilice un cuestionario para obtener ayuda </li></ul></ul><ul><ul><li>No use a amigos o familiares </li></ul></ul><ul><li>Preparar escenarios que sean: </li></ul><ul><ul><li>Típicos del uso normal del producto </li></ul></ul><ul><ul><li>Construir prototipos que soporten aquellos </li></ul></ul><ul><li>Practicar para evitar errores </li></ul>
  12. 14. Realizando las pruebas <ul><li>Cuatro usuarios para probar (mínimo) </li></ul><ul><li>Miembros del equipo: </li></ul><ul><ul><li>Recepción (pone al usuario en confianza y obtiene datos del usuario de prueba) </li></ul></ul><ul><ul><li>Facilitador (único miembro que habla durante las pruebas) </li></ul></ul><ul><ul><ul><li>Da instrucciones y pide que compartan opiniones o ideas </li></ul></ul></ul>
  13. 15. Cont. <ul><ul><li>Computadora (miembro del equipo que sabe y conoce la lógica de los movimientos) </li></ul></ul><ul><ul><ul><li>Simula respuesta o interacción </li></ul></ul></ul><ul><ul><li>Observadores (toman notas y hacen recomendaciones) </li></ul></ul><ul><li>Todo toma una hora, aproximadamente </li></ul><ul><ul><li>Preparación, pruebas, análisis posterior </li></ul></ul>
  14. 16. Desarrollo de la prueba <ul><li>Saludar </li></ul><ul><ul><li>Obtener datos del usuario, tranquilizar, asegurar confidencialidad, etc </li></ul></ul><ul><li>Prueba </li></ul><ul><ul><li>El conductor pasa tareas escritas al usuario </li></ul></ul><ul><ul><ul><li>Deben ser claras y bien detalladas </li></ul></ul></ul><ul><ul><li>El conductor debe obtener retroalimentación del usuario participante </li></ul></ul><ul><ul><ul><li>“ en qué está pensando?”, “puede pensar en voz alta?” </li></ul></ul></ul><ul><ul><li>Observe, no asienta, burle, haga gestos, etc. </li></ul></ul>
  15. 17. Cont. <ul><li>Análisis posterior </li></ul><ul><ul><li>Llene el cuestionario de evaluación posterior </li></ul></ul><ul><ul><li>Pregunte a los otros miembros si observaron problemas, comparta opiniones </li></ul></ul><ul><ul><li>Reuna impresiones </li></ul></ul><ul><ul><li>D é las gracias </li></ul></ul>
  16. 18. Evalúe los resultados <ul><li>Ordene por prioridad las observaciones </li></ul><ul><ul><li>Qué fue importante? </li></ul></ul><ul><ul><li>Muchos problemas en la misma área? </li></ul></ul><ul><li>Desarrolle un reporte de lo encontrado </li></ul><ul><ul><li>Permite hacer una agenda para cambios </li></ul></ul><ul><li>Haga cambios e iteraciones </li></ul>
  17. 19. Ventajas de prototipos de baja fidelidad <ul><li>Toma unas pocas horas </li></ul><ul><ul><li>No requiere equipo muy caro </li></ul></ul><ul><li>Puede probar múltiples alternativas </li></ul><ul><ul><li>Iteraciones rápidas </li></ul></ul><ul><ul><ul><li>Número de iteraciones está relacionada con la calidad final </li></ul></ul></ul><ul><li>Casi toda interacción puede ser simulada </li></ul>
  18. 20. El Mago de Oz
  19. 21. Técnica del Mago de Oz <ul><li>Simular la interacción </li></ul><ul><ul><li>De la película “The Wizard of Oz” </li></ul></ul><ul><ul><ul><li>“ el hombre detrás de la cortina” </li></ul></ul></ul><ul><li>Ampliamente utilizado en la industria </li></ul><ul><ul><li>Prototipos con una PC y una VAX detrás de la cortina </li></ul></ul><ul><li>Mucho más importante para opciones muy difíciles de implementar </li></ul><ul><ul><li>Eg. reconocimiento de escritura y de lenguaje </li></ul></ul>
  20. 22. Técnica del Mago de Oz <ul><li>Donde un usuario interactúa con lo que parece ser una computadora, pero realmente es una simulación, ya sea por un humano (Mago) o un humano y una computadora </li></ul>
  21. 23. Uso de DENIM <ul><li>Permite a los diseñadores </li></ul><ul><ul><li>Hacer scketches rápidos de ideas de interfaces </li></ul></ul><ul><ul><li>Probar estas ideas con usuarios </li></ul></ul><ul><ul><li>Transformar a un diseño más terminado, sin programar </li></ul></ul><ul><ul><li>http://dub.washington.edu/projects/denim/ </li></ul></ul>
  22. 24. Qué es SILK? <ul><li>S ketching I nterfaces L ike K razy </li></ul><ul><li>Precursor de DENIM </li></ul>
  23. 25. Desarrollo de interfaces con DENIM <ul><li>El diseñador hace un sketch de sus ideas rápidamente con un pad y pluma electrónica </li></ul><ul><ul><li>DENIM reconoce el patrón </li></ul></ul><ul><ul><li>Fácil de editar con “gestos” (mov de la pluma) </li></ul></ul><ul><li>El diseñador o usuario, prueban la interface </li></ul><ul><ul><li>La interface responde a la interacción </li></ul></ul><ul><ul><li>Agrega funcionalidad visualmente </li></ul></ul><ul><li>El diseño se transforma en una interface automáticamente </li></ul>
  24. 26. Ejemplo de SILK
  25. 27. Agregar funcionalidad…
  26. 28. Transformarlo en…
  27. 29. Demo de DEMIM http://dub.washington.edu/projects/denim/denim_daily_files/page149.html
  28. 30. Desventajas de herramientas <ul><li>Requiere especificación con mucho detalle </li></ul><ul><ul><li>Detalles de la idea general </li></ul></ul><ul><ul><ul><li>Eg. Distribución, tipo de letras, colores, alineación, etc </li></ul></ul></ul><ul><ul><li>Se pierde la idea por los detalles </li></ul></ul><ul><ul><li>Los evaluadores se fijan en detalles no importantes </li></ul></ul><ul><li>Toma mucho tiempo usarlos </li></ul><ul><ul><li>Aunque da soporte a desarrollo iterativo </li></ul></ul><ul><ul><ul><li>Toma cinco veces más que hecho a mano </li></ul></ul></ul>
  29. 31. Sketches en papel <ul><li>Ventajas </li></ul><ul><ul><li>Permite la lluvia de ideas </li></ul></ul><ul><ul><li>No requiere de especificación de detalles </li></ul></ul><ul><ul><li>Es más abierto y libre </li></ul></ul><ul><li>Desventajas </li></ul><ul><ul><li>No se desarrollan fácilmente </li></ul></ul><ul><ul><li>Se necesita una transferencia manual a un formato electrónico </li></ul></ul><ul><ul><li>No muestra, del todo, interacción con un usuario real </li></ul></ul>
  30. 32. Video
  31. 33. Utilizando SILK (DENIM) <ul><li>Crear un storyboard a partir de sketches </li></ul><ul><li>Pueden mostrar “funcionalidad” </li></ul><ul><li>Mostrar secuencia entre sketches </li></ul>antes después
  32. 34. Storyboards con SILK <ul><li>Copiar sketches en papel a SILK </li></ul><ul><li>Dibujar flechas a otras ventanas </li></ul><ul><li>Cambiar a modo “correr modelo” </li></ul><ul><ul><li>SILK cambia pantallas con un click </li></ul></ul>
  33. 36. Resumen <ul><li>El desarrollo de prototipos tiene muchas ventajas </li></ul><ul><li>Existen prototipos de baja y alta fidelidad </li></ul><ul><li>Los prototipos en papel tienen ventajas, como libertad, facilidad </li></ul><ul><li>En cambio, las herramientas tienen la posibilidad de convertir sketches a storyboards y a interfaces reales, sin programar </li></ul>
  34. 37. Tarea 6 <ul><li>WOZ a iPod (eg nano, shuffle, touch, classic) </li></ul><ul><li>Se deberá desarrollar una prueba del Mago de Oz para el iPod de Apple </li></ul><ul><li>www.apple.com/ipod/ </li></ul><ul><li>Se deberá realizar una demostración en el salón de clases </li></ul><ul><li>Fecha de exposición: (POR DEFINIR) , hora de clase </li></ul>

×