7. prototipos básicos (intro hci)

7 Prototipos Básicos

11/01/102

Contenido

Repaso Prototipos básicos (low fidelity) Técnica del Mago de Oz Interfaces informales de usuario Diagramas de UI de forma electrónica Resumen Tarea 6

11/01/103

Modelo Humano Procesardor (MHP)

Desarrollado por Card, Moran, y Newell (‘83)

Memoria de largo plazo

Memoria de trabajoAlmacenamiento memoria visual

Almacenamiento memoria auditiva

Procesadorperceptual

Procesadorcognoscitivo

Procesadormotor

Ojos

Oídos

Dedos

Búfers sensores(Dix)

11/01/104

Porqué desarrollar prototipos?

Obtener retroalimentación del diseño Ahorra tiempo, dinero y esfuerzo

Permite experimentar con diseños Corrige problemas antes que se codifique Mantiene el diseño centrado al usuario

11/01/105

Fidelidad en prototipos

La fidelidad se refiere al nivel de detalle Alta fidelidad

Prototipos que se parecen al producto final

Baja fidelidad Representación inicial sin detalles del

producto

11/01/106

Sketches de baja fidelidad

11/01/107

Storyboards de baja fidelidad

De dónde vienen los storyboards? Cine y animación (CG o dibujos)

Nos proporciona un script de eventos No se fija en detalles Se concentra en interacciones importantes

11/01/109

Porqué utilizar estos prototipos?

Métodos tradicionales toman mucho tiempo sketches -> prototipos -> evaluar -> iteraciones

Podemos simular en el prototipo sketches -> evaluar -> iteraciones Los sketches sirven como prototipos

El diseñador “le hace de computadora” Otros miembros observan y graban

Habilidades de kinder necesarias Permite participar a todos

11/01/1010

Materiales básicos

Hoja de cartulina negra, dura (11 x 17) Tarjetas de 5x8 in. Diurex, pegamento, corrector blanco Plumas y marcadores (tamaños y puntos) Acetatos transparentes Tijeras, cutters, etc Algo más? (Post It, lápiz y papel, etc)

11/01/1012

Construcción del modelo

Fije una fecha límite No ocupe más tiempo de lo debido

Dibuje una ventana en una hoja grande Dibuje diversas regiones en las tarjetas

Todo lo que se mueva, cambie, aparezca, desaparezca

Prepare respuestas para cualquier acción Menús, pull down, etc

Fotocopie el modelo para tener versiones

11/01/1013

Preparando para pruebas

Seleccione a sus usuarios Conocer el background de los usuarios Utilice un cuestionario para obtener ayuda No use a amigos o familiares

Preparar escenarios que sean: Típicos del uso normal del producto Construir prototipos que soporten aquellos

Practicar para evitar errores

11/01/1014

Realizando las pruebas

Cuatro usuarios para probar (mínimo) Miembros del equipo:

1. Recepción (pone al usuario en confianza y obtiene datos del usuario de prueba)

2. Facilitador (único miembro que habla durante las pruebas) Da instrucciones y pide que compartan opiniones

o ideas

11/01/1015

Cont.

1. Computadora (miembro del equipo que sabe y conoce la lógica de los movimientos) Simula respuesta o interacción

2. Observadores (toman notas y hacen recomendaciones)

Todo toma una hora, aproximadamente Preparación, pruebas, análisis posterior

11/01/1016

Desarrollo de la prueba

Saludar Obtener datos del usuario, tranquilizar, asegurar

confidencialidad, etc Prueba

El conductor pasa tareas escritas al usuario Deben ser claras y bien detalladas

El conductor debe obtener retroalimentación del usuario participante

“en qué está pensando?”, “puede pensar en voz alta?” Observe, no asienta, burle, haga gestos, etc.

11/01/1017

Cont.

Análisis posterior Llene el cuestionario de evaluación posterior Pregunte a los otros miembros si observaron

problemas, comparta opiniones Reuna impresiones Dé las gracias

11/01/1018

Evalúe los resultados

Ordene por prioridad las observaciones Qué fue importante? Muchos problemas en la misma área?

Desarrolle un reporte de lo encontrado Permite hacer una agenda para cambios

Haga cambios e iteraciones

11/01/1019

Ventajas de prototipos de baja fidelidad

Toma unas pocas horas No requiere equipo muy caro

Puede probar múltiples alternativas Iteraciones rápidas

Número de iteraciones está relacionada con la calidad final

Casi toda interacción puede ser simulada

11/01/1020

El Mago de Oz

11/01/1021

Técnica del Mago de Oz

Simular la interacción De la película “The Wizard of Oz”

“el hombre detrás de la cortina”

Ampliamente utilizado en la industria Prototipos con una PC y una VAX detrás de la cortina

Mucho más importante para opciones muy difíciles de implementar Eg. reconocimiento de escritura y de lenguaje

11/01/1022

Técnica del Mago de Oz

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

11/01/1023

Uso de DENIM

Permite a los diseñadores Hacer scketches rápidos de ideas de

interfaces Probar estas ideas con usuarios Transformar a un diseño más terminado, sin

programar http://dub.washington.edu/projects/denim/

11/01/1024

Qué es SILK?

Sketching Interfaces Like Krazy Precursor de DENIM

11/01/1025

Desarrollo de interfaces con DENIM

1 El diseñador hace un sketch de sus ideas rápidamente con un pad y pluma electrónica DENIM reconoce el patrón Fácil de editar con “gestos” (mov de la pluma)

2 El diseñador o usuario, prueban la interface La interface responde a la interacción Agrega funcionalidad visualmente

3 El diseño se transforma en una interface automáticamente

11/01/1026

Ejemplo de SILK

11/01/1027

Agregar funcionalidad…

11/01/1028

Transformarlo en…

11/01/1029

Demo de DEMIM

http://dub.washington.edu/projects/denim/denim_daily_files/page149.html

11/01/1030

Desventajas de herramientas

Requiere especificación con mucho detalle Detalles de la idea general

Eg. Distribución, tipo de letras, colores, alineación, etc

Se pierde la idea por los detalles Los evaluadores se fijan en detalles no importantes

Toma mucho tiempo usarlos Aunque da soporte a desarrollo iterativo

Toma cinco veces más que hecho a mano

11/01/1031

Sketches en papel

Ventajas Permite la lluvia de ideas No requiere de especificación de detalles Es más abierto y libre

Desventajas No se desarrollan fácilmente Se necesita una transferencia manual a un formato

electrónico No muestra, del todo, interacción con un usuario real

11/01/1032

Video

11/01/1033

Utilizando SILK (DENIM)

Crear un storyboard a partir de sketches Pueden mostrar “funcionalidad”

antes después

Mostrar secuencia entre sketches

11/01/1034

Storyboards con SILK

Copiar sketches en papel a SILK Dibujar flechas a otras ventanas

Cambiar a modo “correr modelo” SILK cambia pantallas con un click

11/01/1036

Resumen

El desarrollo de prototipos tiene muchas ventajas

Existen prototipos de baja y alta fidelidad Los prototipos en papel tienen ventajas, como

libertad, facilidad En cambio, las herramientas tienen la

posibilidad de convertir sketches a storyboards y a interfaces reales, sin programar

11/01/1037

Tarea 6

WOZ a iPod (eg nano, shuffle, touch, classic)

Se deberá desarrollar una prueba del Mago de Oz para el iPod de Apple

www.apple.com/ipod/

Se deberá realizar una demostración en el salón de clases

Fecha de exposición: (POR DEFINIR), hora de clase