prototipos en el proceso de diseño
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
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