7. Prototipos Básicos (Intro HCI)

2,938 views
2,763 views

Published on

Published in: Education
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,938
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
54
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide
  • Widgets behave: e.g., the “elevator” of the sketched scrollbar can be dragged up & down. The designer may need to specify additional behavior to illustrate the sequencing between widgets. Transformation requires some guidance to finalize details of the UI (e.g., textual labels, colors) At this point, programmers can add callbacks and constraints that include the application-specific code to complete the application.
  • Quickly sketch a design idea Work on overall layout and structure (NOT look) Iterate on the design rapidly with design team
  • This is NOT just a sketching program. We also want behavior!
  • and after several iterations.... There aren’t many successful examples of supporting these early stages of UI design. Need to keep the fluidity of paper and still unleash the power of the computer. It is a hard problem and something like this has never been done before!!
  • 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>

    ×