-
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