Your SlideShare is downloading. ×
0
Santiago Bustelo
Director de diseño, Kambrica
IxDA Central and South America Regional Coordinator
Usabilidad e interacción...
M E M B E R
Me presento…
• Santiago Bustelo, diseñador de interacción.
• Fundador y Director de Diseño, Kambrica.
• Fundad...
Prototipos en el proceso de diseño •M E M B E R
IxDA (Interaction Design Association)
• Organización abierta, voluntaria y...
Prototipos en el proceso de diseño •M E M B E R
¿Cuándo está terminado el diseño de un
producto interactivo?
• Cuando nos ...
Prototipos en el proceso de diseño •M E M B E R
Proceso lineal
1. Definición de requerimientos.
2. Diseño y desarrollo a n...
Prototipos en el proceso de diseño •M E M B E R
Proceso lineal interminable
1. Definición de requerimientos.
2. Diseño y d...
Prototipos en el proceso de diseño •M E M B E R
Problemas bien definidos
• Es posible definir estado inicial,
estado desea...
Prototipos en el proceso de diseño •M E M B E R
Proceso convergente
1. Objetivos y análisis inicial.
2. Diseño y desarroll...
Prototipos en el proceso de diseño •M E M B E R
Prototipos
• Permiten evaluar una propuesta (hipótesis) con...
• nosotros ...
Prototipos en el proceso de diseño •M E M B E R
Prototipos e Iteraciones en el proceso
10
1. Planeamiento de la iteración
...
Prototipos en el proceso de diseño •M E M B E R
Dimensiones que podemos explorar
con prototipos
11
Rol
Función que cumple ...
Prototipos en el proceso de diseño •M E M B E R
Explorando cada dimensión en paralelo
(aplicación para planificación 3D, 1...
Prototipos en el proceso de diseño •M E M B E R
Prototipos para comunicación entre diseño,
desarrollo y cliente
13
Wirefra...
Prototipos en el proceso de diseño •M E M B E R
¿Cómo incorporamos al
usuario en el proceso de
diseño de interacción?
14
Prototipos en el proceso de diseño •M E M B E R
Incorporando usuarios reales
• Hasta que no testeamos, sólo
podemos tener ...
Prototipos en el proceso de diseño •M E M B E R
Prototipo en papel: aplicación web
16
Prototipos en el proceso de diseño •M E M B E R
Pruebas de usabilidad con prototipo en papel
17
Prototipos en el proceso de diseño •M E M B E R
Prototipo en papel: aplicación móvil
18
Prototipos en el proceso de diseño •M E M B E R
Pruebas de usabilidad con prototipo operable
19
Prototipos en el proceso de diseño •M E M B E R
Ejemplos
Prototipos en el proceso
de diseño y desarrollo
20
M E M B E R
Rediseño:
Carácter visual
1. Sitio original
2. Síntesis
3. Rediseño
M E M B E R
Rediseño:
Carácter visual
1. Sitio original
2. Síntesis
3. Rediseño
M E M B E R
Rediseño:
Carácter visual
1. Sitio original
2. Síntesis
3. Rediseño
Prototipos en el proceso de diseño •M E M B E R
Estructura: exploración de variables
24
Prototipos en el proceso de diseño •M E M B E R
Estructura: exploración de variables
25
Prototipos en el proceso de diseño •M E M B E R
Estructura: exploración de variables
26
Prototipos en el proceso de diseño •M E M B E R
Estructura: exploración de variables
27
M E M B E R
Arquitectura de
información
1. Exploración inicial
2. Wireframes
3. Diseño final
M E M B E R
Arquitectura de
información
1. Exploración inicial
2. Wireframes
3. Diseño final
M E M B E R
Arquitectura de
información
1. Exploración inicial
2. Wireframes
3. Diseño final
M E M B E R
Arquitectura de
información
1. Exploración inicial
2. Wireframes
3. Diseño final
Prototipos en el proceso de diseño •M E M B E R
Pruebas con usuarios
32
M E M B E R
Arquitectura de
información
1. Exploración inicial
2. Wireframes
3. Diseño final
M E M B E R
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
...
M E M B E R
Modelo de
operación
1. Primer wireframe
2. Segundo wireframe
3. Versión final
M E M B E R
Modelo de
operación
1. Primer wireframe
2. Segundo wireframe
3. Versión final
M E M B E R
Modelo de
operación
1. Primer wireframe
2. Segundo wireframe
3. Versión final
M E M B E R
Modelo de
operación
1. Primer wireframe
2. Segundo wireframe
3. Versión final
Prototipos en el proceso de diseño •M E M B E R
Modelo de operación: Primer propuesta
39
Prototipos en el proceso de diseño •M E M B E R
Modelo de operación: Primer propuesta
40
Prototipos en el proceso de diseño •M E M B E R
Modelo de operación: Replanteo
41
Prototipos en el proceso de diseño •M E M B E R
Modelo de operación: Prueba de concepto
42
Prototipos en el proceso de diseño •M E M B E R
Buscar peliculas o clientes
Películas
Alquiler: 3 películas
La Rosa Púrpur...
Prototipos en el proceso de diseño •M E M B E R
44
Modelo de operación: Versión final
¡Muchas gracias!
Prototipos en el proceso de diseño
Usabilidad e interacción en el diseño web
M E M B E R
w w w . k a m b r i c a . c o m
Upcoming SlideShare
Loading in...5
×

Prototipos en el proceso de diseño

3,433

Published on

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.

Published in: Design
0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,433
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
120
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide

Transcript of "Prototipos en el proceso de diseño"

  1. 1. 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 M E M B E R
  2. 2. M E M B E R 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.
  3. 3. Prototipos en el proceso de diseño •M E M B E R 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
  4. 4. Prototipos en el proceso de diseño •M E M B E R ¿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
  5. 5. Prototipos en el proceso de diseño •M E M B E R Proceso lineal 1. Definición de requerimientos. 2. Diseño y desarrollo a nivel de producción. 3. Entrega. 5
  6. 6. Prototipos en el proceso de diseño •M E M B E R 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 que el usuario necesita, retrocede tres casilleros. 5. Se repite hasta el hartazgo de una o ambas partes. 6
  7. 7. Prototipos en el proceso de diseño •M E M B E R 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
  8. 8. Prototipos en el proceso de diseño •M E M B E R Proceso convergente 1. Objetivos y análisis inicial. 2. Diseño y desarrollo en iteraciones avanzando y validando progresivamente: • Funcionalidad • Estructura y elementos • Lenguaje visual • Viabilidad 3. Entrega y puesta en producción. 8
  9. 9. Prototipos en el proceso de diseño •M E M B E R 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
  10. 10. Prototipos en el proceso de diseño •M E M B E R 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
  11. 11. Prototipos en el proceso de diseño •M E M B E R Dimensiones que podemos explorar con prototipos 11 Rol Función que cumple el artefacto en la vida del usuario Look & feel Experiencia sensorial del usuario Implementación Técnicas y componentes necesarios para cumplir la función Stephanie Houde & Charles Hill: What do Prototypes Prototype?
  12. 12. Prototipos en el proceso de diseño •M E M B E R 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?
  13. 13. Prototipos en el proceso de diseño •M E M B E R Prototipos para comunicación entre diseño, desarrollo y cliente 13 Wireframe Validación general Desarrollo Implementación de funcionalidad Diseño Desarrollo de lenguaje visual Producto final Alex Souza, The Science Behind Great User Interfaces
  14. 14. Prototipos en el proceso de diseño •M E M B E R ¿Cómo incorporamos al usuario en el proceso de diseño de interacción? 14
  15. 15. Prototipos en el proceso de diseño •M E M B E R 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 Usabilityproblemsfound 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
  16. 16. Prototipos en el proceso de diseño •M E M B E R Prototipo en papel: aplicación web 16
  17. 17. Prototipos en el proceso de diseño •M E M B E R Pruebas de usabilidad con prototipo en papel 17
  18. 18. Prototipos en el proceso de diseño •M E M B E R Prototipo en papel: aplicación móvil 18
  19. 19. Prototipos en el proceso de diseño •M E M B E R Pruebas de usabilidad con prototipo operable 19
  20. 20. Prototipos en el proceso de diseño •M E M B E R Ejemplos Prototipos en el proceso de diseño y desarrollo 20
  21. 21. M E M B E R Rediseño: Carácter visual 1. Sitio original 2. Síntesis 3. Rediseño
  22. 22. M E M B E R Rediseño: Carácter visual 1. Sitio original 2. Síntesis 3. Rediseño
  23. 23. M E M B E R Rediseño: Carácter visual 1. Sitio original 2. Síntesis 3. Rediseño
  24. 24. Prototipos en el proceso de diseño •M E M B E R Estructura: exploración de variables 24
  25. 25. Prototipos en el proceso de diseño •M E M B E R Estructura: exploración de variables 25
  26. 26. Prototipos en el proceso de diseño •M E M B E R Estructura: exploración de variables 26
  27. 27. Prototipos en el proceso de diseño •M E M B E R Estructura: exploración de variables 27
  28. 28. M E M B E R Arquitectura de información 1. Exploración inicial 2. Wireframes 3. Diseño final
  29. 29. M E M B E R Arquitectura de información 1. Exploración inicial 2. Wireframes 3. Diseño final
  30. 30. M E M B E R Arquitectura de información 1. Exploración inicial 2. Wireframes 3. Diseño final
  31. 31. M E M B E R Arquitectura de información 1. Exploración inicial 2. Wireframes 3. Diseño final
  32. 32. Prototipos en el proceso de diseño •M E M B E R Pruebas con usuarios 32
  33. 33. M E M B E R Arquitectura de información 1. Exploración inicial 2. Wireframes 3. Diseño final
  34. 34. M E M B E R 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 Asks for a match on Tue 10th Susan86 open invitation M855 open invitation Mary36 open invitation √ √ 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 Modelo de operación 1. Primer wireframe 2. Segundo wireframe 3. Versión final
  35. 35. M E M B E R Modelo de operación 1. Primer wireframe 2. Segundo wireframe 3. Versión final
  36. 36. M E M B E R Modelo de operación 1. Primer wireframe 2. Segundo wireframe 3. Versión final
  37. 37. M E M B E R Modelo de operación 1. Primer wireframe 2. Segundo wireframe 3. Versión final
  38. 38. M E M B E R Modelo de operación 1. Primer wireframe 2. Segundo wireframe 3. Versión final
  39. 39. Prototipos en el proceso de diseño •M E M B E R Modelo de operación: Primer propuesta 39
  40. 40. Prototipos en el proceso de diseño •M E M B E R Modelo de operación: Primer propuesta 40
  41. 41. Prototipos en el proceso de diseño •M E M B E R Modelo de operación: Replanteo 41
  42. 42. Prototipos en el proceso de diseño •M E M B E R Modelo de operación: Prueba de concepto 42
  43. 43. Prototipos en el proceso de diseño •M E M B E R Buscar peliculas o clientes Películas Alquiler: 3 películas La Rosa Púrpura del Cairo Woody Allen La Rosa Púrpura del Cairo Woody Allen La Rosa Púrpura del Cairo Woody Allen La Rosa Púrpura del Cairo Woody Allen Santiago Bustelo 32 años 4123-4567 Diego González 32 años 4123-4567 Santiago Bustelo 32 años 4123-4567 Diego González 32 años 4123-4567 Diego González 32 años 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úrpura del Cairo #78909 Mia Farrow Jeff Daniels Danny Aiello Irving Metzman Stephanie Farrow Actores Woody AllenDirector Sátira, Comedia, Woody AllenGéneros 1 hora 22 minutosDuración La Rosa Púrpura del Cairo #78909 La Rosa Púrpura del Cairo El ciudadano Eterno resplandor de una mente... Yo sé que tu sabes que yo sé reservada Modelo de operación: Mockups 43
  44. 44. Prototipos en el proceso de diseño •M E M B E R 44 Modelo de operación: Versión final
  45. 45. ¡Muchas gracias! Prototipos en el proceso de diseño Usabilidad e interacción en el diseño web M E M B E R
  46. 46. w w w . k a m b r i c a . c o m
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×