Titulo Largo Artículo 1.10 El prototipado en la arquitectura de la información Titulo Corto Artículo 1.10 Autor Mario Pérez-Montoro Palabras clave Arquitectura de la Información, Prototipado, Wireframe, Blueprint Descripcion El diseño y planificación de la arquitectura de la información de los

distintos componentes de un sitio web pasa necesariamente por una propuesta de prototipado de la estructura de ese entorno informacional. El objetivo de esta unidad es analizar los principales elementos y algunas de las herramientas relacionadas con el prototipado utilizado en el diseño y creación de páginas web. Para cubrir ese objetivo, esta unidad ha sido estructurada y articulada de la siguiente manera. En el primer apartado (apartado 2), se abordan las principales funciones del prototipado utilizado en el diseño de la arquitectura de la información de una página web. En el siguiente apartado (apartado 3), se analizan los dos tipos principales de esos diagramas o prototipos involucrados en ese diseño. Por último, en el apartado 4, se revisan algunas de las soluciones informáticas (en línea y de escritorio) diseñadas para la creación de prototipado de sitios web.

Objetivos Contenidos Evaluacion

Actividad Enunciado del ejercicio

Realizar un primer análisis de las webs de Zara (http://www.zara.com/webapp/wcs/stores/servlet/home/es/es/zara-sales) y Máximo Dutti (http://www.massimodutti.com/Dutti/es/principal) y tratar de identificar los principales elementos arquitectónicos que éstas presentan.

Tras ese análisis, tendréis que utilizar una herramienta simple de prototipado en forma de plantilla de Google docs que se encuentra en la página web http://mortenjust.com/2010/04/19/a-wireframe-kit-for-google-drawings/.Para poder obtener esa la plantilla, sólo hay que abrirla en la página anterior y guardarla entre nuestros documentos google docs. Una vez que tenemos una copia entre nuestros documentos; para crear propuestas de prototipado, se copian y se arrastran a voluntad los elementos que se necesiten.

Existen dos opciones distintas de ejercicio:

Opción A. Utilizando esa sencilla herramienta, proponed de forma argumentada cómo podría ser el wireframe de la página web principal de una empresa fabricante de ropa que quiera abrir una nueva línea de negocio a través de las ventas por internet.

Opción B. Aquellos alumnos que quieran hacer un ejercicio más completo pueden utilizar ésta u otra herramienta de prototipado más compleja y proponer de forma argumentada, además, un blueprint que incluya los diferentes tipos de contenidos que cuelgan de esa página principal.

Introducción

Existe cierto consenso a la hora de convenir que la Arquitectura de la Información debe ser entendida como la disciplina (arte y ciencia) que proporciona métodos y herramientas para estructurar, organizar y etiquetar los componentes que conforman los entornos informacionales. En este sentido, persigue el objetivo de facilitar el acceso a la información contenida en esos entornos y mejorar, así, su utilidad y aprovechamiento por parte de sus usuarios (Pérez-Montoro, 2010a).

Como resultado, esta disciplina se encarga de sustentar, en buena parte, la potencial utilidad de los sitios web. Sin una buena arquitectura de la información, los usuarios simplemente no acceden a los contenidos de un sitio (Morville, Rosenfeld, 2006). A su vez, el adecuado diseño y planificación de la arquitectura de la información pasa necesariamente por una propuesta de prototipado de la estructura arquitectónica de ese entorno informacional.

Se trata de crear y diseñar una serie de diagramas donde se recojan de forma exhaustiva y pormenorizada los elementos de la arquitectura de la información que va a estructurar el sitio web. O dicho en otros términos, el prototipado consiste en una representación gráfica de los diversos componentes de la estructura arquitectónica básica que va a ayudar a garantizar la utilidad de ese sitio web.

Funciones del prototipado

La adecuada especificación de requisitos cumple un papel fundamental en el éxito del, a veces, muy complicado profeso de concepción y diseño de un sitio web, especialmente si se trata de un sitio previsto para albergar grandes volúmenes de información y/o para dar soporte a funciones complejas.

A su vez, el prototipado es un componente fundamental y crítico en el conjunto de elementos que forman la especificación de un sitio web (Pedraza-Jiménez, 2009), ya que está vinculado directamente con la concepción y el desarrollo de la futura arquitectura de la información del sitio.

El resultado principal que se obtiene con el prototipado son una serie de diagramas. Esos diagramas o prototipos se diseñan para cubrir dos funciones básicas esenciales: una representacional y otra comunicativa (Pérez-Montoro y Codina, 2010).

Respecto a la primera de ellas, los prototipos se diseñan para representar todos los aspectos básicos de los elementos arquitectónicos del sito web. Entre esos aspectos se recoge esencialmente los componentes de cada unos de los sistemas (organización, etiquetado, navegación, búsqueda y lenguajes) que conforman la anatomía de la arquitectura del sitio, la estructura de los contenidos que conforman ese sitio y las relaciones existentes entre éstos.

Y, por otro lado, repecto a la segunda función, se diseñan con la idea de poder comunicar de forma eficaz esos aspectos básicos de los elementos arquitectónicos (Brown, 2007). Esta segunda función adquiere una dimensión muy importante si no perdemos de vista que para que el proyecto del diseño y desarrollo de un sitio web se realice adecuadamente debe articularse la propuesta del arquitecto de la información con las aportaciones de otros profesionales implicados en ese proyecto como, por ejemplo, los diseñadores, los desarrolladores, los autores de contenidos, los propios gestores del proyecto pero también los expertos en usabilidad y diseños centrados en el usuario (Yusef et al. 2004).

En la misma línea, finalmente, la propuesta debe ser también examinada y eventualmente aprobada por parte de quién está dispuesto a financiar el proyecto. Por tanto, el prototipado cumple también una función estratégica de comunicación entre el equipo de diseño y los responsables que aprueban

(o suspenden) el proyecto.

Para ayudar al diseño, la estandarización y la comunicación de las propuestas de diagramación o prototipado, existen una serie de lenguajes o vocabularios visuales (con su sintaxis y semántica propias) ya establecidos que permiten representar adecuadamente esos aspectos y elementos arquitectónicos a los que hacemos referencia. Entre esos lenguajes, uno de los más conocidos y utilizados es el propuesto por Jesse James Garrtett y que se recoge de forma sintética en la figura 1. Como podemos ver, en esta figura aparece una propuesta de cómo representar de forma visual la mayoría de los elementos y las relaciones que conforman la estructura arquitectónica de un sitio web.

Figura 1. Propuesta de vocabulario visual ( http://www.jjg.net/ia/visvocab/spanish.html )

Tipos de prototipado

Existen dos tipos principales de diagramas o prototipos que suelen utilizarse para representar la propuesta arquitectónica de una página web: los blueprints y los wireframes (Pérez-Montoro, 2010a).

Blueprints

En términos generales, el blueprint (plano o mapa) de un sito web debe ser entendido como un esquema donde se representa la estructura arquitectónica de ese sitio web con todas sus páginas y donde se ponen de manifiesto las distintas relaciones existentes entre la página principal, las páginas que conforman el sitio y los contenidos que componen esas páginas.

Se utilizan para dar cuenta de los aspectos esenciales de los sistemas de organización, etiquetado y navegación. Se suelen conocer también bajo los nombres "mapa de la página" o "mapa del sitio" ("sitemap", en inglés). Son una herramienta clave para el posterior trabajo de los desarrolladores del sitio web y para la orientación de los usuarios de ese sitio.

Dependiendo de la perspectiva que abordan, normalmente se acostumbran a discriminar entre dos tipos de blueprints: los blueprints utilizados en la arquitectura general y los buelprints utilizados en la arquitectura detallada (Morville y Rosenfeld, 2006).

Los blueprints para la arquitectura general acostumbran a mostrar de una forma muy esquemática, partiendo de la página principal, las páginas que conforman un sitio web, las relaciones existentes entre estas a través de los enlaces que las conectan y cómo estás se encuentran agrupadas en el sistema de organización y en el de navegación. Se suelen utilizar para discutir la arquitectura general del sitio, para mostrar la organización del sitio web a los responsables del encargo y como guía para los diseñadores y desarrolladores del sitio y para los usuarios (a partir de éstos se suele generar posteriormente el mapa del sito). Normalmente, para que puedan ser correctamente interpretados, vienen acompañados por una pequeña leyenda donde se explica el significado de los símbolos del lenguaje visual empleado en su confección. Un ejemplo de este tipo de blueprint lo

encontramos en la figura 2. En el recuadro inferior de la figura aparece la leyenda explicativa del lenguaje visual utilizado.

Figura 2. Ejemplo de blueprint para la arquitectura general (Morville y Rosenfeld, 2006; pág. 297)

Los blueprints para la arquitectura detallada, en cambio, acostumbran a mostrar de una forma muy esquemática, para cada una de las páginas que conforman un sitio web, las páginas que a su vez cuelgan de éstas y el sistema de navegación que las articula. Se suelen utilizar también para discutir los aspectos de la arquitectura relacionados con esas páginas, como guía para los diseñadores y desarrolladores del sitio, y cuando se implementan en la versión funcional del sitio web, como recurso para completar los sistemas de organización y navegación y facilitar así la localización de información por parte de los usuarios. Al igual que los utilizados para la arquitectura general, para que puedan ser correctamente interpretados, vienen acompañados por una pequeña leyenda donde se explica el significado de los símbolos del lenguaje visual empleado en su confección. Un ejemplo de este tipo de blueprint lo encontramos en la figura 3; donde se recoge la arquitectura de la página de las comunicaciones y ponencias del sitio web de una edición del congreso anual SIGGRAPH sobre técnicas interactivas y de visualización. De nuevo, como en el caso anterior, en el recuadro inferior de la figura aparece la leyenda explicativa del lenguaje visual utilizado.

Figura 3. Ejemplo de blueprint para la arquitectura detallada (Morville y Rosenfeld, 2006; pág. 305)

Wireframes

Los wireframes (o maquetas) son prototipos arquitectónicos de cada una de los tipos de página que conforman un sitio web. Son una especie de esquema donde queda representado el contenido y la arquitectura de la información (sin elementos gráficos) de cada uno de esos tipos de página. En este sentido, se muestra cuál es el aspecto de una página desde la perspectiva de su arquitectura haciendo hincapié en cómo se agrupan y ordenan los componentes de la página. En cierta manera, pueden ser considerados como la intersección entre la arquitectura de la información de una página con su visualización y diseño.

Un ejemplo de wireframe lo encontramos en la figura 4. Como podemos apreciar, en el wireframe se acostumbra a representar, entre otros, la posición del sistema de navegación, la ubicación de los enlaces, la estructura de la página o el lugar donde se ubica el sistema de búsqueda. Como vemos, sólo se representan aquellos aspectos que sean relevantes desde el punto de vista arquitectónico,

dejando fuera de la representación aquellos aspectos visuales o de diseño como, por ejemplo, el tipo y el tamaño de la fuente del texto o los distintos colores de fondo utilizados en la página. Es importante también señalar que este tipo de representaciones arquitectónicas suelen estar articuladas con los blueprints, de manera que, los cambios o reformulaciones en uno de ellos terminan también provocando cambios en el otro.

Figura 4. Ejemplo de wireframe ( http://unify.eightshapes.com/uploads/documents/EightShapesUnifySample.DesignSpecification.pdf )

Se suelen aplicar a la mayoría de los tipos de página que conforman un sitio web. Aunque de forma especial, se suelen desarrollar de forma pormenorizada para, por ejemplo, la página principal o de inicio, las páginas más importantes que forman parte del sitio, las páginas de ayuda al usuario o la página dedicada a albergar la interfaz de búsqueda.

Al igual que los blueprints, se suelen utilizar también para discutir la arquitectura de los tipos de página y para la comunicación de los aspectos arquitectónicos a otros profesionales (diseñadores, desarrolladores o creadores de contenido, por ejemplo) involucrados en el proceso de diseño y creación del sito web.

Dependiendo de la granulidad que presentan, normalmente se acostumbran a distinguir tres tipos de wireframes: los wireframes de baja fidelidad, los wireframes de granulidad intermedia y los wireframe de alta fidelidad (Morville y Rosenfeld, 2006).

Los wireframes de baja fidelidad acostumbran a mostrar los aspectos arquitectónicos básicos de un tipo de página web sin incluir elementos gráficos y sin contenido real. En definitiva, sólo representan los elementos de navegación global, local y contextual de la página. Un ejemplo de wireframe de este tipo lo podemos encontrar en la figura 5.

Figura 5. Ejemplo de wireframe de baja fidelidad (Morville y Rosenfeld, 2006; pág. 310)

Por otro lado, los wireframes de fidelidad intermedia suelen recoger los aspectos arquitectónicos básicos de un tipo de página web incluyendo algunos elementos gráficos y algunas unidades de contenido real. En definitiva, representan los elementos de navegación global, local y contextual de la página completados con otros elementos finales que aparecerán en la versión de la página web

que se le ofrecerá al usuario. Un ejemplo de wireframe de este tipo lo podemos encontrar en la figura 6.

Por último, los wireframes de fidelidad alta acostumbran a representar los aspectos arquitectónicos básicos de un tipo de página web incluyendo todos los elementos gráficos y el contenido real que completarán la página. En definitiva, representan los elementos de navegación global, local y contextual de la página completados con todos los elementos finales que aparecerán en la versión de la página web que podrá visitar el usuario. Se suelen diseñar directamente en html para tener una imagen más vívida de cómo terminará siendo la página web. Un ejemplo de wireframe de este tipo lo podemos encontrar en la figura 7.

Frente a los dos anteriores, las ventajas que presenta este último tipo de prototipado son claras. Por un lado, recogen otros aspectos (colores, tamaño y tipo de letra, etc.), más allá de los exclusivamente arquitectónicos, relacionados con la usabilidad de la página. Y, por otro, al incluir todos esos aspectos se convierten en los candidatos ideales, frente a los otros dos tipos de wireframes, para poder ser utilizados de forma más adecuada y con mayores beneficios en los test de usuarios y en la evaluación. Pero el desarrollo de este tipo de prototipado también presenta algunos inconvenientes. Por un lado, su desarrollo exige un mayor esfuerzo y coste que los otros dos tipos de prototipado. Y, por otro, el hecho de generarlos con tanta fidelidad obliga también a tener que diseñar el libro de estilo y las guías del diseño de todo el sitio web en un momento del proyecto en el que todavía no se tienen resueltos y decididos definitivamente todos y cada uno de los aspectos relacionados con el diseño, la arquitectura, la usabilidad y la accesibilidad de las páginas que lo conforman.

Figura 6. Ejemplo de wireframe de fidelidad intermedia (Morville y Rosenfeld, 2006; pág. 311)

Dejando a un lado la tipología de wireframes, y aunque no exista una metodología clara a la hora de implementarlos, es posible enumerar, aunque sea de una forma muy sintética, una serie de recomendaciones que pueden seguirse para garantizar la utilidad y la eficiencia de este tipo de prototipado.

En este sentido, por ejemplo, es recomendable mantener la consistencia en cada tipo de página e implementarlos con un mismo nivel de granulidad. Esta uniformidad y consistencia evitará posteriores inconsistencias en la creación de las páginas por parte de los desarrolladores.

Por otro lado, es aconsejable también establecer las leyendas y notas explicativas que regirán el lenguaje visual utilizado para construir el prototipado. Estas leyendas y notas permitirán explicar la funcionalidad de los elementos de la página y facilitará la comunicación de los aspectos de la arquitectura de la información a otros profesionales (diseñadores o creadores de contenido, por ejemplo) implicados en el desarrollo del sitio web.

Figura 7. Ejemplo de wireframe de alta fidelidad (Morville y Rosenfeld, 2006; pág. 312)

Llevar un control y una gestión de wireframes, es otra recomendación interesante. Así, por ejemplo, y entre otros aspectos, para cada wireframe hay que tratar de asignarle un nombre, especificar a qué proyecto pertenece, cuál es el número de su versión o cuál fue su fecha de creación. Este control y gestión nos permitirá una explotación más eficaz de nuestros esfuerzos de prototipado, permitiéndonos tener identificada y ubicada cada una de las propuestas de representación y pudiendo aprovechar más tarde soluciones arquitectónicas que habíamos incluido en el prototipado de proyectos realizados con anterioridad. En esta misma línea, es aconsejable también reportar posteriormente el histórico de wireframes en la memoria final del proyecto, incluyendo y mostrando la evolución que éstos han seguido a partir de las discusiones realizadas.

A partir de la información recabada mediante estrategias de benchmarking, también es recomendable adoptar las mejores prácticas y evitar las malas prácticas arquitectónicas de sitios web ya existentes y similares al que estamos desarrollando. En este sentido, analizando esas páginas web competidoras, debemos incorporar en nuestros prototipados aquellos elementos arquitectónicos comunes y que los usuarios están acostumbrados a encontrarse y a utilizarlos. La incorporación de esos elementos comunes facilitará la posterior utilización de nuestro sitio web por parte de los usuarios y permitirá, en definitiva, que nuestro sitio sea más útil. Es interesante destacar también que la incorporación de esos elementos se debe realizar sin olvidar que, como hemos identificado en la fase de análisis, para el sitio web que estamos desarrollando existen diferentes tipos de usuarios que presentan diferentes habilidades y niveles de alfabetización informacional.

Por último, es aconsejable tratar de que los wireframes incorporen algún tipo de interactividad y que respeten los estándares de accesibilidad (Wodke, 2002). Que incorporen cierto grado de interactividad (que sean navegables a través de la activación de los enlaces que incorpora, por ejemplo) facilitará la comunicación y la discusión de estas propuestas de prototipado con otros profesionales involucrados en el desarrollo del sitio web y permitirá también que podamos utilizarlos directamente en algunos test de tareas con usuarios seleccionados para evaluar ciertos elementos arquitectónicos (como los sistemas de navegación u organización, por ejemplo). Respetando los estándares de accesibilidad en el prototipado conseguiremos que las páginas que se terminarán construyendo a partir de ese prototipado respeten también esos estándares y se garanticen el acceso a cualquier tipo, desde el punto de vista sensorial, de usuario.

Herramientas de prototipado

Para facilitar las tareas de creación del prototipado involucrado en el diseño de la arquitectura de la información existen muchas herramientas informáticas en el mercado.

Estas herramientas o software de prototipado suele incluir al menos cuatro tipos de elementos o funciones: una librería de objetos, una representación de la arquitectura del sitio (blueprint), un sistema de anotaciones y un sistema de gestión de proyectos.

La librería de objetos (widgets) se utiliza para representar los componentes más habituales de una

página web: barras de navegación, cajas de búsqueda, formularios, bloques de texto, etc. Normalmente, funciona mediante la acción de arrastrar y soltar en el lienzo, y a partir de aquí frecuentemente se pueden editar sus propiedades (color, fondo, dimensióin, etc.).

La representación de la arquitectura del sitio (blueprint) muestra el mapa completo del sitio y las conexiones entre las páginas. La mayor parte de los programas generan este blueprint de forma automática a medida que se van creando las nuevas páginas del sitio.

El sistema de anotaciones permite describir, aclarar o especificar los componentes de una página.

Por último, el sistema de gestión de proyectos incluye una historia de las versiones, gestión de usuarios, o un sistema de seguimiento a partir de un calendario, entre otras utilidades.

La introducción de una serie de combinaciones y variaciones sobre las cuatro funciones principales puede habilitar también, por ejemplo, la creación de wireframes dinámicos, es decir, con enlaces navegables entre los componentes del sitio o con sitios externos; sistemas de dibujo a mano alzada; o formatos más o menos amplios de importación y exportación, entre otras opciones.

Dejando al margen su elementos y funcionalidades, las principales soluciones informáticas utilizados para el diseño arquitectónico de una página web pueden clasificarse en dos grandes tipos: las herramientas de escritorio y las herramientas en línea (Pérez-Montoro y Codina, 2010).

Herramientas de escritorio

Existe un amplio conjunto de herramientas de escritorio (comerciales y gratuitas) muy utilizadas por los profesionales dedicados al diseño de interacción en general y a la arquitectura de la información en particular. En ese conjunto de soluciones de escritorio se incluyen, entre otras, herramientas como OmniGraffle ( http://www.omnigroup.com ), Denim ( http://dub.washington.edu:2007/projects/denim ) , Conceptdraw ( http://www.conceptdraw.com ), Smartdraw ( http://www.smartdraw.com ) o Pencil Project ( http://www.evolus.vn/pensil ).

Aunque son Axure ( http://www.axure.com ) junto a Visio ( http://office.microsoft.com/es-es/visio/default.aspx ), las dos soluciones que pueden ser identificadas como las herramientas de prototipado más utilizadas por los arquitectos de la información.

Axure

Se trata de una herramienta de escritorio diseñada específicamente para el prototipado de entornos web (wireframes y blueprints). Tradicionalmente ha sido una solución gráfica para ordenadores con sistema operativo Windows, aunque, conscientes de la importancia de ese mercado, se ha desarrollado una versión para máquinas que funcionan con el sistema operativo de Apple.

Respecto a sus características, es importante destacar que la interfaz de esta herramienta sólo se presenta en lengua inglesa. Se trata de una herramienta con cierto grado de versatibilidad al permitir, además del diseño de wireframes y blueprints, la generación de diagramas de flujo aprovechando la galería de recursos que ofrece.

Incorpora una librería estándar formada por una veintena de los principales elementos gráficos clásicos utilizados en el diseño del prototipado de páginas web. Son fáciles de utilizar, arrastrándolos directamente de la librería al documento de trabajo y sometiéndolos posteriormente a la edición correspondiente. La librería permite la gestión y edición de los elementos que ofrece y la incorporación de nuevos componentes gráficos externos. Aunque la versión que se adquiere no incorpora en su librería elementos gráficos para poder realizar el prototipado de aplicaciones para

entornos de interacción móviles como el del iphone, es posible importar esos elementos desde otras páginas que nos ofrecen algunos desarrolladores externos (como, por ejemplo, http://www.paulsizemore.com/axure-iphone-widgets-and-library).

Respecto a la interactividad con otras herramientas, Axure permite la exportación de su propuestas de prototipado a lo siguientes formatos: Html, Word, Cvs, algunos formatos de imagen (Bitmap, PNG, JPG o GIF) y RP (formato propio de Axure). En cambio, sólo permite la importación directa de ficheros en formato RP de Axure.

Entre las virtudes de esta herramienta destaca, además, la posibilidad de incluir anotaciones y notas a pie de página aclaratorias de los prototipos realizados. Estas opciones complementarias facilitan las tareas de comunicación que tiene que emprender el arquitecto de la información con, por ejemplo, el cliente o con los desarrolladores finales de la página web. Axure incluye también la posibilidad de poder crear y editar proyectos de creación colaborativa de prototipado entre varios arquitectos que contempla un sistema de control de versiones.

Existe la posibilidad de que los prototipos creados con esta herramienta puedan ser dinámicos y permitan la interactividad y la navegación entre sus contenidos. En la página oficial de la herramienta aparecen una importante biblioteca de plantillas de wireframes y blueprints, tutoriales de ayuda para aprender a extraerle el máximo provecho a la herramienta, un blog donde se presentan las novedades y los avances de las nuevas versiones, un espacio de soporte en el que se presentan las principales FAQs (preguntas más frecuentes) sobre el producto, e incluso un foro (en inglés) muy dinámico donde participa la comunidad de usuarios de la herramienta y donde se aclaran de forma colaborativa todas las dudas de funcionamiento que puedan surgir a partir de su utilización por parte de esos usuarios.

Visio

La herramienta Visio fue adquirida por Microsoft en el año 2000. Hasta ese momento, aunque incluyera otras funcionalidades, era una aplicación de escritorio orientada, principalmente, al dibujo técnico que se desarrolla en proyectos de ingeniería y de arquitectura. A partir de entonces, la estrategia de Microsoft sobre esta herramienta se centra en el desarrollo y la promoción del resto de las funcionalidades de visualización gráfica.

En este sentido, sin dejar de lado las funcionalidades relacionadas con la ingeniería (como los circuitos, fluidos o los sistemas de control) y con la arquitectura (como los mapas y planos de planta), se ha apostado de forma explícita por el desarrollo de formas de visualización para la empresa (organigramas, lluvia de ideas, diagramas de flujo; entre otras), para la gestión de proyectos (diagramas de Gantt y diagramas PERT; por ejemplo) o para el prototipado de páginas web (como los blueprints y wireframes). Esta apuesta ha provocado un claro aumento de la versativilidad de esta solución frente a otras herramientas de prototipado.

La herramienta nos permite trabajar con su interfaz en inglés o en español. Esa interfaz, nos ofrece una librería estándar formada por una cincuentena de elementos gráficos que habitualmente se suelen utilizar en el diseño del prototipado de páginas web. Estos elementos se utilizan desplazándolos directamente de la librería al documento de trabajo y admiten una edición posterior. La librería, que puede ser enriquecida con nuevos elementos gráficos que nos ofrecen algunos desarrolladores externos (como, por ejemplo, http://www.guuui.com/issues/02_07.php), aporta una caja de búsqueda para facilitar el acceso al elemento que buscamos a partir de su nombre.

Respecto a la interactividad con otras herramientas, Visio permite la exportación de sus propuestas de prototipado a diferentes formatos como, por ejemplo, PDF, Html, SGV, autocad, TIFF, JPEG, GIF, PNG o su propio formato Visio. Respecto a la importación de fichero, admite, entre otros, los formatos Html, SGV, autocad, TIFF, JPEG, GIF, PNG o su propio formato Visio.

La solución habilita la posibilidad de incluir anotaciones y notas a pie de página aclaratorias de los prototipos realizados y permite también emprender y editar proyectos de creación colaborativa de prototipado. Por otro lado, cabe destacar que esta herramienta permite la creación de prototipos dinámicos y que permiten la navegación entre sus contenidos.

Por último, es importante señalar que en la página oficial de la solución aparecen una importante biblioteca de plantillas de gráficas (aunque no se incluyen plantillas de wireframes y blueprints), tutoriales de ayuda, un espacio con videos de formación, un apartado de soporte y comentarios, e incluso unos grupos de discusión (en español) donde se pueden solucionar de forma colaborativa las dudas de funcionamiento y uso.

Herramientas en línea

Como es sabido, en los últimos años ha aparecido una amplia gama de aplicaciones basadas en el llamado cloud computing, es decir, aplicaciones que se ejecutan a través de un navegador y sin necesidad de instalar software adicional.

Para algunas empresas y profesionales esto es una ventaja porque evita la instalación y el mantenimiento de programas en los ordenadores de la empresa. Además, de forma automática los datos y documentos creados con estas aplicaciones quedan guardados en servidores de Internet, por lo cual se puede acceder a ellos desde cualquier ordenador del planeta. Por esta misma razón, todos facilitan la edición colaborativa y los grupos de trabajo, en algunos casos con el recurso además de sistemas de comunicación síncronos como el chat e incluso con el uso de sistemas de test de usuarios en línea. Naturalmente, todas estas son funciones con las que las aplicaciones de escritorio, por definición, no pueden competir.

Además, al ejecutarse sobre cualquier navegador estándar (como Explorer, Safari o Mozilla) estas aplicaciones en realidad son independientes de la plataforma del usuario (Windows, Linux, Mac, etc.).

No es extraño, por todo ello, que ya dispongamos de un conjunto de aplicaciones en línea para el prototipado web. No obstante, en general, las aplicaciones en línea son menos sofisticadas que las aplicaciones de escritorio. En contrapartida, otra característica general de los programas en línea es su bajo coste (siempre bajo la forma de una suscripción) así como la existencia de versiones (típicamente denominadas basic) a coste cero.

Existe un amplio conjunto de herramientas en línea que pueden ser utilizadas por los profesionales dedicados al diseño de interacción en general y a la arquitectura de la información en particular. En ese conjunto de soluciones de escritorio se incluyen, entre otras, herramientas como Pidoco, Lovely Chart, MockingBird o Lumzy. Aunque destacan, por su funcionalidad y prestaciones, Mockflow (www.mockflow) e iPlotz, .

Mockflow

Mockflow es una aplicación online para el diseño de interfaces de usuario, incluyendo productos de software en general, pero está claramente especializada en el prototipado de sitios web. En este último sentido, es uno de los productos más completos gracias a su especialización.

Presenta una interfaz muy elegante y de un uso sumamente intuitivo que permite la creación de prototipos de una forma muy rápida. Al mismo tiempo es una de las aplicaciones que proporciona un mayor número de elementos (o widgets) de diseño, tanto de tipo estándar como para móviles.

Proporciona casi todo lo que se puede esperar de un programa especializado en prototipado: control de versiones, colaboración en tiempo real, anotaciones, diseño basado en esquemas, importación de esquemas predefinidos, generación de mapas del web, uso de parrillas (o grids), entre otras muchas opciones más. Adicionalmente, dispone de una aplicación gemela de escritorio para quienes prefieran trabajar en modo offline. Por último, vale la pena señalar que es uno de los programas que disponen de versión gratuita (tipo basic) sin ninguna restricción funcional, únicamente en relación al número de proyectos y de páginas de cada proyecto.

iPlotz

iPlotz ( www.iplotz.com ) es otro de los pesos pesados de las aplicaciones online especializadas en prototipado. Comparte muchas de las características de su gran rival comercial en esta área (Mockflow, comentado más arriba), como su elevada especialización, el gran número de elementos (sobre un centenar), la aportación de elementos móviles, o wireframes dinámicos, entre otras.

Destaca sobre otras aplicaciones online de esta especialidad en sus opciones de exportación, y muy en particular las exportaciones en HTML, con un resultado de una fidelidad extraordinaria. La interfaz de usuario es eficaz y muy eficiente, pero tal vez un poco intimidatoria comparada con la sencillez de, por ejemplo, Mockflow.

No obstante, parte de esa complejidad procede del mayor número de funciones que presenta iPlotz en relación a las demás aplicaciones. Esto incluye el hecho de ser una de las aplicaciones en línea que proporciona un número más alto de opciones de exportación (JPG, PNG, PDF, HTML), así como funciones específicas de gestión de proyectos y de edición colaborativa. Es, además, una de las aplicaciones que suministra una versión gratuita sin limitaciones funcionales (pero como siempre, con limitaciones del número de proyectos).

Bibliografía

Brown, D. (2007). Communicating design: developing web site documentation and planning . Berkeley: New Riders.

Hassan, Y. (et al.) (2004). "Diseño web centrado en el usuario: usabilidad y arquitectura de la información". [En línea]. En: Hipertext.net (2). http://www.hipertext.nethttp://www.hipertext.net [ Consulta: 20 septiembre de 2010]]

Garrett, J. J. (2002). The Elements of User Experience: User-Centered Design for the Web . Indianapolis: New Riders Publishing,

Morville, P. y Rosenfeld, L. (2006). Information Architecture for the World Wide Web . 3rd Edition. Sebastopol (CA): O'Reilly Media Inc.

Pedraza-Jiménez, Rafael (2009). "Especificación de requisitos de un sitio web" [Informe]. En: Slideshare.net. http://www.slideshare.net/rpedraza/especificacin-de-requisitos-de-un-sitio-web . [Consulta: 01 de abril 2010].

Pérez-Montoro Gutiérrez, M. (2010a). Arquitectura de la Información en entornos web . Gijón: Trea.

Pérez-Montoro Gutiérrez, Mario (2010b). "Arquitectura de la Información en entornos web". EN: El profesional de la información , v. 19, nº 4, págs. 333-337. ISSN 1386-6710.

Pérez-Montoro, Mario y Codina, Lluis (2010). "Sotfware de prototipado para la arquitectura de la

información: funcionalidad y evaluación". En: El profesional de la información , v. 19, nº 4, págs. 417-424.

Wodtke, Cristina (2002). Information Architecture: Blueprints for the Web . Boston: New Riders Publishing.