Trabajo presentado en el 3er Taller Mexicano de Interacción Humano-Computadora (MexIHC) sobre el diseño de información y arquitectura de información llevados a cabo para el rediseño del sitio web del Centro Interactivo de Recursos de Información y Aprendizaje (CIRIA) de la Universidad de las Américas Puebla (UDLAP).

1. Arquitectura y Diseño de Información del sitio web de un
Centro de Recursos de Aprendizaje e Investigación
Omar Sosa Tzec Arturo Arrieta Audiffred
Centro Interactivo de Recursos de Información y Centro Interactivo de Recursos de Información y
Aprendizaje, Universidad de las Américas Puebla. Aprendizaje, Universidad de las Américas Puebla.
Ex-Hacienda Sta. Catarina Mártir S/N Ex-Hacienda Sta. Catarina Mártir S/N
San Andrés Cholula, Puebla, México. San Andrés Cholula, Puebla, México.
+52 (222) 229 21 13 +52 (222) 229 21 07
omar.sosa@udlap.mx arturo.arrieta@udlap.mx
RESUMEN Bibliotecarios, Desarrollo de Colección, Instrucción y Gestión
En este trabajo se explica el proceso de análisis y del Conocimiento, y el área de Innovación y Servicios de
replanteamiento de la arquitectura de información del sitio web Información. Dentro de esta última se encuentra la
del centro de recursos de aprendizaje e investigación de la Coordinación de Difusión y Relaciones Públicas, cuyo objetivo
UDLAP, conocido como CIRIA, señalando la importancia del es llevar a cabo la comunicación de los diferentes servicios y
sitio como un espacio para demostrar la filosofía de servicio al recursos de información, ya sea en medios análogos o digitales,
usuario y para reafirmar el concepto que define este centro. siendo congruentes con los lineamientos institucionales1.
El sitio web del CIRIA2 representa un canal importante de
Categorías y Descriptores de Tema comunicación, ya que en éste no sólo se informa a la comunidad
D.2.1 [Requirements/Specifications]: Elicitation methods. sobre el centro, sino que también brinda acceso al catálogo en
D.2.2 [Design tools and techniques]: User interfaces, línea y a las bases de datos 3 disponibles. Desde el cambio al
Evolutionary prototyping. H.5.2 [User Interfaces]: Evaluation/ concepto CIRIA, el sitio se ha visto afectado por diversos
methodology, Prototyping, Screen Design, Style guides, User- factores, incluyendo un cambio en la estructura organizacional y
centered design. H.5.4 [Hypertext/hypermedia]: Architectures, una falta de lineamientos en la generación de contenidos, los
Navigation, User issues. cuales debilitaron su arquitectura de información. Así, resultaba
necesario redefinir el objetivo o propósito del sitio web del
CIRIA de forma que estuviera acorde no sólo a su misión y
Términos generales visión, sino que también manifestara la filosofía de servicio al
Documentation, Design, Experimentation, Human Factors. usuario con la que se dirige este centro.
Palabras Clave 2.SITUACIÓN INICIAL
Arquitectura de Información, Diseño de Información, Análisis Fue también al principio de la migración al concepto CIRIA que
de Contenido, Prototipo, Modelo Mental, Maquetado, Diseño hubo un cambio en la Coordinación de Difusión y Relaciones
Centrado en el Servicio, Usabilidad. Públicas, teniendo como uno de sus primeros encargos el
rediseño del sitio web (Figura 1). Debido a que el proyecto
requería un análisis más profundo y conocimiento sobre el
1.INTRODUCCIÓN CIRIA mismo, se decidió comenzar optimizando la página de
El Centro Interactivo de Recursos de Información y Aprendizaje inicio 4 de forma que reflejara las diferentes áreas que constituían
(CIRIA) se define a si mismo como una unidad al CIRIA.
interdisciplinaria que centra todas sus actividades y servicios
alrededor de sus principales usuarios: los estudiantes de la El rediseño consideró ponderar los recursos de información y
Universidad de las Américas Puebla (UDLAP). Su misión herramientas digitales (desarrolladas en el área de Innovación y
consiste en contribuir a posicionar a esta universidad como líder Servicios de Información) como una estrategia para el
en la formación de profesionales e investigadores capaces de posicionamiento del concepto. Además, el CIRIA ofrecía su
aprovechar plenamente los recursos de información y ambientes programa de Licenciatura en Tecnologías del Conocimiento, por
de colaboración más avanzados para compartir y generar lo que su difusión también resultaba prioritaria.
conocimiento [1].
El concepto CIRIA deriva del modelo de un Centro de Recursos
de Investigación y Aprendizaje (CRAI) [2], manifestando una
evolución allende a la idea de una biblioteca tradicional dadas
1
las necesidades actuales de la comunidad universitaria con http://www.slideshare.net/ciria_udlap/difusin-ciria-
respecto al uso y manejo de información. Para tal fin, el CIRIA versin-2010
se encuentra estructurado por cuatro grandes áreas: Servicios 2
http://ciria.udlap.mx
3
Nombre utilizado también para referirse a ciertos recursos de
Copyright is held by the author(s), 2010.
información en línea tales como los journals.
MexIHC 2010, November 8, 9, 10, 2010. 4
Información sobre el proceso de diseño en Tzek Blog de
Published by Universidad Politécnica de San Luis Potosí. Diseño. http://tzek-design.com/blog/2007/06/06/rediseno-del-
homepage-ciria-udla/

