Prototipos en el proceso de diseño

46
Santiago Bustelo Director de diseño, Kambrica IxDA Central and South America Regional Coordinator Usabilidad e interacción en el diseño web 28 de junio, 2012 Prototipos en el proceso de diseño Presentación bajo licencia Creative Commons Atribución 2.5 Argentina http://creativecommons.org/licenses/by/2.5/ar @sbustelo MEMBER

description

Una forma de plantear el proceso de diseño, es en forma lineal: se toma un encargo, se lo ejecuta y se lo entrega. En ese modelo, la devolución del cliente o de los usuarios finales llega cuando el diseño ya está terminado, y ya no quedan tiempo, recursos o energía para seguir adelante. Mediante casos de ejemplo reales, se mostrará cómo incorporar a clientes y usuarios en un proceso de diseño convergente, en el cual se diseñan, comparten y ponen a prueba prototipos de niveles crecientes de detalle.

Transcript of Prototipos en el proceso de diseño

Page 1: Prototipos en el proceso de diseño

Santiago BusteloDirector de diseño, KambricaIxDA Central and South America Regional Coordinator

Usabilidad e interacción en el diseño web28 de junio, 2012

Prototipos en elproceso de diseño

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

@sbustelo

MEMBER

Page 2: Prototipos en el proceso de diseño

MEMBER

Me presento…

• Santiago Bustelo, diseñador de interacción.• Fundador y Director de Diseño, Kambrica.

• Fundador y Coordinador IxDA Buenos Aires y Coordinador Regional de IxDA en Latinoamérica. Organizador de los principales eventos de UX en Argentina desde 2010 y de Interaction South America 2014.

• Desde 1997 he participado en proyectos de diseño y desarrollo para Microsoft, Staples, Coca-Cola, HP, TetraPak, MetLife, HSBC, Telefónica, Jumbo, Molinos, Banco Santander, Bumeran.com, Guía Óleo y Universidad de Stanford, entre otros.

• He dictado presentaciones y talleres sobre Usabilidad, Diseño de Interacción y Experiencia de Usuario (UX) desde el año 2001 en Argentina, Brasil, Colombia, EEUU, Canadá, Irlanda y Holanda.

Page 3: Prototipos en el proceso de diseño

Evolución en Experiencia de Usuario •MEMBER

IxDA (Interaction Design Association)

• Organización abierta, voluntaria y gratuita, con la misión de liberar a la condición humana de las malas experiencias que la desafían, avanzando la disciplina de Diseño de Interacción.

• Foro global, más de 76.000 miembros, 160 grupos locales, 36 grupos en América Latina.

• En Argentina:• Buenos Aires: ixda.com.ar• Córdoba: ixdaCba.com.ar• Corrientes / Resistencia:

facebook/IxdaCorrientesResistencia• La Plata: ixdaLaPlata.com.ar• Mar del Plata: @IxDAMDQ• Mendoza: ixdaMza.com.ar• Rosario: ixdaRosario.com.ar• Tucumán: ixdaTucuman.com.ar

3

ixda.org

Page 4: Prototipos en el proceso de diseño

Prototipos en el proceso de diseño •MEMBER

¿Cuándo está terminado el diseño de un producto interactivo?

• Cuando nos gusta a nosotros

• Cuando funciona como queríamos

• Cuando le gusta al cliente

• Cuando el usuario logra lo que esperábamos

4

Page 5: Prototipos en el proceso de diseño

Prototipos en el proceso de diseño •MEMBER

Proceso lineal

1. Definición de requerimientos.

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

3. Entrega.

5

Page 6: Prototipos en el proceso de diseño

Prototipos en el proceso de diseño •MEMBER

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 o lo queel usuario necesita,retrocede tres casilleros.

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

6

Page 7: Prototipos en el proceso de diseño

Prototipos en el proceso de diseño •MEMBER

Problemas bien definidos

• Es posible definir estado inicial, estado deseado, y camino más corto.

• Se aplican algoritmos: secuencias estructuradas de pasos que garantizan “la” solución.

• Metodología secuencial.

• Foco en análisis y documentación.

Problemas complejos

• El problema no es entendido hasta no haberlo resuelto.

• Se trabajan de forma heurística, en un proceso de prueba y error para aproximarse a “una” solución.

