Prototipos En El Proceso De DiseñO De InteraccióN Ix Da Ba 5 Nov 2009 Santiago Bustelo

MEMBER

Presentación bajo licencia Creative CommonsAtribución 2.5 Argentinahttp://creativecommons.org/licenses/by/2.5/ar

Prototipos en el proceso de diseño de interacciónPrototipos y diseño centrado en el usuario

http://creativecommons.org/licenses/by/2.5/ar

http://creativecommons.org/licenses/by/2.5/ar

Prototipos en el proceso de diseño de interacción •

¿Cuándo está terminado nuestro trabajo?

• Cuando nos gusta a nosotros

• Cuando funciona como queríamos

• Cuando le gusta al cliente

• Cuando el usuario logra lo que esperábamos

2


Proceso lineal

1. Definición de requerimientos.

2. Diseño y desarrollo a nivel de producción.

3. Entrega.

3


Proceso lineal interminable

1. Definición de requerimientos.

2. Diseño y desarrollo a nivel de producción.

3. Entrega.

4. No es lo que el cliente quería,retrocede tres casilleros.

5. Se repite hasta el hartazgo de unao ambas partes.

4


Proceso convergente

1. Objetivos y análisis inicial.

2. Diseño y desarrollo en iteracionesavanzando progresivamente en:

• Funcionalidad• Estructura y elementos• Lenguaje visual

3. Entrega y puesta en producción.

5


Iteraciones en el proceso convergente

6

1. Planeamiento de la iteración• Definición del problema. Qué queremos aprender

de esta iteración y cómo vamos a hacerlo.

2. Implementación• Creación del prototipo con la fidelidad correcta

3. Prueba• Obtenemos información que valida o descarta la

solución.

4. Conclusiones y aprendizaje• Qué funcionó o no, y por qué.

Jared Spool, Anatomy of an Iteration

http://www.uie.com/articles/anatomy_iteration/

http://www.uie.com/articles/anatomy_iteration/


Bocetos, propuestas, prototipos

• Permiten evaluar una hipótesis con...

• nosotros mismos

• equipo de desarrollo

• cliente

• usuario

7


Exploración de variables en una etapa

• Contrastar hipótesis contra alternativas

• Descubrir oportunidades

• Agotar etapa

8


Diseño y desarrollo sobre prototipo aprobado

9

Wireframe

Desarrollo Diseño

ResultadoAlex Souza,

The Science Behind Great User Interfaces

http://ppgplaces.com/asouza/?p=3





¿Cómo incorporamos al usuario en el proceso de diseño de interacción?

10


¿Cómo incorporamos al usuario?

• Preguntar y observar sin condicionar.

• Tomar con cuidado las hipótesis del usuario.

• Buscamos validar o refutar una hipótesis de diseño,y obtener material para nuevas hipótesis:

• modelo mental del usuario

• operabilidad percibida (affordance) de la interfaz

• proceso de decisión del usuario

11


¿Qué es un usuario?

• No está viciado por ejercicio de la profesión ni por nuestro proceso de conceptualización.

• Tiene o puede representar intención de usar la interfaz para lograr un objetivo.

• Tiene o puede representar el modelo mental del públicoal que está destinada la interfaz.

• No necesita ser una muestra demográfica.

12


Incorporando al usuario

• La prueba con usuarios no tiene que ser perfecta.Tiene que existir.

• La diferencia entre probar nuestras hipótesis con cero usuarios, vs. hacerlo con un solo usuario, es infinita.

• En caso de poder incorporar muchos usuarios al proceso,un buen número es 3 por iteración.

• Pruebas de costo muy bajo, o nulo.

13


Ejemplos

Prototipos en el procesode diseño y desarrollo

14


Rediseño:Carácter visual1. Sitio original2. Síntesis3. Rediseño

15



16



17


Estructura: exploración de variables18


Mon 9thSun 8th Tue 10th Wed 11th Thu 12th Fri 13th Sat 14th

Welcome RS52

10 am

11 am

Noon

1 pm

2 pm

3 pm

4 pm

5 pm

6 pm

7 pm

8 pm

9 pm

Inbox

New messages 30

Mew 30

Mew 30

My Scores

Mew 30

Mew 30

5 news invitation

Office New Event :

repeat: every day

4pm -7pm

office

4pm -7pm

home

From .....hrs to ......hrs

Looking to start playing again. Hi folks. I used to play with a friend twice a week but

he moved and I haven't picked up a racket in a few months. Looking to start playing

again, can travel anywhere in TO. Would prefer to play with some where in the 20s

30s who is intermediately skilled. Cheers!.

Asks for a match on Tue 10th

Susan86 open invitation

M855open invitation

Mary36 open invitation

open invitation

open invitation

next 20 results >

open invitation

Susan86

Susan86

Susan86

!

!



Officemale female bothSearch available players

43 players found. Choose one or post an open invitation for this criteria.

Near

New York, NY / NTRP Level : 5.5 / 1 Mile from Office

New York, NY / NTRP Level : 5.5 / 5 Miles from Office





Modelo deoperación1. Primer wireframe2. Segundo wireframe3. Versión final

22



23



24



25



26


Modelo de operación: Primer propuesta27


Modelo de operación: Primer propuesta28


Modelo de operación: Replanteo29


Modelo de operación: Prueba de concepto30


Buscar peliculas o clientes

Películas

Alquiler: 3 películas

La Rosa Púrpura del Cairo

Woody Allen


Woody Allen


Woody Allen


Woody Allen

Santiago Bustelo 32 años

4123-4567

Diego González 32 años

4123-4567

Santiago Bustelo 32 años

4123-4567


4123-4567


4123-4567

Juan de los Palotes 1638

Deuda $67

Clientes

Activar Cliente

+

+

Alquilar a Diego González

78079

78079

78079

78079

78079

78079

78079

78079

78079

ReservarRelacionadas

78079

78079

78079

78079

La Rosa Púrpura del Cairo (1985)

The Purple Rose of Cairo

La Rosa Púrpuradel Cairo#78909

Mia FarrowJeff DanielsDanny AielloIrving MetzmanStephanie Farrow

Actores

Woody AllenDirector

Sátira, Comedia, Woody AllenGéneros

1 hora 22 minutosDuración

La Rosa Púrpuradel Cairo#78909

La Rosa Púrpuradel Cairo

El ciudadano

Eterno resplandor de una mente...

Yo sé que tu sabes que yo sé

reservada

Modelo de operación: Mockups31

Prototipos en el proceso de diseño de interacción • 32

Modelo de operación: Versión final

MEMBER

¡Muchas gracias!Santiago Bustelo • icograma.com

Prototipos En El Proceso De DiseñO De InteraccióN Ix Da Ba 5 Nov 2009 Santiago Bustelo

Technology

Transcript of Prototipos En El Proceso De DiseñO De InteraccióN Ix Da Ba 5 Nov 2009 Santiago Bustelo