2. del CIRIA en las redes sociales y empleo de herramientas de la
Web 2.0, con la intención de manifestar una actitud de
Biblioteca 2.0 [3].
3.ANÁLISIS DE NAVEGACIÓN Y
CONTENIDO
El primer paso fue elaborar un mapa de sitio que sirviera como
elemento de demostración del análisis por realizar para la
arquitectura existente. El mapa permitió desde el principio notar
la relación entre la profundidad de navegación y la estructura de
navegación a lo ancho, la redundancia de enlaces dentro del
Figura 1. Página de inicio del sitio web del CIRIA sitio y la cantidad de enlaces hacia otros sitios (Figura 3).
antes de su rediseño.
La nueva página de inicio tuvo una división visual en tres filas
por tres columnas (Figura 2). La fila superior mostraba los
imagotipos del CIRIA y de la UDLAP para retornar a la página
de inicio e ir al sitio web de la universidad respectivamente;
además, contenía un formulario para realizar búsquedas en el
catálogo y un combo box que brindaba un Acceso Rápido a un
subconjunto de recursos de información del total disponible. La
segunda fila contenía el menú de navegación global encima de
una pleca fotográfica. En la última fila se podrían observar a su
vez tres columnas. La primera columna, al ser el punto de
partida para leer el bloque, brindaba información del programa
de licenciatura. La segunda, ya considerando la filosofía
orientada al servicio, mostraba primero el acceso al sistema de
referencia en línea (llamado “Soluciones a Usuarios”) y justo
después, otras herramientas desarrolladas dentro del área de
Innovación y Servicios de Información. La última columna se
conservó para las noticias, aunque se definió una jerarquía
gráfica para facilitar su lectura. Figura 3. Mapa del sitio web del CIRIA antes de
replantearse su arquitectura de información.
Para el análisis de contenido se consideraron tres aspectos: 1) la
temporalidad del contenido, 2) la utilidad del contenido de
acuerdo con la tarea o necesidad del usuario y 3) la relación
del contenido con el organigrama. Comenzando con la
temporalidad, ésta se caracterizó en contenido estático, semi-
estático y externo (Figura 4) dependiendo de la frecuencia de
peticiones de cambios o actualizaciones en el contenido o al
detectar que se trataba de información de otros sitios.
Figura 2. Resultado derivado del rediseño.
Posterior al tiempo en que se efectuó el rediseño de la página de
inicio, y dada una falta de lineamientos para la generación de
contenido, se perdió el control sobre lo publicado en dicha
página. Se comenzó a observar que la arquitectura de
información no reflejaba algún objetivo para el sitio web y que
resultaba cada vez menos claro dónde y qué se podía encontrar
dentro de éste. Ante esta situación y con el fin de reflejar los
cambios sucedidos en el CIRIA, incluyendo el último cambio en
la estructura organizacional, de manera que se unificaran las
voces existentes, fue requerido el replanteamiento de la
arquitectura e interfaz para el sitio web del CIRIA.
Figura 4. Temporalidad en el contenido del sitio.
Con la experiencia conseguida, ya en ese entonces se habían Fucsia: estático; verde: semi-estático; azul: externo.
detectado ciertos requerimientos en forma implícita tales como
marcar caminos simples a los recursos de información, Se pudo observar que mucho del contenido disponible en la
sobretodo a las bases de datos por escuela; o bien, la incursión página de inicio era realmente contenido externo y que había

