Una forma de plantear el proceso de diseño, es en forma lineal: se toma un encargo, se lo ejecuta y se lo entrega. En ese modelo, la devolución del cliente o de los usuarios finales llega cuando el diseño ya está terminado, y ya no quedan tiempo, recursos o energía para seguir adelante. Mediante casos de ejemplo reales, se mostrará cómo incorporar a clientes y usuarios en un proceso de diseño convergente, en el cual se diseñan, comparten y ponen a prueba prototipos de niveles crecientes de detalle.

1. Santiago Bustelo
Director de diseño, Kambrica
IxDA Central and South America Regional Coordinator
Usabilidad e interacción en el diseño web
28 de junio, 2012
Prototipos en el
proceso de diseño
Presentación bajo licencia Creative Commons
Atribución 2.5 Argentina
http://creativecommons.org/licenses/by/2.5/ar
@sbustelo
M E M B E R

2. M E M B E R
Me presento…
• Santiago Bustelo, diseñador de interacción.
• Fundador y Director de Diseño, Kambrica.
• Fundador y Coordinador IxDA Buenos Aires y Coordinador
Regional de IxDA en Latinoamérica. Organizador de los
principales eventos de UX en Argentina desde 2010 y de
Interaction South America 2014.
• Desde 1997 he participado en proyectos de diseño y
desarrollo para Microsoft, Staples, Coca-Cola, HP,
TetraPak, MetLife, HSBC, Telefónica, Jumbo, Molinos,
Banco Santander, Bumeran.com, Guía Óleo y
Universidad de Stanford, entre otros.
• He dictado presentaciones y talleres sobre Usabilidad,
Diseño de Interacción y Experiencia de Usuario (UX)
desde el año 2001 en Argentina, Brasil, Colombia, EEUU,
Canadá, Irlanda y Holanda.

3. Prototipos en el proceso de diseño •M E M B E R
IxDA (Interaction Design Association)
• Organización abierta, voluntaria y gratuita, con la
misión de liberar a la condición humana de las malas
experiencias que la desafían, avanzando la disciplina de
Diseño de Interacción.
• Foro global, más de 76.000 miembros, 160 grupos
locales, 36 grupos en América Latina.
• En Argentina:
• Buenos Aires: ixda.com.ar
• Córdoba: ixdaCba.com.ar
• Corrientes / Resistencia:
facebook/IxdaCorrientesResistencia
• La Plata: ixdaLaPlata.com.ar
• Mar del Plata: @IxDAMDQ
• Mendoza: ixdaMza.com.ar
• Rosario: ixdaRosario.com.ar
• Tucumán: ixdaTucuman.com.ar
3
ixda.org

4. Prototipos en el proceso de diseño •M E M B E R
¿Cuándo está terminado el diseño de un
producto interactivo?
• Cuando nos gusta a nosotros
• Cuando funciona como queríamos
• Cuando le gusta al cliente
• Cuando el usuario logra lo que esperábamos
4

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

6. Prototipos en el proceso de diseño •M E M B E R
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 o lo que
el usuario necesita,
retrocede tres casilleros.
5. Se repite hasta el hartazgo de una
o ambas partes.
6

7. Prototipos en el proceso de diseño •M E M B E R
Problemas bien definidos
• Es posible definir estado inicial,
estado deseado, y camino más corto.
• Se aplican algoritmos: secuencias
estructuradas de pasos que
garantizan “la” solución.
• Metodología secuencial.
• Foco en análisis y documentación.
Problemas complejos
• El problema no es entendido hasta
no haberlo resuelto.
• Se trabajan de forma heurística, en
un proceso de prueba y error para
aproximarse a “una” solución.
• Metodología ágil.
• Foco en entregables.
Entender el tipo de problema
7

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

9. Prototipos en el proceso de diseño •M E M B E R
Prototipos
• Permiten evaluar una propuesta (hipótesis) con...
• nosotros mismos
• equipo de desarrollo
• cliente
• usuarios reales
• …de forma rápida y aplicando el esfuerzo
correcto.
9

10. Prototipos en el proceso de diseño •M E M B E R
Prototipos e Iteraciones en el proceso
10
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

11. Prototipos en el proceso de diseño •M E M B E R
Dimensiones que podemos explorar
con prototipos
11
Rol
Función que cumple el artefacto
en la vida del usuario
Look & feel
Experiencia sensorial del usuario
Implementación
Técnicas y componentes necesarios
para cumplir la función
Stephanie Houde & Charles Hill: What do Prototypes Prototype?

12. Prototipos en el proceso de diseño •M E M B E R
Explorando cada dimensión en paralelo
(aplicación para planificación 3D, 1992)
12
¿Qué pantallas hacen sentido
para elegir muebles y probar
cómo quedan?
¿Es práctico tener
“manijas” para manipular
objetos 3D?
¿Qué complejidad 3D
puede procesar la
computadora del usuario?
Rol Look & feel Implementación
Stephanie Houde & Charles Hill: What do Prototypes Prototype?

13. Prototipos en el proceso de diseño •M E M B E R
Prototipos para comunicación entre diseño,
desarrollo y cliente
13
Wireframe
Validación general
Desarrollo
Implementación de
funcionalidad
Diseño
Desarrollo de
lenguaje visual
Producto final
Alex Souza,
The Science Behind
Great User Interfaces