• Metodología ágil.

• Foco en entregables.

Entender el tipo de problema

7

Diseño como innovación implica resolver problemas complejos.

Page 8: Prototipos en el proceso de diseño

Prototipos en el proceso de diseño •MEMBER

Proceso convergente

1. Objetivos y análisis inicial.

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

• Funcionalidad

• Estructura y elementos

• Lenguaje visual

• Viabilidad

3. Entrega y puesta en producción.

8

Page 9: Prototipos en el proceso de diseño

Prototipos en el proceso de diseño •MEMBER

Prototipos

• Permiten evaluar una propuesta (hipótesis) con...

• nosotros mismos

• equipo de desarrollo

• cliente

• usuarios reales

• …de forma rápida y aplicando el esfuerzo correcto.

9

Page 10: Prototipos en el proceso de diseño

Prototipos en el proceso de diseño •MEMBER

Prototipos e Iteraciones en el proceso

10

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

Page 11: Prototipos en el proceso de diseño

Prototipos en el proceso de diseño •MEMBER

Dimensiones que podemos explorarcon prototipos

11

RolFunción que cumple el artefactoen la vida del usuario

Look & feelExperiencia sensorial del usuario

ImplementaciónTécnicas y componentes necesariospara cumplir la función

Stephanie Houde & Charles Hill: What do Prototypes Prototype?

Page 12: Prototipos en el proceso de diseño

Prototipos en el proceso de diseño •MEMBER

Explorando cada dimensión en paralelo (aplicación para planificación 3D, 1992)

12

¿Qué pantallas hacen sentido para elegir muebles y probar cómo quedan?

¿Es práctico tener “manijas” para manipular objetos 3D?

¿Qué complejidad 3D puede procesar la computadora del usuario?

Rol Look & feel Implementación

Stephanie Houde & Charles Hill: What do Prototypes Prototype?

Page 13: Prototipos en el proceso de diseño

Prototipos en el proceso de diseño •MEMBER

Prototipos para comunicación entre diseño, desarrollo y cliente

13

WireframeValidación general

DesarrolloImplementación de

funcionalidad

DiseñoDesarrollo de lenguaje visual

Producto finalAlex Souza,

The Science Behind Great User Interfaces

Page 14: Prototipos en el proceso de diseño

Prototipos en el proceso de diseño •MEMBER

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

14

Page 15: Prototipos en el proceso de diseño

Prototipos en el proceso de diseño •MEMBER

Incorporando usuarios reales

• Hasta que no testeamos, sólo podemos tener hipótesis.

• Testear con 5 usuarios revela el 80% de los problemas de usabilidad presentes en el producto.

• Observación y análisis de operación para resolver tareas solicitadas.

• Pruebas rápidas y de gran impacto cualitativo.

• No se toman requerimientos del usuario. Nos enfocamos en lo que el usuario hace.

15

Usa

bilit

y pr

oble

ms

foun

d 100%

75%

50%

25%

0%0 3 6 9 12 15

Number of Test Users

Jakob Nielsen: Why You Only Need to Test with 5 Users

Page 16: Prototipos en el proceso de diseño

Prototipos en el proceso de diseño •MEMBER

Prototipo en papel: aplicación web16

Page 17: Prototipos en el proceso de diseño

Prototipos en el proceso de diseño •MEMBER

Pruebas de usabilidad con prototipo en papel17

Page 18: Prototipos en el proceso de diseño

Prototipos en el proceso de diseño •MEMBER

Prototipo en papel: aplicación móvil18

Page 19: Prototipos en el proceso de diseño

Prototipos en el proceso de diseño •MEMBER

Pruebas de usabilidad con prototipo operable19

Page 20: Prototipos en el proceso de diseño

Prototipos en el proceso de diseño •MEMBER

Ejemplos

Prototipos en el procesode diseño y desarrollo

20

Page 21: Prototipos en el proceso de diseño

Prototipos en el proceso de diseño •

MEMBER

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

21

Page 22: Prototipos en el proceso de diseño

Prototipos en el proceso de diseño •

MEMBER

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

22

Page 23: Prototipos en el proceso de diseño

Prototipos en el proceso de diseño •

MEMBER

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

23

Page 24: Prototipos en el proceso de diseño

Prototipos en el proceso de diseño •MEMBER

