El profesional de la información, v. 13, n. 3, mayo-junio 2004220

Caso de estudio: técnicas de arquitecturade información aplicadas al desarrollo

del sitio web de Ibai IntranetsPor Íñigo Arbildi Larreina

Resumen: La realización de un nuevo sitio web suponeuna serie de trabajos previos de arquitectura de informacióny usabilidad, que se plasman en una serie de entregables:especificación de requisitos (propósito y funciones del sitio),blueprints (diagramas o planos del sitio), wireframes (re-presentación gráfica y conceptual del sitio, que puede fun-cionar como maqueta), así como tests de usuarios y prototi-pos. Este artículo es un estudio del caso del proceso de cre-ación de un sitio web desde la óptica del arquitecto de in-formación. El sitio web es dinámico (genera las páginas apartir de programación y explotando una base de datos re-lacional) y debía reunir cualidades excelentes respecto a lafindability (la facilidad de encontrar elementos en el sitio) yla experiencia de usuario.

Palabras clave: Arquitectura de información, Blueprints,Wireframes, Usabilidad, Findability, Experiencia de usua-rio, Test de usuario, Prototipos.

Title: Information architecture techniquesapplied to the development of the Ibai Intranets web site: a case study

Abstract: Creating a new web site requires prior work on information architecture and usability, leading to a series ofdeliverables: requirements specifications, blueprints (box and arrow diagrams), wireframes (graphic and conceptual siterepresentation sometimes serving as mock-ups), as well as user tests and prototyping. This article provides a case studyof the creation process of a web site from the perspective of the information architect. The site is dynamic (involving webprogramming and the use of a relational database) and had to meet standards of excellence regarding findability and userexperience.

Keywords: Information architecture, Blueprints, Wireframes, Usability, Findability, User experience, User test, Prototypes.

Íñigo Arbildi Larreina es licen-ciado en documentación por laUniversidad de Granada y másteren e-business por la Universidad deDeusto. Empezó a trabajar hacecinco años en ScanBit Servicios Do-cumentales como information con-sultant y estuvo un año en SerikatConsultoría Informática como con-sultor en gestión documental, comodirector del máster en gestión do-cumental y de contenidos, así comoen proyectos de arquitectura de in-formación. Ahora es el responsable

de la línea de negocio de intranets y gestión documental de Ibai Sis-temas y consultor en sistemas integrados de gestión bibliotecaria enScanBit. Es también coeditor del weblog Trucos de Google, dondepublica artículos sobre sus principales líneas de investigación: ges-tión documental, nuevos estándares aplicables a la documentacióny los sistemas de gestión bibliotecaria, arquitectura de información,

marketing y posicionamiento en buscadores.

Caso de estudio: técnicas de arquitectura de información aplicadas al desarrollo del sitio web de Ibai Intranets

El profesional de la información, v. 13, n. 3, mayo-junio 2004 221

Próximos temas especiales

Julio 2004 Servicios de información digital en Latinoamérica

Septiembre 2004 Fuentes de información sobre economía y empresa

Noviembre 2004 Propiedad intelectual

Los interesados pueden remitir notas, artículos, propuestas, publicidad, comentarios, etc., sobre estos te-mas a:

epi@sarenet.es

1. Introducción

ESTANDO AÚN EN LA Fa-cultad de Documentación de laUniversidad de Granada, recuer-do conversaciones con algunoscompañeros en las que tratába-mos, sin saberlo, de temas queahora son de plena actualidad yse engloban bajo la etiqueta de“arquitectura de la informa-ción” (AI). Hoy, la AI parece es-tar en el punto de mira de mu-chos documentalistas. En este ar-tículo se muestra un ejemplopráctico de cómo aplicar sus téc-nicas al desarrollo de un sitioweb.

La organización de la informa-ción ha sido una tarea tradicional-mente atribuida a los documenta-listas. El desarrollo experimentadopor internet y su maduración, evi-denciada por la aplicación de siste-máticas probadas y contrastadas enel desarrollo de sitios web, ha dadomás relevancia aún a la necesidadde aplicar extensivamente a estemedio técnicas y habilidades pro-pias de los documentalistas, enri-quecidas por fructíferos maridajescon otras disciplinas.

