1. Prototipos en el proceso
de diseño de interacción
Prototipos y diseño centrado en el usuario
Presentación bajo licencia Creative Commons
Atribución 2.5 Argentina
MEMBER
http://creativecommons.org/licenses/by/2.5/ar

2. ¿Cuándo está terminado nuestro trabajo?
• Cuando nos gusta a nosotros
• Cuando funciona como queríamos
• Cuando le gusta al cliente
• Cuando el usuario logra lo que esperábamos
Prototipos en el proceso de diseño de interacción • 2

3. Proceso lineal
1. Definición de requerimientos.
2. Diseño y desarrollo a nivel de producción.
3. Entrega.
Prototipos en el proceso de diseño de interacción • 3

4. Proceso lineal interminable
1. Definición de requerimientos.
2. Diseño y desarrollo a nivel de producción.
3. Entrega.
4. No es lo que el cliente quería,
retrocede tres casilleros.
5. Se repite hasta el hartazgo de una
o ambas partes.
Prototipos en el proceso de diseño de interacción • 4

5. Proceso convergente
1. Objetivos y análisis inicial.
2. Diseño y desarrollo en iteraciones
avanzando progresivamente en:
• Funcionalidad
• Estructura y elementos
• Lenguaje visual
3. Entrega y puesta en producción.
Prototipos en el proceso de diseño de interacción • 5

6. Iteraciones en el proceso convergente
1. Planeamiento de la iteración
• Definición del problema. Qué queremos aprender
de esta iteración y cómo vamos a hacerlo.
2. Implementación
• Creación del prototipo con la fidelidad correcta
3. Prueba
• Obtenemos información que valida o descarta la
solución.
4. Conclusiones y aprendizaje
• Qué funcionó o no, y por qué.
Jared Spool, Anatomy of an Iteration
Prototipos en el proceso de diseño de interacción • 6

7. Bocetos, propuestas, prototipos
• Permiten evaluar una hipótesis con...
• nosotros mismos
• equipo de desarrollo
• cliente
• usuario
Prototipos en el proceso de diseño de interacción • 7

8. Exploración de variables en una etapa
• Contrastar hipótesis contra alternativas
• Descubrir oportunidades
• Agotar etapa
Prototipos en el proceso de diseño de interacción • 8

9. Diseño y desarrollo sobre prototipo aprobado
Wireframe
Desarrollo Diseño
Resultado
Alex Souza,
The Science Behind
Great User Interfaces
Prototipos en el proceso de diseño de interacción • 9

10. ¿Cómo incorporamos al
usuario en el proceso de
diseño de interacción?
Prototipos en el proceso de diseño de interacción • 10

11. ¿Cómo incorporamos al usuario?
• Preguntar y observar sin condicionar.
• Tomar con cuidado las hipótesis del usuario.
• Buscamos validar o refutar una hipótesis de diseño,
y obtener material para nuevas hipótesis:
• modelo mental del usuario
• operabilidad percibida (affordance) de la interfaz
• proceso de decisión del usuario
Prototipos en el proceso de diseño de interacción • 11

12. ¿Qué es un usuario?
• No está viciado por ejercicio de la profesión ni por nuestro
proceso de conceptualización.
• Tiene o puede representar intención de usar la interfaz para
lograr un objetivo.
• Tiene o puede representar el modelo mental del público
al que está destinada la interfaz.
• No necesita ser una muestra demográfica.
Prototipos en el proceso de diseño de interacción • 12

13. Incorporando al usuario
• La prueba con usuarios no tiene que ser perfecta.
Tiene que existir.
• La diferencia entre probar nuestras hipótesis con cero
usuarios, vs. hacerlo con un solo usuario, es infinita.
• En caso de poder incorporar muchos usuarios al proceso,
un buen número es 3 por iteración.
• Pruebas de costo muy bajo, o nulo.
Prototipos en el proceso de diseño de interacción • 13

14. Ejemplos
Prototipos en el proceso
de diseño y desarrollo
Prototipos en el proceso de diseño de interacción • 14

15. Rediseño:
Carácter visual
1. Sitio original
2. Síntesis
3. Rediseño
Prototipos en el proceso de diseño de
15
interacción •

16. Rediseño:
Carácter visual
1. Sitio original
2. Síntesis
3. Rediseño
Prototipos en el proceso de diseño de
16
interacción •

17. Rediseño:
Carácter visual
1. Sitio original
2. Síntesis
3. Rediseño
Prototipos en el proceso de diseño de
17
interacción •