Estructura: exploración de variables24

Page 25: Prototipos en el proceso de diseño

Prototipos en el proceso de diseño •MEMBER

Estructura: exploración de variables25

Page 26: Prototipos en el proceso de diseño

Prototipos en el proceso de diseño •MEMBER

Estructura: exploración de variables26

Page 27: Prototipos en el proceso de diseño

Prototipos en el proceso de diseño •MEMBER

Estructura: exploración de variables27

Page 28: Prototipos en el proceso de diseño

Prototipos en el proceso de diseño •

MEMBER

Arquitectura de información1. Exploración inicial2. Wireframes3. Diseño final

28

Page 29: Prototipos en el proceso de diseño

Prototipos en el proceso de diseño •

MEMBER

Arquitectura de información1. Exploración inicial2. Wireframes3. Diseño final

29

Page 30: Prototipos en el proceso de diseño

Prototipos en el proceso de diseño •

MEMBER

Arquitectura de información1. Exploración inicial2. Wireframes3. Diseño final

30

Page 31: Prototipos en el proceso de diseño

Prototipos en el proceso de diseño •

MEMBER

Arquitectura de información1. Exploración inicial2. Wireframes3. Diseño final

31

Page 32: Prototipos en el proceso de diseño

Prototipos en el proceso de diseño •MEMBER

Pruebas con usuarios32

Page 33: Prototipos en el proceso de diseño

Prototipos en el proceso de diseño •

MEMBER

Arquitectura de información1. Exploración inicial2. Wireframes3. Diseño final

33

Page 34: Prototipos en el proceso de diseño

Prototipos en el proceso de diseño •

MEMBER

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 -7pmoffice

4pm -7pmhome

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

M855 open invitation

Mary36 open invitation

open invitation

open invitation

next 20 results >

open invitation

Susan86

Susan86

Susan86

Asks for a match on Tue 10th

Asks for a match on Tue 10th

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

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

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

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

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

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

34

Page 35: Prototipos en el proceso de diseño

Prototipos en el proceso de diseño •

MEMBER

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

35

Page 36: Prototipos en el proceso de diseño

Prototipos en el proceso de diseño •

MEMBER

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

36

Page 37: Prototipos en el proceso de diseño

Prototipos en el proceso de diseño •

MEMBER

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

37

Page 38: Prototipos en el proceso de diseño

Prototipos en el proceso de diseño •

MEMBER

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

38

Page 39: Prototipos en el proceso de diseño

Prototipos en el proceso de diseño •MEMBER

Modelo de operación: Primer propuesta39

Page 40: Prototipos en el proceso de diseño

Prototipos en el proceso de diseño •MEMBER

Modelo de operación: Primer propuesta40

Page 41: Prototipos en el proceso de diseño

Prototipos en el proceso de diseño •MEMBER

Modelo de operación: Replanteo41

Page 42: Prototipos en el proceso de diseño

Prototipos en el proceso de diseño •MEMBER

Modelo de operación: Prueba de concepto42

Page 43: Prototipos en el proceso de diseño

Prototipos en el proceso de diseño •MEMBER

Buscar peliculas o clientes

Películas

Alquiler: 3 películas

La Rosa Púrpura del CairoWoody Allen

La Rosa Púrpura del CairoWoody Allen

La Rosa Púrpura del CairoWoody Allen

La Rosa Púrpura del CairoWoody Allen

Santiago Bustelo 32 años4123-4567

Diego González 32 años4123-4567

Santiago Bustelo 32 años4123-4567

Diego González 32 años4123-4567

Diego González 32 años4123-4567Juan de los Palotes 1638Deuda $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 AllenDirectorSátira, Comedia, Woody AllenGéneros

1 hora 22 minutosDuración

La Rosa Púrpuradel Cairo#78909

La Rosa Púrpuradel Cairo

El ciudadanoEterno resplandor de una mente...Yo sé que tu sabes que yo sé

reservada

Modelo de operación: Mockups43

Page 44: Prototipos en el proceso de diseño

Prototipos en el proceso de diseño •MEMBER

44

Modelo de operación: Versión final

Page 45: Prototipos en el proceso de diseño

¡Muchas gracias!

K a m b r i c a

Prototipos en el proceso de diseño

Usabilidad e interacción en el diseño web

MEMBER