Procesos de prototipado para explorar soluciones de diseño y cómo comunicarlas efectivamente. http://www.ixda.com.ar/eventos/prototipos-wireframes-diseno-de-interaccion/ * ¿Qué es un prototipo? * ¿Por qué prototipar? * Ideación vs. evaluación. Iteración. Pensar en papel. * Insumos y competencias. ¿Qué necesito? * Tipos de prototipo, aplicaciones y ejemplos. * Bocetos, wireframes, pruebas de concepto, pilotos, simulaciones. * ¿Qué muestro, y cómo? Elección del tipo de prototipo adecuado. * Cómo encarar la hoja en blanco * Consejos. Errores comunes.

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?

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

13. 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.

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

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

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

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

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

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

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

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

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

23. “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.”

24. PROTOTIPO COMO
MANIFESTACIÓN
Material
Alcance
Fidelidad

25. MATERIAL

26. ALCANCE

27. FIDELIDAD

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

29. APARIENCIA

30. INFORMACIÓN

31. INTERACCIÓN

32. ESTRUCTURA ESPACIAL

33. FUNCIONALIDAD

34. 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.”

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

36. 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

37. 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

38. 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

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

40. 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/

41. 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

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

43. CONSEJOS

44. 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.

45. 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.

46. COLGAR EN LA PARED

47. COLGAR EN LA PARED

48. TEXTO COMO INTERFAZ

49. APARIENCIA
Que no se te vaya la mano

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

51. EL PROTOTIPO NO ES FINAL!

52. 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

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

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