Sei sulla pagina 1di 10

La diagramación en la arquitectura de información

Introducción

El primer paso en el diseño de objetos o procesos es la representación 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 también es objeto de diagramación, especificando cuál será la organización y estructuración visual de los diferentes elementos.

Los diagramas se deben realizar a partir de la información recogida durante las etapas de investigación 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 diagramación

La diagramación, a la cual nos referimos, consiste en la representación de los contenidos que tendrá un producto digital, y las relaciones entre dichos contenidos.

Los diagramas se usan en arquitectura de información para proponer cómo será el producto final. Esencialmente se refieren a la organización de los contenidos del producto, al funcionamiento básico del mismo, y la ubicación que tendrán estos contenidos en la interfaz.

Los analistas de la información, en los temas del diseño y representación del software, dividen estos diagramas en 2 tipos:

* Blueprints

* Wireframes

Como sustituto del término Blueprint a veces se usa el de Architecture Map, que significa Mapa de Arquitectura.

También como término similar a wireframe se usan otros términos como mockup y prototype (maqueta y prototipo). (Rosenfeld & Morville, Wodtke, Snyder)

El primer grupo de diagramas (blueprints), tiene como objetivo representar "las principales áreas de organización y rotulado" (Rosenfeld & Morville), y están enfocados a los aspectos estructurales y de funcionamiento del producto. Generalmente se representan con textos, cajas y flechas.

Estos planos o blueprints parten de lo general a lo particular, de lo abstracto a lo concreto. Su función es explicitar iterativamente las decisiones de diseño, con el objetivo de comunicar dichas 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 "mostrar el contenido de las páginas" (Rosenfeld & Morville), 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 "blanco y negro" y no muestran el diseño gráfico del producto ni la funcionalidad de sus códigos de programación.

Los niveles de prototipos son:

* Prototipos de baja fidelidad o estáticos (wireframes, mockup)

* Prototipos de fidelidad intermedia (diseño gráfico)

* Prototipos de alta fidelidad o dinámicos (Web, HTML)

Una notación muy usada por arquitectos de información y diseñadores de interacción para hacer la

Una notación muy usada por arquitectos de información y diseñadores de interacción para hacer la diagramación de sitios web es la propuesta por Jesse James Garret (http://www.jjg.net), y que consiste, según el propio autor, en un "vocabulario visual para describir arquitectura de información y diseño de interacción". El sistema de diagramación está compuesto de símbolos geométricos, flechas y líneas.

El vocabulario visual de Garret es muy útil para representar tanto el diseño de interacción, como la estructura conceptual y organizativa del contenido.

Esta notación gráfica está concebida para realizar un diseño de lo general a lo concreto, ya que sigue el principio de la simplificación de representación a partir de cajas (boxes) y flechas (arrows). Este principio es el que le facilita a cualquier diseñador comunicar arquitecturas de información de forma fácilmente comprensible.

Se proponen tres tipos de diagramas de acuerdo a las funciones principales que cumple un arquitecto de información en el diseño de un producto digital:

1. Diagramas de organización. (planos - blueprints)

2. Diagramas de funcionamiento. (planos avanzados - blueprints)

3. Diagramas de presentación. (maquetas - wireframes)

Esta clasificación no significa que estos diagramas sean excluyentes. Debe existir una interrelación entre los mismos, de manera que cada diagrama creado complemente al anterior, y se convierta en apoyo de los siguientes. Igualmente la división por grupos de estos diagramas no significa que haya que hacer rígidamente tres.

Además, esta propuesta no excluye a ningún otro modelo de diagramación. Perfectamente podría complementarse con el vocabulario visual de Garret, con la propuesta de Dan Brown, o cualquier otro modelo de los anteriormente mostrados.

Propuesta de iconos

Para hacer los diagramas de organización se proponen una serie de iconos simples, iguales que los que propone Garret. Se basan en cajas y flechas o conectores.

que propone Garret. Se basan en cajas y flechas o conectores. Figura 3: Iconos para realizar

Figura 3: Iconos para realizar diagramas de organización

Para hacer los diagramas de funcionamiento y los diagramas de presentación se proponen otros iconos más trabajados visualmente, con el objetivo de representar el comportamiento interactivo del producto.

otros iconos más trabajados visualmente, con el objetivo de representar el comportamiento interactivo del producto.

Figura 4: Iconos para realizar diagramas de funcionamiento y diagramas de presentación

Propuesta de diagramas

Los diagramas de organización consisten en la representación de los grupos organizados, y de los elementos básicos que contienen, siendo el diagrama básico para entender la estructura general del producto.

básico para entender la estructura general del producto. Figura 5: Diagrama de organización El diagrama de

Figura 5: Diagrama de organización

El diagrama de funcionamiento es la representación de las estructuras con los flujos de navegación. Este diagrama tiene un nivel de acabado superior al anterior y complementa al mismo. Debe ser el que muestre los niveles de navegación así como los tipos de navegación en el producto.

Figura 6: Diagrama de funcionamiento El diagrama de presentación es el que debe mostrar las

Figura 6: Diagrama de funcionamiento

El diagrama de presentación es el que debe mostrar las formas de organización 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 diseño gráfico o diseño visual en detalle, sino especificar el esqueleto organizativo de la interfaz.

Figura 7: Diagrama de presentación Mapas de Navegación Los mapas de navegación proporcionan una representación

Figura 7: Diagrama de presentación

Mapas de Navegación

Los mapas de navegación proporcionan una representación esquemática de la estructura del hipertexto, indicando los principales conceptos incluidos en el espacio de la información y las interrelaciones que existen entre ellos. Un mapa es, por ejemplo, una representación completa (o resumida) del sitio web para orientar al lector/usuario durante el recorrido o para facilitarle un acceso directo

al lugar que le interese. Reflejará la estructura del web por medio de enlaces a los nodos principales, y éstos también pueden desarrollarse para mostrar los subnodos. El mapa de navegación puede representarse bien en forma textual, bien en forma gráfica, o una combinación de ambas.

bien en forma gráfica, o una combinación de ambas. Para confeccionar mapas que reflejan el contexto
bien en forma gráfica, o una combinación de ambas. Para confeccionar mapas que reflejan el contexto

Para confeccionar mapas que reflejan el contexto del nodo activo existen programas específicos que también son capaces de mostrar en forma gráfica toda la estructura de un hipertexto. Estas funcionalidades las tienen algunos programas de creación de páginas web, tales como FrontPage de Microsoft. Sin embargo, no se trata de verdaderas herramientas de navegación, ya que estas funcionalidades son posibles únicamente dentro del programa de construcción de las páginas web residentes en el disco duro, y no cuando el hipertexto se publica en la web.

Otras herramientas de este tipo son NESTOR, The Web Browser and Cartographer. Se trata de un navegador que dibuja mapas de navegación mientras estás navegando por la Web.

mapas de navegación mientras estás navegando por la Web.