Prototipos en el proceso de diseño

  • 2,648 views
Uploaded 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.

More in: Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
2,648
On Slideshare
0
From Embeds
0
Number of Embeds
3

Actions

Shares
Downloads
98
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. Prototipos en el proceso de diseño Santiago Bustelo @sbustelo 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 Presentación bajo licencia Creative Commons Atribución 2.5 Argentina http://creativecommons.org/licenses/by/2.5/ar MEMBER
  • 2. 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. MEMBER
  • 3. IxDA (Interaction Design Association) • Organización abierta, voluntaria y gratuita, con la Evolución en Experiencia de Usuario • 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 MEMBER 3 ixda.org
  • 4. ¿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 Prototipos en el proceso de diseño • MEMBER 4
  • 5. 1. Definición de requerimientos. 2. Diseño y desarrollo a nivel de producción. 3. Entrega. Prototipos en el proceso de diseño • Proceso lineal MEMBER 5
  • 6. 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. Prototipos en el proceso de diseño • MEMBER 6
  • 7. Entender el tipo de problema Prototipos en el proceso de diseño • 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. MEMBER 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. 7
  • 8. 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. Prototipos en el proceso de diseño • Proceso convergente MEMBER 8
  • 9. 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
  • 10. Prototipos e Iteraciones en el proceso Prototipos en el proceso de diseño • MEMBER 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. Dimensiones que podemos explorar con prototipos Prototipos en el proceso de diseño • MEMBER 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. Explorando cada dimensión en paralelo (aplicación para planificación 3D, 1992) Rol Look & feel Implementación Prototipos en el proceso de diseño • MEMBER 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? Stephanie Houde & Charles Hill: What do Prototypes Prototype?
  • 13. Prototipos para comunicación entre diseño, desarrollo y cliente Prototipos en el proceso de diseño • MEMBER 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. ¿Cómo incorporamos al usuario en el proceso de diseño de interacción? Prototipos en el proceso de diseño • MEMBER 14
  • 15. Incorporando usuarios reales • Hasta que no testeamos, sólo Prototipos en el proceso de diseño • 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. MEMBER 15 Usability problems found 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. Prototipo en papel: aplicación web Prototipos en el proceso de diseño • MEMBER 16
  • 17. Pruebas de usabilidad con prototipo en papel Prototipos en el proceso de diseño • MEMBER 17
  • 18. Prototipo en papel: aplicación móvil Prototipos en el proceso de diseño • MEMBER 18
  • 19. Pruebas de usabilidad con prototipo operable Prototipos en el proceso de diseño • MEMBER 19
  • 20. Ejemplos Prototipos en el proceso de diseño y desarrollo Prototipos en el proceso de diseño • MEMBER 20
  • 21. Rediseño: Carácter visual 1. Sitio original 2. Síntesis 3. Rediseño MEMBER
  • 22. Rediseño: Carácter visual 1. Sitio original 2. Síntesis 3. Rediseño MEMBER
  • 23. Rediseño: Carácter visual 1. Sitio original 2. Síntesis 3. Rediseño MEMBER
  • 24. Estructura: exploración de variables Prototipos en el proceso de diseño • MEMBER 24
  • 25. Estructura: exploración de variables Prototipos en el proceso de diseño • MEMBER 25
  • 26. Estructura: exploración de variables Prototipos en el proceso de diseño • MEMBER 26
  • 27. Estructura: exploración de variables Prototipos en el proceso de diseño • MEMBER 27
  • 28. Arquitectura de información 1. Exploración inicial 2. Wireframes 3. Diseño final MEMBER
  • 29. Arquitectura de información 1. Exploración inicial 2. Wireframes 3. Diseño final MEMBER
  • 30. Arquitectura de información 1. Exploración inicial 2. Wireframes 3. Diseño final MEMBER
  • 31. Arquitectura de información 1. Exploración inicial 2. Wireframes 3. Diseño final MEMBER
  • 32. Pruebas con usuarios Prototipos en el proceso de diseño • MEMBER 32
  • 33. Arquitectura de información 1. Exploración inicial 2. Wireframes 3. Diseño final MEMBER
  • 34. MEMBER Sun 8th Mon 9th 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 : From .....hrs to ......hrs repeat: every day 4pm -7pm office 4pm -7pm home Search available players male female both Office 43 players found. Choose one or post an open invitation for this criteria. Susan86 open invitation Asks for a match on Tue 10th M855 open invitation Asks for a match on Tue 10th Mary36 open invitation 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 √ √ Asks for a match on Tue 10th 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. Modelo de operación 1. Primer wireframe 2. Segundo wireframe 3. Versión final MEMBER
  • 36. Modelo de operación 1. Primer wireframe 2. Segundo wireframe 3. Versión final MEMBER
  • 37. Modelo de operación 1. Primer wireframe 2. Segundo wireframe 3. Versión final MEMBER
  • 38. Modelo de operación 1. Primer wireframe 2. Segundo wireframe 3. Versión final MEMBER
  • 39. Modelo de operación: Primer propuesta Prototipos en el proceso de diseño • MEMBER 39
  • 40. Modelo de operación: Primer propuesta Prototipos en el proceso de diseño • MEMBER 40
  • 41. Modelo de operación: Replanteo Prototipos en el proceso de diseño • MEMBER 41
  • 42. Modelo de operación: Prueba de concepto Prototipos en el proceso de diseño • MEMBER 42
  • 43. Clientes Activar Cliente Relacionadas Reservar Prototipos en el proceso de diseño • MEMBER 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 + + Alquilar a Diego González 78079 78079 78079 78079 78079 78079 78079 78079 78079 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 Director Woody Allen Géneros Sátira, Comedia, Woody Allen Duración 1 hora 22 minutos 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 • MEMBER 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 MEMBER K a m b r i c a
  • 46. www.kambrica.com