Wireframes y mapa del sitio

Introducción

Como parte del proceso de diseño de un sitio web y luego de haber realizado las etapas de planeación estratégica, investigación de usuarios, análisis de sitios web similares, evaluaciones heurísticas, pruebas de card sorting, pruebas de análisis de secuencia, diagramación de mapas mentales, entre otras, se llega a la realización de prototipos o wireframes por su término en inglés.

Esta es una técnica que consiste en desarrollar dibujos en papel o con la ayuda de un software destinado para tal fin, en los cuales se describe cómo se verían las páginas individualmente desde una perspectiva arquitectónica (Rosenfeld y Morville, 2006: 307).

En estos dibujos se trata de especificar y mostrar claramente en donde estarán ubicados cada uno de los elementos que componen una determinada página, tales como el encabezado, el buscador, los sistemas de navegación, el contenido, el pie de página (footer), entre otros.

Louis Rosenfeld y Peter Morville le llaman a estos bocetos wireframes y manifiestan que su realización es importante porque ayudan a probar las ideas en contexto, permitiendo visualizar posibilidades y hacer cambios, las cuales es mejor llevar a cabo en el papel antes que tener que desarrollar en el futuro un rediseño entero del sitio. Igualmente, los wireframes contribuyen a decidir cómo agrupar y ordenar los componentes del contenido (Ibíd.: 307).

Los wireframes describen el contenido y la arquitectura de información para ser incluida en espacios bidimensionales relativamente limitados conocidos como páginas; por tanto, los wireframes deberán ser limitados en tamaño. Esas limitaciones le imponen al arquitecto de información escoger qué componentes de la arquitectura podrían ser visibles y accesibles para los usuarios; después de todo, si los componentes arquitectónicos absorben demasiado estado real de la pantalla, ningún espacio podría ser adecuado para el actual contenido (Ibíd.: 307).

Dado que el proceso de prototipado o diseño de wireframes es dispendioso y requiere invertir mucho tiempo, no es necesario que se hagan bocetos para todas las páginas del sitio web. Al respecto, los autores antes mencionados destacan lo siguiente:

Los wireframes son creados comúnmente para las páginas más importantes del sitio –tales como las páginas de inicio, las principales categorías de las páginas, y las interfaces de búsqueda- y otras aplicaciones importantes. También son usados para describir plantillas que se aplican para muchas páginas de forma consistente, tales como las páginas de contenido del sitio. Y pueden ser utilizados para cualquier página que sea lo suficientemente irritante o confusa como para merecer más visualización durante el proceso de diseño. El objetivo no es crear wireframes para todas las páginas de tu sitio, sino solamente para las que son más complicadas, únicas o configuran un patrón para otras páginas (Ibíd.:307-308).

Los prototipos o wireframes pueden ser de diferente forma y fidelidad. Los de baja fidelidad se pueden realizar en papel, mientras que los de alta fidelidad pueden ser creados en computador y utilizando programas como Adobe Illustrator , Visio o Axure .

Rosenfeld y Morville destacan las siguientes ventajas y desventajas de desarrollar wireframes de alta fidelidad (Ibíd.: 310-311):

Ventajas

•El contenido y el color le proporcionan vida a la página, ayudando a capturar la atención de tus clientes y colegas.
•Al simular el ancho y el tamaño de la fuente actual de la página, el wireframe te hace reconocer las limitaciones de una página de HTML.
•La fidelidad es suficiente para soportar una prueba con usuarios del prototipo de papel.

Desventajas

•Lograr alta fidelidad requiere de un gran esfuerzo. Toma una buena cantidad de tiempo diseñar cada detalle del wireframe. Esto puede demorar el proceso e incrementar los costos.
•Al integrar elementos visuales y de contenido en el diseño estructurado, el enfoque puede cambiar prematuramente desde la arquitectura de información a la interfaz y el diseño visual.

Dan Brown (2006) afirma que aunque para algunos pueda parecer que el trabajo de realizar wireframes fuera algo simple, ésta es una de las más controversiales técnicas de arquitectura de información entre la documentación sobre experiencia de usuario, puesto que hace parte tanto de la estructura subyacente como del diseño visual del sitio web. Afirma al respecto que:

…los wireframes cruzan los límites entre estructura (cómo un tipo de información está relacionada con otro tipo) y presentación (cómo representar información en la pantalla) (Ibíd.:265).

Prototipos para el nuevo portal web de Unicauca

Para el proyecto del nuevo portal de Unicauca, el cual como se ha mencionado en documentos precedentes ha estado orientado desde su inicio por una metodología de diseño centrado en el usuario, bajo referentes teóricos de arquitectura de información y usabilidad, se dispuso realizar prototipos o wireframes de baja y alta fidelidad.

Esto con el propósito de realizar el diseño de información, interacción, navegación y búsqueda, en términos generales, los espacios en los cuales estarán ubicados los diversos elementos que componen las páginas de la propuesta de nuevo sitio web de Unicauca.

65 photos | 632 views

items are from between 16 Feb 2009 & 20 Feb 2009.