0
PROTOTIPOS Y
WIREFRAMES EN EL
DISEÑO DE INTERACCIÓN
Manuel Razzari, José Allona
2014 – Primera Jornada Abierta de UXD, Esc...
SUMARIO
¿Qué es un prototipo?
¿Por qué prototipar?
Competencias. ¿Qué necesito?
Tipos de prototipo, aplicaciones, y ejempl...
¿QUÉ ES UN PROTOTIPO?
El prototipo es una herramienta que le permite
a los diseñadores explorar, comunicar y
evaluar sus ideas.
IDEACIÓN (EXPLORACIÓN)
El prototipado es un proceso iterativo que
externaliza las ideas del diseñador y le permite
explora...
El prototipo es un medio para que el diseñador
dialogue sobre sus ideas.
COMUNICACIÓN
El prototipo es la representación de una idea que
puede ser puesta a prueba en un contexto.
EVALUACIÓN
IDEACIÓN VS EVALUACIÓN
El prototipo no para probar una solución sino
para descubrir problemas, o para explorar nuevas
dire...
IDEACIÓN
“Externalizar las ideas para que el mundo
pueda contestarnos”
Bill Buxton, Sketching the user experience http://a...
ITERACIÓN
http://www.uie.com/articles/anatomy_iteration/
ITERACIÓN
Bill Buxton, Sketching the user experience http://amzn.com/0123740371
ITERACIÓN
Bill Buxton, Sketching the user experience http://amzn.com/0123740371
¿DE QUÉ ESTÁ HECHO
UN PROTOTIPO?
Youn-Kyung Lim
Creative Interaction Design Lab
Youn-Kyng Lim, Anatomy of prototypes, ACM TOCHI, http://goo.gl/igcGEj
“Prototipar es una actividad para crear una
manifestación que, en su forma más simple, filtre
los atributos en que los dis...
PROTOTIPO COMO
MANIFESTACIÓN
Material
Alcance
Fidelidad
MATERIAL
ALCANCE
FIDELIDAD
PROTOTIPO COMO FILTRO
Apariencia
Información
Interacción
Estructura espacial
Funcionalidad
APARIENCIA
INFORMACIÓN
INTERACCIÓN
ESTRUCTURA ESPACIAL
FUNCIONALIDAD
PRINCIPIO DE ECONOMÍA
“El mejor prototipo es el que de forma más
sencilla y eficiente hace visibles y medibles las
posibil...
TIPOS DE PROTOTIPO
En papel
Wireframe (baja y alta fidelidad)
Diseño visual
Prueba de concepto
Pilotos
Simulaciones
PROTOTIPO EN PAPEL
Muestro la estructura
espacial, la funcionalidad,
la interactividad.
La fidelidad está muy
lejos del pr...
WIREFRAME DE BAJA
FIDELIDAD
Qué muestro: estructura
espacial, a grandes rasgos
cuál es el contenido
Cómo lo muestro: en es...
WIREFRAME DE ALTA
FIDELIDAD
Muestro información,
estructura, funcionalidad,
y un poco de
interactividad.
Todo esto me camb...
ESCENARIO
MATERIAL: PHOTOSHOP
ALCANCE: APARIENCIA INFORMACION ESTRUCTURA
ESPACIAL
INTERACCION FUNCIONALIDAD
REFERENCIA DE ESTILO
El lado B del wireframe.
Foco total en el diseño
visual. El resto puede ser
simulado.
Mediante colore...
DISEÑO VISUAL
Ya tenemos altísima
fidelidad en la apariencia,
se refinan temas que ya se
vieron antes en el proceso,
de es...
COMPETENCIAS
Conocer las reglas y
convenciones del
medio para el que
trabajo.
La capacidad de
implementar los
atributos qu...
CONSEJOS
EMPEZAR EN PAPEL
Se puede cambiar rápidamente.
Se puede criticar, porque no parece final.
Se presta a jugar, a explorar.
S...
EMPEZAR EN PAPELITOS
Trabajar en
servilletas, en
pequeños blocs, nos
crea restricciones que
nos ayudan a
focalizarnos en l...
COLGAR EN LA PARED
COLGAR EN LA PARED
TEXTO COMO INTERFAZ
APARIENCIA
Que no se te vaya la mano
MANTENIBILIDAD
Usar plantillas, header y footer.
Mantener un historial de revisiones o “log”.
EL PROTOTIPO NO ES FINAL!
FOCO
No pedirle demasiado al prototipo…
· Que levante y valide requerimientos
· Que genere ideas
· Que comunique al equipo...
QUÉ GANO?
Tiempo
Salud
Ideas
Cohesión
$!
MUCHAS GRACIAS!
@mrazzari @joseallona
goo.gl/Q7wchr
Prototipos y wireframes en el diseño de interacción
Prototipos y wireframes en el diseño de interacción
Prototipos y wireframes en el diseño de interacción
Prototipos y wireframes en el diseño de interacción
Prototipos y wireframes en el diseño de interacción
Prototipos y wireframes en el diseño de interacción
Prototipos y wireframes en el diseño de interacción
Prototipos y wireframes en el diseño de interacción
Upcoming SlideShare
Loading in...5
×

