La diagramación (wideframe) en la arquitectura de

información.
Autor: Rodrigo Ronda León
Resumen: Se analiza la importancia que tiene para la arquitectura de
información la confección de diagramas (wireframes). Se muestran las
formas de hacer diagramas, tipos de diagramas que existen, herramientas
útiles para realizar los mismos. También se propone una forma de realizar
diagramas con una notación complementaria a las que existen, para una
mejor comprensión de la labor del arquitecto de información.

Introducción

Cada vez que se intenta diseñar algún objeto o proceso, se trata de

representar con diagramas, objetivando así una idea abstracta que se
genera a partir del diseño realizado.
El diseño de productos electrónicos, ya sean sitios web, mutimedias en CD-
ROM, grandes sistemas de información, etcétera, siempre se ha
caracterizado por los distintos tipos de diagramas para su confección. Los
diagramas se realizan a partir de la información recogida durante las
primeras etapas de diseño, donde se interactúa con los clientes y usuarios
del producto con el objetivo de diseñar a partir de sus necesidades.

Diagramación
En qué consiste la diagramación

La diagramación, que refiere esta ponencia, consiste en la realización de

notaciones gráficas para representar la organización de la información y el
funcionamiento de los procesos dentro de un producto electrónico. Se usan
con el objetivo de que todas las personas que participan en el proceso
productivo, y hasta el usuario final del producto, conozcan y comprendan
cómo será la estructura y funcionamiento del producto final.

La diagramación se ha usado desde el inicio del diseño de software. Ya

sean los organigramas, los diagramas de flujo, los flujos de datos, los
árboles de decisión, han sido formas de representación del diseño de un
software. Al evolucionar las interfaces gráficas de usuario, las labores de
representación se ampliaron con los llamados: guión de navegación y guión
de interacción, los cuales consistían en diagramas que representaban el
funcionamiento de los productos electrónicos que se generaban en ese
momento. La evolución de los productos electrónicos, unida al crecimiento
geométrico de la información que ellos soportan, ha creado la necesidad de
ampliar estas formas de representación con otras nuevas, o esas mismas,
enriquecidas. Es por eso que se generalizan los esquemas de
representación de los arquitectos de información, quienes se enfocan en los
aspectos organizativos de la información de un producto, ya sea web o
multimedia.

Para diagramar se sigue el mismo principio de la modelación de objetos:

representación abstracta de una realidad. Para una buena comprensión de
los diagramas se deben realizar de lo general a lo particular, de lo simple a
lo complejo. Se les llama “pasar de prototipos horizontales a prototipos
verticales” por el modo de profundización en los mismos.

Horizontales

Verticales

Los diagramas tienen una extrema utilidad para el diseño centrado en el

usuario, también sirven para que los productores comprendan visualmente
el producto que se está diseñando, para mostrar el producto modelado en
“papel” a los usuarios y al resto de los productores. Esta técnica alivia los
costos de producción, al ser más fácil rectificar un diseño sobre el papel que
sobre el producto finalizado.

En inglés se les conoce a los diagramas como wideframes y están

comprendidos entre las primeras clases de prototipos:
o Prototipos de baja fidelidad (wideframes)
o Prototipos de fidelidad intermedia (diseño gráfico)
o Prototipos de alta fidelidad (HTML, Web)

Estas primeras clases se aplican a través de una técnica llamada

prototipado en papel (paper prototype), la cual consiste en la realización de

2
 bocetos del diseño organizacional y funcional del sistema o producto que se
va a realizar. También se les diferencia de la siguiente forma:
• Prototipos estáticos. (los diagramas)
• Prototipos dinámicos. (las maquetas funcionales realizadas en
software)

Estos diagramas se pueden realizar de forma manuscrita o confeccionarlos

en la computadora. Para realizarlos en papel solo hace falta papel y lápiz,
para su realización en computadora se pueden usar diferentes softwares.

Software para hacer diagramas

A continuación se muestran algunos softwares que se utilizan para la

realización de diagramas. Para una mejor comprensión se clasificaron en 2
tipos: los que originalmente no fueron creados para hacer diagramación
pero que se pueden usar, y los que originalmente fueron creados para
hacer diagramas.

Software que pueden ser utilizados para hacer diagramas.

9 Microsoft Power Point
9 Corel Draw
9 Macromedia (ahora Adobe) Freehand
9 Adobe Illustrator

Software creados para hacer diagramas (organigramas, flujos de datos,

etc.)
9 SmartDraw
9 Microsoft Visio
9 iGrafx Flowcharter
9 DENIM & Silk.
9 Mindmanager
9 Freemind

El sueño de todos los desarrolladores de software, siempre ha sido crear un

sistema de diagramación estándar para la mayor cantidad de creadores
posible, con el objetivo de “hablar un mismo idioma”. Un ejemplo de ello lo
tenemos con UML (Unified Modeling Language) (Lenguaje de Modelaje
Unificado) el cual está muy difundido por el mundo. A pesar de esto, el UML
no es totalmente útil para la representación de diagramas organizacionales
de sitios web, así como diagramas de interacción. Es por estas razones que
las notaciones propias son las más comunes entre empresas que se
dedican a la realización de software, probablemente porque cada empresa
tiene un contexto específico, con usuarios específicos y por lo tanto,
necesidades específicas.

3
 Los principales argumentos del poco uso de notaciones estándar, están en
que no se adaptan, estas notaciones, a los requerimientos de las
producciones particulares, lo que motiva la creación de notaciones propias.

Aunque existan estándares, se puede usar una notación propia, solamente

tiene que cumplir con un requisito esencial: ésta debe ser comprendida por
el resto del equipo, y por los usuarios.

