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