Caso de estudio: DIBAM

Título	Caso de estudio: DIBAM
Tipo de Proyecto	Proyecto de Taller
Período	2013-
Asignatura	Construcción de Diseño Gráfico 4,
Del Curso	Construcción 4º DG 2013,
Carreras	Diseño Gráfico"Diseño Gráfico" is not in the list (Arquitectura, Diseño, Magíster, Otra) of allowed values for the "Carreras Relacionadas" property.
Alumno(s)	Samira Bajbuj
Profesor	Katherine Exss
URL	http://www.dibam.cl/

Introducción

En este caso de estudio se analiza el Meta-sitio Web de la Dirección de Bibliotecas, Archivos y Museos de Chile (DIBAM) y busca observar su estructura e identidad visual, es decir, la arquitectura de la información, evaluando además la experiencia de usuario en el sitio web y cómo este se comporta en términos de usabilidad.

Se entiende como meta-sitio web, a los sitios con una cierta complejidad en su estructura, principalmente, porque contienen sitios "menores" a los que se accede desde este sitio "mayor" o macro.

Mediante este estudio se pretende realizar evaluaciones que nos permitan identificar qué atributos o elementos permiten que un sitio web sea óptimo como meta-sitio, y cómo debe estar construido para permitir una ventajosa experiencia de usuario.

Mapa del Sitio

lista

En primera instancia analizamos el mapa del sitio. Éste se presenta en el sitio a modo de lista de la siguiente forma:

mapa conceptual

Se grafica este mapa de contenidos como un mapa conceptual. Esto permitirá posteriormente establecer una relación entre sus contenidos, es decir, evaluar si su jerarquización se refleja o no en la coherencia gráfica de sus partes.

enlaces

En un segundo mapa se identifica los ítem que son enlazables de los que no lo son, además, especifica si enlaza a una página interna del sitio o si enlaza a un sitio externo.

• Los ítems en Blanco no enlazan a nada
• Los ítems en Rojo enlazan a una página interna del sitio
• Los ítems en Amarillo enlazan a un sitio externo
• Los ítems con Asterisco(*) enlazan a un sitio externo en una pestaña nueva

A partir de este mapa conceptual, identificamos cómo los ítems principales del Menú se comportan de manera diferente en cuánto a usabilidad. Estos ítems se comportan de 3 maneras distintas, lo que provoca una inconsistencia de uso y por lo tanto debilita la experiencia de usuario.

Así también, sucede lo mismo con los sub-ítems, ya que algunos de ellos enlazan a una página (independiente de que tengan sub-sub-ítems), y otros no lo hacen.
En mi opinión deberían seguir una regla única de comportamiento; enlazando siempre a alguna página introductoria por más que contengan sub-sub-ítems.

otros elementos

El mapa del sitio no incluye otros enlaces importantes dentro del Home que no estan incluídos en el menú principal, éstos aparecen en el sidebar y son:

• Cartelera Cultural DIBAM
• Publicaciones

Estructura del sitio

Para analizar la estructura, así como también la coherencia gráfica con sus sub-sitios, utilizamos como referencia de análisis el "Home", ya que su estructura no cambia con respecto a las páginas internas.

Elementos y maquetación

Wireframe del Sitio

Al realizar el wireframe analizamos la estructura del sitio web, estableciendo cuáles son los elementos principales que aparecen y cómo estos están organizados.

Elementos Visuales

• El Header del sitio presenta gran importancia visual dentro del sitio. Éste contiene los siguientes elementos:

1. Logotipo (enmarcado en un cuadrado de color.)
2. Imagen de fondo
3. Buscador
4. Botones de redes sociales e información sobre la navegación en el sitio.

• El Menú principal se presenta de manera vertical como barra lateral al costado izquierdo de la página.
• El contenido se encuentra ubicado en una gran columna al costado derecho del menú principal.
• Existe el elemento de navegación denominado "Breadcrumb" para regresar a la(s) página(s) anterior(es).
• El side-bar forma parte, estructuralmente hablando, de la misma columna que contiene el logo principal del sitio, y además, el menú principal. Este esta presente solamente en el "Home" del sitio y sección de "Noticias".
• El footer cambia la estructura establecida anteriormente, presentando otro orden de columnas y, principalmente, porque varía su ancho.

