Your SlideShare is downloading. ×
0
Prototipos en el proceso de diseño
Prototipos en el proceso de diseño
Prototipos en el proceso de diseño
Prototipos en el proceso de diseño
Prototipos en el proceso de diseño
Prototipos en el proceso de diseño
Prototipos en el proceso de diseño
Prototipos en el proceso de diseño
Prototipos en el proceso de diseño
Prototipos en el proceso de diseño
Prototipos en el proceso de diseño
Prototipos en el proceso de diseño
Prototipos en el proceso de diseño
Prototipos en el proceso de diseño
Prototipos en el proceso de diseño
Prototipos en el proceso de diseño
Prototipos en el proceso de diseño
Prototipos en el proceso de diseño
Prototipos en el proceso de diseño
Prototipos en el proceso de diseño
Prototipos en el proceso de diseño
Prototipos en el proceso de diseño
Prototipos en el proceso de diseño
Prototipos en el proceso de diseño
Prototipos en el proceso de diseño
Prototipos en el proceso de diseño
Prototipos en el proceso de diseño
Prototipos en el proceso de diseño
Prototipos en el proceso de diseño
Prototipos en el proceso de diseño
Prototipos en el proceso de diseño
Prototipos en el proceso de diseño
Prototipos en el proceso de diseño
Prototipos en el proceso de diseño
Prototipos en el proceso de diseño
Prototipos en el proceso de diseño
Prototipos en el proceso de diseño
Prototipos en el proceso de diseño
Prototipos en el proceso de diseño
Prototipos en el proceso de diseño
Prototipos en el proceso de diseño
Prototipos en el proceso de diseño
Prototipos en el proceso de diseño
Prototipos en el proceso de diseño
Prototipos en el proceso de diseño
Prototipos en el proceso de diseño
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Prototipos en el proceso de diseño

3,178

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 …

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
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,178
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
113
Comments
0
Likes
4
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. Prototipos en el proceso de diseño •M E M B E R Prototipo en papel: aplicación web 16
  • 17. Prototipos en el proceso de diseño •M E M B E R Pruebas de usabilidad con prototipo en papel 17
  • 18. Prototipos en el proceso de diseño •M E M B E R Prototipo en papel: aplicación móvil 18
  • 19. Prototipos en el proceso de diseño •M E M B E R Pruebas de usabilidad con prototipo operable 19
  • 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. M E M B E R Rediseño: Carácter visual 1. Sitio original 2. Síntesis 3. Rediseño
  • 22. M E M B E R Rediseño: Carácter visual 1. Sitio original 2. Síntesis 3. Rediseño
  • 23. M E M B E R Rediseño: Carácter visual 1. Sitio original 2. Síntesis 3. Rediseño
  • 24. Prototipos en el proceso de diseño •M E M B E R Estructura: exploración de variables 24
  • 25. Prototipos en el proceso de diseño •M E M B E R Estructura: exploración de variables 25
  • 26. Prototipos en el proceso de diseño •M E M B E R Estructura: exploración de variables 26
  • 27. Prototipos en el proceso de diseño •M E M B E R Estructura: exploración de variables 27
  • 28. M E M B E R Arquitectura de información 1. Exploración inicial 2. Wireframes 3. Diseño final
  • 29. M E M B E R Arquitectura de información 1. Exploración inicial 2. Wireframes 3. Diseño final
  • 30. M E M B E R Arquitectura de información 1. Exploración inicial 2. Wireframes 3. Diseño final
  • 31. M E M B E R Arquitectura de información 1. Exploración inicial 2. Wireframes 3. Diseño final
  • 32. Prototipos en el proceso de diseño •M E M B E R Pruebas con usuarios 32
  • 33. M E M B E R Arquitectura de información 1. Exploración inicial 2. Wireframes 3. Diseño final
  • 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. M E M B E R Modelo de operación 1. Primer wireframe 2. Segundo wireframe 3. Versión final
  • 36. M E M B E R Modelo de operación 1. Primer wireframe 2. Segundo wireframe 3. Versión final
  • 37. M E M B E R Modelo de operación 1. Primer wireframe 2. Segundo wireframe 3. Versión final
  • 38. M E M B E R Modelo de operación 1. Primer wireframe 2. Segundo wireframe 3. Versión final
  • 39. Prototipos en el proceso de diseño •M E M B E R Modelo de operación: Primer propuesta 39
  • 40. Prototipos en el proceso de diseño •M E M B E R Modelo de operación: Primer propuesta 40
  • 41. Prototipos en el proceso de diseño •M E M B E R Modelo de operación: Replanteo 41
  • 42. Prototipos en el proceso de diseño •M E M B E R Modelo de operación: Prueba de concepto 42
  • 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. Prototipos en el proceso de diseño •M E M B E R 44 Modelo de operación: Versión final
  • 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. w w w . k a m b r i c a . c o m

×