05/06/2011

La diagramacin en la arquitectura de i

25 de Diciembre de 2007

La diagramacin en la arquitectura de informacin

Rodrigo Ronda Len Resumen: En el presente artculo se propone un acercamiento conceptual a los diagramas en el proceso 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 sitios web, 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 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 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 en algn 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 llamados guiones de navegacin y guiones de interaccin,
nosolousabilidad.com//diagramacion.h 1/10

05/06/2011

La diagramacin en la arquitectura de i

los cuales consistan en diagramas que representaban el funcionamiento de los productos electrnicos que se generaban en ese momento. 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 los esquemas 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 otras formas de representacin, con diferentes objetivos. Por ejemplo, en la aplicacin de la tcnica de Card 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 empresa por 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 y prototype (maqueta y prototipo). (Rosenfeld & M orville, 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 cliente final. 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 & M orville), concretando los elementos 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, ya que 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)
nosolousabilidad.com//diagramacion.h 2/10

05/06/2011

La diagramacin en la arquitectura de i

Figura 1: Representacin de la diagramacin Estos tipos de diagramas se realizan tambin de forma iterativa con el usuario y dems miembros del equipo de desarrollo. Aunque para la realizacin de estos diagramas existen aplicaciones software especializadas, tambin es posible realizarlos en papel (paper prototype).

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
nosolousabilidad.com//diagramacion.h 3/10

05/06/2011

La diagramacin en la arquitectura de i

comprensin de los mismos se han clasificado en 2 grupos: los que originalmente fueron ideados para hacer diagramas, y los que originalmente no fueron pensados 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 para hacer 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 describir arquitectura de informacin y diseo de interaccin" (Garre t, 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 comunicar arquitecturas 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 empresa Yahoo!. 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_visio 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
nosolousabilidad.com//diagramacion.h 4/10

05/06/2011

La diagramacin en la arquitectura de i

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 Joaqun M rque z 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 y Visio. 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 utilizadas por 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 de estos diagramas no significa que haya que hacer rgidamente tres. Adems, esta propuesta no excluye a ningn otro modelo de diagramacin. Perfectamente podra 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 organizacin se proponen una serie de iconos simples, iguales que los que propone Garret. Se basan en cajas y flechas o conectores.

nosolousabilidad.com//diagramacion.h

5/10

05/06/2011

La diagramacin en la arquitectura de i

Figura 3: Iconos para realizar diagramas de organizacin 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.

nosolousabilidad.com//diagramacion.h

6/10

05/06/2011

La diagramacin en la arquitectura de i

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

Propuesta de diagramas
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 al mismo. Debe ser el que muestre los niveles de navegacin as como los tipos de navegacin en el producto.

Figura 6: Diagrama de funcionamiento

nosolousabilidad.com//diagramacion.h 7/10

05/06/2011

Figura 6: Diagrama de funcionamiento

La diagramacin en la arquitectura de i

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 pginas interiores, 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 de nuevas 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] 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: mayo 2006)
nosolousabilidad.com//diagramacion.h 8/10

05/06/2011

La diagramacin en la arquitectura de i

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 and interaction 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 y diseo 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 rapid prototyping. 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, octubre 2002.

Colaboraciones
Diseador de la iconografa: Irelio Alonso Torres [irelio1@yahoo.com] Especialistas consultados: Keilyn Rodrguez [keilyn@infomed.sld.cu] (Cuba) http://www.infomed.sld.cu Jorge Barahona [jbarahona@ayerviernes.com] (Chile) http://www.ayerviernes.com

Acerca del autor/a: Rodrigo Ronda Len es Licenciado en Bibliotecologa y Ciencia de la Informacin de la Facultad de Comunicacin de la Universidad de la Habana. Ha trabajado como arquitecto de informacin, analista de sistema y diseador de informacin en instituciones cubanas. Profesor adjunto de la Facultad de Comunicacin de la Universidad de la Habana en la carrera Bibliotecologa y Ciencia de la Informacin. Contacto: rodricoco05@yahoo.com. Web personal: rodriweb
nosolousabilidad.com//diagramacion.h 9/10

05/06/2011

La diagramacin en la arquitectura de i Contacto: rodricoco05@yahoo.com. Web personal: rodriweb Otros artculos publicados en NSU.

Citacin recomendada: Ronda Len, Rodrigo; (2007). La diagramacin en la arquitectura de informacin. En: No Solo Usabilidad, n 6, 2007. <nosolousabilidad.com>. ISSN 1886-8592

No Solo Usabilidad journal - ISSN 1886-8592. Todos los derechos reservados, 2003-2010 email: info (arroba) nosolousabilidad.com

nosolousabilidad.com//diagramacion.h

10/10