Así, nos encontramos con quelos lenguajes documentales, en es-pecial las taxonomías y los tesau-ros, conviven dentro de un sitioweb con estructuras visuales quelos apoyan, fruto del trabajo de loscreativos del sitio.

De hecho, el desarrollo del si-tio de Ibai Intranets es el fruto del

trabajo conjunto de un equipo mul-tidisciplinar entre un documenta-lista (en el papel de arquitecto deinformación y responsable de usa-bilidad) y un diseñador web (queha asumido los papeles de progra-mador y de diseñador creativo).Este texto pretende ser una muestrasencilla de la metodología que de-be realizar un arquitecto de infor-mación para llevar adelante un pro-yecto de estas características.

2. Planteamiento de laAI: metodología

2.1. Punto de partida: especi-ficación de requisitos

Ibai Intranets1 es una línea denegocio de la empresa Ibai Siste-mas S. A. (consultora informática)que acoge todo lo relacionado conla implantación de intranets, ges-tión documental y sistemas deECM. Es importante conocer quees también la propietaria de Scan-Bit S. L., empresa orientada a laprestación de servicios biblioteca-rios y documentales, así como aldesarrollo de sistemas integradosde gestión bibliotecaria.

Con esto en mente, se decidiólanzar un sitio web nuevo y distin-to del de Ibai Sistemas que alber-gara toda la información sobre pro-ductos y servicios de esta línea denegocio, y que a la vez no se sola-para con el de ScanBit S. L. Ade-más, se pretendía poder contar conuna herramienta de publicación decontenidos web que hiciera muyfácil publicar cualquier informa-

ción (seminario, nueva versión deun producto, artículo divulgativo,noticias, etc.) para un miembro dela organización que no tuviera elmenor conocimiento de html, enmodo wysiwyg o, como algunosdesconocedores de lo que significala usabilidad suelen decir: que fue-ra “para tontos”.

La necesidad de actualizar con-tenidos no era algo caprichoso, si-no una prioridad, ya que tenía lassiguientes implicaciones:

—Era necesario disponer de unespacio que hiciera posible esta-blecer un canal de comunicacióncon los clientes (potenciales o ma-teriales), que les permitiera estaractualizados sobre nuevas versio-nes de software, casos de éxito quesirvieran para ejemplificar, artícu-los para mostrar las bondades de lagestión documental, etc.

—Una actualización regularimplica más visitas de los robots delos buscadores, lo cual ocasionaser indexado por éstos más a me-nudo, y por tanto que nuestros con-tenidos aparezcan en internet cuan-to antes.

—Cuando la actualización esmás frecuente, se suele obtenermayor page rank2 (la medida decalidad de una página de Google)lo que repercute en nuestro posi-cionamiento en este buscador, a lasazón el más utilizado del mundo.

—Hacer que los conocimien-tos y contenidos residentes en laorganización fluyan más rápida-

Íñigo Arbildi Larreina

El profesional de la información, v. 13, n. 3, mayo-junio 2004222

mente hacia el exterior de la mis-ma; era posible disponiendo de unaherramienta sencilla de publica-ción web que facilitara el trasvasede ideas.

—Dentro de la estrategia demarketing de Ibai Intranets se con-sideró necesario potenciar la per-cepción de empresa “a la última”,para lo cual había que ser capacesde publicar contenidos de actuali-dad asiduamente.

Para dar respuesta a todos estosaspectos se optó por una herra-mienta sencilla de gestión de con-tenidos muy conocida por la comu-nidad de autores de weblogs: Mo-vable Type3. La elección de estesoftware viene justificada princi-palmente por su uso probado enmiles de sitios, así como por as-pectos técnicos como el hecho deutilizar Linux, phpP y MySQL, (to-dos estos elementos open source)lo cual supone huir de costes inne-cesarios, con el valor añadido deconstituir un entorno muy probado.

