El documento explora la arquitectura de la comunicación y la experiencia de usuario en el diseño de sistemas de información, destacando la importancia de la usabilidad y la interacción centrada en el usuario. También enfatiza la necesidad de entender las necesidades de los usuarios y el impacto de la arquitectura de información en la confianza del usuario. Se presentan métodos de investigación y diseño, así como conceptos claves sobre teoría de la comunicación y análisis contextual.

1. Arquitectura de la Comunicación: Sistemas de Información para la Comunicación Humana Javier Velasco M. [email_address]

2. Temario Conceptos Generales Teoría de la Comunicación Proceso de Diseño Estrategia Arquitectura de Información Diseño de Interacción Diseño de Información

3. Conceptos Generales

4. Experiencia de Usuario

5. Problema Tecnología “ Los productos tecnológicos que no funcionan de la manera que las personas esperan las hace sentir estúpidas – aun cuando efectivamente hayan logrado lo que se propusieron.” Jesse James Garett (2002)

6. Diseño de la Experiencia de Usuario 1 Ejemplo industria automotriz © Porsche A.G. 2002

8. Elementos de la Experiencia de Usuario Jesse James Garrett 2000, 2002 Web como Interfaz de Software Web como Sistema de Hipertexto

9. Diseño de Experiencia de Usuario Peter Morville 2004

10. Estudio de Compra Entusiasta Jared Spool – UIE 2005 Cuando la gente está confiada, actúa con mayor entusiasmo. La Arquitectura de Información afecta el nivel de confianza, en ambas direcciones.

11. Louis Rosenfeld y Peter Morville (2002) Investigación Investigación antecedentes Reuniones y presentaciones Reuniones directorio Evaluación tecnología Evaluación heuristica Analsis contenido y metadata Mapeo de contenido Análisis competencia Análisis de Logs Casos de uso y personas Investigación contextual Entrevistas y pruebas a usuarios Contexto Contenido Usuarios

12. Accesibilidad Facilita lectura universal P ermite lectura maquinas Foto: David Foster Nass

13. Cómo evaluar la Experiencia de Usuario Usabilidad (de una aplicación) se refiere a la efectividad, eficiencia y satisfacción con la cual usuarios específicos pueden alcanzar metas específicas en ambientes particulares . Efectividad : La medida en la cual los usuarios pueden alcanzar sus metas de tareas. Eficiencia : Mide los recursos usados para realizar la tarea. Satisfacción : Mide la reacción afectiva de los usuarios respecto a la aplicación. ISO   

14. Copyright 2004 Steve Krug God is My [VCR] Co-pilot

15. Arquitectura de Información y Usabilidad, un modelo c íclico Baeza-Yates & Velasco 2004

16. Jess McMullin + Lou Rosenfeld

17. Teor ía de la Comunicación

18. Internet, el nuevo medio

19. Internet: Herramienta de Comunicaci ón Internet nace como herramienta de comunicación Le evolución del diseño Web se aleja de esta noción La evolución del tráfico en Internet demuestra que la comunicación es la actividad primordial para su uso

20. La comunicaci ó n es la base de Internet Similarly, the two fundamental principles of our current work are: Human beings appropriate technology for human ends. The Intenet is at its best when connecting people. Steward Buterfield, 2003

21. Claude Shannon, 1948 Teoría de la Comunicación: Teoría de la Información Emisor – Mensaje – Canal – Receptor – Efecto – Retroalimentación Teoría de la Información

22. Paul Watzlawick & Palo Alto Group, 1960s Teoría de la Comunicación: Modelo Interaccional Axioma 1: No podemos no comunicar

23. … al clasificar “ Guerra de Irak” Sociedad > Conflictos Internacionales > Terrorismo > Guerra al Terrror Economía > Combustibles > Petróleo Arquitectura de Información: No podemos no comunicar

24. Diseño de Interacción: No podemos no comunicar

25. Paul Watzlawick & Palo Alto Group, 1960s Teoria de la Comunicación: Modelo Interaccional Axioma 3: Communicación = Contenido + Relación

26. Humberto Maturana & Francisco Varela, 1970s Teoría de la Comunicación: Biología del Conocimiento Communicación = Coordinación de Conducta

27. Arquitectura de Información: Coordinación de Conducta Webs Corporativos e Institucionales Communidades Software Social

28. Redes Sociales Grafo de Red Explicación general Redes sociales como parte de la vida Como herramienta de ciencias sociales

29. by: soldierant

30. Links en Blogs Noor Ali-Hasan and Lada Adamic, 2007

31. Interconexión en Blogs Noor Ali-Hasan and Lada Adamic, 2007

32. Blogs: H vs. M, Fechas Hugo Liu and Rada Mihalcea, 2007

33. Blogs: H vs. M, pronombres Hugo Liu and Rada Mihalcea, 2007

34. Proceso de Diseño Centrado en el Usuario Estrategia

35. Dise ño Centrado en el Usuario Adivinar lo que quieren las personas y construir un sitio para ellos es caro ; si adivinas mal, hay que volver a hacerlo todo . Christina Wodtke 2002

36. Dise ño Centrado en el Usuario Los pasos básicos son: Averigua para quién es el sitio. Habla con esas personas. Diseña el sitio para ellos. Prueba un prototipo del sitio con ellos. Cambia el diseño de acuerdo a lo aprendido. Prueba el sitio final con ellos. Christina Wodtke

37. Dos fuentes de necesidades Accionistas Deben satisfacer sus necesidades organizacionales Potenciar el negocio Conocer a sus clientes Usuarios Debe satisfacer sus necesidades Cumplir su meta No sentirse tonto Resguardar su privacidad El diseñador debe lograr el balance

38. Estrategia Necesidades de Accionistas Buscamos Metas Motivaciones Mecanismos de evaluación Métodos de Investigación Entrevistas Entrevista contextual

39. Entrevistando Accionistas Hay que llegar a quien toma las decisiones, y hacerlo participar. Descubrir las razones para el nuevo proyecto. “ Quiero lucirme con el directorio” Cuál es el problema a resolver. ¿Cuáles son tus 5 mayores problemas? Cómo será evaluado.

40. Análisis Comparativo x x x Radio 4 x x Radio 3 x x x Radio 2 x x x Radio 1 x x x x Mi Radio Directorio Blog Contacto Programacion

41. Análisis FODA Herramienta del Márketing Mi producto, organización, o marca Fortalezas Debilidades Mi mercado Oportunidades Amenazas

42. Mapa de Posicionamiento www.marketingteacher.com

43. Mapa de Posicionamiento Ejercicio: Hacer un mapa de posicionamiento de 5 estados mexicanos. Seleccionar ejes en base a las percepciones más populares.

44. Estrategia Necesidades de Usuarios Buscamos Metas Lenguaje Hábitos Métodos de Investigación Entrevistas Focus Group Entrevista contextual Estudio etnográfico

45. Entrevistando Pregunta tus preguntas Se neutral. Ten preguntas de seguimiento listas. Recuerda que no eres un científico. Estás acá como diseñador, tratando de averiguar el modelo mental que tiene la gente para el mundo que vas a diseñar. Escribe lo que aprendiste Busca patrones. Piensa en forma crítica. Christina Wodtke (2002)

46. Entrevistas Efectivas Si le preguntas a alguien “¿Es este sitio fácil de usar?” hay una gran probabilidad que te responda: “ Seguro”, y luego habrás diseñado un sitio que funciona de la misma forma que tu competidor. Si les preguntas “En una escala del uno al cinco, en la que uno es fácil de usar y cinco es difícil de usar, ¿Cómo describirías este sitio?” estás escondiendo tu opinión y además los haces pensar un poco antes de responder. “ Bueno… yo creo que un tres. Siempre puedo encontrar lo que busco, pero cada vez que compro tengo que llenar los formularios nuevamente, es una lata.” Christina Wodtke (2002)

47. Entrevistas Efectivas Neutral Sondeo Precisión Christina Wodtke (2002)

48. Entrevista Neutral Pretende ser un siquiatra. Sé cortes e interesado, no social y hablador. Otros consejos: No reveles tu opinión. No te pongas impaciente. Pierde la importancia. Christina Wodtke (2002)

49. Sondeo Efectivo La clave para una entrevista efectiva es mantener a la persona hablando del tema. Haz sonidos motivantes pero neutros. Usa sonidos tipo “aha”, “hmm” ó “oh” Usa tus preguntas de seguimiento. Por ejemplo, pregunta: “¿Me puedes contar más sobre eso?” Usa frases incompletas. “ Entonces, lo que querías lograr era…” Recupera a la gente cuando derivan del tema. “ Sí, eso puede ser muy frustrante, pero en realidad lo que quiero es que me hables sobre este producto”. Christina Wodtke (2002)

50. Entrevistas Precisas La meta de estas entrevistas es obtener la mayor cantidad posible de información sobre el entrevistado – no lo que piensan de ellos mismos , sino lo que realmente necesitan y hacen. No hagas preguntas de diseño. Haz que la gente te muestre en vez de contarte lo más posible. Graba lo que oyes y ves. Christina Wodtke (2002)

51. Necesidades Usuarios: Entrevista Tipo ¿Qué otros sitios visitas? ¿Cómo usas este tipo de producto? ¿Usas productos de la competencia? ¿Te interesa algún tipo de herramienta en particular? ¿Usas la versión no-web del producto? Christina Wodtke (2002) Christina Wodtke (2002)

52. Investigación Contextual Entrevista se desarrolla en ambiente natural del sujeto Permite observar las sutilezas del ambiente y actividad cotidiana Ej.: Frecuencia de llamados por telefono Ver c ómo la persona ejecuta las tareas y cuáles son sus dificultades Cómo alterna el software con elementos físicos

53. Personajes Javier Tu Mike Will Peter - - - - - - Lou - - - - - - Claudia - - - - - - http://www.iawiki.net/action=browse&id=PersonaDesign&oldid=PersonasDesign

54. Diseñando tus personajes Los personajes son arquetipos de usuario usados para guiar las decisiones de funcionalidades, navegación, interacción e incluso diseño visual Se documentan en descripciones de 1-2 páginas que incluyen patrones de conducta, metas, habilidades, actitudes y ambiente con algunos detalles personales para darle vida Los personajes representan patrones de conducta , no cargos de trabajo Kim Goodwin (2001)

55. Personaje: Claudia escribe comunicados de prensa y los organiza para su distribución en forma impresa. También adapta comunicados de prensa para publicación en el sitio de la compañía, pero alguien más los publica. Parte del Escenario: Claudia pega un texto desde un documento Word, y escribe un párrafo adicional. Agrega algunos titulares y lo lee. Quiere estar segura de que sea preciso, así que revisa la ortografía. Cuando el documento está listo, lo envía a su jefe para aprobación. Adaptado de Dona Maurer (2002) “ Me gustaría poder publicar todo yo misma, pero no sé cómo hacerlo” Claudia Silva Relacionadora Pública 36 Años Vive en Ñuñoa con su hija de 5 años Trabaja hace 4 años en una oficina ministerial, encargada de eventos y difusión.

56. Diseña un sitio para la gente Ahora, analiza las entrevistas, buscando temas recurrentes . Busca especialmente problemas que surgen repetidamente, el lenguaje que la gente usa para describir el contenido y las acciones , y pistas acerca de cómo piensan sobre el tema en cuestión . Christina Wodtke (2002)

57. Y luego, pruébalo: Prueba un prototipo del sitio con los usuarios potenciales: Preparar la prueba del prototipo… Evaluar el prototipo… Realizar la prueba con el prototipo… Analizar los resultados de la prueba… Probar el sitio final con los usuarios. Christina Wodtke (2002)

58. Elementos en una Estrategia de Proyecto Web Definición de Objetivos Generales Específicos Análisis Benchmarking Posicionamiento Foda Audiencia Segmentación por tipos Descripción de los tipos de audiencia en relación con el proyecto Estrategia Desarrollar y publciar estrategia explícita

59. Proceso de Diseño Centrado en el Usuario Arquitectura de Información

60. Evolución de sistemas de organización Louis Rosenfeld Peter Morville (2000)