El vocabulario visual de Garret

Existe una notación muy usada, actualmente, por los arquitectos de

información y los diseñadores de interacción, para hacer la diagramación de
sitios web, la cual fue creada por Jesse James Garret (http://www.jjg.net),
en el 1998, y que consiste, según él mismo lo define, 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,
líneas, y símbolos convenidos.

Este vocabulario visual de Garret es muy útil para representar el diseño de

interacción, aunque puede ser usado, y de hecho él lo define así, para
representar “la estructura conceptual y organización del contenido” (Garret
2002). Las ventajas que tiene el mismo son: que se puede hacer de forma
manuscrita y que no necesita un software para realizarlos.

Su notación está concebida para realizar un diseño de lo simple a lo

complejo, ya que comprende una notación siguiendo 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, ya sea arquitecto
de información o diseñador de interacción, expresarse de una forma simple
sin recurrir a una notación compleja.

Forma propuesta

A partir de la experiencia del autor se expone un sistema de diagramación

con una notación, que va de lo simple a lo complejo, usando muchas de las
figuras que han usado los creadores de productos electrónicos desde
tiempos pasados.

Se muestran una serie de iconos los cuales pueden ser usados para la
realización de tres tipos de diagramas. Esta propuesta iconográfica no es
rígida, puede ser adaptada y enriquecida según la necesidades del
proyecto.

Se proponen 3 tipos de diagramas de acuerdo a las funciones principales

que cumple un arquitecto de información, un diseñador de interacción y un

4
 diseñador de información; y han sido clasificados según sus objetivos
principales durante el diseño del producto. Estas clases son:
1. Diagrama de organización.
2. Diagramas de funcionamiento.
3. Diagrama de presentación.

Esta clasificación no significa que estos diagramas sean excluyentes. Debe

existir una interrelación entre los mismo, de manera que cada diagrama
creado, complemente al anterior, y se convierta en apoyo de los que
representa el mismo. Igualmente el establecimiento de clases en estos
diagramas no significa que haya que hacer rígidamente 3 diagramas, sino
que se pueden realizar varios (más de 3) hasta lograr el diseño de
arquitectura del producto. Esta propuesta no excluye a ningún otro modelo
de diagramación utilizado durante el proceso de arquitectura de
información, diseño de interacción o diseño de información. Perfectamente
puede complementarse con el vocabulario visual de Garret, con la
propuesta de Dan Brown, o cualquier otro modelo.

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
(boxes) y flechas o conectores (arrows).

cajas flechas y conectores

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 la forma en que funciona el producto, basándose en
los primeros diagramas creados. Esta propuesta iconográfica no debe ser
rígida y puede crecer.

5
 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, es el
diagrama básico que ayuda a entender la estructura general del producto.
Su realización se basa en taxonomías simples. Se realizan tantos como
haga falta para entender las estructuras del producto.

6
Ejemplo:

Inicio

Empresa Productos Contacto

Diagrama de organización

El Diagramas 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.

Ejemplo:

Diagrama de funcionamiento

El Diagrama de presentación es el que debe mostrar las formas de

organización de los contenidos en las páginas principales, por ejemplo: la
página inicial, las páginas interiores. Este diagrama no pretende ser el

7
 diseño gráfico sino que debe aportarle al usuario, y al resto de los
productores las prioridades organizativas de la pantalla y los objetos que
componen la interfaz.

Ejemplo:

Diagrama de presentación

Conclusiones
Los diagramas (wireframes) son mecanismos extremadamente necesarios
para el trabajo del arquitecto de información y el diseñador de información
de un sitio web, un libro electrónico, un sistema de información, etc.

Aunque existen formas de diagramación, desarrolladas según las diferentes

metodologías, o los diferentes autores, el enriquecimiento con nuevas
formas complementan las anteriores y contribuye a la creación de formas
futuras.

Para la realización de diagramas no hace falta “saber dibujar” sino que es

necesario representar, y con cajas y flechas se puede comenzar,
perfectamente bien.

Bibliografía

Brown, Dan. Representing data in Wireframes. [en línea] url:

http://www.greenonions.com/portfolio/dbrown_ia2005_wireframes.pdf

8
(consultado: mayo 2006)

Brown, Dan. The Visual Vocabulary Three Years Later: An Interview with
Jesse James Garrett. [en línea] url:
http://www.boxesandarrows.com/view/the_visual_vocabulary_three_years_later_a
n_interview_with_jesse_james_garrett (consultado: diciembre 2005)

Brown, Dan. Where the Wireframes Are: Special Deliverable #3. [en línea] url:
http://www.boxesandarrows.com/view/where_the_wireframes_are_special_deliver
able_3 (consultado: enero 2006)

Garret, Jesse James. A visual vocabulary for describing information

architecture and interaction design. (enero 2001) [en línea] url:
http://www.jjg.net/ia/visvocab/ (consultado: febrero 2005)

Garret, Jesse James. Un vocabulario visual para describir arquitectura de

información y diseño de interacción. Traducción: Javier Velazco (marzo 2002)
[en línea] url: http://www.jjg.net/ia/visvocab/spanish.html (consultado: abril 2005)

Océano Grupo Editorial. Enciclopedia didáctica de computación. Madrid:

Océano Grupo Editorial, 1998

Ronda León, Rodrigo. Productos electrónicos: principios y pautas. Editorial

Félix Varela, La Habana, 2005

Realización de la iconografía:
Diseñador: Irelio Alonso Torres irelio1@yahoo.com

Especialistas consultados:
Keilyn Rodríguez
Jorge Barahona