Web para humanos

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 (1), Visio (2) o Axure (3).

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.

Prototipos de baja y alta fidelidad

Los prototipos de baja fidelidad de las principales páginas y otras interfaces importantes del nuevo sitio web fueron realizados en primera instancia en papel durante la definición inicial de las áreas de contenido, navegación y búsqueda.

Luego de definir a grandes rasgos estos aspectos, los prototipos de baja fidelidad fueron realizados mediante el software Axure, el cual es especializado para este tipo de trabajo. Se hizo así con el propósito de documentar de una forma más clara los espacios informacionales en las interfaces del nuevo sitio web y las anotaciones que sobre estos fuera necesario hacer.

En cada uno de los prototipos de baja fidelidad se definió mediante cuadros y textos, donde debía ir ubicado cada elemento de navegación, búsqueda y contenido. De igual modo, se usó un campo de anotaciones con números guías para ampliar o explicar algunos contenidos, funciones o interacciones.

Por su parte, los prototipos de alta fidelidad fueron realizados con Axure desde el inicio, en tanto que gracias a este software se podía hacer que los prototipos fueran interactivos, es decir, que se pudieran simular muchas de las acciones y navegación que el usuario puede realizar en el nuevo sitio web.

En la definición de aspectos gráficos de estos prototipos (colores y elementos gráficos del encabezado y el pie de página) se contó con al apoyo de la diseñadora gráfica de la División de Sistemas de Unicauca, Lorena Isabel Tobar Estrada.

Cabe destacar en este punto que para realizar cada prototipo se tuvieron en cuenta todos los resultados del proceso de investigación previa. Esto con el propósito de diseñar un sitio web que cumpliera tanto sus objetivos como medio de comunicación digital universitario, así como los objetivos de la universidad y su función educativa y de centro de conocimiento; que se ajustara a las necesidades informativas de sus usuarios; que fuera consistente gráficamente; fácil de usar y en el que se pudiera encontrar información de un modo más rápido, buscando generar así una experiencia satisfactoria de uso.

Los prototipos fueron diseñados para que se ajustaran a una resolución de pantalla de 1024*768. Se definió trabajar basados en esta resolución ya que, de acuerdo a los datos estadísticos de navegación del sitio web de Unicauca, más del 92.24% de los visitantes lo hacen con una resolución superior a la señalada previamente (4).

En total se realizaron 29 prototipos de baja fidelidad y 78 de alta fidelidad de las principales páginas del sitio web.

Puesto que una buena parte de los prototipos de alta fidelidad usan el mismo tipo de interfaz, este documento reproduce más adelante los 29 prototipos de baja fidelidad, junto a 29 de alta fidelidad de las mismas páginas. Esto con el propósito que se hagan las respectivas comparaciones de las dos versiones.

Igualmente es importante mencionar en este punto que el tamaño de la letra en todo el sitio es más grande que en la versión actual del sitio web de Unicauca. Esto con el fin de mejorar a lectura de los contenidos para los usuarios.

En las imágenes 1 y 2 se muestra a manera de ejemplo las diferencias básicas entre un prototipo de baja fidelidad y uno de alta fidelidad. Se utilizan prototipos realizados para el nuevo portal web de Unicauca.

 

 

 

Ahora bien, con el propósito de generar unidad gráfica y cumplir muchos de los criterios, recomendaciones heurísticas y estándares de facto, establecidos con el fin de que se creen sitios web que generen una buena y satisfactoria experiencia de usuario, cabe mencionar algunos aspectos en el diseño de los prototipos que son comunes en todas las páginas del sitio web diseñadas. Estos son:

• Encabezado o header:

A excepción de la página principal, la cual tiene como elemento diferente una fotografía grande, un logo de unicauca.edu.co y los enlaces a información para diferentes perfiles de usuario del sitio web, todas las páginas internas de los prototipos del nuevo sitio web tienen los mismos elementos, ubicados en la misma posición. Estos elementos son:

• Identificador del sitio (escudo y nombre de la Universidad del Cauca) ubicado siempre al lado izquierdo de la página.
• Enlace para ingresar a la cuenta Unicauca, ubicado siempre en la parte superior derecha. Esta es una nueva forma en que los usuarios pueden acceder a su cuenta de Unicauca.
• Buscador ubicado en la parte superior derecha, bajo el enlace de acceso a la cuenta y a la misma altura del identificador del sitio web.

