arquitectura de la informacion

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

Introducción a la Arquitectura de la Información

Proceso de diseño del site en AI:

Fase 1: Planificación estratégica

Fase 2: Análisis de contenidos y servicios

Fase 3: Organización de la información

Fase 4: Diseño de los sistemas de navegación

Fase 5: Diseño de los sistemas de rotulación

Fase 6: Diseño de página (AI-Diseño interfaz)

Conclusiones

Anexo: Modelo ARGUS

Análisis caso real: www.3xl.net

Índice

Introducción a la Arquitectura de la Información

¿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

¿Qué es la AI?

Antes de diseñar un sitio web, se debe definir:

contenido

objetivos

funcionalidades

navegación

interacción en general

Todas éstas son tareas propias de la Arquitectura de la Información

Importancia de la AI

Contenido mal estructurado

+

sistemas de búsqueda e interacción no claros

=

mala experiencia del usuario

=

fracaso del diseño del site

-> importancia AI

¿Qué es un Arquitecto de la Información?

Richard Saul Wurman

Una persona que hace claro lo complejo.

Una persona que crea el mapa o la estructura de información que permite a otros encontrar su camino personal al conocimiento.

La ocupación profesional emergente del siglo XXI dedicada a las necesidades de la era, basada en la claridad, el entendimiento humano y la ciencia de la organización de la información.

APUNTE: Wurman fue el primero en usar el término “ Arquitectos de la Información ” en su libro del mismo nombre publicado en 1962.

Edward Tufte

El responsable de diseñar la presentación de la información para facilitar el entendimiento.

APUNTE : Tufte es profesor en la Universidad de Yale. Su trabajo, plasmado en diversos libros, trata acerca de cómo presentar todo tipo de información en la forma más clara posible.

Rosenfeld y Morville

AI clarifica la misión y visión del sitio, equilibrando las necesidades del patrocinador y las necesidades de la audiencia

determina el contenido y funcionalidad que el sitio va a tener

APUNTE : Louis y Peter fundaron Argus, empresa especializada en consultoría de Arquitectura de la Información. Con la publicación de su libro en 1998 generaron una comunidad en torno al tema, llamada ACIA. El libro ha sido traducido al español por la editorial McGraw-Hill el año 2000, bajo el nombre "Arquitectura de la Información para el WWW"

Rosenfeld y Morville

especifica cómo los usuarios van a encontrar la informacion al definir su organización, navegación, etiquetado y sistemas de búsqueda

mapea cómo el sitio se va a acomodar al cambio y crecimiento en el tiempo

Misión del Arquitecto de la Información

Clarificar objetivos del sitio web (equilibrio necesidades cliente-usuario)

Determinar contenidos y funcionalidades

Diseñar cómo los usuaris encontrarán la información , mediante:

Sistemes de organización

Sistemas de navegación

Sistemas de rotulado

Sistemas de búsqueda

Proyectar cómo el sitio web se adaptará a los cambios y a su crecimiento

Perfil profesional del Arquitecto de la Información

Periodismo / Ciencias de la Información

Psicología

Biblioteconomía

Diseño Gráfico

Marketing

Ciencias de la Computación

El Arquitecto de la información dentro del equipo

Naturaleza multidisciplinar del diseño : el diseño de un proyecto web no puede ser desarrollado por una sola persona. Son necesarios:

Jefe de proyectos (project manager)

Arquitecto de la Información

Director artístico

Director técnico

Director comercial

La relación de la AI con la usabilidad Arquitectura de la información USABILIDAD rel.con

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.

medida en la cual una aplicación puede ser usada por usuarios específicos para conseguir objetivos específicos con:

La relación de la usabilidad con el UCD

UCD ( User Centred Design )

USABILIDAD orígenes una forma de entender el diseño que tiene en cuenta al usuario en cada fase de su proceso

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

La relación del UCD con la HCI

HCI (Human Computer Interaction)

UCD (User Centred Design) orígenes corriente de estudio multidisciplinar que investiga la interacción entre las personas y los ordenadores desde diferentes puntos de vista: procesos psicológicos, comunicativos, físicos, ergonómicos, etc.

