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

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.

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

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

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

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

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.

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

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

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

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?

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?

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

Prototipos en el proceso de diseño •MEMBER

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

14

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

Prototipos en el proceso de diseño •MEMBER

Prototipo en papel: aplicación web16

Prototipos en el proceso de diseño •MEMBER

Pruebas de usabilidad con prototipo en papel17

Prototipos en el proceso de diseño •MEMBER

Prototipo en papel: aplicación móvil18

Prototipos en el proceso de diseño •MEMBER

Pruebas de usabilidad con prototipo operable19

Prototipos en el proceso de diseño •MEMBER

Ejemplos

Prototipos en el procesode diseño y desarrollo

20

Prototipos en el proceso de diseño •

MEMBER

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

21

Prototipos en el proceso de diseño •

MEMBER

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

22

Prototipos en el proceso de diseño •

MEMBER

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

23

Prototipos en el proceso de diseño •MEMBER

Estructura: exploración de variables24

Prototipos en el proceso de diseño •MEMBER

Estructura: exploración de variables25

Prototipos en el proceso de diseño •MEMBER

Estructura: exploración de variables26

Prototipos en el proceso de diseño •MEMBER

Estructura: exploración de variables27

Prototipos en el proceso de diseño •

MEMBER

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

28

Prototipos en el proceso de diseño •

MEMBER

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

29

Prototipos en el proceso de diseño •

MEMBER

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

30

Prototipos en el proceso de diseño •

MEMBER

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

31

Prototipos en el proceso de diseño •MEMBER

Pruebas con usuarios32

Prototipos en el proceso de diseño •

MEMBER

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

33

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

Prototipos en el proceso de diseño •

MEMBER

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

35

Prototipos en el proceso de diseño •

MEMBER

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

36

Prototipos en el proceso de diseño •

MEMBER

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

37

Prototipos en el proceso de diseño •

MEMBER

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

38

Prototipos en el proceso de diseño •MEMBER

Modelo de operación: Primer propuesta39

Prototipos en el proceso de diseño •MEMBER

Modelo de operación: Primer propuesta40

Prototipos en el proceso de diseño •MEMBER

Modelo de operación: Replanteo41

Prototipos en el proceso de diseño •MEMBER

Modelo de operación: Prueba de concepto42

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

Prototipos en el proceso de diseño •MEMBER

44

Modelo de operación: Versión final

¡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

www.kambrica.com