Webinar prototipado y usabilidad

843 views
720 views

Published on

Presentación del webinar sobre Prototipado y usabilidad centrada en el usuario impartida por Sergio Martín Balsa en IEBS, la Escuela de Negocios de la Innovación y los Emprendedores.

Puedes aprender más sobre UX en: http://open.iebschool.com/cursos/prototipado-metodologias-diseno-centrado-usuario/

Published in: Design

Webinar prototipado y usabilidad

  1. 1. Twittea este evento con la hashtag #eventosiebs [1] [1]
  2. 2. Prototipado y metodologías para el diseño centrado en el usuario Twittea este evento con la hashtag #eventosiebs [2] [2]
  3. 3. Objetivos 1. Entender para quién realizamos el producto: el usuario. 2. Comprender la importancia del contenido como materia prima de esa definición. 3. Conocer las principales técnicas de estrategia de contenido aplicadas al desarrollo de productos. 4. Uso de prototipo como documento central del proyecto. 5. Testing continuo del prototipo con usuarios. Twittea este evento con la hashtag #eventosiebs [3] [3]
  4. 4. ¿Qué vamos hacer? 1. Definir un producto para el móvil 1. Orientado al usuario 2. Basado en el contenido 2. Construir un prototipo 3. Probar el prototipo con usuarios Twittea este evento con la hashtag #eventosiebs [4] [4]
  5. 5. ¿Cómo lo vamos hacer? 1. Personas 2. Mapas de contenido 3. Modelización de contenido 4. Prototipado interactivo 5. Testing de usuario Twittea este evento con la hashtag #eventosiebs [5] [5]
  6. 6. ¿Cómo lo vamos hacer? 1. Personas 2. Mapas de contenido 3. Modelización de contenido 4. Prototipado interactivo 5. Testing de usuario Twittea este evento con la hashtag #eventosiebs [6] [6]
  7. 7. ¿Cómo lo vamos hacer? Persona Persona Objetivo Objetivo Estado Estado Escenario Escenario Tarea Tarea Contenido Contenido Prototipo Test Twittea este evento con la hashtag #eventosiebs [7] [7]
  8. 8. “Personas” • Técnica del mundo del marketing offline. • Personas imaginarias, pero representativas del mercado objetivo. • Identificar sus objetivos, escenarios y tareas. • Diseñar el producto pensando específicamente en las personas creadas. Twittea este evento con la hashtag #eventosiebs [8] [8]
  9. 9. “Personas” Ventajas Diseñar para una sola persona. Eliminar al peligroso usuario elástico. Twittea este evento con la hashtag #eventosiebs [9] [9]
  10. 10. “Personas” Twittea este evento con la hashtag #eventosiebs [10] [10]
  11. 11. “Personas” Objetivos, tareas y escenarios • Las personas se mueven por objetivos. • Hay objetivos personales («no sentirme estúpido») y objetivos prácticos (vivir mejor, vivir más, descansar, impactar, llegar rápido, sentirme seguro...). • Los objetivos prácticos varían dependiendo del estado del usuario y el escenario de uso. • Para cumplir sus objetivos, las personas necesitan ejecutar tareas. • Debemos identificar los tipos de contenidos que mejor asisten al usuario en la ejecución de esas tareas en cada estado/escenario. Debemos definir una interfaz que intente cumplir los objetivos prácticos sin violar Debemos definir una interfaz que intente cumplir los objetivos prácticos sin violar los objetivos personales los objetivos personales Twittea este evento con la hashtag #eventosiebs [11] [11]
  12. 12. “Personas” Objetivos, tareas y escenarios Persona Persona Objetivo Objetivo Estado Estado Escenario Escenario Tarea Tarea Mireia, 27 Quiere impactar Frente al espejo, con su aspecto en en la peluquería, la fiesta de esta esperando que la móvil soltera, noche Test peinados en el madrileña, Prototipo Buscar tipos de años, Contenido Contenido atiendan moderna, divertida, enganchada al móvil Twittea este evento con la hashtag #eventosiebs [12] [12]
  13. 13. Contenido De las personas al contenido Persona Persona Objetivo Objetivo Estado Estado Escenario Escenario Tarea Tarea Mireia, 27 Quiere impactar Frente al espejo, con su aspecto en en la peluquería, la fiesta de esta esperando que la móvil soltera, noche Test peinados en el madrileña, Prototipo Buscar tipos de años, Contenido Contenido atiendan moderna, divertida, enganchada al móvil Debemos identificar los tipos de contenidos que mejor asisten al usuario en la Debemos identificar los tipos de contenidos que mejor asisten al usuario en la ejecución de esas tareas en cada estado/escenario ejecución de esas tareas en cada estado/escenario Twittea este evento con la hashtag #eventosiebs [13] [13]
  14. 14. Contenido Tipos de contenido Twittea este evento con la hashtag #eventosiebs [14] [14]
  15. 15. Contenido Tipos de contenido Formato Tipo El formato es la materia prima; El formato es la materia prima; El tipo es la aplicación de la materia prima con una intención específica El tipo es la aplicación de la materia prima con una intención específica Twittea este evento con la hashtag #eventosiebs [15] [15]
  16. 16. Contenido Tipos de contenido Formato: Texto Tipo: Discurso El formato es la materia prima; El formato es la materia prima; El tipo es la aplicación de la materia prima con una intención específica El tipo es la aplicación de la materia prima con una intención específica Twittea este evento con la hashtag #eventosiebs [16] [16]
  17. 17. Contenido Tipos de contenido Formato: Foto Tipo Un mismo formato puede originar muchos tipos de contenido Un mismo formato puede originar muchos tipos de contenido Twittea este evento con la hashtag #eventosiebs [17] [17]
  18. 18. Contenido Tipos de contenido Foto Texto Vídeo En ocasiones, un tipo puede resultar de la combinación de varios formatos. En ocasiones, un tipo puede resultar de la combinación de varios formatos. Twittea este evento con la hashtag #eventosiebs [18] [18]
  19. 19. Contenido Mapas de contenido Persona Persona Objetivo Objetivo Mireia, 27 años, un vestido de soltera, fiesta y que sea moderna, Tarea Tarea Contenido Contenido Prototipo Test Quiere comprar madrileña, Estado Estado Escenario Escenario barato Exploración Buscar divertida, enganchada al móvil Una misma persona puede atravesar diversos estados/escenarios, y cada uno puede ser servido por un tipo de contenido específico Interés Leer Evaluación Comparar Decisión Comprar Disfrute Usar Galería de Galería de fotos / /vídeos fotos vídeos Comentarios / / Comentarios Opiniones Opiniones Ficha de Ficha de producto producto Proceso de Proceso de compra compra (Datos) (Datos) Whislist Whislist Twittea este evento con la hashtag #eventosiebs [19] [19]
  20. 20. Contenido Modelado del contenido Tipo Tipo Ficha película Atributos Atributos Formatos Formatos Extensión Extensión ¿Vocabulario controlado? Frecuencia Frecuencia Título Texto No No No Año Número 4 (año) No Si Duración Número 4 (h-m) No Si Género Texto 200 No Si Clasificación Número 2 (+/-) No Si Cartel Foto, texto No No No Trailer Vídeo, texto No No No Director Texto 200 No No Reparto Texto, foto, No No No 1000 No No vídeo Sinopsis Texto Twittea este evento con la hashtag #eventosiebs [20] [20]
  21. 21. Contenido Modelado del contenido Una vez que he modelado todos los atributos de cada tipo de contenido en mi proyecto… • ¿Qué atributos son imprescindibles? • ¿Qué atributos son prioritarios? • ¿Cómo voy a producirlos/obtenerlos? • ¿Cómo voy a actualizarlos? Twittea este evento con la hashtag #eventosiebs [21] [21]
  22. 22. Contenido Organizar mi contenido Si modelizo el contenido antes de diseñar, tengo claro… • lo que voy a diseñar o pedir al diseñador • lo que voy a desarrollar o pedir al desarrollador • lo que voy a pedir a mi proveedor de contenido • cómo organizar mis recursos • qué herramientas necesito Twittea este evento con la hashtag #eventosiebs [22] [22]
  23. 23. Prototipado ¿Qué es un prototipo? Twittea este evento con la hashtag #eventosiebs [23] [23]
  24. 24. Prototipado ¿Qué es un prototipo? Twittea este evento con la hashtag #eventosiebs [24] [24]
  25. 25. Prototipado ¿Qué es un prototipo? Twittea este evento con la hashtag #eventosiebs [25] [25]
  26. 26. Prototipado ¿Qué es un prototipo? El prototipo es una herramienta que le permite a los diseñadores explorar, comunicar y evaluar sus ideas. • El prototipado es un proceso iterativo que externaliza las ideas del diseñador y le permite explorar y reflexionar sobre ellas. • El prototipo es un medio para que el diseñador comunique sus ideas. • El prototipo es la representación de una idea que puede ser evaluada en un contexto. Twittea este evento con la hashtag #eventosiebs [26] [26]
  27. 27. Prototipado Ventajas • Documento central de definición • Ahorra tiempo, esfuerzo y dinero • Reduce errores de interpretación • Identifica de forma temprana errores importantes de la interfaz • Adaptable, rápido de actualizar • Testeable Twittea este evento con la hashtag #eventosiebs [27] [27]
  28. 28. Prototipado Tipos de prototipo • En papel • Wireframe (baja y alta fidelidad) • Diseño visual • Pilotos • Simulaciones Twittea este evento con la hashtag #eventosiebs [28] [28]
  29. 29. Prototipado ¿Cuándo prototipar? Persona Persona Objetivo Objetivo Estado Estado Escenario Escenario Tarea Tarea Contenido Contenido Mireia, 27 Quiere impactar Frente al espejo, Buscar tipos de Galería de años, con su aspecto en en la peluquería, peinados en el fotos/vídeos madrileña, la fiesta de esta esperando que la móvil soltera, noche atiendan moderna, divertida, enganchada al móvil Prototipo Test Representación Representación interactiva del proceso interactiva del proceso según: según: •La persona •La persona ••Suescenario Su escenario ••Tareas Tareas ••Ycon el contenido Y con el contenido definido definido Twittea este evento con la hashtag #eventosiebs [29] [29]
  30. 30. Prototipado Tipos de prototipo • En papel • Wireframe (baja y alta fidelidad) • Diseño visual • Pilotos • Simulaciones Twittea este evento con la hashtag #eventosiebs [30] [30]
  31. 31. Prototipado Tipos de prototipo: Papel Twittea este evento con la hashtag #eventosiebs [31] [31]
  32. 32. Prototipado Tipos de prototipo: Low fidelity Twittea este evento con la hashtag #eventosiebs [32] [32]
  33. 33. Prototipado Tipos de prototipo: Hight fidelity Twittea este evento con la hashtag #eventosiebs [33] [33]
  34. 34. Prototipado Tipos de prototipo: Interactivo Twittea este evento con la hashtag #eventosiebs [34] [34]
  35. 35. Prototipado Tipos de prototipo: Diseño visual Twittea este evento con la hashtag #eventosiebs [35] [35]
  36. 36. Prototipado Consejos para el prototipado • Empezar con papel • Usar texto como interfaz • Que la apariencia no se te vaya de la mano • Usar componentes (botones, formularios) y plantillas (header, footer) • Iterar, Iterar, Iterar Twittea este evento con la hashtag #eventosiebs [36] [36]
  37. 37. Prototipado Herramientas Axure http://www.axure.com/tutorials Twittea este evento con la hashtag #eventosiebs [37] [37]
  38. 38. Prototipado Conceptos: Usabilidad “La usabilidad es un atributo de calidad que mide lo fácil que son de usar las interfaces de usuario. La palabra "usabilidad" también se refiere a métodos para mejorar la facilidad de uso durante el proceso de diseño.” Jakob Nielsen’s Alertbox: January 4, 2012 Twittea este evento con la hashtag #eventosiebs [38] [38]
  39. 39. Prototipado Conceptos: Usabilidad, 5 patrones de calidad 1. Facilidad de aprendizaje. 2. Eficiencia. 3. Memoria. 4. Errores. 5. Satisfacción. Twittea este evento con la hashtag #eventosiebs [39] [39]
  40. 40. Prototipado Conceptos: Diseño centrado en el usuario (Persona) Porque es quien usará la aplicación. Hay que situar a la persona en el centro del diseño. Es decir, hay que hacer diseño centrado en nuestra persona. La usabilidad es un atributo de la calidad del diseño final, mientras que la DCU es el camino para alcanzar y mejorar la usabilidad del producto. La usabilidad es el “qué”, mientras que la DCU es el “cómo”. Nuestro usuario es nuestra “Persona” Nuestro usuario es nuestra “Persona” Twittea este evento con la hashtag #eventosiebs [40] [40]
  41. 41. Prototipado Conceptos: Diseño centrado en el usuario (Persona) Porque es quien usará la aplicación. Hay que situar a la persona en el centro del diseño. Es decir, hay que hacer diseño centrado en nuestra persona. La usabilidad es un atributo de la calidad del diseño final, mientras que la DCU es el camino para alcanzar y mejorar la usabilidad del producto. La usabilidad es el “qué”, mientras que la DCU es el “cómo”. Nuestro usuario es nuestra “Persona” Nuestro usuario es nuestra “Persona” Twittea este evento con la hashtag #eventosiebs [41] [41]
  42. 42. Test de usuarios Cuando testear Persona Persona Objetivo Objetivo Estado Estado Escenario Escenario Tarea Tarea Contenido Contenido Mireia, 27 Quiere impactar Frente al espejo, Buscar tipos de Galería de años, con su aspecto en en la peluquería, peinados en el fotos/vídeos madrileña, la fiesta de esta esperando que la móvil soltera, noche Prototipo Representació Test Test Probar con Probar con usuarios usuarios atiendan n interactiva del proceso moderna, divertida, enganchada al móvil ITERAR ITERAR Twittea este evento con la hashtag #eventosiebs 42 [42] [42]
  43. 43. Test de usuarios Low cost iterativo Web/iPad broadcast con GoToMeeting.com Twittea este evento con la hashtag #eventosiebs 43 [43] [43]
  44. 44. Test de usuarios Cuánta gente necesito Fuente Jakob Nielsen Testing con 5 usuarios: http://www.nngroup.com/articles/why-you-only-need-to-test-with-5-users/ Twittea este evento con la hashtag #eventosiebs 44 [44] [44]
  45. 45. Test de usuarios El test El prototipo es el documento central de definición para TODOS los involucrados. Clientes Clientes Técnicos Técnicos Usuarios Usuarios Una vez testado, se Una vez testado, se hacen ajustes rápidos hacen ajustes rápidos antes de entregarlo al antes de entregarlo al equipo de desarrollo. equipo de desarrollo. Twittea este evento con la hashtag #eventosiebs 45 [45] [45]
  46. 46. Test de usuarios El guión del test Ejemplo de tarea: Tarea 1: (Ponemos a la usuaria en pantalla la nueva sección de Trucos). Acabas de salir de trabajar, estás en el autobús de camino a casa y quieres averiguar como aplicarte el eyeliner para que te dure todo el día. Respuestas posibles: • Opción a: En el buscador introduce el término “eyeliner”. En el resultado de búsqueda hacer clic en uno de los resultados sobre eyeliner • Opción b: En las categorías, ir a cosmética. En el resultado de cosmética hacer clic en el truco de Eyeliner. – Cómo aplicarse el eyeliner para que dure todo el día. Twittea este evento con la hashtag #eventosiebs 46 [46] [46]
  47. 47. Test de usuarios La entrevista Instrucciones: Instrucciones: 1.Bienvenida al usuario. 1.Bienvenida al usuario. 2.El test es para detectar errores 2.El test es para detectar errores de interfaz, el usuario nunca de interfaz, el usuario nunca comete errores, los detecta. comete errores, los detecta. 3.Se leerán una serie de tareas 3.Se leerán una serie de tareas que el usuario deberá llevar aa que el usuario deberá llevar cabo. cabo. 4.El usuario deberá describir en 4.El usuario deberá describir en voz alta aquello que está voz alta aquello que está haciendo, es importante que lo haciendo, es importante que lo haga de forma honesta. haga de forma honesta. 5.En el caso de no resolver una 5.En el caso de no resolver una tarea, no hay que ayudar al tarea, no hay que ayudar al usuario, se deberá pasar aala usuario, se deberá pasar la siguiente tarea. siguiente tarea. Sala de testing: • Entrevistador • Testers: Usuarios 6.El entrevistador solo podrá 6.El entrevistador solo podrá contestar aalas dudas de la contestar las dudas de la interfaz que tenga el usuario con interfaz que tenga el usuario con respuestas neutrales: AHA! respuestas neutrales: AHA! Twittea este evento con la hashtag #eventosiebs 47 [47] [47]
  48. 48. Test de usuarios Bienvenida al usuario El navegador web debe estar abierto aaGoogle ooalguna página “neutral” El navegador web debe estar abierto Google alguna página “neutral” Comience explicándole al usuario lo siguiente: • Explicarle por qué está aquí, aunque ya tenga una idea, le comentaremos que necesitamos su ayuda para ver si funciona la interfaz según lo esperado. •El objetivo de la prueba es evaluar la calidad de uso de la interfaz, nunca la evaluación del participante. • Si el participante comete algún fallo durante la prueba, no será culpa suya, sino del diseño. • Conforme vaya usando la interfaz, solicitarle que intente pensar en voz alta, que diga que es lo que está mirando, tratando de hacer y que está pensando. Esto es de gran ayuda. • Que no se preocupe de herir nuestros sentimientos, solo queremos mejorar la interfaz, por ello es impotante manifestar las cosas de forma honesta. Twittea este evento con la hashtag #eventosiebs 48 [48] [48]
  49. 49. Test de usuarios Instrucciones: Instrucciones: 1.Bienvenida. 1.Bienvenida. 2.Observar, aprender yy tomar 2.Observar, aprender tomar notas notas La observación Sala de observación: • Moderaror / Coordinador • Invitados 3.Al final de cada sesión, escribir 3.Al final de cada sesión, escribir los tres problemas más los tres problemas más importantens de usbailidad. importantens de usbailidad. 4.Sugerir preguntas al 4.Sugerir preguntas al entrevistador para que pregunte entrevistador para que pregunte al participante al participante 5.Disfrutar de los aperitivos 5.Disfrutar de los aperitivos 6.Debatir sobre lo ocurrido al 6.Debatir sobre lo ocurrido al termino de las sesiones termino de las sesiones Twittea este evento con la hashtag #eventosiebs 49 [49] [49]
  50. 50. ¡Gracias! Twittea este evento con la hashtag #eventosiebs [50] [50]

×