1.10. El prototipado en la web

 Autor: Mario Pérez Montoro

Arquitectura de la información es una  disciplina que proporciona métodos y herramientas para estructurar, organizar y etiquetar los componentes que conforman los entornos informacionales. Facilita el acceso a la información y sustenta la potencial utilidad de los sitios web.

Prototipado es la representación gráfica de los componentes de esa estructura arquitectonica.

2. Funciones del prototipado:

Es fundamental la adecuada especificación de requisitos. El resultado principal -el prptotipo- son diagramas. Los prototipos recogen los: componentes del sistema, la estructura de los contenidos y las relaciones entre ellos. Implicados en el proyecto: arquitectos de la información, diseñadores, desarrolladores, autores de contenidos, gestores del proyecto y expertos en usabilidad. Hay una serie de lenguajes o vocabularios visuales que representan de forma clara estos aspectos arquitectonicos para su representación.

3. Tipos de prototipado:

• Blueprints: (plano o mapa) Es un esquema gráfico de la estructura del sitio web con todas sus páginas. Se les conoce como mapa del sitio y suelen ir acompañados de una leyenda que les indica que significa cada icono que hay en el esquema.  Orienta al usuario. Pueden ser de dos  tipos: de  arquitectura general y de arquitectura detallada.

• Wireframes (o maquetas) = prototipos de cada tipo de página con su contenido y arquitectura y, su visualización y diseño: posición del sistema de navegación, ubicación de enlaces, estructura de la página o lugar para el sistema de búsqueda. Se aplica a la página de inicio, a las principales, a las de ayuda y a la de la interfaz de búsqueda. Según la granulidad los hay de:
  • baja fidelidad: aspectos arquitectónicos básicos, sin gráficos ni contenido.
  • fidelidad intermedia: aspectos arquitectónicos básicos, pero con gráficos y algo de contenido, y
  • fidelidad alta: aspectos arquitectónicos básicos, con todos los gráficos y el contenido.
  • En html. Recoge otros aspectos como: colores, tamaño y tipo de letra, etc. Pero supone mayor esfuerzo y coste. Obliga a un libro de estilo y guía de de diseño. Es recomendable:
    • mantener la consistencia de cada tipo de página y el mismo nivel de granulidad
    • establecer leyendas y notas explicativas
    • controlar las wireframes: nombre, versión, proyecto y fecha de creación
    • adoptar las mejores prácticas: elementos comunes
    • incorporar interactividad respetando estándares de accesibilidad.

4. Herramientas de prototipado:

 Incluyen: librería de objetos (widgets) con barras de navegación, cajas de búsqueda, formularios, bloques de texto...), blueprint, sistema de anotaciones y sistema de gestión de proyectos (historia de las versiones, usuarios, calendario...). También wireframes dinámicos.

• Herramientas de escritorio: OmniGraffle, Denim, Conceptdraw, Smartdraw, Pencil Projec, Axure y Visio.
  • Axure: en inglés. Con cierto grado de versatilidad y una librería estándar fácil de usar. Permite la exportación a otros formatos, pero sólo importa del suyo. Incluye anotaciones y notas de pie de página. Permite proyectos de creación colaborativa. Tiene una importante biblioteca de plantillas, tutoriales de ayuda, blog, FAQs y foro.
  • Visio: interfaz en inglés o español. Librería estándar. Permite exportación e importación de otros formatos. Anotaciones y notas a pie de página. Plantillas de gráficas, tutoriales de ayuda, vídeos de formación y grupos de discusión.

• Herramientas en línea: cloud computing = aplicaciones se ejecutan a través de navegador, sin instalar software. Facilita la edición colaborativa y los grupos de trabajo con chat y test de usuarios en línea. Menos sofisticadas y de bajo coste, la versión básica suele ser gratuita. Pidoco, Lovely Vhart. MockingBird, Lumzy, Mockflow e iPlotz.
  • Mockflow: para diseño de interfaces de usuario, especializado en prototipado de sitios web. Uno de los más completos. Interfaz elegante, muy intuitivo. Muchos widgets. Aplicación gemela offline. Versión gratuita sin restricciones funcionales.
  • iPlotz: fidelidad extraordinaria en las exportaciones en html. Interfaz eficaz y eficiente. Más compleja por tener más funciones.

Para saber más

Son herramientas esenciales para las páginas web

•  Sotfware de prototipado para la arquitectura de la información: funcionalidad y evaluación 
• Diseño Web Centrado en el Usuario: Usabilidad y Arquitectura de la Información
• Arquitectura de la información, o cómo hacer que nuestra audiencia encuentre lo que busca en nuestro sitio web