Proceso de diseño del site en AI

FASE 1: Planificación estratégica

Definición concreta de los objetivos del site

Establecer formas de actualitzación de contenidos

Establecer responsables del diseño y desarrollo del site

(Esta fase la ejecuta, normalmente, el Jefe de Proyecto. El Arquitecto de la Información le ayuda en la definición de objetivos)

FASE 2: Análisis de contenidos y servicios

El análisis de contenidos y servicios define toda la información que el usuario podrá encontrar dentro de la aplicación o site y todos los servicios (webmail, encuestas, buscadores, foros, chat, juegos, etc.)

FASE 3: Organización de la información

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

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)

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

FASE 3: Organización de la información Exactos Ambiguos Secciones muy de- finicas y excluyen- tes entre ellas. El usuario debe saber 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

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

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

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

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

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

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

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

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

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

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

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

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:

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

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

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

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

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

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...

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

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

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

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

El diseño de la navegación debe orientar al usuario y minimizar el efecto de rotura que se produce en “saltar” de un sitio a otro.

Es tan importante como la organización de la información.

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.

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.

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

Tener en cuenta que, además de los elementos de navegación, tenemos:

Sistemas de búsqueda

La navegación del browser

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

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).

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.

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

FASE 6: Diseño de página

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)

FASE 6: Diseño de página La página de inicio

El diseño de página de la página de inicio es diferente que el del resto de páginas (a pesar de que comparte estilo visual).

Las páginas de bienvenida que no dan información son totalmente inútiles y lo único que hacen es relentizar al usuario en su intento por llegar a la información que le interesa.

Logotipo más grande

Ha de responder a lar preguntas: “¿DÓNDE ESTOY?” y “¿QUÉ ENCONTRARÉ EN ESTE SITE?”.

Debe incluir un directorio de las principales areas de contenido del site.

Si el site tiene mucha información, en la página de inicio debe haber un buscador .

Se presentan las noticias o promociones especiales.

Se destina mucho más espacio para la navegación que en el resto de páginas.

La navegación global puede ser diferente que en el resto de páginas.

Debe ser una página “viva” , con información nueva constantemente.

En todo diseño de página, deben estar presentes 4 tipos de navegación:

1. Navegar “hacia abajo” , hacia los hijos de la página

2. Navegar “hacia arriba” , hacia los padres de la pág.

3. Navegar a través de secciones del site

4. Navegar con utilidades como la ayuda o el buscador

La navegación aplicada al diseño de página

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

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

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

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

La navegación global debe estar en todas las páginas (en la home puede ser diferente).

Utilizar un mismo estilo de navegación en todas las páginas para crear una navegación consistente y incrementar el control del usuario sobre ésta.

Separar (espacialmente, visualmente), los cuatro tipos de navegación: arriba, abajo, a través, utilidades.

Utilizar encabezados descriptivos arriba de las páginas.

Ayudar a los usuarios que lleguen desde links externos a acceder a la página principal y a las secciones principales.

No crear páginas muertas, sin opción de navegación.

Situar los elementos de navegación arriba y debajo de las páginas.

Incluir elementos de navegación que nos lleven a utilidades básicas (Ej: Ayuda)

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

Conjunto vínculos hipertextuales juntos.

Navegación global y local.

Siempre visible.

Problema en la elección de iconos (que sean conceptualmente claros).

Barras de navegación

Ordenar el texto en una secuencia lógica y hacer que aparezcan en el mismo orden en todas las páginas.

Opciones más visitadas: dos primeras y la última del listado.

Intentar reducir el número de opciones textuales de primer nivell (aprox. 8 opciones).

Inactivar el elemento textual en el que está el usuario. Lo ubica dentro del site.

Menús textuales

Usar los mismos criterios de ordenación que en los Menús Textuales.

Tener cuidado con los contenidos que se tapan cuando se despliega el menú.

Menús desplegables

FASE 6: Diseño de página EJEMPLO

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

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

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

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

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

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

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

Conclusiones

De nada sirve tener un gran sistema informático si el usuario no es capaz de comprenderlo .

Utilizar un proceso de diseño basado en la arquitectura de la información facilita la comprensión y navegación del usuario, por lo que genera una experiencia de usuario positiva.

Conclusiones

Las etapas del diseño de la arquitectura de la información de un site son:

Conclusiones

Es importante tener en cuenta la figura del Arquitecto de la Información cuando se quiere realizar un web site complejo o cuando se diseña un sistema de información.

Una mala estructuración de los contenidos y un mal diseño del acceso a estos contenidos harán fracasar el site, aunque a nivel visual o tecnológico tenga mucha complejidad o esté muy bien diseñado.

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

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

AI: ¿Cómo se trabaja? Proceso ARGUS

Proceso de diseño del site

Objetivos

Audiencia

Requisitos de Contenido y Funcionales

Agrupar Contenido

Diseño Conceptual

Brainstorming

Explorar Metáforas

Escenarios

Mapas de Alto Nivel

Esquemas de Página

Bocetos de Diseño

EJEMPLO:

Cliente : empresa que fabrica manerial para la construcción

Descripción del proyecto : Diseño y desarrollo de un sitio web con catálogo de productos y posibilidad de venta online a constructores y promotores immobiliarios.

Objetivos

Agilizar el proceso de venta a clientes fijos de la empresa cliente y augmentar la bolsa de clientes.

Ofrecer información de interés a los clientes para que visiten a menudo el site y así vean las ofertas de productos.

Mejorar la imagen de la empresa.

Audiencia

comprarán: constructures y promotores (a ellos debemos orientar los contenidos y parte de la interfaz)

efectuará la compra: secretarios y/o comerciales (hábito de uso de nuevas tecnologías) (a ellos orientaremos parte de la interfaz)

Requisitos de contenidos y funcionalidades

Contenidos:

información de ls productos y de las ofertas

actualidad relacionada con el mundo de la construcción

información corporativa

Funcionalidades:

búsqueda de producto concreto

mapa del site

compra en entorno seguro

Agrupar contenido

1. Catálogo de productos

1.1. Productos tipo x

1.1.1. Producto 1

1.2.3. Producto n

1.2. Productos tipo y

2. Actualidad

3. Información corporativa

Diseño conceptual

Página inicio -> atracción a través de actualidad informativa y de ofertas de productos

Catálogo -> primero información producto más fotografía, luego posibilidad compra

etc.

Brainstorming

Aportación conjunta de ideas sobre diseño conceptual, metáforas, interfaz,...

Explorar metáforas

Construcción -> interfaz que juegue con elementos visuales del mundo de la construcción.

Ejs.:

página de inicio se estructurará, a nivel visual, sobre un plano de arquitecto.

notícias como clasificados immobiliarios en los periódicos

en lugar de carrito de la compra, una carretilla de construcción

Escenarios

Plano arquitectura página inicio

Marketplace

Notícias

...

Mapas de alto nivel

inicio catálogo info corporativa actualidad Productos x Productos y P1 P2 Pn P1 P2 Pn Compra paso 1 Compra paso 2 Compra paso 3 Noti 1 Noti n

Esquemas de página

logo Comprar buscar mapa Linea oferta Entradita entradita entradita entradita tradita texto texto entradita Linea oferta Entradita entradita entradita entradita Linea oferta Entradita entradita entradita entradita Linea oferta Entradita entradita entradita entradita Linea oferta Entradita entradita entradita entradita Linea oferta Entradita entradita entradita entradita tradita texto texto entradita actualidad Linea titular notícia Entradita entradita entradita etradita Entradita evntradita entradita eradita Entradita ent Linea titular notícia Linea titular notícia Linea titular notícia monográficos Linea nombre monográfico Linea nombre monográfico infor.corporativa barra funcionalidades

Bocetos de diseño

Esquemas de la interfaz visual, ya aplicando composición, colores, tipografia, tratamiento de los elementos multimedia... El conjunto de elementos que darán el look&feel.