a. AI y findability.

Sin embargo, la elección de es-ta herramienta se fundamentó másen factores de arquitectura de la in-formación, usabilidad y findabilityque en los meramente tecnológi-cos. De hecho, Movable Typecuenta con soporte para categorías,polijerarquía, que resultaban clavea la hora de permitir la localizaciónde contenidos.

Igualmente, cuenta con aplica-ciones y funciones muy importan-tes para el proyecto como:

—Buscador por relevanciaconfigurable muy potente.

—Estructuración de los conte-nidos en campos (metadata) quepermiten su reutilización por lasdiferentes páginas del sitio web.

—Funciones out-of-the-box(sin necesidad de configuración,tal y como viene) muy interesan-tes, como la posibilidad de incluirelementos de ayuda a la navega-

Figura 1. Mapa de la estructura jerárquica del sitio

Figura 2. Elementos que van a constituir la cabecera de las páginas del sitio

Figura 3. Elementos del pie de página, que incluyen desde los datos de contacto, destacandoel teléfono, hasta los iconos de sindicación de contenidos (xml, RDF, RSS)

Figura 4. Estructura de la página de inicio, con algunos titulares simulados

Íñigo Arbildi Larreina

El profesional de la información, v. 13, n. 3, mayo-junio 2004224

ción, función "Ver más" (para con-sultar un artículo completo), "En-viar este artículo por e-mail a unamigo", gestión automática del ar-chivo de artículos (por fecha, porcategoría, etc.) y elaboración auto-mática de vínculos al artículo ante-rior, al posterior, listado de los núltimos artículos.

—Generación automática desalida apta para la sindicación decontenidos (RSS, RDF) basadosen xml, que contribuye a la facili-dad de consulta de novedades en elsitio.

«Debido a la existen-cia de diferentes áre-as en el sitio, se hadividido la informa-ción en chunks o

grupos de contenidoexpresados mediante

recuadros»

En definitiva, Movable Typecuenta con herramientas de finda-bility4 (un término que se podríatraducir como “encontrabilidad”)que son, para el arquitecto de in-formación, la quintaesencia del di-seño web: antes de usar algo hayque poder encontrarlo. Y esto eraclave en la concepción de la idea.Cuestiones todas que seguro influ-yeron también en que Boxes &Arrows5, la fuente de informaciónonline sobre AI más importante ynominado a un Webby Award en2003 por su excelente diseño, se-leccionara esta herramienta paraponer en marcha su portal. Tam-bién, Louis Rosenfeld6, una de lasmayores autoridades mundiales enAI, y coautor del archiconocido In-formation architecture for theworld wide web7 construyó su sitioweb con Movable Type.

Si Ibai Intranets vende gestióndocumental, intranets y ECM, debemostrar que su sitio web está a laaltura de las mejores prácticas.

Como el fin último de la AI yla usabilidad es mejorar la expe-riencia del usuario, esto es, que lasemociones que le despierte el sitiosean positivas, se contactó con undiseñador con el que ya se habíantenido experiencias muy positivasen proyectos anteriores, dada sugran sensibilización con estos con-ceptos.

Se seleccionaron herramientasde diseño de blueprints y wirefra-mes comunes, Power Point y Pho-toshop respectivamente para cadauno de los entregables, aunque he-rramientas como Visio, Dreamwea-ver y otras son también de uso fre-cuente.

2.2. De la idea a los diagra-mas: blueprints

Con todo el análisis de requisi-tos hecho, quedaba articular un di-seño conceptual que cumpliera contales especificaciones. Además, setuvieron en cuenta tanto la econo-mía en los trabajos de desarrollocomo la ligereza del sitio.

Seguidamente, se procedió aelaborar los blueprints, que sondiagramas donde se especifican laestructura del sitio, así como losdiversos elementos que van a con-formar cada área, y que quedaronde la siguiente forma (figura 1).