3. demasiado contenido estático cercano a la página de inicio resulta relevante tanto para desempeñar sus actividades como
mientras que el contenido semi-estático se encontraba en los dos para el usuario y por qué la consideraba así. Las anotaciones
últimos clic de profundidad. ante los empleados fueron mínimas con el fin de mantener un
Para entender cómo debería de plantearse el objetivo del sitio, se ambiente casual y ya después de cada entrevista se hicieron
reflexionó sobre los fundamentos o razones por los que se otras anotaciones complementarias (Figura 6). Como resultado,
hacían peticiones para colocar o actualizar contenido. Lo se tienen cuatro espacios mentales [4] en el modelo (grupos que
anterior ayudó a rectificar al estudiante UDLAP como el pueden apreciarse en la Figura 7), los cuales indican posibles
arquetipo primario y con la experiencia en la administración del objetivos que pueden asociarse al arquetipo primario de usuario:
sitio así como la participación en otros proyectos internos por 1) conocer el CIRIA, 2) contactar al CIRIA, 3) acceder a
parte de la Coordinación de Difusión, se plantearon cinco recursos y 4) recibir orientación sobre el CIRIA (Figura 7).
variables para caracterizar la utilidad del contenido del sitio: 1)
acceder a un recurso de información, 2) informarse de algo
relevante sobre el CIRIA a través del sitio, 3) enterarse de algo
no necesariamente relevante para su situación de estudiante, 4)
acceder a información de otros sitios cuya información no está
relacionada con los servicios del CIRIA y 5) acceder a las
herramientas o plataformas digitales promovidas o
desarrolladas en CIRIA (ver Figura 5). Esta caracterización
resultó útil para identificar cómo se encontraban distribuidos los
accesos a las diferentes bases de datos, plataformas y Figura 6. Proceso de elaboración del modelo mental.
herramientas, y así cuestionarse sobre cómo podría distribuirse
la información pensando en el usuario.
Figura 7. Modelo mental resultante.
5.PROPUESTA ARQUITECTÓNICA Y
DISEÑO DE INFORMACIÓN
Una vez obtenidos los resultados del análisis de navegación y
contenido, y con el modelo mental como herramienta de diseño
adicional, el siguiente paso consistió en redefinir la estructura de
navegación global y determinar cuál sería el contenido óptimo
para cada una de las secciones principales con miras a reducir la
profundidad en la navegación. En el proceso también se tomaron
Figura 5. Caracterización del contenido del sitio según la decisiones de labeling 5 para poder incrementar la facilidad de
posible utilidad que podría darle el usuario. En rojo: acceso uso del sitio. Esto dio origen a un nuevo mapa de sitio (Figura
a recursos; amarillo: información relevante; verde: 8).
información quizá no relevante; azul: ajeno a los servicios;
rosa: acceso a herramientas digitales CIRIA. Aunque la estructura de navegación global de la nueva
arquitectura posee el mismo número de elementos, la
También se presentó cómo la estructura organizacional actual agrupación del contenido es distinta. La información sobre las
quedaba representada en el mapa de sitio para entender qué colecciones administradas por el CIRIA y el acceso al catálogo
áreas estaban generando información y cuán fácil y relevante era en línea se agruparon en la sección de Libros. El acceso a las
acceder a ella, así como para establecer relaciones con el criterio diferentes bases de datos y colecciones digitales se agruparon en
de temporalidad y utilidad de contenido. el Revistas. Tomando en cuenta la filosofía orientada al servicio,
se determinó que Soluciones a Usuarios sea una sección que no
4.ELABORACIÓN DE MODELO MENTAL sólo brinde el acceso al sistema de referencia en línea, sino que
El contexto del proyecto requería organizar y disponer los también proporcione información de contacto del personal del
accesos a los diferentes recursos o a información pertinente para CIRIA según ciertas necesidades del usuario y acceso a las
el usuario, por lo que no fue necesario elaborar flujos de trabajo herramientas digitales. Se introdujo la sección de Actividades en
sino tener a la mano una herramienta que apoye las decisiones. la que se concentraría información sobre talleres y cursos
Lo anterior codujo a la elaboración de un modelo mental [4] ofrecidos por el área emergente de Instrucción y Gestión del
para explicar qué implica interactuar con el sitio web del Conocimiento. En caso de que los usuarios tengan que
CIRIA. Para elaborar dicho modelo se realizaron entrevistas informarse sobre los servicios y espacios disponibles por nivel,
informales al menos a dos empleados de referencia, préstamo, se definió la sección de Infraestructura, dejando en la sección
así como de Desarrollo de Colección, Gestión e Instrucción del
Conocimiento e Innovación y Servicios de Información; cuyo 5
objetivo era preguntar a empleados del CIRIA qué información Referente al etiquetado, término que en español puede
confundirse con la acción de tagging ahora tan en boga.