Prototipos y wireframes en el diseño de interacción

17,572

Published on

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.

Published in: Design, Technology, Business
5 Comments
30 Likes
Statistics
Notes
No Downloads
Views
Total Views
17,572
On Slideshare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
341
Comments
5
Likes
30
Embeds 0
No embeds

No notes for slide
  • .
  • Transcript of "Prototipos y wireframes en el diseño de interacción"

    1. 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. 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. 3. ¿QUÉ ES UN PROTOTIPO?
    4. 4. El prototipo es una herramienta que le permite a los diseñadores explorar, comunicar y evaluar sus ideas.
    5. 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. 6. El prototipo es un medio para que el diseñador dialogue sobre sus ideas. COMUNICACIÓN
    7. 7. El prototipo es la representación de una idea que puede ser puesta a prueba en un contexto. EVALUACIÓN
    8. 8. IDEACIÓN VS EVALUACIÓN El prototipo no para probar una solución sino para descubrir problemas, o para explorar nuevas direcciones.
    9. 9. IDEACIÓN “Externalizar las ideas para que el mundo pueda contestarnos” Bill Buxton, Sketching the user experience http://amzn.com/0123740371
    10. 10. ITERACIÓN http://www.uie.com/articles/anatomy_iteration/
    11. 11. ITERACIÓN Bill Buxton, Sketching the user experience http://amzn.com/0123740371
    12. 12. ITERACIÓN Bill Buxton, Sketching the user experience http://amzn.com/0123740371
    13. 13. ¿DE QUÉ ESTÁ HECHO UN PROTOTIPO?
    14. 14. Youn-Kyung Lim Creative Interaction Design Lab Youn-Kyng Lim, Anatomy of prototypes, ACM TOCHI, http://goo.gl/igcGEj
    15. 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. 16. PROTOTIPO COMO MANIFESTACIÓN Material Alcance Fidelidad
    17. 17. MATERIAL
    18. 18. ALCANCE
    19. 19. FIDELIDAD
    20. 20. PROTOTIPO COMO FILTRO Apariencia Información Interacción Estructura espacial Funcionalidad
    21. 21. APARIENCIA
    22. 22. INFORMACIÓN
    23. 23. INTERACCIÓN
    24. 24. ESTRUCTURA ESPACIAL
    25. 25. FUNCIONALIDAD
    26. 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. 27. TIPOS DE PROTOTIPO En papel Wireframe (baja y alta fidelidad) Diseño visual Prueba de concepto Pilotos Simulaciones
    28. 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. 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. 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. 31. ESCENARIO MATERIAL: PHOTOSHOP ALCANCE: APARIENCIA INFORMACION ESTRUCTURA ESPACIAL INTERACCION FUNCIONALIDAD
    32. 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. 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. 34. COMPETENCIAS Conocer las reglas y convenciones del medio para el que trabajo. La capacidad de implementar los atributos que nos interesa explorar.
    35. 35. CONSEJOS
    36. 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. 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. 38. COLGAR EN LA PARED
    39. 39. COLGAR EN LA PARED
    40. 40. TEXTO COMO INTERFAZ
    41. 41. APARIENCIA Que no se te vaya la mano
    42. 42. MANTENIBILIDAD Usar plantillas, header y footer. Mantener un historial de revisiones o “log”.
    43. 43. EL PROTOTIPO NO ES FINAL!
    44. 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. 45. QUÉ GANO? Tiempo Salud Ideas Cohesión $!
    46. 46. MUCHAS GRACIAS! @mrazzari @joseallona goo.gl/Q7wchr
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×