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

PROTOTIPOS Y WIREFRAMES EN EL DISEÑO DE INTERACCIÓN Manuel Razzari - José Allona Noviembre 5, 2009 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?

brookbanham.com

mardisbagley.com

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.

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

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

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”

ITERACIÓN

¿DE QUÉ ESTÁ HECHO UN PROTOTIPO?

Youn-Kyung Lim Indiana University

“Prototipar es una actividad con el objetivo de 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 Créditos: Tohidi, Maryam and Bill Buxton, Ronald Baecker, and Abigail Sellen, “Getting the Right Design and the Design Right: Testing Many is Better than One.”

ALCANCE

FIDELIDAD

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

APARIENCIA

INFORMACION

INTERACCION

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 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 ESTRUCTURA INTERACCION FUNCIONALIDAD ESPACIAL

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 INTERACCION FUNCIONALIDAD ESPACIAL

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 INTERACCION FUNCIONALIDAD ESPACIAL

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

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 INTERACCION FUNCIONALIDAD ESPACIAL

PILOTO / BETA MATERIAL: WEB ALCANCE: APARIENCIA INFORMACION ESTRUCTURA INTERACCION FUNCIONALIDAD ESPACIAL

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

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 Adapative Path’s sketchboard technique

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

http://www.ixda.com.ar	116
http://www.3wstudio.com.ar	44
http://www.slideshare.net	14
http://gila-design.blogspot.com	10
http://unblogdediseno.blogspot.com	6
http://cms.76440proyecto.webnode.es	4
http://76440proyecto.webnode.es	3
http://preview.76440proyecto.webnode.es	3
http://www.thehouseofblogs.com	2
http://www.lmodules.com	1
http://unblogdediseno.blogspot.com.ar	1

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

by Con Vista Al Mar on Nov 06, 2009

Accessibility

Categories

Tags

Upload Details

Usage Rights

11 Embeds 204

Statistics

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