• 

  Menú

• 

  Contenido

• 

  Breadcrumb

• 

  Sidebar

• 

  Footer

Comparación páginas internas

Esta estructura principal del sitio, que vimos graficada en el "Home", se mantiene en todas las páginas internas. Sólo se elimina el side-bar, dando mayor relevancia a los contenidos.
Esto ayuda a la coherencia gráfica del sitio, en cuánto el usuario se mantenga al interior de éste, y funciona de manera elocuente con respecto a los contenidos del sitio en una instancia de página interna

Identidad visual

Tipografía

Las tipografías usadas en el sitio de la DIBAM son las siguientes:

Uso de la tipografía

• Open Sans es utilizada para Menú, sub menú, párrafos, enlaces (breadcrumb) y pie de foto.
• Oswald es utilizada para títulos.

Color

El color "rojo" constituye un elemento principal dentro del sitio ya que no sólo es utilizado para el menú y para botones, si no que también forma parte del logo (utilizado como fondo de un logo en blanco). Para el texto y otros elementos se usan los tonos grises, para dar importancia únicamente al color principal que diferenciará a este sitio de los sitios a los que éste enlaza.

Análisis y Comparación con Sub-sitios

Existen varios sitios a los que enlaza el meta-sitio de la DIBAM. Una vez que ya definimos características básicas del Meta-sitio en cuánto a su organización, estructura e identidad gráfica, realizamos un análisis comparativo con respecto a estos sitios "menores" y la conexión que existe con el meta-sitio. En la mayoría de éstos existe una coherencia en cuando a la identidad visual y manual de estilo, sin embargo existen algunos en los que no existe ningún tipo de conexión.

Sub-sitios coherentes o similares

Estos sitios mantienen la misma estructura que el meta-sitio de la DIBAM, sólo varía el color. Es decir, existe una coherencia gráfica, pero también una diferenciación a partir del color. Lo que permite que exista una identidad gráfica general, pero también una identidad gráfica individual.

• Biblioteca Nacional de Chile: http://www.bibliotecanacional.cl/

• Sistema Nacional de Bibliotecas Públicas: http://www.bibliotecaspublicas.cl/

• 

  Sitio Archivo Nacional: http://www.archivonacional.cl/

• 

  Sitio Museo Nac. Historia Natural: http://www.mnhn.cl/

• 

  Sitio Museo Histórico Nacional: http://www.museohistoriconacional.cl/

• 

  Sitio Subdirección Nac. de Museos: http://www.museoschile.cl/

• 

  Sitio Centro Barros Arana: http://www.centrobarrosarana.cl/

• 

  Sitio Centro de Conservación: http://www.cncr.cl/

• 

  Sitio Derechos Intelectuales: http://www.propiedadintelectual.cl/

Logotipos

• 

  Logo Dibam

• 

  Logo Archivo Nacional

• 

  Logo Museo de Bellas Artes

• 

  Logo Biblioteca Nacional

• 

  Logo Bibliotecas Públicas

• 

  Logo Centro Barros Arana

• 

  Logo Centro de Conservación y Restauración

• 

  Logo Derechos Intelectuales

• 

  Logo Museo Histórico Nacional

• 

  Logo Museo Historia Natural

• 

  Logo Subdirección Nacional de Museos

Sin embargo, si evaluamos la usabilidad del sitio, surge un problema en cuánto a la estructuración. Debido a que la estructura se mantiene absolutamente idéntica al ingresar a estos sub-sitios, y a pesar de que esto ayuda a la coherencia gráfica, el usuario tiende a pensar que aún se encuentra en el meta-sitio principal, debido a que sus elementos se encuentran situados de la misma manera exacta (pero con diferentes contenidos) lo que desorienta al usuario. Esto se vuelve aún más dificultoso debido a que el enlace a este sitio se "abre" en la misma pestaña y no en una adicional, lo que provoca aún más en el usuario la sensación de que aún se encuentra en el sitio anterior.