El primer elemento es un mapaque establece el número de páginasy las relaciones jerárquicas entreellas. Adicionalmente se podría ha-ber ampliado explicitando los vín-culos entre las diferentes páginas.Posteriormente se estableció la ar-quitectura de elementos comunes atodas las páginas, como la cabece-ra, la barra de navegación horizon-tal y el pie de página, que se van arepetir de forma idéntica en todaslas secciones del sitio (figuras 2 y3). El siguiente paso del diseño deAI es el planteamiento de la páginade inicio, donde ya se establecegran parte del contenido, estructu-ra de categorías y grupos de conte-nidos principales (figura 4).

Era muy importante que el sitiobrindara contenido al visitante des-de el principio, por eso la páginainicial muestra gran cantidad depuntos de acceso y huye de ele-mentos efectistas y pesados comointroducciones de Flash, inútilespara nuestro planteamiento. Sinembargo, la carga de materiales seha tratado de hacer lo más ligeraposible mediante la publicación delos titulares y de las primeras pala-bras de cada artículo. Debido a laexistencia de diferentes áreas en elsitio, se ha dividido la informaciónen chunks o grupos de contenidoexpresados mediante recuadros.

Esta idea se ha mantenido entodo momento, de manera que in-dependientemente de cuál sea lapágina de aterrizaje (landing page)o punto de acceso, el usuario pue-da ver el contenido rápidamente,así como llamadas a otras seccio-nes mediante la zona de directoriode categorías, que apuntan al restode áreas temáticas.

«Si Ibai Intranets ven-de gestión documen-tal, intranets y ECM,debe mostrar que susitio web está a la al-tura de las mejores

prácticas»

En la figura 5 se puede obser-var una página interna, en concretola correspondiente a "Casos de éxi-to", donde se observa la aplicaciónde todos los principios antes co-mentados.

2.3. Wireframes: el conceptodibujado.Con todos estos elemen-tos, el siguiente paso es realizar unboceto o maqueta de lo que podríaser el sitio final. Hay quien diceque los wireframes deben ser mu-cho más espartanos y no tener ape-nas diseño gráfico, pero en el casode Ibai Intranets, la sintonía entreel arquitecto de información y eldiseñador era tal que fue casi im-posible separar concepto y diseño.

Caso de estudio: técnicas de arquitectura de información aplicadas al desarrollo del sitio web de Ibai Intranets

El profesional de la información, v. 13, n. 3, mayo-junio 2004 225

En este proyecto, el diseño gráficodesempeña un papel importante enesta fase, pero tengamos en cuentasiempre los objetivos del sitio yprocuremos que las decisiones es-téticas que se tomen tengan unajustificación desde el punto de vis-ta de la experiencia del usuario.

Con estas reflexiones en mentese optó por el diseño que se ve enla figura 6 para el boceto de la pá-gina de inicio.

2.4. Test de usuarios sobre unprototipo

Con la estructura ya definida ycon la casi realidad que brindabanlos wireframes del sitio, se hizo unsencillo ensayo de usabilidad. Laprueba se hizo sobre un prototipoque se obtuvo dotando de interacti-vidad (navegabilidad, en realidad)a los wireframes que habíamos di-señado. Se realizó el test sobre

ocho usuarios, a los que se les pi-dieron las siguientes tareas:

—Desde la página de iniciolocalizar una noticia que verse so-bre un producto de gestión docu-mental.

—Localizar el teléfono de laempresa.

—Enviar un e-mail a la empresa.

—Describir con palabras clave(máximo tres palabras o expresio-nes) el asunto sobre el que versa elsitio web.

—Describir qué les haa pareci-do la experiencia de navegación.

Todos los usuarios realizaronbien y con rapidez las tareas, aun-que dos de ellos indicaron en el úl-timo punto que encontraban el ta-maño de las fuentes demasiado pe-queño y que cuando fueron a pul-sar en la opción de “Ver texto entamaño mayor” que hay en la partede arriba a la derecha, no tuvoefecto. En realidad, no se previóanimar esta opción en la maqueta,pero de haberlo hecho, estos usua-rios no hubieran tenido el menorproblema.

