8/6/2019 La diagramacin en la arquitectura de informacin

1/11

La diagramacin en la arquitectura de

informacin

Rodrigo Ronda Len

Resumen:

En el presente artculo se propone un acercamiento conceptual a los diagramas en elproceso de creacin de arquitecturas de informacin. Se muestran algunas formas de hacer

diagramas, tipos de diagramas existentes y posibles herramientas para su elaboracin. El

autor tambin propone su propia forma para la elaboracin de diagramas.

Categora:Conceptos y Disciplinas

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 sitiosweb, esta interfaz tambin es objeto de diagramacin, especificando cul 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 unproducto que satisfaga sus necesidades.

En qu consiste la diagramacin

La diagramacin, a la cual nos referimos, consiste en la representacin de los contenidosque tendr un producto digital, y las relaciones entre dichos contenidos.

Desde sus orgenes los seres humanos representaron escenas de caza, danzas rituales y otros

aspectos de su vida. La representacin forma parte de la naturaleza cognitiva humana, y es

lgico que el hombre, en su devenir histrico, haya usado esta capacidad para plasmar enalgn soporte, ideas concebidas mentalmente.

La representacin se ha usado desde los comienzos del diseo de software, en forma de

organigramas, diagramas de flujo de datos, rboles de decisin, etc. Al evolucionar las

interfaces grficas de usuario, las labores de representacin se ampliaron con los llamadosguiones de navegacin y guiones de interaccin, los cuales consistan en diagramas que

representaban el funcionamiento de los productos electrnicos que se generaban en ese

momento.

http://www.nosolousabilidad.com/articulos/sec_disciplinas.htmhttp://www.nosolousabilidad.com/articulos/sec_disciplinas.htmhttp://www.nosolousabilidad.com/articulos/sec_disciplinas.htm

8/6/2019 La diagramacin en la arquitectura de informacin

2/11

La evolucin de los productos digitales, unida al crecimiento geomtrico de la informacin

que soportan, ha originado la necesidad de ampliar estas formas de representacin con otras

nuevas, o de enriquecer las existentes. Es por esto que se ha generalizado el uso de losesquemas de representacin entre arquitectos de informacin, enfocados a los aspectos

organizativos y representativos de la informacin.

Hay que sealar que durante el proceso de Arquitectura de Informacin se usan otrasformas de representacin, con diferentes objetivos. Por ejemplo, en la aplicacin de la

tcnica deCard Sorting se pueden generar dendogramas y grficos de escalamiento

multidimensional; otro ejemplo seran las representaciones de las estructuras mentales de

los usuarios tras una tormenta de ideas (brainstorming); o los organigramas de la empresapor la cual se crea el producto digital.

Los diagramas a los que se refiere este artculo son los que 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 bsico del mismo, y la

ubicacin que tendrn estos contenidos en la interfaz.

Los autores angloparlantes, pioneros en los temas del diseo y representacin del software,

dividen estos diagramas en 2 tipos:

Blueprints

Wireframes

Como sustituto del trmino Blueprint a veces se usa el de Architecture Map, que significa

Mapa de Arquitectura.

Tambin como trmino similar a wireframe se usan otros trminos como mockup yprototype (maqueta y prototipo). (Rosenfeld & Morville, Wodtke, Snyder)

El primer grupo de diagramas (blueprints), tiene como objetivo representar "las principales

reas de organizacin y rotulado" (Rosenfeld & Morville), y estn 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 funcin es explicitar iterativamente las decisiones de diseo, con el objetivo de

comunicar dichas decisiones al resto de miembros del equipo de desarrollo, o al clientefinal.

Christina Wodtke conceptualiza los Blueprint como: "Un plano de diseo es justamente una

buena idea llevada a la realidad a travs de la escritura".

El segundo grupo de diagramas (wireframe, mockup o prototype) tienen el objetivo de"mostrar el contenido de las pginas" (Rosenfeld & Morville), concretando los elementos