Evaluación

Resultado de una evaluación en el que se pide a un "usuario X" que encuentre todas las bibliotecas que albergue el sitio de la DIBAM:

1. El "Usuario X" se encuentra en el Home del sitio y reconoce en el menú principal el ítem "Bibliotecas"

2. Al hacer "Hover" sobre el ítem bibliotecas se despliega el sub-menú con los ítems:

• Biblioteca Nacional
• Bibliotecas Públicas

3. El "Usuario X" selecciona la opción Biblioteca Nacional

4. Este ítem enlaza al sitio de la Biblioteca Nacional de Chile, manteniéndose en la misma pestaña de navegación.

5. El "Usuario X" no reconoce que ahora se encuentra en otro sitio diferente al de la DIBAM y vuelve a visualizar el menú principal en busca del otro ítem de bibliotecas (Bibliotecas Públicas) para finalizar su tarea. Sin embargo se encuentra con la sorpresa de que el menú tiene otros contenidos y recién en ese momento identifica que se encuentra en otro sitio.

Conclusión

A pesar del cambio en el color principal y logotipo, la estructura es idéntica al meta-sitio de la DIBAM, no existe ninguna variación estructural que identifique a este sitio como un sitio individual. Esto puede ser beneficioso en la medida en que se establece una coherencia con el sitio de la DIBAM, sin embargo, si las partes del sitio permanecen exactamente ordenadas de la misma manera puede tender a la confusión del usuario en términos de "¿En qué sitio estoy?". Esto ocurre sobre todo a la hora de navegar por el menú principal.
Esto también ocurre porque otros sub-ítems del menú principal de la DIBAM, se comportan de tal manera que enlazan a páginas internas, y no se diferencia cuáles a los que lo hacen de este modo, de los que enlazan a sitios externos (como en el caso ejemplificado).

Vemos como al montar los dos sitios (DIBAM y Biblioteca Nacional) estos son exavtamente iguales en su estructura:

Sub-sitios sin conexión

Si nos vamos al otro extremo; aunque la mayoría de sub-sitios mantienen una línea gráfica con respecto al meta-sitio principal, existe un par de excepciones que no establecen ninguna coherencia con la estructura base.

• Bibliometro: http://www.bibliometro.cl/

• Biblioredes: http://www.biblioredes.cl/

El hecho de que existan sub-sitios que no establezcan ninguna conexión gráfica con el meta-sitio es una desventaja ya que debilita la experiencia de uso, se pierde la línea gráfica y por ende también se pierde la continuidad.
Si bien en usuario identifica inmediatamente que se trata de un sitio independiente del meta-sitio de la DIBAM, ésto genera una desvinculación con aquel, y por ende sólo defiende "las partes" pero no "el todo".
El meta-sitio, junto a sus sub-sitios, debe dejar tan claro al usuario las partes individuales, como el "todo" que constituye esta institución

Sitio Museo de Bellas Artes, conexión e individualidad

Sin embargo, existe un caso único dentro de todos los sitios enlazados, que logra tanto pertenecer a una identidad total "DIBAM", como también identificarse y diferenciarse como una institución específica aparte.

En éste, la estructura del menú principal se presenta de manera horizontal y no vertical como en el resto de los casos estudiados. Pero sin embargo mantiene el resto de los elementos como la estructura principal. También presenta una variación en la tipografía, si bien utiliza la misma familia tipográfica, cambia el estilo del menú de "Open Sans Bold" a "Open Sans Condensed".
Es decir, la variación ya no es tan sutil como un simple cambio de color, si no que la estructura permite una diferenciación pero sin alejarse completamente de la identidad del meta-sitio de la DIBAM.
Establece un equilibrio entre los dos casos analizados anteriormente.

• Museo Nacional de Bellas Artes: http://www.mnba.cl/

Presentación clase 9 julio

Archivo:PRESENTACION dibam.pdf