Prototipado web y arquitectura de la información

Si estás leyendo esto es porque la idea de crear un sitio web te emociona. Tienes ganas de ponerte a escribir páginas y páginas de código, crear miles de enlaces y ver que pasa. Pero si el objetivo es crear algo con ambición  y queremos resultados eficientes debemos hacer algunos pasos antes de empezar. En esta entrada veremos cómo planificar un sitio web.

Arquitectura de la información

Abreviada como "AI", la arquitectura de la información es un concepto que apareció el año 1975, pero que ha evolucionado desde su uso en el mundo de la web.

Las páginas web en realidad son un método de comunicación para compartir información y saber organizar esa información de manera comprensible no es del todo fácil.

Actualmente la AI se conoce como "el arte y la ciencia de estructurar y clasificar sitios web e intranets con el fin de ayudar a los usuarios a encontrar y manejar la información."

Diseñar una buena AI es la base de una buena planificación antes de empezar a desarrollar ninguna web. La responsabilidad de un arquitecto de información, definida por Jesse James Garret, es:

1. Identificar los objetivos del proyecto y las necesidades de los usuarios
2. Especificar las funcionalidades y requerimientos de la aplicación web
3. Definir y diseñar los sistemas de navegación, organización, etiquetado y búsqueda
4. Realizar el prototipado de la aplicación

Son tareas que se deben ejecutar en el orden señalado y que consisten en ir especificando desde lo más amplio y general hata llegar a definir todos los detalles de una web.

Conocer para qué es la web y cómo desearian los usuarios verla es crucial para que el resto del trabajo sea fácil y sus resultados óptimos.

Las herramientas que se usan durante estos procesos reciben muchos nombres y no hay una clasifiación universalizada. Hay muchos recursos descritos por diferentes autores, y todos no son más que ideas y pautas para desarrollar la AI y conseguir un buen prototipado web. El proceso para éllo no está definido como una única manera, sino que el arquitecto de la información debe conocer las herramientas necesarias y emplearlas de la manera que más se adecúe al objetivo final de la página web.

Esta entrada es un resumen a mi manera de todos los conceptos que he aprendido de diferentes autores con diferentes métodos.

Prototipado de un sitio web

Por prototipo entendemos una representación limitada de un producto. Permite probarlo y analizarlo antes de lanzar o crear el producto final y nos ayuda a comunicar el proceso de un producto a los clientes o los mismos diseñadores del equipo para corregir a tiempo cualquier asunto.

Es frecuente que los clientes no sepan lo que quieren, pero cuando ven algo y utilizan prototipos, pronto saben lo que no quieren.

Nunca hay que prototipar nada sin antes haber definido los objetivos del cliente, las necesidades de los usuarios y los requisitos del proyecto.

Diagramación

Consiste en la representación de los contenidos que tendrá un producto digital y las relaciones entre dichos contenidos. Debe ser clara y comprensible.

Es un método estupendo para poder diseñar la arquitectura de una web, y permite corregir y evaluar sus funciones y organización mucho antes de empezar a diseñar y desarrollar la web (donde es mucho más costoso modificar nada).

Se podrian definir tres tipos de diagramas de acuerdo a las funciones de la AI: la organización, el funcionamiento y la presentación de la web. Aunque para sitios web muy grandes y elavorados habría que hacer diagramas y maquetas de cada uno de estos tres elementos, en algunos casos se podría utilizar un mismo diagrama para explicar algunos de éllos (o todos) a la vez. Todo depende del objetivo de la web.

Planos (blueprints, diagramas de contenido o flujo, mapa web, mapa de arquitectura)

Sirven para mostrar la estructura de una aplicación y su flujo de navegación. Tienen como objetivo representar las principales áreas de organización y rotulado, y están enfocados a los aspectos estructurales y de funcionamiento del producto. Parten de lo general y abstracto a lo particular y concreto.

Normalmente se usan cajas y flechas o conectores para dibujar un diagrama.

 

James Garret diseñó una metodología efectiva que se llama "Un vocabulario visual para describir arquitectura de información y diseño de interacción". Existen muchos otros métodos, y te animo a que los investigues por internet.

Maquetas

Son diagramas de presentación, cuyo objetivo es crear una referencia visual de la estructura, organización e interacción a nivel de página. En ningún caso se incluye el diseño gráfico de la web, que se efectúa en una etapa posterior. No se usan colores sino escalas de grises. Es importante aclarar este concepto al cliente para no crear un malentendido durante el diseño del prototipado.

Se distinguen entre prototipos de baja fidelidad (elementos estáticos) y prototipos de alta fidelidad (elementos dinámicos).

Para hacer un buen prototipado de baja fidelidad se recomienda empezar con el sketching. Son dibujos hechos a mano, en lápiz y papel, de manera rápida y formal, para transmitir una idea o concepto con rapidez y claridad.

Son útiles como primer contacto con el cliente y para las reuniones de trabajo en equipo (como un brainstormig).

Un wireframe es más elavorado y su objetivo es mostrar el contenido de las páginas. Incluye el inventario del contenido, la anotación a los componentes de su comportamiento, funciones y estructurado de los vínculos.

Los story board son una secuencia de wireframes.

Los prototipos de alta fidelidad (también llamados prototipos funcionales, maquetas o mockup) permiten detallar el proceso interactivo de una o varias tareas. Són prototipos dinámicos, normalmente en HTML, que simulan o están implementados del sistema final. Marc Retting (1994) desaconseja el uso de prototipos de alta fidelidad porque:

• Necesitan mucho tiempo para crearse.
• Las pruebas tienden a centrarse en aspectos superficiales.
• Los desarrolladores se resisten a cambiar algo que les ha llevado horas crear.
• Crea excesiva expectación.
• Un error puede parar un test.

En caso de querer hacer uso de estos prototipos es muy importante comprender que es el último paso a seguir en la planificación del desarrollo de una web y nunca debe hacerse sin antes haber diseñado y completado la arquitectura de la información.