Unidad didáctica 4. El prototipado en la arquitecura de la información
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.
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).
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 se diseñan con la idea de poder comunicar de forma eficaz esos aspectos básicos de los elementos arquitectónicos (Brown, 2007).
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.
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.
Tipos de prototipado
Blueprints
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, existen dos tipos de blueprints: los blueprints utilizados en la arquitectura general y los blueprints utilizados en la arquitectura detallada (Morville y Rosenfeld, 2006).
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.
Dependiendo de la granularidad que presentan, normalmente se acostumbran a distinguir tres tipos de wireframes: los wireframes de baja fidelidad, los wireframes de granularidad 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.
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.
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.
Herramientas de prototipado
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. 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).
Existen muchas, pero son Axure (https://www.axure.com) junto a Visio (https://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), con cierto grado de versatibilidad al permitir, además del diseño de wireframes y blueprints, la generación de diagramas de flujo. 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. 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. Tiene la posibilidad de incluir anotaciones y notas a pie de página aclaratorias de los prototipos realizados.
Visio
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, https://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.
Herramientas en línea
Para algunas empresas y profesionales las herramientas en línea son una ventaja porque evitan 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.
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.
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.
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.
Para saber más: