Arquitectura de la información. Material correspondiente al Seminario de: Diseño y Organización de la Producción, Maestría en Diseño de Aplicaciones Multimedia, Universidad Politécnica de catalunya, España.

1. arquitectura de la información Geni de Vilar [email_address] Máster DAM-UPC - Abril 2004

3. Introducción a la Arquitectura de la Información

4. ¿Qué es la AI? Disciplina emergente basada en Ciencia de la Organiza- ción de la Información Entendimiento humano que define organización de la información navegación etiquetados sistemas de búsqueda en los sistemas de información

16. La relación de la usabilidad con el UCD Adaptado de: Terry Swack, “Experience Design”.

18. Proceso de diseño del site en AI

20. FASE 1: Planificación estratégica

22. FASE 2: Análisis de contenidos y servicios

24. FASE 3: Organización de la información

25. FASE 3: Organización de la información Sistemas de clasificación Estructuras Definir en base a qué atributos vamos a agrupar los contenidos. Definir tipos de relaciones entre los elementos del contenido y los grupos. Se basa en: organización de la información

26. FASE 3: Organización de la información DIFICULTADES Ambigüedad Heterogeneidad Diferencias en las perspectivas Políticas internas El lenguaje es ambiguo Un sitio web tiene objetivos muy distintos. Perspectiva del creador es diferente a perspec-tiva del usuario. Compromisos de la empresa (en el proceso de organización de la información)

27. FASE 3: Organización de la información Definen en base a qué atributos vamos a agrupar los contenidos. sistemas de clasificación de la información

28. FASE 3: Organización de la información Exactos Ambiguos Secciones muy de- finicas y excluyen- tes entre ellas. El usuario debe sa- ber el nombre de lo que busca. Alfabético Cronológico Geográfico Temáticos: por tipos de contenido Funcionales: (software: abrir,...) Para públicos específicos: (Profes-estudiants) Conducidos por metáforas: (Windows) NO!!! Esquemas híbridos: ¡¡¡confunden!!! sistemas de clasificación de la información

29. FASE 3: Organización de la información Estructuras Definen tipos de relaciones entre los elementos del contenido y los grupos.

30. FASE 3: Organización de la información Estructuras Secuenciales Matriciales Jerárquicas Hipertextuales Matriciales dinámicas

31. FASE 3: Organización de la información http://download.cnet.com/ Estructura secuencial

32. FASE 3: Organización de la información http://www-emultimedia.upc.es/webem/indexc.htm Estructura jerárquica

33. FASE 3: Organización de la información http://argus-acia.com/index.html Estructura hipertextual

34. FASE 3: Organización de la información http://www.3xl.net/ Estructura matricial Curso 3 Curso 2 Curso 1 Tutores Profesores Alumnos

35. FASE 3: Organización de la información http://www.3xl.net/ Estructura matricial en el diseño modular dinámico Lunes Handbol Básquet Fútbol Módulo ENCUESTA Módulo FOTO DEL DÍA Módulo NOTICIA

36. FASE 3: Organización de la información http://www.3xl.net/ Estructura matricial en el diseño modular dinámico Martes Handbol Básquet Fútbol Módulo ENCUESTA Módulo FOTO DEL DÍA Módulo NOTICIA

37. FASE 3: Organización de la información http://www.3xl.net/ Estructura matricial en el diseño modular dinámico Miércoles Handbol Básquet Fútbol Módulo ENCUESTA Módulo FOTO DEL DÍA Módulo NOTICIA

38. FASE 3: Organización de la información Estructuras combinadas Curso 3 Curso 2 Curso 1 Convoc. 3 Convoc. 2 Convoc. 1

39. FASE 3: Organización de la información EJEMPLO

40. FASE 3: Organización de la información “ Proyecto de diseño y desarrollo de un CD-ROM promocional de unas galerías comerciales” DESCRIPCIÓN PROYECTO: Promocionar las tiendas y servicios del centro comercial. OBJETIVOS: Los clientes del centro. Se les regalaría el CD-ROM al comprar en cualquier tienda del centro, para que conozca todos los servicios y otras tiendas que le ofrece el centro. USUARIOS:

41. FASE 3: Organización de la información Totalidad de información

42. FASE 3: Organización de la información El conjunto de tiendas y locales del centro comercial.

43. FASE 3: Organización de la información Dividir en unidades lógicas

44. FASE 3: Organización de la información Zara Massimo Dutti Llongueras Bar Manolo Pizzería Mamma Disco “Salsita” Pub “El lobo”

45. FASE 3: Organización de la información Definir sistemas de clasificación

46. FASE 3: Organización de la información Zara Massimo Dutti Llongueras Bar Manolo Pizzería Mamma Disco “Salsita” Pub “El lobo” Sistema de clasificación exacto: Clas. alfabética ¡NO! El usuario tendría que saber los nombre de los locales...

47. FASE 3: Organización de la información Zara Massimo Dutti Llongueras Restaurante Manolo Pizzería Mamma Disco “Salsita” Pub “El lobo” Rel: son tiendas de ropa Rel: son para salir de noche Rel: son restaurantes Sistema de clasificación ambiguo: Clas. temática

48. FASE 3: Organización de la información Definir estructura de contenidos

49. FASE 3: Organización de la información Zara Massimo Dutti Llongueras Rest. Manolo Pizzería Mamma Disco “ Salsita” Pub “ El lobo” Para comprar ropa Para salir Para comer Para peinarte Centro comercial tiene tiene tiene tiene tiene Estruc. jerárquica

50. FASE 4: Diseño de los sistemas de navegación

52. FASE 4: Diseño de los sistemas de navegación tipos de sistemas de navegación Jerárquicos Ad hoc Globales Locales La jerarquía de la información es el sistema de navegación principal. Sistema que afecta a todo el site, y está presente en todas las páginas. Sistema que afecta a un sub- site, y convive con el sistema global de navegación. Hipertexto, o vínculos exter- nos especiales.

53. FASE 4: Diseño de los sistemas de navegación Integrados Remotos Barras de navegación Conjunto vínculos hipertextuales juntos. Navegación global y local. Siempre visible. Problema en la elección de iconos. Menús textuales Secciones de 1r nivel de contenidos. Tabla de contenido : en sistemas jerárquicos. Texto o imágenes. Muy útil. Índice: Cuando no jerárquico. Mapa del site : Presenta estructura de forma visual, más allá del texto. Visita guiada : muy útil en zonas restringidas con servicions. Naveg. lineal. elementos de navegación Menús desplegables Muchas opciones de navegación compac- tas. Ojo con tapar contenido.

55. FASE 5: Diseño de los sistemas de rotulación

56. FASE 5: Diseño de los sistemas de rotulación Rotular Etiquetar, dar nombre a las unidades de contenidos, a los grupos de contenidos, y a los servicios y funcionalidades del site. Es muy difícil (ambigüedad del lenguaje).

57. FASE 5: Diseño de los sistemas de rotulación Rotulado de los sistemas de navegación Especialmente importante: aplicados con eficacia, crean sentido de familiaridad.

58. FASE 5: Diseño de los sistemas de rotulación Rótulos de indexación - <META> o registro base de datos - no visibles para el usuario, pero muy importantes para los sistemas de búsqueda

59. FASE 6: Diseño de página

60. FASE 6: Diseño de página Diseño de página Diseño de la página de inicio Diseño de las páginas interiores (importancia diseño navegación)

65. FASE 6: Diseño de página

66. FASE 6: Diseño de página 1. Navegar a ítem “hijo”

67. FASE 6: Diseño de página 2. Navegar a sección padre

68. FASE 6: Diseño de página 3. Navegar a través de las secciones del site

69. FASE 6: Diseño de página 4. Navegar a través de utilidades

70. FASE 6: Diseño de página

73. FASE 6: Diseño de página Elementos de navegación integrados Barras de navegación Menús textuales Menús desplegables Elementos de navegación integrados

77. FASE 6: Diseño de página EJEMPLO

78. FASE 6: Diseño de página Zara Massimo Dutti Llongueras Rest. Manolo Pizzería Mamma Disco “ Salsita” Pub “ El lobo” Para comprar ropa Para salir Para comer Para peinarte Centro comercial tiene tiene tiene tiene tiene

79. FASE 6 : Diseño de página Zara Massimo Dutti Llongueras Rest. Manolo Pizzería Mamma Disco “ Salsita” Pub “ El lobo” Comprar ropa Salir Comer Peinarte Bienvenida ¿qué quieres hacer? Opciones generales siempre disponibles: -Salir de la aplicación -Imprimir lista de establecimientos -Mapa del centro Página web ¿quieres hacer algo más? Salir No Sí Mapa

80. FASE 6: Diseño de página ¿Qué quieres hacer? comprar salir comer peinarme Logo grande

81. FASE 6: Diseño de página Logo grande ¿Qué quieres hacer? comprar salir comer peinarme Funcionalidades: salir, mapa, imprimir,

82. FASE 6: Diseño de página ¿Qué quieres hacer? comprar salir comer peinarme Zara Massimo Duti Logo grande

83. FASE 6: Diseño de página logo ZARA

84. FASE 6: Diseño de página logo ZARA

85. FASE 6: Diseño de página logo ZARA Rest. Manolo Pizzeria Mamma

86. Conclusiones

90. Anexo: El MODELO ARGUS de diseño de la información

91. AI: el proceso de diseño -> Modelo ARGUS