Es importante mencionar que el tamaño del encabezado disminuye considerablemente en las páginas internas respecto a la página principal del sitio web. Esto se hace con el propósito de optimizar el espacio de la interfaz, la cual en las páginas internas está más orientada a que se desarrollen los contenidos de cada sección. En la imagen 3 se muestra en línea punteada cuál es el encabezado o header.

 

 

• Navegación global o principal:

Este menú de navegación está ubicado bajo el encabezado y es el mismo dentro de todo el sitio web. Esto con el fin de guardar coherencia, consistencia y permitirle al usuario ir a cualquiera de las secciones principales cuando lo desee, o volver a la página de inicio en cualquier momento. En la imagen 4 se muestra en línea punteada en la zona superior cuál es la navegación global.

• Navegación local derecha:

Aunque para cada sección cambian las opciones de navegación local (sub-secciones o segundo nivel de navegación), es común el espacio de navegación local ubicado al lado derecho de la interfaz dentro de casi todas las páginas del sitio web (a excepción del correo electrónico).

Esto se hace con el fin de generar unidad gráfica y consistencia en las rutas de navegación para los usuarios. En algunas páginas este menú de navegación local sirve para ubicar algunas funcionalidades especiales (calendarios, zonas de búsqueda y etiquetas, etc.).

De igual modo, en este espacio de navegación aparecen siempre los enlaces a la información para los diversos perfiles de usuario (estudiantes, aspirantes, docentes, graduados, funcionario y visitantes) y los contenidos destacados que aparecen en la página principal (Conozca Unicauca, Conozca Popayán, Documentos Públicos y Zona de Participación.

En la imagen 4 se muestra en línea punteada en la derecha central cuál es este tipo de navegación.

 

 

• Espacio para nombre de secciones principales y camino de migas:

Este espacio está ubicado bajo la navegación global o principal y en el aparece siempre, en una letra grande y visible, el nombre de la sección principal en la cual se encuentra el usuario. Bajo el nombre de sección aparece el camino de migas, elemento que sirve de ruta de orientación para el usuario dado que le muestra en qué parte del sitio web se encuentra, de dónde viene y hacia donde puede ir. El camino de migas muestra igualmente la profundidad de la navegación del usuario dentro del sitio web. Este espacio se muestra en la imagen 5 en línea punteada en la parte superior.

• Espacio para desarrollo de contenidos:

Exceptuando la página principal, en casi todas las páginas del sitio web el espacio para el desarrollo de los contenidos de cada sección en los diversos niveles de navegación, está orientado hacia la parte izquierda y ocupa dos terceras partes de la interfaz. Este espacio se muestra en la imagen 5 en línea punteada en la parte central.

 

 

• Pie de página o footer:

Este elemento es el único común en todas las páginas del sitio web. Para el nuevo sitio web de Unicauca se diseñó un pie de página ancho, con el fin de replicar los enlaces a las principales secciones y servicios del sitio web, ofrecer algunos enlaces de interés, espacio para las versiones en otros idiomas del sitio web, enlaces a los sitios web de redes sociales en los que Unicauca tiene cuenta, así como la información la información y datos de contacto de Unicauca.

En la imagen 6 se muestra en línea punteada el pie de página o footer.

 

 

• Diseño de la página principal del nuevo sitio web.

Por ser la página más importante del sitio web, se debe ser muy cuidadoso y estratégico a la hora de definir los contenidos que deben aparecer en ella, la posición que éstos tienen, el lugar de ubicación de la navegación y los elementos de búsqueda.

Además, como es la página de entrada al sitio web, debe dar una idea general de los objetivos del sitio y de los principales contenidos y servicios que puede ofrecer.

Para el prototipo de esta página se diseñó un encabezado ancho, con el identificador del sitio y un logo de unicauca.edu.co al lado izquierdo, una foto de buen tamaño de espacios físicos y personas de la comunidad universitaria en la parte central, así como el enlace de acceso para que cada usuario de Unicauca pueda ingresar a su cuenta en, el buscador y los enlaces con información de interés para cada perfil de usuario en la parte derecha.

Gracias al cabezote más ancho se busca:

• Que el identificador del sitio web (escudo y nombre de la universidad) sea más grande y visible.
• Mostrar mediante la fotografía (la cual cambiará con cada actualización de página) diversos espacios físicos representativos del Alma Máter y miembros de la comunidad universitaria.
• Ofrecer enlaces visibles y prioritarios de acceso a contenidos para cada perfil de usuario del sitio web.
• Ubicar el buscador en un sitio visible y de fácil identificación por parte de los usuarios.

El espacio para el desarrollo de los contenidos está dividido en tres columnas. En estos espacios se presentan los contenidos de más constante actualización del sitio web, que muestran la proyección social de la universidad, así como los contenidos y servicios de interés para sus usuarios objetivos.

En la columna izquierda, la cual ocupa la mitad de la interfaz en la página principal, se ubica el espacio para los títulos de las tres últimas noticias publicadas (esquema cronológico de organización) con su respectiva fotografía y el enlace para ver más noticias. Bajo estas, los enlaces para consultar la información de los medios de comunicación de la Universidad.

Luego en esta misma columna aparece un espacio en donde se publicará información de actualidad estrictamente académica (calendarios académicos, fechas de parciales, procesos de inscripciones a pregrado, posgrado, educación continuada o cursos).

La columna central está dedicada a la publicación de los eventos que realiza la Universidad del Cauca que están más próximos a realizar (esquema cronológico de organización) y el enlace para ver todos los eventos en su respectiva sección.

La columna derecha cuenta con varios elementos de contenidos. En su parte superior aparecen una serie de enlaces para contenidos destacados del nuevo sitio, (Conozca Unicauca, Conozca Popayán, Documentos públicos y Zona de participación). Bajo este espacio se ubican los Recursos en línea (consultas bibliográficas, directorio, descargas, pagos en línea y clasificados). Estos contenidos están agrupados bajo un esquema temático de organización.

Bajo estos contenidos se encuentra un banner publicitario de campañas institucionales y eventos, el cual cambia con cada actualización de la página principal. El usuario también debe poder cambiar el banner manualmente. También aparece un enlace que lleva a ver una página de banners en donde se encuentran todos los que se han publicado y se encuentran vigentes.

Al final de la página se encuentra el footer, el cual como se mencionó previamente, presenta los enlaces de las principales secciones del sitio web, a manera de mapa del sitio, enlaces para la versión del sitio en otros idiomas, redes sociales en las que la Universidad tiene una cuenta e información de ubicación y contacto de Unicauca.

A continuación se muestran los prototipos de baja y alta fidelidad diseñados, y se hacen las anotaciones pertinentes para cada tipo de página. Empecemos con los de la página principal que aparecen en las imágenes 7 y 8.

Todas las imágenes de este documento podrán ser consultadas y descargadas en la cuenta de Unicauca del sitio web Flickr, la cual se ha dispuesto para publicar las tablas, imágenes y gráficos que ha sido resultado del proceso de investigación para el diseño del nuevo sitio web de la Universidad del Cauca (5).

 

 

 

A continuación puede descargar el documento de justificación y explicación de los 29 prototipos de alta y baja fidelidad de las principales páginas del nuevo sitio web de Unicauca. Puede igualmente ver y descargar las imágenes en el sitio web de Flickr.

 
 Descargar documento completo de resultados diseño de prototipo (wireframes) para proyecto de nuevo portal web de Unicauca (peso: 2.04 MB)
 Ver imágenes de prototipos (wireframes) para proyecto del nuevo portal web de Unicauca (enlace externo al sitio web Flickr.com)

 

Referencias bibliográficas

Brown, Dan (2006). “Communicating Design: Developing Web Site Documentation for Design and Planning”. New Riders Press.

Garret, Jesse James (2002) “The elements of user experience. User-centered design for the web”. New Riders.

Rosenfeld, Louis y Morville, Peter (2006). “Information architecture for the World Wide Web”. O’Reilly & Associates. Tercera edición.

Ronda León, Rodrigo; (2007). ”La diagramación en la arquitectura de información. En: No Solo Usabilidad, nº 6, 2007. <nosolousabilidad.com>. ISSN 1886-8592.

Ronda León, Rodrigo; (2007). ”Revisión de técnicas de arquitectura de información. En: No Solo Usabilidad, nº 6, 2007. <nosolousabilidad.com>. ISSN 1886-8592.

Wodtke, Christina (2002). “Information architecture: blueprints for the web”. New Riders.

 

Autores del documento:

Mauricio Candamil Llano. Editor del portal web de la Universidad del Cauca. Diseñador web y arquitecto de información del proyecto de diseño del nuevo portal web de Unicauca.

Adrián Fernando Guevara. Monitor de contenidos web del portal web de Unicauca. Coordina el proceso de gestión, redacción y edición de información para el nuevo portal web de Unicauca.

Este documento hace parte del trabajo de grado ‘Ejecución de técnicas de arquitectura de información para la organización de contenidos en la creación de sitios web universitarios. Aplicación en sitio web de la Universidad del Cauca’, realizado por los autores de este documento.