2.5. Resultado final: la ejecu-ción del proyecto

Durante este proceso surgierondudas sobre aspectos muy puntua-les, pero el hecho de haber consen-suado en la fase de diseño y en lostests de usuario la estructura de na-vegación consiguió evitar proble-mas mayores derivados de la tomade decisiones arbitrarias basadasen impresiones personales.

Con los primeros resultados serealizó otro test, esta vez propo-niendo una tarea adicional, queconsistía en encontrar el buscador,utilizarlo y refinar una búsqueda.Se concluyó que era necesaria unamodificación de la presentación delos resultados de las consultas, al-go que se acometió y se volvió aprobar con éxito. El resultado final,mostrado aquí a través de la página

Figura 5. La página de partida de la sección "Casos de éxito". En la versión real del sitio se hacompletado con una zona destinada a la promoción de eventos

Figura 6. En este punto los colores y la presentación ayudan a conseguir efectos positivos en laexperiencia de usuario. Además, se trató de que la página de inicio cupiera en apenas unapantalla, casi sin necesidad de utilizar las barras de desplazamiento laterales del navegador

Íñigo Arbildi Larreina

El profesional de la información, v. 13, n. 3, mayo-junio 2004226

de inicio y la de resultados de bús-queda fue el que puede observarseen la figura 7.

Otro aspecto que se ha queridodestacar ha sido el buscador, dejan-do claro en todo momento en quésección se hallan los resultados, asícomo un apoyo a la búsqueda pormedio de una zona de instruccio-nes y sugerencias en el lateral iz-quierdo, que evita la poca invitado-ra expresión de “Búsqueda avanza-da” (figura 8).

2.6. Retos futuros

En el momento de redactar es-te estudio, aún faltan algunos deta-lles para que se pueda dar por en-tregado el proyecto, si bien el grue-so del trabajo ya se ha realizado. Apartir de este punto, el reto es con-seguir que se genere dentro de laorganización de Ibai Intranets unadinámica de publicación suficientecomo para mantener el sitio cons-tantemente actualizado.

No sólo se trata de que permitaa la empresa ser percibida comopreocupada por ofrecer contenidosde utilidad sobre su campo de ac-tuación, sino que también hay unfin último de que sus integrantes seactualicen constantemente duranteel proceso de documentación nece-sario para escribir un artículo. Ob-viamente no todos los miembros sededican a I+D, pero el hecho deponer por escrito ideas, aunque setrate de mensajes comerciales,obliga a una reflexión y ordena-miento de argumentos que hacenmás efectivo cualquier mensaje.

Con la experiencia acumuladaen este proyecto se pretende afron-tar con garantías de éxito el redise-ño de los sitios web de las empre-sas asociadas.

Notas1. http://www.ibai-intranets.com

2. Page rank de una página: se puede ver insta-lando la barra de Google en Internet Explorer,descargable desde la url a continuación indica-da. Una explicación más detallada sobre lo quées, está disponible en la página de Google.

http://toolbar.google.com/intl/es/http://www.google.com/technology/

3. Movable Type tiene su sitio web en:http://www.movabletype.org

4. Trucos de Google: findability (I): ¿por quélos usuarios no encuentran nada en tu web?Consultado en: 12-01-04.http://trucosdegoogle.blogspot.com/2003_01_01_trucosdegoogle_archive.html#87422472

5. Boxes and Arrows está disponible en:

http://www.boxesandarrows.com

6. Louis Rosenfeld tiene su sitio web en:http://www.louisrosenfeld.com

7. Rosenfeld, Louis. Information architecturefor the world wide web. 2ª ed. Sebastopol:O´Reilly, 2002.

Íñigo Arbildi Larreina, Ibai Intranetsy Gestión Documental.iarbildi@scanbit.net

Figura 7. La página de inicio finalizada

Figuta 8. Un ejemplo de cómo se han configurado los resultados del buscador (snippets) y elárea de búsqueda para hacerla lo más sencilla y efectiva posible