http://www.nosolousabilidad.com/articulos/cardsorting.htmhttp://www.nosolousabilidad.com/articulos/cardsorting.htmhttp://www.nosolousabilidad.com/articulos/diagramacion.htm#bibliohttp://www.nosolousabilidad.com/articulos/diagramacion.htm#bibliohttp://www.nosolousabilidad.com/articulos/diagramacion.htm#bibliohttp://www.nosolousabilidad.com/articulos/diagramacion.htm#bibliohttp://www.nosolousabilidad.com/articulos/cardsorting.htmhttp://www.nosolousabilidad.com/articulos/diagramacion.htm#bibliohttp://www.nosolousabilidad.com/articulos/diagramacion.htm#bibliohttp://www.nosolousabilidad.com/articulos/diagramacion.htm#bibliohttp://www.nosolousabilidad.com/articulos/diagramacion.htm#biblio

8/6/2019 La diagramacin en la arquitectura de informacin

3/11

que se plantearon en los primeros planos (blueprints) y ubicndolos en las pginas o

pantallas del producto final.

Este segundo grupo de diagramas estn comprendidos como prototipos de baja fidelidad, yaque se realizan en "blanco y negro" y no muestran el diseo grfico del producto ni la

funcionalidad de sus cdigos de programacin.

Los niveles de prototipos son:

Prototipos de baja fidelidad o estticos (wireframes, mockup)

Prototipos de fidelidad intermedia (diseo grfico)

Prototipos de alta fidelidad o dinmicos (Web, HTML)

Figura 1: Representacin de la diagramacin

Estos tipos de diagramas se realizan tambin de forma iterativa con el usuario y demsmiembros del equipo de desarrollo.

Aunque para la realizacin de estos diagramas existen aplicaciones software especializadas,

tambin es posible realizarlos en papel (paper prototype).

8/6/2019 La diagramacin en la arquitectura de informacin

4/11

Figura 2: Fotografa de realizacin de diagramas manuscritos.

Software para hacer diagramas

Existen diferentes aplicaciones software que se utilizan para la confeccin de diagramas.

Para una mejor comprensin de los mismos se han clasificado en 2 grupos: los que

originalmente fueron ideados para hacer diagramas, y los que originalmente no fueronpensados para diagramacin, pero que tambin pueden usarse con este objetivo ya que son

poderosas herramientas de diseo grfico.

Algunas aplicaciones software que fueron ideadas para hacer diagramas:

