1.
PROTOTIPOS Y
WIREFRAMES EN EL
DISEÑO DE INTERACCIÓN
Manuel Razzari, José Allona
2014 – Primera Jornada Abierta de UXD, Escuela Superior Técnica
2009 – Seminario de IxDA Buenos Aires, Microsoft Argentina

2.
SUMARIO
¿Qué es un prototipo?
¿Por qué prototipar?
Competencias. ¿Qué necesito?
Tipos de prototipo, aplicaciones, y ejemplos
Elección del prototipo adecuado
Cómo encarar la hoja en blanco
Consejos y errores comunes.

3.
¿QUÉ ES UN PROTOTIPO?

4.
El prototipo es una herramienta que le permite
a los diseñadores explorar, comunicar y
evaluar sus ideas.

5.
IDEACIÓN (EXPLORACIÓN)
El prototipado es un proceso iterativo que
externaliza las ideas del diseñador y le permite
explorar y reflexionar sobre ellas.

6.
El prototipo es un medio para que el diseñador
dialogue sobre sus ideas.
COMUNICACIÓN

7.
El prototipo es la representación de una idea que
puede ser puesta a prueba en un contexto.
EVALUACIÓN

8.
IDEACIÓN VS EVALUACIÓN
El prototipo no para probar una solución sino
para descubrir problemas, o para explorar nuevas
direcciones.

9.
IDEACIÓN
“Externalizar las ideas para que el mundo
pueda contestarnos”
Bill Buxton, Sketching the user experience http://amzn.com/0123740371

10.
ITERACIÓN
http://www.uie.com/articles/anatomy_iteration/

11.
ITERACIÓN
Bill Buxton, Sketching the user experience http://amzn.com/0123740371

12.
ITERACIÓN
Bill Buxton, Sketching the user experience http://amzn.com/0123740371

13.
¿DE QUÉ ESTÁ HECHO
UN PROTOTIPO?

14.
Youn-Kyung Lim
Creative Interaction Design Lab
Youn-Kyng Lim, Anatomy of prototypes, ACM TOCHI, http://goo.gl/igcGEj

15.
“Prototipar es una actividad para crear una
manifestación que, en su forma más simple, filtre
los atributos en que los diseñadores están interesados,
sin distorsionar el entendimiento del todo.”

16.
PROTOTIPO COMO
MANIFESTACIÓN
Material
Alcance
Fidelidad

17.
MATERIAL

18.
ALCANCE

19.
FIDELIDAD

20.
PROTOTIPO COMO FILTRO
Apariencia
Información
Interacción
Estructura espacial
Funcionalidad

21.
APARIENCIA

22.
INFORMACIÓN

23.
INTERACCIÓN

24.
ESTRUCTURA ESPACIAL

25.
FUNCIONALIDAD

26.
PRINCIPIO DE ECONOMÍA
“El mejor prototipo es el que de forma más
sencilla y eficiente hace visibles y medibles las
posibilidades de una idea.”

27.
TIPOS DE PROTOTIPO
En papel
Wireframe (baja y alta fidelidad)
Diseño visual
Prueba de concepto
Pilotos
Simulaciones

28.
PROTOTIPO EN PAPEL
Muestro la estructura
espacial, la funcionalidad,
la interactividad.
La fidelidad está muy
lejos del producto final, y
esto lo hace muy atractivo
para opinar, para
coolaborar, para probar
rápidamente conceptos
generales.
MATERIAL: PAPEL
ALCANCE: APARIENCIA INFORMACION ESTRUCTURA
ESPACIAL
INTERACCION FUNCIONALIDAD

29.
WIREFRAME DE BAJA
FIDELIDAD
Qué muestro: estructura
espacial, a grandes rasgos
cuál es el contenido
Cómo lo muestro: en este
caso una sola pantalla, con
poco detalle, para empezar
a ver de qué estamos
hablando.
MATERIAL: VISIO
ALCANCE: APARIENCIA INFORMACION ESTRUCTURA
ESPACIAL
INTERACCION FUNCIONALIDAD

30.
WIREFRAME DE ALTA
FIDELIDAD
Muestro información,
estructura, funcionalidad,
y un poco de
interactividad.
Todo esto me cambia el
cómo lo muestro: es una
pantalla con alto nivel de
detalle.
MATERIAL: VISIO
ALCANCE: APARIENCIA INFORMACION ESTRUCTURA
ESPACIAL
INTERACCION FUNCIONALIDAD

31.
ESCENARIO
MATERIAL: PHOTOSHOP
ALCANCE: APARIENCIA INFORMACION ESTRUCTURA
ESPACIAL
INTERACCION FUNCIONALIDAD

32.
REFERENCIA DE ESTILO
El lado B del wireframe.
Foco total en el diseño
visual. El resto puede ser
simulado.
Mediante colores,
tipografías y elementos de
interfaz, define la dirección
de la identidad visual.
MATERIAL: PHOTOSHOP
ALCANCE: APARIENCIA INFORMACION ESTRUCTURA
ESPACIAL
INTERACCION FUNCIONALIDAD
http://styletil.es/

33.
DISEÑO VISUAL
Ya tenemos altísima
fidelidad en la apariencia,
se refinan temas que ya se
vieron antes en el proceso,
de estrucutra espacial,
feedback visual de la
interacción. Pero el foco es
en lo visual.
MATERIAL: PHOTOSHOP
ALCANCE: APARIENCIA INFORMACION ESTRUCTURA
ESPACIAL
INTERACCION FUNCIONALIDAD

34.
COMPETENCIAS
Conocer las reglas y
convenciones del
medio para el que
trabajo.
La capacidad de
implementar los
atributos que nos
interesa explorar.

35.
CONSEJOS

36.
EMPEZAR EN PAPEL
Se puede cambiar rápidamente.
Se puede criticar, porque no parece final.
Se presta a jugar, a explorar.
Sugiere, propone, cuestiona.
Menos distancia entre la idea y la representación.

37.
EMPEZAR EN PAPELITOS
Trabajar en
servilletas, en
pequeños blocs, nos
crea restricciones que
nos ayudan a
focalizarnos en la
idea global y a
generar soluciones
simples.

38.
COLGAR EN LA PARED

39.
COLGAR EN LA PARED

40.
TEXTO COMO INTERFAZ

41.
APARIENCIA
Que no se te vaya la mano

42.
MANTENIBILIDAD
Usar plantillas, header y footer.
Mantener un historial de revisiones o “log”.

43.
EL PROTOTIPO NO ES FINAL!

44.
FOCO
No pedirle demasiado al prototipo…
· Que levante y valide requerimientos
· Que genere ideas
· Que comunique al equipo
· Que se testee con usuarios
Opción: focalizar las reuniones

45.
QUÉ GANO?
Tiempo
Salud
Ideas
Cohesión
$!

46.
MUCHAS GRACIAS!
@mrazzari @joseallona
goo.gl/Q7wchr