prototipos y wireframes en el diseño de interacción
DESCRIPTION
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.TRANSCRIPT
PROTOTIPOS Y WIREFRAMES EN EL DISEÑO DE INTERACCIÓN
Manuel Razzari, José Allona2014 – Primera Jornada Abierta de UXD, Escuela Superior Técnica2009 – Seminario de IxDA Buenos Aires, Microsoft Argentina
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.
¿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 explorar y reflexionar sobre ellas.
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 direcciones.
IDEACIÓN
“Externalizar las ideas para que el mundo pueda contestarnos”
Bill Buxton, Sketching the user experience http://amzn.com/0123740371
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Á HECHOUN PROTOTIPO?
Youn-Kyung LimCreative 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 diseñadores están interesados, sin distorsionar el entendimiento del todo.”
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 posibilidades de una idea.”
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 producto final, y esto lo hace muy atractivo para opinar, para coolaborar, para probar rápidamente conceptos generales.
MATERIAL: PAPEL
ALCANCE: APARIENCIA INFORMACION ESTRUCTURAESPACIAL
INTERACCION FUNCIONALIDAD
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 ESTRUCTURAESPACIAL
INTERACCION FUNCIONALIDAD
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 ESTRUCTURAESPACIAL
INTERACCION FUNCIONALIDAD
ESCENARIO
MATERIAL: PHOTOSHOP
ALCANCE: APARIENCIA INFORMACION ESTRUCTURAESPACIAL
INTERACCION FUNCIONALIDAD
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 ESTRUCTURAESPACIAL
INTERACCION FUNCIONALIDAD
http://styletil.es/
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 ESTRUCTURAESPACIAL
INTERACCION FUNCIONALIDAD
COMPETENCIAS
Conocer las reglas y convenciones del medio para el que trabajo.
La capacidad de implementar los atributos que nos interesa explorar.
CONSEJOS
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.
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.
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
· Que se testee con usuarios
Opción: focalizar las reuniones
QUÉ GANO?
Tiempo
Salud
Ideas
Cohesión
$!
MUCHAS GRACIAS!@mrazzari @joseallona
goo.gl/Q7wchr