La diagramacin en la arquitectura

de informacin
Introduccin
El primer paso en el diseo de objetos o procesos es la representacin mediante
diagramas de su estructura, funcionamiento y comportamiento, concretando as
las primeras ideas abstractas. En el caso de productos interactivos con interfaz,
como por ejemplo los sitios web, esta interfaz tambin es objeto de
diagramacin, especificando cu!l ser! la organizacin y estructuracin visual de
los diferentes elementos.
Los diagramas se deben realizar a partir de la informacin recogida durante las
etapas de investigacin de la audiencia, en las que se estudia a los usuarios con
el objetivo de crear un producto que satisfaga sus necesidades.
En qu consiste la diagramacin
La diagramacin, a la cual nos referimos, consiste en la representacin de los
contenidos que tendr! un producto digital, y las relaciones entre dic"os
contenidos.
Los diagramas se usan en arquitectura de informacin para proponer cmo ser!
el producto final. Esencialmente se refieren a la organizacin de los contenidos
del producto, al funcionamiento b!sico del mismo, y la ubicacin que tendr!n
estos contenidos en la interfaz.
Los analistas de la informacin, en los temas del diseo y representacin del
software, dividen estos diagramas en # tipos$
* Blueprints
* Wireframes
%omo sustituto del trmino &lueprint a veces se usa el de 'rc"itecture (ap, que
significa (apa de 'rquitectura.
)ambin como trmino similar a wireframe se usan otros trminos como moc*up
y prototype +maqueta y prototipo,. +-osenfeld . (orville, /odt*e, 0nyder,
El primer grupo de diagramas +blueprints,, tiene como objetivo representar 1las
principales reas de organizacin y rotulado1 +-osenfeld . (orville,, y est!n
enfocados a los aspectos estructurales y de funcionamiento del producto.
2eneralmente se representan con te3tos, cajas y flec"as.
Estos planos o blueprints parten de lo general a lo particular, de lo abstracto a lo
concreto. 0u funcin es e3plicitar iterativamente las decisiones de diseo, con el
objetivo de comunicar dic"as decisiones al resto de miembros del equipo de
desarrollo, o al cliente final.
El segundo grupo de diagramas +wireframe, mockup o prototype, tienen el
objetivo de 1mostrar el contenido de las p!ginas1 +-osenfeld . (orville,,
concretando los elementos que se plantearon en los primeros planos +blueprints,
y ubic!ndolos en las p!ginas o pantallas del producto final.
Este segundo grupo de diagramas est!n comprendidos como prototipos de baja
fidelidad, ya que se realizan en 1blanco y negro1 y no muestran el diseo gr!fico
del producto ni la funcionalidad de sus cdigos de programacin.
Los niveles de prototipos son:
* Prototipos de baja fidelidad o estticos !"ireframes# moc$up%
* Prototipos de fidelidad intermedia !dise&o grfico%
* Prototipos de alta fidelidad o dinmicos !Web# '()L%
4na notacin muy usada por arquitectos de informacin y diseadores de
interaccin para "acer la diagramacin de sitios web es la propuesta por 5esse
5ames 2arret +"ttp$66www.jjg.net,, y que consiste, seg7n el propio autor, en un
1vocabulario visual para describir arquitectura de informacin y diseo de
interaccin1. El sistema de diagramacin est! compuesto de smbolos
geomtricos, flec"as y lneas.
El vocabulario visual de 2arret es muy 7til para representar tanto el diseo de
interaccin, como la estructura conceptual y organizativa del contenido.
Esta notacin gr!fica est! concebida para realizar un diseo de lo general a lo
concreto, ya que sigue el principio de la simplificacin de representacin a partir
de cajas +bo3es, y flec"as +arrows,. Este principio es el que le facilita a cualquier
diseador comunicar arquitecturas de informacin de forma f!cilmente
comprensible.
0e proponen tres tipos de diagramas de acuerdo a las funciones principales que
cumple un arquitecto de informacin en el diseo de un producto digital$
*+ ,iagramas de organi-acin+ !planos . blueprints%
/+ ,iagramas de funcionamiento+ !planos avan-ados . blueprints%
0+ ,iagramas de presentacin+ !maquetas . "ireframes%
Esta clasificacin no significa que estos diagramas sean e3cluyentes. 8ebe e3istir
una interrelacin entre los mismos, de manera que cada diagrama creado
complemente al anterior, y se convierta en apoyo de los siguientes. 9gualmente la
divisin por grupos de estos diagramas no significa que "aya que "acer
rgidamente tres.
'dem!s, esta propuesta no e3cluye a ning7n otro modelo de diagramacin.
:erfectamente podra complementarse con el vocabulario visual de 2arret, con la
propuesta de 8an &rown, o cualquier otro modelo de los anteriormente
mostrados.
Propuesta de iconos
:ara "acer los diagramas de organi-acin se proponen una serie de iconos
simples, iguales que los que propone 2arret. 0e basan en cajas y flec"as o
conectores.
;igura <$ 9conos para realizar diagramas de organizacin
:ara "acer los diagramas de funcionamiento 1 los diagramas de
presentacin se proponen otros iconos m!s trabajados visualmente, con el
objetivo de representar el comportamiento interactivo del producto.
;igura =$ 9conos para realizar diagramas de funcionamiento y diagramas de
presentacin
Propuesta de diagramas
Los diagramas de organi-acin consisten en la representacin de los grupos
organizados, y de los elementos b!sicos que contienen, siendo el diagrama
b!sico para entender la estructura general del producto.
;igura >$ 8iagrama de organizacin
El diagrama de funcionamiento es la representacin de las estructuras con los
flujos de navegacin. Este diagrama tiene un nivel de acabado superior al
anterior y complementa al mismo. 8ebe ser el que muestre los niveles de
navegacin as como los tipos de navegacin en el producto.
;igura ?$ 8iagrama de funcionamiento
El diagrama de presentacin es el que debe mostrar las formas de
organizacin visual de los contenidos en las p!ginas principales, por ejemplo$ la
p!gina inicial, las p!ginas interiores, p!ginas de productos, etc. Este diagrama no
pretende representar el diseo gr!fico o diseo visual en detalle, sino especificar
el esqueleto organizativo de la interfaz.
;igura @$ 8iagrama de presentacin
(apas de Aavegacin
Los mapas de navegacin proporcionan una representacin esquem!tica de la
estructura del "iperte3to, indicando los principales conceptos incluidos en el
espacio de la informacin y las interrelaciones que e3isten entre ellos. 4n mapa
es, por ejemplo, una representacin completa +o resumida, del sitio web para
orientar al lector6usuario durante el recorrido o para facilitarle un acceso directo
al lugar que le interese. -eflejar! la estructura del web por medio de enlaces a
los nodos principales, y stos tambin pueden desarrollarse para mostrar los
subnodos. El mapa de navegacin puede representarse bien en forma te3tual,
bien en forma gr!fica, o una combinacin de ambas.

:ara confeccionar mapas que reflejan el conte3to del nodo activo e3isten
programas especficos que tambin son capaces de mostrar en forma gr!fica
toda la estructura de un "iperte3to. Estas funcionalidades las tienen algunos
programas de creacin de p!ginas web, tales como FrontPage de Microsoft.
0in embargo, no se trata de verdaderas "erramientas de navegacin, ya que
estas funcionalidades son posibles 7nicamente dentro del programa de
construccin de las p!ginas web residentes en el disco duro, y no cuando el
"iperte3to se publica en la web.
Btras "erramientas de este tipo son NEST!, T"e #e$ %rowser and
&artograp"er. 0e trata de un navegador que dibuja mapas de navegacin
mientras est!s navegando por la /eb.
"ttp$66personalpages.manc"ester.ac.u*6staff6m.dodge6cybergeograp"y66atlas6web
Csites."tml