18. Estructura: exploración de variables
Prototipos en el proceso de diseño de interacción • 18

19. Estructura: exploración de variables
Prototipos en el proceso de diseño de interacción • 19

20. Estructura: exploración de variables
Prototipos en el proceso de diseño de interacción • 20

21. Estructura: exploración de variables
Prototipos en el proceso de diseño de interacción • 21

22. Welcome RS52 5 news invitation
Inbox
Sun 8th Mon 9th Tue 10th Wed 11th Thu 12th Fri 13th Sat 14th
10 am
New messages 30
11 am
Modelo de Mew
Mew
30
30
Noon
1 pm
Office New Event :
From .....hrs to ......hrs
repeat: every day
operación
2 pm
3 pm 4pm -7pm
home
My Scores 4 pm 4pm -7pm
office
1. Primer wireframe
Mew 30
5 pm
6 pm
2. Segundo wireframe
Mew 30
7 pm
8 pm
3. Versión final 9 pm
Search available players male female both Near Office
43 players found. Choose one or post an open invitation for this criteria.
open invitation
Susan86
!
New York, NY / NTRP Level : 5.5 / 1 Mile from Office
Asks for a match on Tue 10th
open invitation
M855
! New York, NY / NTRP Level : 5.5 / 5 Miles from Office
Asks for a match on Tue 10th
open invitation
Mary36
Prototipos en el proceso de diseño de
New York, NY / NTRP Level : 5.5 / 30 Miles from Office
22
Asks for a match on Tue 10th interacción •
Looking to start playing again. Hi folks. I used to play with a friend twice a week but
he moved and I haven't picked up a racket in a few months. Looking to start playing
again, can travel anywhere in TO. Would prefer to play with some where in the 20s
30s who is intermediately skilled. Cheers!.

23. Modelo de
operación
1. Primer wireframe
2. Segundo wireframe
3. Versión final
Prototipos en el proceso de diseño de
23
interacción •

24. Modelo de
operación
1. Primer wireframe
2. Segundo wireframe
3. Versión final
Prototipos en el proceso de diseño de
24
interacción •

25. Modelo de
operación
1. Primer wireframe
2. Segundo wireframe
3. Versión final
Prototipos en el proceso de diseño de
25
interacción •

26. Modelo de
operación
1. Primer wireframe
2. Segundo wireframe
3. Versión final
Prototipos en el proceso de diseño de
26
interacción •

27. Modelo de operación: Primer propuesta
Prototipos en el proceso de diseño de interacción • 27

28. Modelo de operación: Primer propuesta
Prototipos en el proceso de diseño de interacción • 28

29. Modelo de operación: Replanteo
Prototipos en el proceso de diseño de interacción • 29

30. Modelo de operación: Prueba de concepto
Prototipos en el proceso de diseño de interacción • 30

31. Buscar peliculas o clientes
Películas Clientes
La Rosa Púrpura del Cairo (1985)
La Rosa Púrpura del Cairo The Purple Rose of Cairo Santiago Bustelo 32 años
Woody Allen 4123-4567
Actores Mia Farrow
La Rosa Púrpura del Cairo Jeff Daniels Diego González 32 años
Woody Allen Danny Aiello 4123-4567
Irving Metzman
La Rosa Púrpura del Cairo Stephanie Farrow Santiago Bustelo 32 años
Woody Allen Director Woody Allen 4123-4567
La Rosa Púrpura del Cairo Géneros Sátira, Comedia, Woody Allen Diego González 32 años
Woody Allen Duración 1 hora 22 minutos 4123-4567
Relacionadas Reservar
78079 78079 78079 78079 78079
78079 78079 78079 78079
78079 78079 78079 78079
+ Activar Cliente
Alquiler: 3 películas
Diego González 32 años
reservada
4123-4567
Juan de los Palotes 1638
Deuda $67
La Rosa Púrpura La Rosa Púrpura La Rosa Púrpura
El ciudadano
del Cairo del Cairo del Cairo
#78909 #78909 Eterno resplandor de una mente...
+ Alquilar a Diego González Yo sé que tu sabes que yo sé
Modelo de operación: Mockups
Prototipos en el proceso de diseño de interacción • 31

32. Modelo de operación: Versión final
Prototipos en el proceso de diseño de interacción • 32

33. ¡Muchas gracias!
Santiago Bustelo • icograma.com
MEMBER