61. Esquemas de organización Exactos Alfabético Cronológico Geográfico Ambiguos Tema o materia Tarea Audiencia Metáfora Híbridos Audiencia de hoy Estudiantes Informáticos Bibliotecólogos Diseñadores Periodistas Profesionales Informáticos Bibliotecólogos Diseñadores Periodistas Audiencia de hoy Informáticos Bibliotecólogos Diseñadores Periodistas Estudiantes Profesionales Estudiantes Profesionales Estudiantes Profesionales Estudiantes Profesionales

62. Ejercicio de Card Sorting La silla musical Agrupar las sillas en conjuntos Dar un nombre a cada grupo

63. Esquemas de Clasificación Taxonomía Organización Jerárquica de conceptos Origen en la biología Construyendo una taxonomía Revisión del contenido o elementos a organizar Explorar expectativas de crecimiento Elaborar cada tema con su especialista

64. Esquemas de organización Polijerarquía Ciencias – Física – Física Teórica – Nicanor Parra Artes – Literatura – Poesía – Nicanor Parra Clasificación facetada Ontologías Peter Morville 1,656,824 Combinaciones Totales 824 Términos Totales 6 Evaluacion (Ratings) 6 Precio 750 Vi ña 16 Region 46 Tipo # Términos en Vocab. Faceta

65. Clasificación Facetada Epicurious.com www.epicurious.com

66. Vocabularios controlados, taxonomía y tesauros Louis Rosenfeld y Peter Morville “ Al incorporar sinónimos, la recuperación de resultados pasó de 20% a 80%” “ La mayoría de las quejas que recibimos se debe a la manera en la que las personas buscan; usan las palabras equivocadas.” Furnas et al, 1987 Forrester Research

67. Tesauros Relaciones Semánticas Equivalencia Jerárquica Asociativa ( Relacionado ) Pehuenche ( Específico ) Piñón ( Genérico) Arboles Nativos De Chile ( Variante ) Araucaria araucana ( Relacionado ) Parque Nacional Conguillío ( Variante ) Pehuén ( Preferido ) Araucaria

68. Metadata Descriptiva : Metadata acerca de la naturaleza del objeto. Es la más importante para nuestros propósitos y las más usada en la web. ¿es ficción o un hecho? ¿es un artículo? ¿cuál es el tema? ¿cuáles son los temas relacionados? Intrínseca : Metadata acerca de la composición del objeto. ¿es un documento de Word? ¿es de 20KB? ¿es un archivo zip? ¿nombre de archivo? Administrativa : Metadata acerca de la forma en la cual el objeto debe ser manipulado . ¿es una cosa temporal? ¿debe ser archivado? ¿quién es el editor? ¿ha sido aprobado para su publicación? Christina Wodtke (2002)

69. Metadata Aplicada

70. Metadatos Cómo obtenerlos Expertos Tradicionalmente los metadatos son generados por un equipo de catalogadores expertos usando un vocabulario controlado. Alta calidad, alto costo: problemas de crecimiento. No hay conocimiento de los usuarios. Autores Facilita el proceso de creación. No es tan riguroso en el uso del lenguaje. No hay conocimiento de los usuarios. Usuarios : Folksonomies Facilidad de creación. Bajo costo, posibilidades de crecimiento. Ambigüedad en el lenguaje.

71. Comparación Taxonomía Control Autoridad Precisión Jerarquía, clasificación Búsqueda Folksonomía Flexibilidad Simpleza, popularidad Utilidad Plano, categorización Exploración, serendipity

72. Sistemas de Tagging Incentivos a los usuarios Future retrieval Contribution and sharing Attract attention Play and competition Self presentation Opinion expression Marlow et al. (2006)

73. www.flickr.com (yahoo!) http://del.icio.us/ Suggested tagging Suggested tagging

74. www.flickr.com (yahoo!) http://www.flickr.com/ Autor Juego Tags (blind tagging)

75. www.flickr.com (yahoo!) http://www.flickr.com/photos/tags/fun/clusters/