4. Acerca del CIRIA información tal como la misión y visión del Instrucción y Gestión del Conocimiento, con la intención de
CIRIA, organigrama, directorio y lista de las alianzas con otras posicionar sus proyectos, se hizo el cambio de nombre de
bibliotecas. Actividades a Compartir Conocimiento.
La versión final del sitio web del CIRIA (Figura 10), igual que
cuando fue presentada la maqueta, tiene una distribución de la
información en tres grandes secciones horizontales: encabezado,
contenido general y pie de página. En el encabezado se
conservaron los enlaces a la página de inicio y al sitio web de la
UDLAP a través de los imagotipos. En esta misma sección se
muestra el menú principal reflejando la estructura de navegación
global con base en una metáfora de folder y donde en cada
pestaña se incluyeron términos clave para describir el interior de
cada sección. La división con la zona de contenido general se
consigue mediante una barra horizontal, cuya altura se modifica
en caso de albergar el submenú correspondiente a la estructura
de navegación local.
Figura 8. Mapa de sitio para la nueva versión el sitio web del
CIRIA.
Figura 10. Vista parcial de la actual página de inicio.
Figura 9. Maquetas para la página de inicio y la sección de En todas las veces, la zona de contenido general presenta
revistas para una escuela respectivamente. migajas al inicio para ubicar al usuario. La información puede
estar distribuida en un layout de una o dos columnas . Cuando se
Con el mapa listo se dibujaron wireframes, donde se siguió tienen dos, la primera alberga la información mientras que la
tomando en cuenta los resultados aprendidos en el análisis y con segunda corresponde ya sea a información secundaria, algún
la construcción del modelo mental . Ya con una base para menú para la navegación local dentro de la misma sección o
diseñar la información de la interfaz, se procedió a la bien, para colocar enlaces a otros sitios. El aislamiento de los
elaboración de maquetas (Figuras 9) para ser presentada ante los elementos/información en las páginas resulta de distribuir la
stakeholders 6 con el fin de recibir retroalimentación. Con la información en forma reticulada, manejo del aire compositivo,
propuesta se introdujo la idea de distribuir la carga en sitios establecimiento de una jerarquía tipográfica y uso de códigos de
externos con mayor infraestructura y que reafirmara la imagen color. El pie de página contenía en un principio tan sólo una
de una Biblioteca 2.0 (e.g. poner las presentaciones de los leyenda de copyright y originalmente se había pensado para
tutoriales sobre los recursos en SlideShare). Idea que fue bien colocar enlaces a los sitios de las instituciones con las que el
aceptada. CIRIA tiene convenios o bien, indicar a cuales asociaciones
Entre los cambios derivados de dicha presentación, se pertenece.
replantearon algunos de los nombres que a pesar de no ser tan
familiares para el usuario, se consideran más formales. La 6.EVALUACIÓN
sección Revistas, nombre que se propuso porque en los El sitio web del CIRIA fue propuesto para que se le aplicara una
resultados de las entrevistas se comentó que los usuarios así prueba de usabilidad por parte de los estudiantes del curso de
llamaban a las base de datos, al final se decidió renombrarla Interacción Humano-Computadora de la UDLAP (IS 438),
como Recursos Electrónicos. A petición del área emergente de donde se toca este tema. Se hizo la asignación a dos equipos. En
este caso, la Coordinación de Difusión fungió como cliente y
6
En este caso se incluyó a prácticamente todo el personal de participó con cada equipo en la definición de las tareas para las
todas las areas del CIRIA y en todos los niveles, aunque es pruebas. Además, se especificó a cada equipo que el objetivo de
verdad que existía un grupo de figuras de autoridad cuyos la prueba era conocer cuán clara resultaba la arquitectura de
comentarios y decisiones sobre el proyecto tenían más peso información y los términos empleados; en otras palabras: “que
ante los demás.