SmartDraw (http://www.smartdraw.com)

Microsoft Visio (http://www.microsoft.com) iGrafx Flowcharter (http://www.igrafx.de)

DENIM & Silk. (http://guir.berkeley.edu/projects/denim/)

Mindmanager (http://www.mindjet.com)

Freemind (http://freemind.sourceforge.net/)

OmniGraffle (OSX) (http://www.omnigroup.com)

Aplicaciones software que no fueron ideadas especficamente para hacer diagramas:

Corel Draw (http://www.corel.com)

Adobe [antes Macromedia] Freehand (http://www.adobe.com)

Adobe Illustrator (http://www.adobe.com)

Sistemas de diagramacin en la AI

Una notacin muy usada por arquitectos de informacin y diseadores de interaccin parahacer la diagramacin de sitios web es la propuesta por Jesse James Garret

(http://www.jjg.net), y que consiste, segn el propio autor, en un "vocabulario visual para

http://www.smartdraw.com/http://www.microsoft.com/http://www.igrafx.de/http://guir.berkeley.edu/projects/denim/http://www.mindjet.com/http://freemind.sourceforge.net/http://www.omnigroup.com/http://www.corel.com/http://www.adobe.com/http://www.adobe.com/http://www.jjg.net/http://www.smartdraw.com/http://www.microsoft.com/http://www.igrafx.de/http://guir.berkeley.edu/projects/denim/http://www.mindjet.com/http://freemind.sourceforge.net/http://www.omnigroup.com/http://www.corel.com/http://www.adobe.com/http://www.adobe.com/http://www.jjg.net/

8/6/2019 La diagramacin en la arquitectura de informacin

5/11

describir arquitectura de informacin y diseo de interaccin" (Garret, trad. Velasco. 2002).

El sistema de diagramacin est compuesto de smbolos geomtricos, flechas y lneas.

El vocabulario visual de Garret es muy til para representar tanto el diseo de interaccin,como la estructura conceptual y organizativa del contenido. (Garret, trad. Velasco. 2002).

Esta notacin grfica 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 (boxes) y

flechas (arrows). Este principio es el que le facilita a cualquier diseador comunicararquitecturas de informacin de forma fcilmente comprensible.

A visual vocabulary for describing information architecture and interaction design.

http://www.jjg.net/ia/visvocab/

Otra propuesta es la de Bill Scout, especialista de diseo de interaccin de la empresaYahoo!. Este vocabulario es muy completo, por la variedad de smbolos que ofrece.

Storyboarding rich internet applications with Visio.

http://www.boxesandarrows.com/view/storyboarding_rich_internet_applications_with_visi

o

YAHOO!http://billsportfolio.com

Looks Good Works Well: Visio Wireframe Toolkit for Download

http://looksgoodworkswell.blogspot.com/2005/11/visio-wireframe-toolkit-for-

download.html

Por otro lado Dan Brown propone otro vocabulario muy til para la distribucin de los

elementos dentro de las pantallas.

http://www.greenonions.com

Where the Wireframes Are: Special Deliverable #3.http://www.boxesandarrows.com/view/where_the_wireframes_are_special_deliverable_3

Garrett Dimon cre basndose en la propuesta de Dan Brown una serie de iconos para el

proceso de diagramacin:

http://v1.garrettdimon.com/resources/templates-stencils-for-visio-omnigraffle

La propuesta de Nick Finck tambin es diversa y til en la confeccin de diagramas para

sitios web.

http://www.nickfinck.com/stencils.html

Peter Van Dijk's es autor de otra propuesta que se puede encontrar en:http://iabook.com/template.htm

http://www.nosolousabilidad.com/articulos/diagramacion.htm#bibliohttp://www.nosolousabilidad.com/articulos/diagramacion.htm#bibliohttp://www.jjg.net/ia/visvocab/http://www.boxesandarrows.com/view/storyboarding_rich_internet_applications_with_visiohttp://www.boxesandarrows.com/view/storyboarding_rich_internet_applications_with_visiohttp://billsportfolio.com/http://looksgoodworkswell.blogspot.com/2005/11/visio-wireframe-toolkit-for-download.htmlhttp://looksgoodworkswell.blogspot.com/2005/11/visio-wireframe-toolkit-for-download.htmlhttp://www.greenonions.com/http://www.boxesandarrows.com/view/where_the_wireframes_are_special_deliverable_3http://v1.garrettdimon.com/resources/templates-stencils-for-visio-omnigrafflehttp://www.nickfinck.com/stencils.htmlhttp://iabook.com/template.htmhttp://www.nosolousabilidad.com/articulos/diagramacion.htm#bibliohttp://www.nosolousabilidad.com/articulos/diagramacion.htm#bibliohttp://www.jjg.net/ia/visvocab/http://www.boxesandarrows.com/view/storyboarding_rich_internet_applications_with_visiohttp://www.boxesandarrows.com/view/storyboarding_rich_internet_applications_with_visiohttp://billsportfolio.com/http://looksgoodworkswell.blogspot.com/2005/11/visio-wireframe-toolkit-for-download.htmlhttp://looksgoodworkswell.blogspot.com/2005/11/visio-wireframe-toolkit-for-download.htmlhttp://www.greenonions.com/http://www.boxesandarrows.com/view/where_the_wireframes_are_special_deliverable_3http://v1.garrettdimon.com/resources/templates-stencils-for-visio-omnigrafflehttp://www.nickfinck.com/stencils.htmlhttp://iabook.com/template.htm

8/6/2019 La diagramacin en la arquitectura de informacin

6/11

Joaqun Mrquez Correa propone una serie de grficos en Visio para la realizacin de

diagramas:

http://www.jmarquez.com/documentos/jmarquez%20wireframe%20shapes.zip

El Instituto de AI agrupa varias herramientas para diagramar y hacer arquitectura de

informacin en general. Contiene propuestas para el software Omnigraffle, Ilustrador yVisio.http://iainstitute.org/en/learn/tools.php

Un propuesta propia

A partir de la experiencia del autor, se propone un sistema de diagramacin con una

notacin que va de lo general a lo concreto, conformada por figuras ampliamente utilizadaspor los creadores de productos digitales desde tiempos pasados.

Se proponen tres tipos de diagramas de acuerdo a las funciones principales que cumple un

arquitecto de informacin en el diseo de un producto digital:

1. Diagramas de organizacin. (planos - blueprints)

2. Diagramas de funcionamiento. (planos avanzados - blueprints)3. Diagramas de presentacin. (maquetas - wireframes)

Esta clasificacin no significa que estos diagramas sean excluyentes. Debe existir una

interrelacin entre los mismos, de manera que cada diagrama creado complemente al

anterior, y se convierta en apoyo de los siguientes. Igualmente la divisin por grupos deestos diagramas no significa que haya que hacer rgidamente tres.

Adems, esta propuesta no excluye a ningn otro modelo de diagramacin. Perfectamentepodra complementarse con el vocabulario visual de Garret, con la propuesta de DanBrown, o cualquier otro modelo de los anteriormente mostrados.

Propuesta de iconos

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

Figura 3: Iconos para realizar diagramas de organizacin

http://www.jmarquez.com/http://www.jmarquez.com/documentos/jmarquez%20wireframe%20shapes.ziphttp://iainstitute.org/en/learn/tools.phphttp://www.jmarquez.com/http://www.jmarquez.com/documentos/jmarquez%20wireframe%20shapes.ziphttp://iainstitute.org/en/learn/tools.php

8/6/2019 La diagramacin en la arquitectura de informacin

7/11

Para hacer los diagramas de funcionamiento y los diagramas de presentacin se proponen

otros iconos ms trabajados visualmente, con el objetivo de representar el comportamiento

interactivo del producto.

Figura 4: Iconos para realizar diagramas de funcionamiento y diagramas de presentacin

Propuesta de diagramas

8/6/2019 La diagramacin en la arquitectura de informacin

8/11

Los diagramas de organizacin consisten en la representacin de los grupos organizados, y

de los elementos bsicos que contienen, siendo el diagrama bsico para entender la

estructura general del producto.

Figura 5: Diagrama 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 almismo. Debe ser el que muestre los niveles de navegacin as como los tipos de navegacin

en el producto.

8/6/2019 La diagramacin en la arquitectura de informacin

9/11

Figura 6: Diagrama de funcionamiento

El diagrama de presentacin es el que debe mostrar las formas de organizacin visual de

los contenidos en las pginas principales, por ejemplo: la pgina inicial, las pginasinteriores, pginas de productos, etc. Este diagrama no pretende representar el diseo

grfico o diseo visual en detalle, sino especificar el esqueleto organizativo de la interfaz.

Figura 7: Diagrama de presentacin

Conclusiones

Los diagramas son mecanismos esenciales en la arquitectura de informacin de sitios web,

libros electrnicos, sistema de informacin, etc.

Esta tcnica alivia el coste de produccin, al ser ms fcil y econmico rectificar un diseo

sobre el "papel" que sobre el producto implementado.

Aunque existen formas de diagramacin desarrolladas por diversos autores, la propuesta denuevas formas complementa las anteriores y contribuye a la creacin de formas futuras.

Dos versiones de la propuesta de iconos:

Microsoft Visio:elrodri.vss [115 kb]

http://www.nosolousabilidad.com/articulos/elrodri.vsshttp://www.nosolousabilidad.com/articulos/elrodri.vss

8/6/2019 La diagramacin en la arquitectura de informacin

10/11

Adobe Ilustrator: elrodri.ai [34 Kb]

Bibliografa

Brown, Dan. Representing data in Wireframes. Disponible en:

http://www.greenonions.com/portfolio/dbrown_ia2005_wireframes.pdf(consultado: mayo2006)

Brown, Dan. The Visual Vocabulary Three Years Later: An Interview with Jesse James

Garrett. Disponible en:http://www.boxesandarrows.com/view/... (consultado: diciembre 2005)

Brown, Dan. Where the Wireframes Are: Special Deliverable #3. Disponible en:

http://www.boxesandarrows.com/view/where_the_wireframes_are_special_deliverable_3

(consultado: enero 2006)

Garret, Jesse James. A visual vocabulary for describing information architecture andinteraction design. (enero 2001). Disponible en: http://www.jjg.net/ia/visvocab/

(consultado: febrero 2005)

Garret, Jesse James. Un vocabulario visual para describir arquitectura de informacin ydiseo de interaccin. Traduccin: Javier Velasco (marzo 2002). Disponible en:

http://www.jjg.net/ia/visvocab/spanish.html (consultado: abril 2005)

Ocano Grupo Editorial. Enciclopedia didctica de computacin. Madrid: Ocano Grupo

Editorial, 1998

Olsen, Henrik. Visio - the interaction designer's nail gun. How to use Visio for rapidprototyping. Disponible en:

http://www.guuui.com/issues/02_03_02.php (consultado: junio 2007)

Ronda Len, Rodrigo. Productos electrnicos: principios y pautas. Editorial Flix Varela,

La Habana, 2005

Rosenfeld, Louis & Morville, Peter. Information architecture for the World Wide Web.

OReilly & Associates. 1998.

Scott, Bill. Storyboarding Rich Internet Applications with Visio. Disponible en:

http://www.boxesandarrows.com/view/storyboarding_rich_internet_applications_with_visio. (consultado: enero 2007)

Zinder, Carolyn. Paper prototyping. The fast end easy way to design and refine user

interfaces. Morgan Kaufman, 1ra edicin, abril 2003.

Wodtke, Christina. Information architecture, blueprints for the web. New Riders, octubre2002.

http://www.nosolousabilidad.com/articulos/elrodri.aihttp://www.greenonions.com/portfolio/dbrown_ia2005_wireframes.pdfhttp://www.boxesandarrows.com/view/the_visual_vocabulary_three_years_later_an_interview_with_jesse_james_garretthttp://www.boxesandarrows.com/view/where_the_wireframes_are_special_deliverable_3http://www.jjg.net/ia/visvocab/http://www.jjg.net/ia/visvocab/spanish.htmlhttp://www.guuui.com/issues/02_03_02.phphttp://www.boxesandarrows.com/view/storyboarding_rich_internet_applications_with_visiohttp://www.boxesandarrows.com/view/storyboarding_rich_internet_applications_with_visiohttp://www.nosolousabilidad.com/articulos/elrodri.aihttp://www.greenonions.com/portfolio/dbrown_ia2005_wireframes.pdfhttp://www.boxesandarrows.com/view/the_visual_vocabulary_three_years_later_an_interview_with_jesse_james_garretthttp://www.boxesandarrows.com/view/where_the_wireframes_are_special_deliverable_3http://www.jjg.net/ia/visvocab/http://www.jjg.net/ia/visvocab/spanish.htmlhttp://www.guuui.com/issues/02_03_02.phphttp://www.boxesandarrows.com/view/storyboarding_rich_internet_applications_with_visiohttp://www.boxesandarrows.com/view/storyboarding_rich_internet_applications_with_visio

8/6/2019 La diagramacin en la arquitectura de informacin

11/11