Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Principios, procesos y herramientas UX para la enseñanza del Diseño

456 views

Published on

Taller para Docentes Universitarios de Diseño.
Santiago Bustelo, Lorena Maceratesi, Mariana Fiorillo
Jue 7/jun CCGSM, Laboratorio 2
Mie 13/jun CCGSM, Aula 2

Con la intención de poder construir una mejor experiencia en las aulas, queremos divulgar las prácticas y las metodologías que aplicamos día a día.
La experiencia de Usuario propone una mirada centrada en la necesidad del individuo, planteando recorridos únicos para diferentes perfiles. Entender la individualidad nos permite reconocer la variedad de metodologías que podemos aplicar para cada grupo.
En este workshop proponemos explorar algunas herramientas y una mirada diferente acerca de la educación.

Published in: Design
  • Be the first to comment

Principios, procesos y herramientas UX para la enseñanza del Diseño

  1. 1. Jue 7/jun CCGSM, Laboratorio 2 Mie 13/jun CCGSM, Aula 2 Santiago Bustelo, Lorena Maceratesi, Mariana Fiorillo Principios, procesos y herramientas UX para la enseñanza del Diseño Obra bajo licencia Creative Commons Reconocimiento 4.0 Internacional
  2. 2. Esta presentación está publicada bajo licencia
 Creative Commons Atribución-CompartirIgual 4.0 Internacional (CC BY-SA 4.0) Usted es libre de: • Compartir — copiar y redistribuir el material en cualquier medio o formato • Adaptar — remezclar, transformar y crear a partir del material. Para cualquier propósito, incluso comercialmente. El licenciante no puede revocar estas libertades en tanto usted siga los términos de la licencia. Bajo las condiciones siguientes: Atribución — Usted debe darle crédito a esta obra de manera adecuada (dar nombre del creador y de las partes atribuidas, un aviso de derechos de autor, una nota de licencia, un aviso legal, y un enlace al material), proporcionando un enlace a la licencia, e indicando si se han realizado cambios. Puede hacerlo en cualquier forma razonable, pero no de forma tal que sugiera que usted o su uso tienen el apoyo del licenciante. Compartir igual — Si usted mezcla, transforma o crea nuevo material a partir de esta obra, usted podrá distribuir su contribución siempre que utilice la misma licencia que la obra original, o una que aparezca como compatible en https://creativecommons.org/compatiblelicenses. No hay restricciones adicionales — Usted no puede aplicar términos legales ni medidas tecnológicas que restrinjan legalmente a otros hacer cualquier uso permitido por la licencia.
  3. 3. IxDA BA • UX para la enseñanza del Diseño IxDA: Interaction
 Design Association Organización mundial 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 80.000 miembros, 175 grupos locales, 43 grupos en América Latina. ixda.com.ar En Argentina: Buenos Aires, Córdoba, Corrientes / Resistencia, La Plata, Mar del Plata, Mendoza, Rosario, Santa Fe y Tucumán. ila.ixda.org Conferencia Interaction Latin America 2018: 
 15, 16 y 17 de Noviembre 2017, Rio de Janeiro, Brasil
  4. 4. IxDA BA • UX para la enseñanza del Diseño Consigna: Anotar en post-its los conceptos que vean interesantes para su práctica docente 4Santiago Bustelo, Lorena Maceratesi, Mariana Fiorillo •
  5. 5. Experiencia de Usuario
  6. 6. Santiago Bustelo •IxDA BA • UX para la enseñanza del Diseño Experiencia de Usuario (User Experience, UX) Atributo / resultado (Experiencia de Usuario): • Lo que una persona experimenta en todos sus contactos con un sistema, producto, marca o servicio.
 ISO 9241:2010 • Siempre ocurre. Puede ser intencional o accidental. Práctica (Diseño de la Experiencia de Usuario): • Articular medios y procesos para lograr una UX deseable. 6
  7. 7. IxDA BA • UX para la enseñanza del Diseño UX resultado del producto de factores: 
 Relevamiento x Diseño x Interacción = UX 7Santiago Bustelo • Arhippainen, L., Tähti, M. (2003). Empirical Evaluation of User Experience in Two Adaptative Mobile Application Prototypes. 
 Proceedings of the 2nd International Conference on Mobile and Ubiquitous Multimedia, 10–12 December, 2003, Norrköping, Sweden. time pressure, pressure of success and fail, explicit and implicit requirements, etc. sex, fashion, habits, norms, language, symbols, religion, etc. time, place, accompanying persons, temperature, etc. cultural factorssocial factors values, emotions, expectations, prior experiences, physical characteristics, motor functions, personality, motivation, skills, age, etc. user usability, functions, size, weight, language, symbols, aesthetic characteristics, usefulness, reputation, adaptivity, mobility, etc. product context of use INTERACTION User Experience Espacio de diseño Resultado Espacio de relevamiento
  8. 8. IxDA BA • UX para la enseñanza del Diseño Métodos de Relevamiento e Investigación
 (UX / Design Research) 8Santiago Bustelo • Qualitative (direct) Quantitative (indirect) Attitudinal Behavioral © 2008 Christian Rohrer Approach DataSource mix mix Scripted (often lab-based) use of product Natural use of product De-contextualized / not using product Key for Context of Product Use during data collection Combination / hybrid Focus Groups Phone Interviews Ethnographic Field Studies Cardsorting Diary/Camera Study Intercept Surveys Usability Lab Studies Eyetracking Usability Benchmarking (in lab) A/B (Live) Testing Online User Experience Assessments (“Vividence-like” studies) Desirability studies Data Mining/Analysis Email Surveys Message Board Mining Participatory Design Customer feedback via email / / 48 Landscape