5. los usuarios encuentren el camino con la estructura e
información dadas”.
Ambos equipos realizaron sus pruebas ejecutando el protocolo
think aloud, habiendo reclutado un total de 9 participantes, todos
estudiantes de la UDLAP y familiarizados con el manejo de la
computadora y navegación en la Web. El tiempo promedio
máximo para realizar una tarea fue de 2:49 minutos y el tiempo
promedio mínimo fue de 0:25 minutos.
Un equipo reportó que el 50% de sus participantes conocía el
concepto de bibliotecas digitales, hecho que se asumió para el Figura 11. Rediseño del pie de página en el sitio del CIRIA.
otro equipo. La importancia de este hecho es que se consideró
que para ciertas reacciones negativas durante la prueba, éstas se 8.CONCLUSIONES
debían a que el participante en evaluación nunca había usado En un ambiente donde existen diversas voces que están
una base de datos. Se admite que algunas tareas estuvieron mal involucradas en la generación de contenidos en un sitio web se
planteadas; punto señalado también el profesor del curso. Sin corre el riesgo de perder el control y afectar considerablemente
embargo, los resultados demostraron que la tasa de error fue del la usabilidad, así como perder de vista su objetivo o propósito.
15.25%, lo cual implica que es probable encontrar un error por Se conjetura que en la página de inicio se pueden ver reflejados
cada 10 acciones llevadas a cabo en el sitio. Con lo anterior, y estos síntomas. Establecer un proceso de arquitectura de
tomando en cuenta otros registros cualitativos, se determinó que información en un proyecto web resulta benéfico, ya que
el criterio para tomar en cuenta alguna recomendación hecha por permite visualizar y aclarar las decisiones que se van tomando,
parte de los equipos era si ésta reafirmaba o incrementaría el sobretodo al recibir retroalimentación por parte de los
cumplimiento del objetivo mencionado anteriormente. stakeholders, sensibilizándolos en el proceso acerca de la
importancia del usuario.
7.SITUACIÓN ACTUAL
Cuando se elabora una arquitectura de información, la
De los resultados obtenidos de las pruebas de usabilidad, se
documentación gráfica juega un papel importante para
consideraron cambios que además de garantizar el cumplimiento
comunicar uniformemente el mismo mensaje a los stakeholders.
del objetivo como ya se había mencionado, no afectaran las
Los modelos mentales pueden emplearse como herramienta de
restricciones establecidas por los stakeholders.
diseño, delimitando el espacio para la toma de decisiones. El
A pesar de que ambos equipos reportaron que los participantes diseño de información juega un papel importante en la
no tenían conflicto con el arreglo visual de la información, sí culminación del proceso de arquitectura; el manejo adecuado de
mencionaron que tenían problemas para identificar el submenú. variables visuales en la interfaz facilita el entendimiento de la
Según la recomendación, se daría mayor visibilidad información y comprensión de la arquitectura misma. Debe
incrementando la altura que ocupa. Cambio ya implementado. considerarse evaluar un sitio web al menos una vez después de
Una de las tareas solicitaba encontrar el enlace al Acceso su liberación (si no se hizo a nivel wireframe) a través de una
Remoto a ciertas bases de datos disponibles fuera del campus. prueba de usabilidad, ya que pueden sugerirse cambios que
Dadas las reacciones negativas durante la ejecución, la aunque parezcan simples, realmente afectan la percepción de
recomendación de uno de los equipos fue que debía hacerse calidad del sitio.
notorio el enlace. Algo similar sucedió con el otro equipo, donde Como trabajo futuro, se considera que es importante replantear
sugerían que en los casos donde no se encontró el acceso a el objetivo del sitio web del CIRIA; esto es, extender su alcance
ciertas secciones, entonces se hicieran cambios en el menú. Ya más allá de los caminos de acceso ponderando también la
que el cambio de nombre en las opciones no puede ser interacción con el sitio. Posterior a los cambios derivados de
arbitrario, se decidió mejor replantear los términos claves que esta idea, será necesario realizar de nuevo una prueba de
acompañan a cada uno. usabilidad.
También relacionado con lo anterior, se reflexionó que al ser
eliminada la sección de Acceso Rápido en esta versión, se había 9.REFERENCIAS
relegado a usuarios avanzados; y que también existe la [1] Arrieta Audiffred, Arturo V. 2009. Plan Estratégico para
posibilidad de que los usuarios no entren al sitio a través de la el CIRIA 2009-2012. Universidad de las Américas Puebla.
página de inicio. Por lo que se decidió darle vida y utilidad al
[2] Mekis, Constanza. 2007. El Centro de Recursos para el
pie de página (Figura 11), colocando diferentes accesos a lo que
Aprendizaje, CRA. La nueva biblioteca multimedial que
se consideró como lo básico para el cumplimiento de los
responde a las transformaciones y desafíos de la nueva
espacios mentales señalados en el modelo mental.
educación. Leer el libro 5 (enero 2007). Disponible: http://
www.cerlalc.org/revista_enero/articulo05.htm. Última
visita: septiembre 2010.
[3] Margaix A., Dídac. 2007. Conceptos de web 2.0 y
biblioteca 2.0: origen, definiciones y retos para las
bibliotecas actuales. El Profesional de la Información 2, 16
(marzo-abril, 2007), 95-106.
[4] Young, Indi. 2008. Mental Models. Rosenfeld Media
Books. USA.