76. Sistemas de Rotulado Un rótulo es un término que representa un trozo mayor de información Textuales / Icónicos / Mixtos Variedades de rótulos Links contextuales Titulares Opciones del Sistema de Navegación Botones de las Aplicaciones Términos de Indexación Sistemas de Rotulado consistentes

77. Documentación: Vocabulario Visual JJG http://www.jjg.net/ia/visvocab/spanish.html Jesse James Garrett

78. Navegación Búsqueda Foto: British Blind Sport

79. Sistemas de Búsqueda Louis Rosenfeld y Peter Morville (2002)

80. Mapa de Sitio © Dynamic Diagrams, Inc.

81. Proceso de Diseño Centrado en el Usuario Diseño de Interacción

82. Interacción: interacción. 1. f. Acción que se ejerce recíprocamente entre dos o más objetos, agentes, fuerzas, funciones, etc. Real Academia Española ©

83. Interfaz: interfaz. (Del ingl. interface, superficie de contacto). 1. f. Inform. Conexión física y funcional entre dos aparatos o sistemas independientes. Real Academia Española ©

84. Dise ño de Interacción En términos simples, diseño de interacción es la definición y diseño del comportamiento de artefactos, ambientes y sistemas , así como los elementos formales que comunican ese comportamiento. Alan Cooper, 2003

85. Diseño de Interacción

86. Interacción Humano-Computador Computadores Increíblemente rápidos Libres de error Determinísticos Apáticos Literales Secuenciales Predecibles Amorales Estúpidos Humanos Increíblemente lentos Tienden al error Irracionales Emocionales Inferenciales Aleatorios Inpredecibles Éticos Inteligentes Alan Cooper, 1999

87. Metodologías Contextual Design http://www.incent.com/ Rational Unified Process http://en.wikipedia.org/wiki/Rational_Unified_Process Interaction Design (Personas-Scenarios) http://www.evolt.org/article/Practical_Persona_Creation/ IconProcess http://www.iconprocess.com/iconProcess/iconProcess.php eXtreme Programming http://www.extremeprogramming.org/ Usability Engineering Lifecycle http://drdeb.vineyard.net//index.php?loc=11&nloc=1

88. Diseño de Interacción Des aplicado

89. Diseño de Interacción Des aplicado Grabar Imprimir Cerrar

90. Prototipos de Papel

91. Prototipos de Papel Computador Facilitador Usuario Observador www.paperprototyping.com El “computador” resalta el item que el usuario ha seleccionado. Un miembro del equipo de desarrollo observa y toma notas. El facilitador (fuera de imagen) está sentado a la derecha del usuario.

92. Casos de Uso Un Título Los Actores El Propósito La condición inicial La condición terminal Los pasos principales Alternativas Otros casos de uso

93. Análisis de Tareas Convertir metas en tareas Enviar mensaje a Pedro Componer mensaje Enviar mensaje Convertir tareas en pasos Componer mensaje Ingresar dirección de Pedro Ingresar título del mensaje Escribir texto del mensaje Tareas primarias y secundarias Buscar dirección de Pedro en Libreta de Direcciones Corregir ortografía del texto Diseñar flujos para la tarea Pantallas Más en http://www.usabilitynet.org/tools/taskanalysis.htm

94. Análisis de Tareas Convertir metas en tareas Enviar mensaje a Pedro Componer mensaje Enviar mensaje Convertir tareas en pasos Componer mensaje Ingresar dirección de Pedro Ingresar título del mensaje Escribir texto del mensaje Tareas primarias y secundarias Buscar dirección de Pedro en Libreta de Direcciones Corregir ortografía del texto Diseñar flujos para la tarea Pantallas Ejercicio 1: Proceso de pago para librería online. Determinar datos del producto a usar. Datos del cliente necesarios. Flujo de la tarea y datos que serán usados en cada pantalla.

95. Sistemas de Navegación Navegación Global Navegación Local Navegación contextual ¿Dónde estoy? ¿Qué hay cerca? ¿Qué se relaciona con lo que hay aquí? ¿Dónde puedo ir? ¿Dónde puedo ir? ¿Dónde puedo ir? Louis Rosenfeld y Peter Morville (2002)