14. Prototipos en el proceso de diseño •M E M B E R
¿Cómo incorporamos al
usuario en el proceso de
diseño de interacción?
14

15. Prototipos en el proceso de diseño •M E M B E R
Incorporando usuarios reales
• Hasta que no testeamos, sólo
podemos tener hipótesis.
• Testear con 5 usuarios revela el 80%
de los problemas de usabilidad
presentes en el producto.
• Observación y análisis de operación
para resolver tareas solicitadas.
• Pruebas rápidas y de gran impacto
cualitativo.
• No se toman requerimientos del
usuario. Nos enfocamos en lo que
el usuario hace.
15
Usabilityproblemsfound
100%
75%
50%
25%
0%
0 3 6 9 12 15
Number of Test Users
Jakob Nielsen: Why You Only Need to Test with 5 Users

16. Prototipos en el proceso de diseño •M E M B E R
Prototipo en papel: aplicación web
16

17. Prototipos en el proceso de diseño •M E M B E R
Pruebas de usabilidad con prototipo en papel
17

18. Prototipos en el proceso de diseño •M E M B E R
Prototipo en papel: aplicación móvil
18

19. Prototipos en el proceso de diseño •M E M B E R
Pruebas de usabilidad con prototipo operable
19

20. Prototipos en el proceso de diseño •M E M B E R
Ejemplos
Prototipos en el proceso
de diseño y desarrollo
20

21. M E M B E R
Rediseño:
Carácter visual
1. Sitio original
2. Síntesis
3. Rediseño

22. M E M B E R
Rediseño:
Carácter visual
1. Sitio original
2. Síntesis
3. Rediseño

23. M E M B E R
Rediseño:
Carácter visual
1. Sitio original
2. Síntesis
3. Rediseño

24. Prototipos en el proceso de diseño •M E M B E R
Estructura: exploración de variables
24

25. Prototipos en el proceso de diseño •M E M B E R
Estructura: exploración de variables
25

26. Prototipos en el proceso de diseño •M E M B E R
Estructura: exploración de variables
26

27. Prototipos en el proceso de diseño •M E M B E R
Estructura: exploración de variables
27

28. M E M B E R
Arquitectura de
información
1. Exploración inicial
2. Wireframes
3. Diseño final

29. M E M B E R
Arquitectura de
información
1. Exploración inicial
2. Wireframes
3. Diseño final

30. M E M B E R
Arquitectura de
información
1. Exploración inicial
2. Wireframes
3. Diseño final

31. M E M B E R
Arquitectura de
información
1. Exploración inicial
2. Wireframes
3. Diseño final

32. Prototipos en el proceso de diseño •M E M B E R
Pruebas con usuarios
32

33. M E M B E R
Arquitectura de
información
1. Exploración inicial
2. Wireframes
3. Diseño final

34. M E M B E R
Mon 9thSun 8th Tue 10th Wed 11th Thu 12th Fri 13th Sat 14th
Welcome RS52
10 am
11 am
Noon
1 pm
2 pm
3 pm
4 pm
5 pm
6 pm
7 pm
8 pm
9 pm
Inbox
New messages 30
Mew 30
Mew 30
My Scores
Mew 30
Mew 30
5 news invitation
Office New Event :
repeat: every day
4pm -7pm
office
4pm -7pm
home
From .....hrs to ......hrs
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
Asks for a match on Tue 10th
Susan86 open invitation
M855
open invitation
Mary36 open invitation
√
√
Asks for a match on Tue 10th
Asks for a match on Tue 10th
Officemale female bothSearch available players
43 players found. Choose one or post an open invitation for this criteria.
Near
New York, NY / NTRP Level : 5.5 / 1 Mile from Office
New York, NY / NTRP Level : 5.5 / 5 Miles from Office
New York, NY / NTRP Level : 5.5 / 30 Miles from Office
Modelo de
operación
1. Primer wireframe
2. Segundo wireframe
3. Versión final

35. M E M B E R
Modelo de
operación
1. Primer wireframe
2. Segundo wireframe
3. Versión final

36. M E M B E R
Modelo de
operación
1. Primer wireframe
2. Segundo wireframe
3. Versión final

37. M E M B E R
Modelo de
operación
1. Primer wireframe
2. Segundo wireframe
3. Versión final

38. M E M B E R
Modelo de
operación
1. Primer wireframe
2. Segundo wireframe
3. Versión final

39. Prototipos en el proceso de diseño •M E M B E R
Modelo de operación: Primer propuesta
39

40. Prototipos en el proceso de diseño •M E M B E R
Modelo de operación: Primer propuesta
40

41. Prototipos en el proceso de diseño •M E M B E R
Modelo de operación: Replanteo
41

42. Prototipos en el proceso de diseño •M E M B E R
Modelo de operación: Prueba de concepto
42

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

44. Prototipos en el proceso de diseño •M E M B E R
44
Modelo de operación: Versión final

45. ¡Muchas gracias!
Prototipos en el proceso de diseño
Usabilidad e interacción en el diseño web
M E M B E R

46. w w w . k a m b r i c a . c o m