of
User
Research
Methods

  9. 9. IxDA BA • UX para la enseñanza del Diseño Dimensiones de métodos de Design Research 9Santiago Bustelo • Conductual Lo que la gente hace Actitudinal Lo que la gente dice Cualitativo Qué, por qué y cómo arreglar Cuantitativo Cuántos y Cuánto No usando el producto o servicio Uso Natural Contexto de uso Uso Guionado Christian Rohrer:
 When to Use Which User-Experience Research Methods
  10. 10. User Experience Design Interaction Design Industrial Design Human Computer Interaction Usability Engineering Ubiquitous Computing Interactive Controls Mechanical Engineering Electrical Engineering Psychology Cognitive Science Sociology Philosophy Human Factors & Ergonomics Architecture Information Architecture Communication Design Motion Design Spatial Experience Contextual Requirements Data & Info Visualization Functional Requirements Generative Design Marketing Audio Engineering Sound Design Writing Computer Science Interactive Environments User Interface DesignApplication Design Software Development Navigation Design Guidance Systems User Interface Scenography Scenario Design Digital Signage Media Installations Designing for Interaction: The Disciplines of User Experience - Dan Saffer UX y disciplinas
 de Diseño UX: Lo que una persona experimenta en todos sus contactos con un sistema, producto, marca o servicio. ISO 9241:2010
  11. 11. Santiago Bustelo •IxDA BA • UX para la enseñanza del Diseño “Diseño es la manifestación de una intención” Jared Spool 11
  12. 12. IxDA BA • UX para la enseñanza del Diseño ¿Quiénes diseñan la Experiencia del Usuario? 12Santiago Bustelo •
  13. 13. IxDA BA • UX para la enseñanza del Diseño Todos los que tienen intenciones que manifestar
 en el producto final 13Santiago Bustelo • Decisiones de Negocio Valores de la Organización Ejecución
 de Diseño Decisiones de Diseño
  14. 14. Experiencias cotidianas
  15. 15. La experiencia se da en el uso @#$%! @#$%! @#$%!@#$%! @#$%!
  16. 16. ¿Quiénes decidieron esta experiencia?
 ¿Qué intenciones estaban cuidando?
  17. 17. Identidad de cada línea: accesible Foto: Juane Rambosio
  18. 18. Identidad de cada línea: diluida
  19. 19. / ZONAS DEL RECORRIDO [ RAMAL ] :: ZONA OESTE Olmos, Romero, Abasto, El Peligro, Etche- verry, El Centinela, El Retiro, Santa Ana, San Carlos, Las Quintas, La Granja, J. Hernández, Barrio Corralón, La Cumbre y otros barrios. Vías principales: Avenidas 44, 520, 32, 137, 143, 31, 19, Ruta 36, Ruta 2 y otras. :: COLOR DE IDENTIFICACIÓN Olmos • Pza. Paso • Pza. Italia • Est. Ferrocarril • 1 y 57 Etcheverry • Olmos • Pza. Moreno • Est. Ferrocarril • 1 y 57 Gómez • Olmos • Pza. Italia • Pza. San Martín • Est. Ferrocarril Abasto • Olmos • Plaza Moreno • Estación Ferrocarril • 1 y 57 Abasto • M. Romero • Pza. Italia • T. De Ómnibus • Est. Ferrocarril Barrio Santa Ana • Las Quintas • Pza. Paso • Pza. Moreno • Pza. San Martín • Est. Ferrocarril Hosp. Romero • Pza. Alberti • T. De Ómnibus • Pza. Italia • Est. Ferrocarril 10 11 12 14 15 16 17 Hernández • Pza. Paso • Pza. Italia • T. De Ómnibus • Est. Ferrocarril • Pza. San Martín • Pza. Rocha Hernandez x 38 • T.de Ómnibus • Pza. San Martín • Est. Ferrocarril Abasto • H. Romero • Las Quintas • Los Hornos • Cementerio • Hosp. San Juan de Dios • Hosp. de Niños • Hosp. Policlínico Hosp. Romero • Tolosa • Est. Ferrocarril • Pza. San Martín • Pza. Moreno El Pato • El Peligro • Esc. 49 • Esc. Agraria • Esc. 57 • Colonia Urquiza • T. De Ómnibus • Pza. Italia • Pza. San Martín • Est. Ferrocarril Escuela 49 • Colonia Urquiza • Esc. 57 • Romero • T. De Ómnibus • Pza. Italia • Pza. San Martín • Est. Ferro- carril Colonia Urquiza • Esc. 57 • Romero • T. De Ómnibus • Pza. Italia • Pza. San Martín • Est. Ferrocarril 24 26 61 65 82 84 85Hosp. Romero • Barrio Santa Ana • Pza. Moreno • Hosp. de Niños18 Hernández • La Granja • Las Quin- tas • Pza. Malvinas • Pza. Moreno • Pza. San Martín • Pza. Rocha 23 Escuela Agraria • Abasto • Olmos • Pza. Moreno • Pza. San Martín • Est. Ferrocarril • 1 y 57 86 Fuente: Mariana Barba, FBA UNLP
  20. 20. Foto: Juane Rambosio
  21. 21. Foto: Juane Rambosio
  22. 22. Juane Rambosio, Santiago Bustelo Accesibilidad
  23. 23. 11 Lector de pantalla Manuel Razzari Accesibilidad
  24. 24. IxDA BA • UX para la enseñanza del Diseño En Argentina: 5 millones de personas con limitación/es permanente/s para ver, oír, moverse, entender o aprender 29Santiago Bustelo, Manuel Razzari, Martín Szyslican • http://www.censo2010.indec.gov.ar/resultadosdefinitivos_totalpais.asp https://www.microsoft.com/en-us/design/inclusive
  25. 25. Santiago Bustelo •IxDA BA • UX para la enseñanza del Diseño Accesibilidad web: Legislación argentina • Ley 26.653 de Accesibilidad de la Información en las Páginas Web (noviembre 2010) • Resolución 69/2011: Apruébase la "Guía de Accesibilidad para Sitios Web del Sector Público Nacional" (adopción de WCAG 1.0/1999) • Decreto 355/2013: Apruébase la reglamentación de la Ley 26.653 • Disposición Nro 2/2014, Oficina Nacional de Tecnologías de Información
 (adopción de WCAG 2.0/2008) 30
  26. 26. Principios
  27. 27. IxDA BA • UX para la enseñanza del Diseño Facetas de la Experiencia de Usuario 32Santiago Bustelo • útil deseable valioso accesible creíble encontrable usable Peter Morville, Facets of the User Experience (2004)
  28. 28. IxDA BA • UX para la enseñanza del Diseño Usabilidad de un calendario 33Santiago Bustelo • 1 2 3 4 567 891011 12 1314 15 16 17 18 19 20 21 222324 25 262728293031
  29. 29. IxDA BA • UX para la enseñanza del Diseño Usabilidad de un calendario 35Santiago Bustelo • D L M M J V S 26 27 28 29 30 31 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 1 2 3 4 5
  30. 30. Santiago Bustelo •IxDA BA • UX para la enseñanza del Diseño Usabilidad La usabilidad de una interfaz es una medida de la efectividad, eficiencia y satisfacción con la cual determinados usuarios pueden alcanzar determinados objetivos en un entorno particular con dicha interfaz. ISO 9241-11, 1997 37
  31. 31. IxDA BA • UX para la enseñanza del Diseño Comparar alternativas de manera objetiva 38Santiago Bustelo • 1 2 3 4 567 891011 12 1314 15 16 17 18 19 20 21 222324 25 262728293031 D L M M J V S 26 27 28 29 30 31 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 1 2 3 4 5
  32. 32. IxDA BA • UX para la enseñanza del Diseño Principios de… 39Santiago Bustelo • • Instrucción • Formación de hábitos • Operación • Selección • Percepción COSTO
  33. 33. IxDA BA • UX para la enseñanza del Diseño Los once colores básicos en el lenguaje y orden en el que aparecen (Berlin y Kay, 1969) 40Santiago Bustelo •
  34. 34. Cartografía
  35. 35. Santiago Bustelo •IxDA BA • UX para la enseñanza del Diseño FEDCBA8976543215123456789ABCDEF FEDCBA8976543214123456789ABCDEF FEDCBA8976543213123456789ABCDEF FEDCBA8976543212123456789ABCDEF FEDCBA8976543211123456789ABCDEF FEDCBA8976543210123456789ABCDEF FEDCBA8976543211123456789ABCDEF FEDCBA8976543212123456789ABCDEF FEDCBA8976543213123456789ABCDEF FEDCBA8976543214123456789ABCDEF FEDCBA8976543215123456789ABCDEF Wilbert O. Galitz, The Essential Guide to User Interface Design 3213123 54321212345 6543211123456 765432101234567 6543211123456 54321212345 3213123 Agudeza visual 42
  36. 36. IxDA BA • UX para la enseñanza del Diseño Durante el fin de semana, nadie pudo ingresar… 
 ni pudo entender por qué 43Santiago Bustelo •
  37. 37. Santiago Bustelo •IxDA BA • UX para la enseñanza del Diseño Protanopia Protanopia EjemplosdeNationalEyeInstitute,NationalInstitutesofHealth 44
  38. 38. Santiago Bustelo •IxDA BA • UX para la enseñanza del Diseño Cuando el color no comunica “Nunca usar color como único elemento de significado. Emplearlo para reforzar mensaje transmitido por texto, imagen o posición (ej. luces del semáforo). “Empezar el diseño como wireframe o en blanco y negro, y agregar color después. “Emplear colores fáciles de distinguir (separados en HSL/HSV, manteniendo buen contraste contra el fondo; no emplear colores adyacentes, sino tríadas o complementarios). “En documentación y ayudas, identificar elementos de la interfaz por nombre, no por color. Microsoft Dev Center: Color • Emplear contraste entre texto y fondo conforme especificaciones de contraste WCAG 2 (herramientas disponibles). 45
  39. 39. Santiago Bustelo •IxDA BA • UX para la enseñanza del Diseño • Instrucción • Formación de hábitos • Operación • Selección • Percepción Principios de percepción: Memoria de
 “Corto plazo” 46
  40. 40. IxDA BA • UX para la enseñanza del Diseño Memoria de trabajo o “de corto plazo” (Baddeley & Hitch, 1974, 2000) 47Santiago Bustelo • Ejecutivo
 Central Bucle
 fonológico Agenda visoespacial Almacén episódico Lenguaje
 Semántica
 visual
 Memoria episódica de corto plazo Información sensorial Memoria sensorial Decaimiento Atención Simply Psychology: Working Memory Wikipedia:
 Memoria de trabajo
  41. 41. IxDA BA • UX para la enseñanza del Diseño Límite del Bucle fonológico como sistema autónomo 48Santiago Bustelo • 2”aprox.
  42. 42. IxDA BA • UX para la enseñanza del Diseño ¿Cuántas figuras podemos
 contar de un vistazo? 49Santiago Bustelo •
  43. 43. IxDA BA • UX para la enseñanza del Diseño ¿Cuántas figuras podemos
 contar de un vistazo? 50Santiago Bustelo •
  44. 44. IxDA BA • UX para la enseñanza del Diseño ¿Cuántas figuras podemos
 contar de un vistazo? 51Santiago Bustelo •
  45. 45. IxDA BA • UX para la enseñanza del Diseño ¿Cuántas figuras podemos
 contar de un vistazo? 52Santiago Bustelo •
  46. 46. Aplicación
  47. 47. Aplicación
  48. 48. Santiago Bustelo •IxDA BA • UX para la enseñanza del Diseño • Instrucción • Formación de hábitos • Operación • Selección • Percepción Principios de percepción: Gestalt 55
  49. 49. IxDA BA • UX para la enseñanza del Diseño De un vistazo… 
 ¿cómo clasificamos estas figuras? 56Santiago Bustelo •
  50. 50. IxDA BA • UX para la enseñanza del Diseño De un vistazo… 
 ¿cómo clasificamos estas figuras? 57Santiago Bustelo •
  51. 51. IxDA BA • UX para la enseñanza del Diseño De un vistazo… 
 ¿cómo clasificamos estas figuras? 58Santiago Bustelo •
  52. 52. IxDA BA • UX para la enseñanza del Diseño ¿Y ahora? ¿Cómo clasificamos estas figuras? 59Santiago Bustelo •
  53. 53. Santiago Bustelo •IxDA BA • UX para la enseñanza del Diseño Gestalt: Principio de unidad Los objetos encerrados son percibidos como un grupo 60
  54. 54. IxDA BA • UX para la enseñanza del Diseño El lenguaje visual no escala infinitamente 61Santiago Bustelo •
  55. 55. IxDA BA • UX para la enseñanza del Diseño 1 + 1 = 3 o más 62Santiago Bustelo • La actividad visual suplementaria es
 no-información, ruido, y recarga. (Edward Tufte, The Visual display of Quantitive Information)
  56. 56. IxDA BA • UX para la enseñanza del Diseño Aplicación 63Santiago Bustelo • I II III IV x y x y x y x y 100 804 100 914 100 746 80 658 80 695 80 814 80 677 80 576 130 758 130 874 130 1,274 80 771 90 881 90 877 90 711 80 884 110 833 110 926 110 781 80 847 140 996 140 810 140 884 80 704 60 724 60 613 60 608 80 525 40 426 40 310 40 539 190 1,250 120 1,084 120 913 120 815 80 556 70 482 70 726 70 642 80 791 50 568 50 474 50 573 80 689 I II III IV x y x y x y x y 100 804 100 914 100 746 80 658 80 695 80 814 80 677 80 576 130 758 130 874 130 1,274 80 771 90 881 90 877 90 711 80 884 110 833 110 926 110 781 80 847 140 996 140 810 140 884 80 704 60 724 60 613 60 608 80 525 40 426 40 310 40 539 190 1,250 120 1,084 120 913 120 815 80 556 70 482 70 726 70 642 80 791 50 568 50 474 50 573 80 689 vs.
  57. 57. IxDA BA • UX para la enseñanza del Diseño Aplicación 64Santiago Bustelo • vs.
  58. 58. IxDA BA • UX para la enseñanza del Diseño Aplicación 65Santiago Bustelo • Don Quijote de la Mancha Don Quijote de la Mancha1 es una novela escrita por el español Miguel de Cervantes Saavedra. Publicada su primera parte con el título de El ingenioso hidalgo don Quijote de la Mancha a comienzos de 1605, es la obra más destacada de la literatura española yuniversal, además de ser la más publicada y traducida de la historia después de la Biblia. Su segunda parte apareció en 1615 con el título de El ingenioso caballero don Quijote de la Mancha. Es la primera obra genuinamente desmitificadora de la tradición caballeresca y cortés por su tratamiento burlesco. Representa la primera novela moderna y la primera polifónica; como tal, ejerció un enorme influjo en toda la narrativa europea. Por considerarse «el mejor trabajo literario jamás escrito», encabezó la lista de las mejores obras literarias de la historia, que se estableció con las votaciones de cien grandes escritores de 54 nacionalidades a petición del Club Noruego del Libro en el 2002; así, fue la única excepción en el estricto orden alfabético que se había dispuesto.3 vs. Don Quijote de la Mancha Don Quijote de la Mancha1 es una novela escrita por el español Miguel de Cervantes Saavedra. Publicada su primera parte con el título de El ingenioso hidalgo don Quijote de la Mancha a comienzos de 1605, es la obra más destacada de la literatura española yuniversal, además de ser la más publicada y traducida de la historia después de la Biblia. Su segunda parte apareció en 1615 con el título de El ingenioso caballero don Quijote de la Mancha. Es la primera obra genuinamente desmitificadora de la tradición caballeresca y cortés por su tratamiento burlesco. Representa la primera novela moderna y la primera polifónica; como tal, ejerció un enorme influjo en toda la narrativa europea. Por considerarse «el mejor trabajo literario jamás escrito», encabezó la lista de las mejores obras literarias de la historia, que se estableció con las votaciones de cien grandes escritores de 54 nacionalidades a petición del Club Noruego del Libro en el 2002; así, fue la única excepción en el estricto orden alfabético que se había dispuesto. https://es.wikipedia.org/wiki/ Don_Quijote_de_la_Mancha
  59. 59. Santiago Bustelo •IxDA BA • UX para la enseñanza del Diseño • Instrucción • Formación de hábitos • Operación • Selección • Percepción Principios de Selección 66
  60. 60. Santiago Bustelo •IxDA BA • UX para la enseñanza del Diseño Principio de priorización: Ley de Pareto El 80% de los resultados proviene del 20% de los elementos. 67
  61. 61. Santiago Bustelo •IxDA BA • UX para la enseñanza del Diseño Ley de Hick-Hyman Tiempo necesario para tomar una decisión:
 T = a + b log2 ( n +1 ) • a, b: latencia y velocidad,
 dependientes del contexto.
 Raskin: a falta de datos, tomamos a=50, b=150 msec. • n: cantidad de opciones
 con igual índice de probabilidad. 
 Más información:
 Artículo en Wikipedia sobre Ley de Hick (en inglés) 68
  62. 62. Santiago Bustelo •IxDA BA • UX para la enseñanza del Diseño Aplicación de Ley de Hick Tenemos 32 items con igual probabilidad. ¿Cómo nos conviene disponerlos?
 a) Una sola página con 32 items b) 4 páginas con 8 items cada una 69 T = a + b log2 ( n +1 ) x log2 x 1 0 2 1 3 1.58 4 2 5 2.32 6 2.58 7 2.81 8 3 9 3.17 10 3.32 11 3.46 x log2 x 12 3.58 13 3.7 14 3.81 15 3.91 16 4 17 4.09 18 4.17 19 4.25 20 4.32 21 4.39 22 4.46 x log2 x 23 4.52 24 4.58 25 4.64 26 4.7 27 4.75 28 4.81 29 4.86 30 4.91 31 4.95 32 5 33 5.04
  63. 63. Santiago Bustelo •IxDA BA • UX para la enseñanza del Diseño Aplicación de Ley de Hick Tenemos 32 items con igual probabilidad. ¿Cómo nos conviene disponerlos?
 a)Una sola página con 32 items 50 + 150 log2 (32 + 1) = 806,6 ms. b)4 páginas con 8 items cada una 50 + 150 log2 (8 + 1) = 525,48 ms. cada pantalla
 x 4 = 2101,92 ms. 70
  64. 64. IxDA BA • UX para la enseñanza del Diseño Windows 3.1: un solo plano de decisión 71Santiago Bustelo •
  65. 65. IxDA BA • UX para la enseñanza del Diseño Windows 95: Jerarquías 72Santiago Bustelo •
  66. 66. IxDA BA • UX para la enseñanza del Diseño Windows 95: Jerarquías 73Santiago Bustelo •
  67. 67. IxDA BA • UX para la enseñanza del Diseño Windows 95: Jerarquías 74Santiago Bustelo •
  68. 68. IxDA BA • UX para la enseñanza del Diseño Windows 95: Jerarquías 75Santiago Bustelo •
  69. 69. IxDA BA • UX para la enseñanza del Diseño Windows 95: Jerarquías 76Santiago Bustelo •
  70. 70. Mientras tanto, en el escritorio…
  71. 71. Proceso de Diseño
  72. 72. Santiago Bustelo •IxDA BA • UX para la enseñanza del Diseño Criterios • Diseño Centrado en Objetivos • ¿Qué problema queremos resolver? • ¿A quién? • ¿Cómo sabremos si lo logramos? • Usabilidad • Diseñador y Cliente no son representativos • Los Usuarios tienen información valiosa para el diseño • Foco real en las personas, no en artefactos y herramientas.
 Individuos en lugar de sistemas. • Investigación es indispensable para informar y evaluar. • Diversidad • Contextos de Uso • Accesibilidad 79
  73. 73. IxDA BA • UX para la enseñanza del Diseño Caso: seguridad vial en Alberta, Canada Problema: lesiones y muertes relacionadas con accidentes de tránsito Objective: cambio de conducta Preguntas: • ¿Quién necesita cambiar un comportamiento peligroso? • ¿Qué comportamiento es ése? • ¿Cómo podemos lograr que ese segmento considere realizar ese cambio? Design research: • Investigación cualitativa • Investigación cuantitativa Decisiones de diseño: • Enfocar la comunicación en el daño que puede causar a otros quien se siente omnipotente frente al volante. Jorge Frascara (Buenos Aires, Argentina, 1939). Profesor Emérito en la Universidad de Alberta, asesor a la ISO (International Standards Organization). Frascara, Jorge, Finn, Adam, Jenzen, Henri L., Paterson, John G. and Strickler-Wilson, Zoe (1992) Traffic Safety in Alberta/ Casualty Collision and the 18-24 Year Old Male Driver: Criteria for a Targeted Communication Campaign, Edmonton: Alberta Motor Association/Alberta Solicitor General.
  74. 74. Santiago Bustelo •IxDA BA • UX para la enseñanza del Diseño Proceso lineal 1. Definición de requerimientos. 2. Diseño y desarrollo a nivel de producción. 3. Entrega. 81
  75. 75. Santiago Bustelo •IxDA BA • UX para la enseñanza del Diseño Proceso lineal interminable 1. Definición de requerimientos
 (cómo se cree que se resolverá el problema). 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 necesitaba,
 retrocede tres casilleros. 5. Se repite hasta el hartazgo de una
 o ambas partes. 82 Ouch Ouch Arrgh
  76. 76. Santiago Bustelo •IxDA BA • UX para la enseñanza del Diseño Entender el tipo de problema 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. 83
  77. 77. Santiago Bustelo •IxDA BA • UX para la enseñanza del Diseño Proceso convergente 1. Objetivos y análisis inicial. 2. Diseño y desarrollo en iteraciones
 avanzando y validando progresivamente
 aspectos del producto, de general a particular. 3. Entrega. 84
  78. 78. Santiago Bustelo •IxDA BA • UX para la enseñanza del Diseño Objetivos
 Requerimientos • ¿Por qué y para qué estamos haciendo este proyecto? • Foco en los problemas a resolver, no en funcionalidades ni en soluciones. • Enmarcan decisiones de diseño. • ¿Qué vamos a hacer?
 • Describen funcionalidades o atributos visibles de una solución propuesta.
 • Enmarcan ejecución de diseño. 85
  79. 79. Si pedimos requerimientos a los clientes… Maurizio Pesce, Elon Musk, Tesla Factory in Fremont - CC BY 2.0 Estoy empezando una empresa de autos de lujo… Me gustaría un logo clásico… Algo como Mercedes-Benz…
  80. 80. IxDA BA • UX para la enseñanza del Diseño …pueden terminar obteniendo lo que pidieron 87Santiago Bustelo • Musk Motors Re: Logo Hola Elon, Adjunto el logo basado en tus especificaciones. Te mando la factura en mail aparte. xoxo
  81. 81. Los requerimientos de diseño
 son producto de un proceso de diseño Reid Parham, Giraffe Project Standards Manual - CC BY-SA 3.0
  82. 82. IxDA BA • UX para la enseñanza del Diseño Design Thinking: 5 Etapas 89Santiago Bustelo •
  83. 83. IxDA BA • UX para la enseñanza del Diseño Doble Diamante 90Santiago Bustelo • Exploración Síntesis Ideación Prototipado Divergir en necesidades Divergir en ideas Converger en oportunidades Converger en soluciones
  84. 84. IxDA BA • UX para la enseñanza del Diseño Lean (metodologías ágiles): Proceso iterativo 91Santiago Bustelo • Ideas ProductoDatos EJECUTAR MEDIR,
 OBSERVAR IDEAR,
 DECIDIR
  85. 85. Santiago Bustelo •IxDA BA • UX para la enseñanza del Diseño Lean software development: filosofía de reducir el desperdicio • Sobreproducción: Funcionalidad no usada, entrega de productos de bajo valor • Espera: Demoras en el proceso • Transporte innecesario: Pases de manos, falta de acceso remoto • Sobreprocesamiento: Documentación exhaustiva • Inventario: Recursos no empleados • Movimiento innecesario: Task Switching, apagar incendios • Defectos: requerimientos no cumplidos, bugs • Creatividad / conocimiento desperdiciados Richard Durnall: Waste / Muda,
 Eric Harris: Lean in IT,
 Wikipedia: Lean_IT 92
  86. 86. IxDA BA • UX para la enseñanza del Diseño Gestión de Proyectos: triple restricción 93Santiago Bustelo • COSTO TIEMPO ALCANCE Lo que el equipo se compromete a lograr Recursos y esfuerzo que deben ser aplicados o asignados Tiempo calendario requerido para completar todas las tareasCalidad
  87. 87. IxDA BA • UX para la enseñanza del Diseño No se puede tocar una variable sola… 94Santiago Bustelo • TIEMPO COSTO ALCANCE extensión de alcance Calidad
  88. 88. IxDA BA • UX para la enseñanza del Diseño …a menos que estiremos creativamente… 95Santiago Bustelo • TIEMPO COSTO ALCANCE Calidad
  89. 89. IxDA BA • UX para la enseñanza del Diseño …y tengamos la suerte de que nadie lo note 96Santiago Bustelo • Gestión del proyecto: • Andamiaje, soporte • Observar la triple restricción durante la duración del proyecto – = Calidad perdida TIEMPO COSTO ALCANCE Calidad
  90. 90. IxDA BA • UX para la enseñanza del Diseño Gestión de Proyectos: Roles elementales 97Santiago Bustelo • Requerimientos Entregables Cliente Desarrollador Diseñador Contenidista
  91. 91. IxDA BA • UX para la enseñanza del Diseño …y la forma en que suelen escalar 98Santiago Bustelo • “Esa manga de inútiles”“Esos cretinos”
  92. 92. IxDA BA • UX para la enseñanza del Diseño Interlocutores para mantener la cordura 99Santiago Bustelo • Interlocutor del equipo Desarrolladores Diseñadores Contenidistas Requerimientos Entregables Interlocutor del cliente Stakeholders Sponsors
  93. 93. Herramientas de relevamiento, validación y
 co-creación
  94. 94. IxDA BA • UX para la enseñanza del Diseño UX Research Evaluación experta Este tipo de análisis permite encontrar problemas de alto nivel en términos de transgresión o falta de seguimiento de las reglas fundamentales de diseño. • Caminata cognitiva: se recorre la interfaz simulando el punto de vista del usuario, generando hipótesis sobre puntos a observar. • Evaluación heurística: Se examina la interfaz y se evalúa su cumplimiento de principios de usabilidad (la “heurística”). • El análisis se hace en base a heurísticas y checklists de diseño. Where am I? What can I do? Clear purpose Transparent well lay-outed Call for action Display of status Goal oriented and task driven Sequencing of actions Error tolerant and robust Structure o Users are told the purpose of the scre Help users to navigate. Use Signposts Direct: Where there is output, let there human vocabulary is used; talk to peo Aestetically pleasing Graphically, attention is directed to w Simple lay-out, organized with visua Constraints are used;constructive g Correct mapping of displayed funct Tell/make predictable next steps; Goals are achieved with the leas Frequently used functions are d The tool/interface is not overw It is forgiving. Every one make It empowers the user. The us Consistent, consistent, cons What looks the same acts t hort-term Feedback is informative, yielding c Tell users what is happening; keep The visual structure applied matc ANALYZE ert
  95. 95. IxDA BA • UX para la enseñanza del Diseño UX Research Entrevistas cualitativas Permiten validar los “pain points”, la necesidad de alternativas, y desarrollar primeras hipótesis. • Actividad clave para entender las tareas y motivaciones del mercado objetivo. • Las entrevistas pueden ser formales, informales o contextuales, según las necesidades. • Se puede combinar con otras técnicas, tales como pruebas de usabilidad, sacando el mayor partido de la muestra. Entrevistas cualitativas en Wayra: ¿Cómo viven los procesos en los que se inserta el producto?
  96. 96. IxDA BA • UX para la enseñanza del Diseño UX Research Pruebas de Usabilidad y Prototipos Permiten evaluar decisiones de diseño con productos existentes o con prototipos económicos, bajando costos y riesgos del proyecto. • Son pruebas rápidas, de bajo costo y alto impacto. • Se observa la conducta antes que la opinón, obteniendo métricas de usabilidad. • Testear con tan sólo 5 usuarios por iteración, revela el 80% de los problemas de usabilidad latentes en el producto. Pruebas de usabilidad: 
 Prototipos en papel
  97. 97. IxDA BA • UX para la enseñanza del Diseño UX Research Arquetipos (Personas) Permiten alinear decisiones estratégicas, de diseño y funcionales. • Síntesis de entrevistas cualitativas y/o relevamiento contextual. • Foco en necesidades y actividades. • Segmentación del mercado objetivo por modelos mentales, características actitudinales y conductuales. Foto zpeckler (CC) “Cuando éramos chicos, mi hermano se lastimó. Lo vendé tan bien, que no tuvieron que darle puntos”. Adrián, estudiante • Dicen que nació para médico. el “miedo a los libros”. Descubr tiempo que los ve en la pantall • Un niño por cada aula puede te ese niño. Junto con dislexia, le genera g • Las páginas muy “cargadas” o • Agradece que Google entienda • Los sitios que prefiere Pablo, n presión. Foto zpeckler (CC) “¡Tenemos uno muy bueno… en oferta!” Claudio, Represen • Siempre tuvo facilida vendedores en el se • Perdió la vista en un rehabilitación. Apren enseñó a sus compa permiten trabajar má • Como Claudio no pu negocia con un clien Los clientes se sient • Los sitios que Claud todas las imágenes, Modelo de Personas para accesibilidad:
 ¿Qué dificultades encuentran en su vida cotidiana personas con discapacidades, y cómo las superan?
  98. 98. IxDA BA • UX para la enseñanza del Diseño Mapas de empatía 105Santiago Bustelo • Paul Boag: Adapting empathy maps for UX design
  99. 99. IxDA BA • UX para la enseñanza del Diseño UX Research, Design Thinking Journey Map 106Santiago Bustelo • Katie Shelly: Mindsets, Tools and Terminology of Experience Design
  100. 100. IxDA BA • UX para la enseñanza del Diseño UX Research, Design Thinking Mapeo conceptual Organización y visualización de datos relevados para encontrar patrones y generar insights. • Trabajo sobre dos o más dimensiones:
 X/Y, columnas, áreas (ej. categorías, diagramas de Venn), colores, pilas (ej. agrupar tarjetas por sinónimos). • Dinámicas de trabajo contemplando actividades individuales y grupales, sin caer en “groupthink”. Mapeo conceptual: Diagrama de Afinidad en Universidad Maimónides
  101. 101. IxDA BA • UX para la enseñanza del Diseño Santiago Bustelo • 108 Katie Shelly: Mindsets, Tools and Terminology of Experience DesignUX Research, Design Thinking Co-Creación
  102. 102. Santiago Bustelo •IxDA BA • UX para la enseñanza del Diseño UX Research Pruebas A/B • Se sirven alternativamente dos o más versiones a visitantes de un sitio, y se miden y comparan las conversiones de cada versión. • Todas las versiones deben ser funcionales, impactando en mayor costo para realizar las pruebas. • Requiere de rigor estadístico (en ocasiones, opuesto a la intuición) para interpretar los resultados. 109
  103. 103. IxDA BA • UX para la enseñanza del Diseño UX Research Pruebas A/B 110Santiago Bustelo • ¿Cuál ganó?
  104. 104. Santiago Bustelo •IxDA BA • UX para la enseñanza del Diseño UX Research Pruebas A/B • Version A increased homepage clicks by 20% and increased revenue per visitor (RPV) by 5.47%. • WTW visitors voted:
 Version A (48%), B (52%) Which Test Won: Dell’s Home Page Test Results 111
  105. 105. Qué información presentamos y cómo,
 impacta en la capacidad de toma de decisiones
  106. 106. Diseñar para el comportamiento
  107. 107. Conclusiones • No hay Experiencia de Usuario sin usuarios. • Los problemas de que no identifiquemos y resolvamos dentro de nuestro proceso, los encontrarán nuestros usuarios. • Todos los involucrados impactan en la UX, no sólo el diseñador. • Extender el proceso de Diseño: entender qué problema queremos resolver, a quién, y cómo sabremos si lo logramos. • Extender el alcance del Diseñador: de ejecución a orquestación. 114Santiago Bustelo •IxDA BA • UX para la enseñanza del Diseño
  108. 108. Práctica de taller
 Mapeo y debate: qué y cómo aplicar a la enseñanza del Diseño
  109. 109. B U E N O S A I R E S ixda.com.ar

×