96. Tipos de Sistemas de Navegación Browser Principales Global Local Contextual Paginación Suplementarios Mapas de sitio Indices Guías

97. Guías para el diseño de sistemas de navegación Navegación que funciona debiera: - Ser fácilmente aprendida - Permanecer consistente - Entregar feedback - Aparecer en contexto - Ofrecer alternativas - Requerir una economía de acción y tiempo - Usar rótulos claros y entendibles - Ser apropiada al propósito del sitio - Apoyar las metas y conductas de los usuarios Jennifer Flemming, 1998

98. Guías para el diseño de sistemas de navegación - Apoyar las metas y conductas de los usuarios - Usa las líneas de visión para mostrar lo que hay adelante - Ser apropiada al propósito del sitio - Entrega capas de información en el mapa - Entrega signos en los puntos de decisión para ayudar a las decisiones de encontrar el camino (wayfinding) - Usar rótulos claros y entendibles - Usa el espacio como un repositorio de conocimiento en evolución - Usa vistas amplias (entrega a los visitantes mapas) - Requerir una economía de acción y tiempo - Personaliza el espacio - No entregues al usuario demasiadas opciones de navegación - Ofrecer alternativas - Cuando en inmersión, usa un mapa tipo “usted está aquí” - Crea regiones de distinto carácter visual - Aparecer en contexto - Usa data de ruta para visualización, dinamismo y corrección de errores - Crea caminos bien estructurados - Entregar feedback - Permite diferentes velocidades de movimiento a través del espacio - Usa hitos para entregar pistas de orientación y locaciones memorables - Permanecer consistente - Usa un modo apropiado de presentación - Crea una identidad para cada locación, diferente de todas las otras - Ser fácilmente aprendida Principios de diseño para un medio computacional Principios de diseño para Wayfinding Navegación que funciona debiera: Designing Navigable Information Spaces, Mark A. Flotz Web Navigation, Jennifer Flemming

101. Interacción + Navegacion Ejercicio: Revisaremos un trámite online en méxico, para su rediseño. Primero la Interacción Definir los elementos en cada paso Luego considerar los elementos de navegación

102. Proceso de Diseño Centrado en el Usuario Diseño de Información

103. Diseño de Información Es un campo y un enfoque que intenta diseñar comunicaciones claras y entendibles mediante el cuidado de la estructura , el contexto y la presentación de los datos y la información. Nathan Shedroff

104. Regla #1: La Web tiene resolución pobre

105. Diseño de Carteles Carreteros Crea una jerarquía visual en cada página Aprovecha las convenciones Descompone las páginas en áreas claramente definidas Haz obvio lo clickeable Minimiza el ruido Steve Krug

106. Diseño de Información ¿Qué? El tema central o propósito de la página debe ser lo más claro ¿Quién? Reclamar la propiedad de una página es básico ¿Dónde? Nunca olvidar la naturaleza internacional del medio ¿Cuándo? Indicar la fecha de publicación, las páginas envejecen luego.

107. Diseño de Interfaces El Tao de la Pagina Principio #1: Simplicidad y Elegancia Principio #2: Proximidad y Relevancia Principio #3: Foco y retroalimentación Principio #4: Una Jerarquía de Importancia, una Jerarquía de Tareas Principio #5: La herramienta Correcta para el Trabajo Correcto Christina Wodtke (2002)

108. Diseño de Información Aplicado http://evolt.org/article/Web_Site_Architecture_101/

109. El Proyecto Estrategia Objetivos Generales Específicos Audiencia Tipificación de grupos Estretegia explicita Alcance Inventario de Contenidos Descripción de Funcionalidades Estructura Mapa Jerárquico Diagrama de Interacción Esqueleto Wireframes

110. Revisión Sitios Mexicanos Si el tiempo lo permite!

111. Temario Conceptos Generales Teoría de la Comunicación Proceso de Diseño Estrategia Arquitectura de Información Diseño de Interacción Diseño de Información

112. ¡Muchas Gracias! Arquitectura de la Comunicación: Sistemas de Información para la Comunicación Humana Javier Velasco M. [email_address]