Diseño de prototipos (wireframes) para proyecto nuevo portal web Unicauca

Hola amigos unicaucanos.

En esta ocasión queremos socializar el documento de diseño de prototipos (wireframes) para proyecto nuevo portal web Unicauca

Como ha pasado con otras de las técnicas utilizadas en este proyecto, quizás también se pregunten ¿qué son los prototipos o wireframes?

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.

 

 

• Consideraciones generales sobre 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.

Nota: Los derechos sobre el uso de los elementos del diseño general (propuesta gráfica y de contenidos) de estos prototipos del nuevo sitio web de Unicauca son reservados.

Diagramación de mapa del sitio y representación de etiquetas para proyecto nuevo portal web Unicauca

Hola amigos unicaucanos.

En esta ocasión queremos socializar el documento de resultados del diagramación de mapa del sitio y representación de etiquetas para proyecto nuevo portal web Unicauca

Como ha pasado con otras de las técnicas utilizadas en este proyecto, quizás también se pregunten ¿de qué se trata la diagramación y la representación de etiquetas?

Rodrigo Ronda afirma que la diagramación “…consiste en la realización de diagramas que concreten las propuestas de diseño realizadas por los arquitectos de información (…) Se usan con el objetivo de que todas las personas conozcan y comprendan cómo será la estructura y funcionamiento del producto a realizar” (Ronda León, 2007).

Louis Rosenfeld y Peter Morville (2006: 296), quienes llaman a los diagramas blueprints (planos), manifiestan que la elaboración de éstos es importante porque así se pueden mostrar más fácilmente las relaciones entre páginas y otros componentes del contenido, siendo los planos usados para retratar la organización, navegación y los sistemas de etiquetado del sistema de información.

El acto mismo de configurar ideas dentro de la estructura más formal de un plano te fuerza a ser realista y práctico. Si la lluvia de ideas te impulsa a la parte alta de la montaña, la planificación puede traerte de regreso al valle de la realidad. Las ideas que pueden parecer brillantes  en el tablero pueden no serlo cuando tú  intentas organizarlas de una manera práctica.  Esto facilita hablar de conceptos tales como “personalización” y “arquitecturas de información adaptativas” (Ibíd.: 296) (1).

Adicionalmente, el arquitecto de información puede usar el proceso de desarrollo de un plano para obtener retroalimentación del diseño, sumando páginas relacionadas, incrementando el nivel de detalle y elaborando la navegación.

En ocasiones los planos también son denominados “mapas del sitio” y aunque no son lo mismo que los sistemas de navegación complementaria que reciben el mismo nombre en los sitios web, sí tienen mucho en común.

Lo anterior puesto que “ambos, diagrama y sistema de navegación, muestran la forma del espacio de información en general, funcionando como un mapa condensador para los desarrolladores del sitio y los usuarios” (Ibíd.: 296).

Ronda León (2007) aconseja la realización de los siguientes tipos de diagramas:

• Los que describen cuál será el esquema de organización general que tendrá el producto. Estos diagramas deberán ser lo más cercanos  al modelo mental de sus usuarios. 
• Los que describen el funcionamiento del producto, es decir, cómo va a funcionar en cuanto a la navegación e interacción.
• Los que describen la organización visual y la presentación de los elementos de la interfaz. En estos diagramas se define qué orden tendrán los elementos incorporados en cada página. Este orden se establece según la lógica organizacional de los usuarios del producto.

La diagramación se puede hacer manualmente o utilizando programas como Microsoft Office Visio 2007, OmniGraffle o Mindjet.

También se pueden utilizar aplicaciones web como MindMeister para realizar mapas del sitio o mapas conceptuales que describan la organización o funcionamiento del sitio web. 

Ahora bien, Ronda señala que la representación de etiquetas es una  técnica que

se basa en la representación de las etiquetas obtenidas durante el proceso de etiquetado (los textos que se usarán en los títulos, subtítulos, hipervínculos del producto, eslogan, metadatos de los recursos, etc.) los cuales se representan en cada uno de los diagramas realizados, con el objetivo de que se observen los términos en el contexto de uso (…) Al representar las etiquetas se logran eliminar errores como, por ejemplo, que al definir una etiqueta durante el proceso de producción sea cambiada una vez esté ubicada en el producto terminado, porque siempre se analizó de manera aislada y no en su contexto de uso (Ibíd.).

Mapa del sitio y representación de etiquetas 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 el diagrama de un mapa del sitio que mostrara a grandes rasgos la estructura del sitio web y la representación de las etiquetas que dan nombre a cada sección y sub-sección. 

Siguiendo a Ronda, se realizó el tipo de diagrama que describe cuál será el esquema de organización general que tendrá el producto. Esto, con el propósito de establecer gráficamente la organización de las secciones y sub-secciones, así como la respectiva rotulación de cada una, a modo de taxonomía del sitio web.

Se realizó el mapa del sitio con un nivel de detalle que lleva hasta el segundo nivel de navegación del sitio web. Fue así dado que este fue el nivel de navegación que se manejó en las pruebas de card sorting que sirvieron para determinar las agrupaciones de contenidos de cada sección. 

Se añaden en el gráfico además otras secciones y contenidos que no fueron incluidos en las pruebas de card sorting, tales como tu cuenta Unicauca, la información para perfiles de usuario, los enlaces de versiones en idiomas del nuevo sitio web y los enlaces de Unicauca en las redes sociales, los cuales de antemano se sabía que debían hacer parte de las opciones de navegación destacadas.

Con la inclusión de estas secciones y las señaladas en la prueba de card sorting, se realizó el gráfico que se muestra en la siguiente página, utilizando la aplicación del sitio web Mindmeister. El gráfico da cuenta entonces del mapa del sitio del nuevo portal web de Unicauca.

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. “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.

(1) Texto original: The very act of shaping ideas into the more formal structure of a blueprint forces you to become realistic and practical. If brainstorming takes you to the top of the mountain, blueprint can bring you back down to the valley of reality. Ideas that seemed brilliant on the whiteboard may not pan out when you attempt to organize them in a practical manner. It’s easy to throw around concepts such as “personalization” and “adaptive information architectures” (Ibíd.: 296).

 Descargar documento de diagramación y representación de etiquetas para proyecto del nuevo portal web de Unicauca (peso: 1 KB)

 Ver imágenes del mapa del sitio y representación de etiquetas para proyecto del nuevo sitio web de Unicauca (enlace externo al sitio web Flickr.com)

Análisis de sitios web universitarios colombianos mediante evaluaciones heurísticas

Hola amigos unicaucanos.

En esta ocasión queremos socializar el documento de resultados del análisis de sitios web universitarios colombianos mediante evaluaciones heurísticas para el proyecto de diseño del nuevo portal web de Unicauca.

Como ha pasado con otras de las técnicas utilizadas en este proyecto, quizás también se pregunten ¿qué son las evaluaciones heurísiticas?

La Evaluación Heurística es un método de evaluación por inspección  de un sistema informativo que proviene de los estudios de usabilidad y que debe ser llevado a cabo por evaluadores expertos a partir de unos criterios que son denominados “principios heurísticos”. “Tiene como objetivo el medir la calidad de la interfaz de cualquier sistema interactivo en relación a su facilidad para ser aprendido y usado por un determinado grupo de usuarios en un determinado contexto de uso” (González, Pascual y Lorés, 2002: 6).

Durante la revisión, los evaluadores tratan de verificar si el sistema cumple con unos principios heurísticos o estándares previamente establecidos, tratando de predecir problemas potenciales con los cuales pueden encontrarse los usuarios en el momento de interactuar con la interfaz.

El término “heurística” procede etimológicamente de la palabra griega “euriskein” que a su vez viene de “eureka”, vocablo que significa hallar o encontrar. Esta metodología  fue presentada inicialmente por Jakob Nielsen y Rolf Molich en el año de 1990 y aunque en un principio contemplaba que las evaluaciones podrían ser realizadas por personas que tuvieran algún conocimiento en aspectos relacionados con la usabilidad, posteriormente otros investigadores sentaron la posición de que los resultados de dichos exámenes serían mucho mejores si quienes ejecutaban la evaluación era investigadores expertos (Ibíd.).

Una de las técnicas utilizadas en la ejecución de proyectos relacionados con la elaboración de sitios web es la conocida como evaluación de productos similares al que vamos a desarrollar, con el fin de identificar diferencias y determinar en que aspectos nuestro producto es superior al de los demás y en cuáles necesita mejorar (Brown, 2007: 107).

Para la elaboración de estas evaluaciones es necesario escoger los sitios web que se van a revisar teniendo en cuenta para ello aspectos relacionados con el contenido, diseño o programación y determinar una serie de indicadores que después de ser evaluados permitirán compararlos (Ronda León, 2007).

En ese sentido y dado que el proyecto ‘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 el sitio web de la Universidad del Cauca’, contempla la elaboración de prototipos para el nuevo sitio de la mencionada institución, fue necesario escoger sitios web pertenecientes a instituciones de educación superior de Colombia, dada su proximidad regional y la similitud en aspectos concernientes al contenido y servicios ofrecidos.

Muestra

Para determinar los sitios que se evaluaron se tuvo en cuenta “El Ranking Mundial de Universidades en la Web”, publicado en el sitio www.webometics.info por el Laboratorio de Cibermetría perteneciente al Consejo Superior de Investigaciones Científicas de España.

Tomando en consideración que se evaluarían cerca de 82 aspectos (como se especifica más adelante), se decidió trabajar con los sitios web de las 10 universidades de Colombia que se encontraban mejor posicionadas en el mencionado ranking en su edición de febrero de 2008 (fecha en la que se planteó e inició esta investigación), además del perteneciente a la Universidad del Cauca por estar estrechamente relacionado con el desarrollo del presente proyecto. 

Los sitios web que se escogieron fueron los siguientes:

Universidades colombianas en el top 200 de sitios web de Universidades Latinoamericanas según webometrics	Puesto en el ranking a nivel latinoamericano	Puesto en el ranking a nivel mundial
Universidad de los Andes (www.uniandes.edu.co)	24	873
Universidad Nacional de Colombia (www.unal.edu.co)	27	899
Universidad de Antioquia (www.udea.edu.co)	29	961
Universidad del Valle (www.univalle.edu.co)	38	1148
Pontificia Universidad Javeriana (www.javeriana.edu.co)	42	1297
Universidad del Cauca (www.unicauca.edu.co)	55	1491
Universidad Nacional de Colombia Medellín (www.unalmed.edu.co)	100	2145
Universidad Tecnológica de Pereira (www.utp.edu.co)	115	2315
Universidad Distrital Francisco José de Caldas (www.udistrital.edu.co)	117	2324
Escuela de Administración, Finanzas y Tecnología (www.eafit.edu.co)	139	2565
Universidad de la Sabana (www.unisabana.edu.co)	159	2791

En este punto cabe aclarar que se tuvo en cuenta este Ranking Mundial de Universidades en la Web dado que lo que se buscaba evaluar está relacionado con la presencia de los centros de educación superior colombianos en Internet y no realizar una clasificación basada en la calidad, logros, prestigio y reconocimientos, entre otros aspectos, de dichos establecimientos educativos.

Por otro lado, el Laboratorio de Cibermetría se dedica al análisis cuantitativo de Internet y los contenidos de la Red, especialmente de aquellos relacionados con el proceso de generación y comunicación académica del conocimiento científico.

De acuerdo con los gestores del ranking, el objetivo del proyecto es el de convencer a las comunidades académicas y políticas de la importancia de la publicación web, no sólo para la diseminación del conocimiento académico sino también como una forma de medir la actividad científica, el rendimiento y el impacto.

Igualmente, pretenden motivar tanto a instituciones como a docentes e investigadores a tener una presencia en la Web que refleje de forma precisa sus actividades, aspectos que coinciden con la forma en que los realizadores del presente trabajo conciben la utilización de herramientas tales como los sitios web dentro de las instituciones educativas.

En tal sentido, se comparte el postulado publicado en la presentación de www.webometrics.info, en el cual se especifica que “si el rendimiento web de una institución se encuentra por debajo de lo esperado de acuerdo a su excelencia académica, los dirigentes universitarios deberían reconsiderar su política Web, promoviendo el incremento substancial del volumen y la calidad de sus publicaciones electrónicas”.

Además, es preciso mencionar que el ranking citado es uno de los pocos que existen de fácil acceso en el que figuran, sino todas, gran parte las universidades de Colombia. Esta clasificación se viene realizando desde el año 2004 y es actualizada cada 6 meses. Los datos son recolectados durante el periodo comprendido entre enero y junio y publicados un mes más tarde.

Aspectos a evaluar

Como era necesario establecer una serie de indicadores a evaluar de cada sitio web, con el fin de obtener una herramienta de medición y comparación, se decidió utilizar en esta oportunidad la técnica conocida como Evaluación heurística (EH), la cual si bien proviene de los estudios de Usabilidad es también utilizada en los proyectos de Arquitectura de Información.

De esta manera, se encontró que se podían combinar las dos técnicas (la Evaluación de productos similares y la Evaluación heurística), utilizando los principios heurísticos como indicadores y realizando una valoración tanto cuantitativa como cualitativa de los sitios web escogidos.

Esto permitiría no solamente encontrar fallas de usabilidad y arquitectura de información, principal objetivo de las EH, sino efectuar un detallado análisis de los sitios web que llevaría a identificar sus fortalezas y debilidades. De otro lado, se obtendría el beneficio de evaluar aspectos establecidos y probados por investigadores expertos tanto en Arquitectura de Información como en Usabilidad, reduciendo el margen de improvisación.

De esta manera, para el caso de la presente investigación, se utilizaron algunos de los principios heurísticos propuestos específicamente por Louis Rosenfeld (2004a y 2004b), dado que éstos fueron diseñados especialmente para prevenir problemas de Arquitectura de Información. Dichos principios  fueron complementados con los principios heurísticos de Usabilidad que se consideraron más cercanos a esta área  planteados por Yussef Hassan y Francisco Martín (2003). Lo anterior dado que el trabajo desarrollado se enfoca principalmente en la AI  y no precisamente en la Usabilidad (se relaciona con ella pero no es el eje central).

Por la cantidad de criterios heurísiticos sobre Arquitectura de Información y el significativo número de sitios web universitarios analizados, el proceso tomó varios meses de realización.

La información completa de los resultados de los análisis se puede descargar del documento que se adjunta a continuación.

 Descargar resultados de los análisis de sitios web universitarios colombianos mediante evaluaciones heurísiticas (peso: 360 KB) 
 Descargar resultados individuales de los análisis individuales del sitio web de cada universidad (formato: .rar - peso: 160 KB)

 

Bibliografía

Brown, Daniel (2007). “Communicating Design: Developing Web Site Documentation for Design and Planning”. New Riders.

González, María Paula; Pascual, Afra y Lorés, Jesús (2002). “La Evaluación Heurística”. En: Lorés, Jesús (coord.). “Introducción a la interacción persona ordenador”. Universitat de Lleida.

Hassan Montero, Yusef; Martín Fernández, Francisco J.; (2003). “Guía de Evaluación Heurística de Sitios Web”. En: No Solo Usabilidad, nº 2, 2003. <nosolousabilidad.com>. ISSN 1886-8592.

Laboratorio de Cibermetría. “Ranking Web of World Universities”. Consejo Superior de Investigaciones Científicas de España y Centro de Información y Documentación Científica. Sitio web: http://www.webometrics.info

Linares Sánchez, Valentín (2004). “Análisis de sistemas de navegación de sitios Web”. <vlinares.net> Disponible en: http://www.vlinares.net/portafolio/html/uoc/iho/vlinares_memoria.pdf

Lorés, Jesús; Sendín, Montse y Agost, Jordi (2002). “La Evaluación”. En: Lorés, Jesús (coord.). “Introducción a la interacción persona ordenador”. Universitat de Lleida. 2002.

Nielsen, Jakob (2000). “Usabilidad: diseño de sitios Web”. Editorial Prentice Hall. Primera edición en español.

____________ (SF). “Severity Ratings for Usability Problems”. <useit.com> Disponible en: http://www.useit.com/papers/heuristic/severityrating.html

Outing, Steve y Ruel, Laura (2004). “Eyetrack III: Cómo lucen los sitios web a través de los ojos de los lectores”. <poynterextra.org> Disponible en:  http://www.poynterextra.org/eyetrack2004/main-spanish.htm

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.

Rosenfeld, Louis (2004a). “Information Architecture Heuristics”. <louisrosenfeld.com> Disponible en: http://louisrosenfeld.com/home/bloug_archive/2004/08/information_architecture_heuri.html 

____________ (2004b). “IA Heuristics for Search Systems”. <louisrosenfeld.com> Disponbible en: http://louisrosenfeld.com/home/bloug_archive/2004/09/ia_heuristics_for_search_syste.html 

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

Samper, Daniel (2005). “Frases más cortas alargan la vida laboral del redactor”. Seminario de periodismo digital www.eltiempo.com. Santiago de Cali.

Sánchez de Bustamante, Antonio (2005). “Arquitectura de información y usabilidad: nociones básicas para los profesionales de la información”. <scielo.sld.cu> Disponible en: http://scielo.sld.cu/pdf/aci/v12n6/aci04604.pdf

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

Resultados de pruebas de análisis de secuencia para el proyecto del nuevo portal web

Resultados y análisis de pruebas de card sorting para el proyecto del nuevo portal web

Hola amigos unicaucanos.

En esta ocasión queremos socializar el documento de resultados y análisis de las pruebas de card sorting realizadas para el proyecto de diseño del nuevo portal web de Unicauca.

Pero ustedes se preguntarán: ¿qué es el card sorting? Pues bien, a grandes rasgos les podemos contar que es una de las más comunes técnicas de arquitectura de información utilizadas por quienes se encargan del diseño conceptual y estructural de un sitio web.

Las pruebas de card sorting están basadas en una metodología de organización de contenidos centrada en el usuario para incrementar la encontrabilidad en un sistema.

Lo que pretenden esta pruebas, en esencia, es establecer patrones o modelos metales de organización de contenidos por parte de los usuarios que realizan este tipo de test.

Card Sorting en Unicauca

La pruebas de card sorting en Unicauca fueron llevadas a cabo en las instalaciones de la División de Sistemas del 29 de julio al 04 de octubre de 2008.

Se tomó una muestra representativa de 30 usuarios objetivos del portal web de Unicauca, siguiendo las recomendaciones de Tullis y Wood (2005), quienes luego de un estudio acerca de cuántas personas eran necesarias para realizar un estudio de card sorting, determinaron que se obtenían estructuras y agrupaciones razonables si se realizaba la prueba con 30 personas.

Por tanto, para la realización de las pruebas de card sorting para el nuevo portal web de Unicauca, se escogieron 30 personas (15 hombres y 15 mujeres) distribuidas equitativamente por perfil así:

• Seis (6) aspirantes a realizar estudios de pregrado y posgrado en Unicauca.
• Seis (6) estudiantes de programas de pregrado y posgrado de Unicauca.
• Seis (6) graduados de programas de pregrado y posgrado de Unicauca.
• Seis (6) docentes de Unicauca.
• Seis (6) funcionarios y contratistas de Unicauca.

Descargar resultados y análisis de la prueba de card sorting para proyecto de diseño del nuevo portal web de Unicauca (peso: 262 KB)

Ver imágenes de resultados de las pruebas de card sorting para proyecto de diseño del nuevo portal web de Unicauca (enlace externo al sitio web Flickr.com)

Resultados y análisis de encuesta para el proyecto del nuevo portal web

Hola de nuevo amigos de Unicauca.

En esta ocasión queremos presentarles el documento de resultados y análisis de la encuesta realizada para el proyecto de diseño del nuevo portal web de Unicauca.

Cabe recordar que la encuesta, resultado del proceso de investigación de usuarios en la planeación del nuevo sitio web, fue llevada a cabo del 19 de junio al 19 de julio de 2008.

En total se obtuvieron 1005 respuestas que representan la muestra planeada como parte del proceso de investigación y con la cual se obtiene un nivel adecuado de representatividad de la comunidad universitaria encuestada.

Descargar resultados y análisis de la encuesta para proyecto de diseño del nuevo portal web de Unicauca (peso: 936 KB)

Ver imágenes de resultados de la encuesta para proyecto de diseño del nuevo portal web de Unicauca (enlace externo al sitio web Flickr.com)

Documento guía del proyecto nuevo portal web de Unicauca

Hola de nuevo amigos unicaucanos.

Después de un tiempo sin publicar artículos, pero en el que hemos seguido trabajando en el proyecto de diseño del nuevo portal web de Unicauca, volvemos para dar a conocer en esta ocasión el documento guía del proyecto.

En el mencionado documento, producto de un necesario proceso de planeación, se establecen los objetivos y usuarios del nuevo sitio web, se responden unas preguntas claves que orientan el proyecto, se definen algunos contenidos básicos que debe tener el nuevo sitio web de Unicauca de acuerdo a sus caracterísiticas, y se esbozan algunos requerimientos o especificaciones técnicas con las que trabajará el nuevo sitio web.

Cabe mencionar que para la elaboración del documento se han tenido en cuenta también los comentarios y la retroalimentación que se ha establecido hasta ahora con las personas que han comentando en este blog. Muchas gracias por su participación.

Descargar documento guía del proyecto nuevo portal web de Unicauca (peso: 96.3 kb) 

Gracias por su participación en la encuesta para el proyecto del nuevo portal web

Hola amigos unicaucanos y aspirantes a estudiar en Unicauca.

Este es un mensaje de agradecimiento por haber participado activamente en la encuesta que se realizó como parte del proyecto de creación del nuevo portal web de la Universidad del Cauca.

En un mes exacto se alcanzaron las 1005 encuestas que se establecieron como muestra de la investigación que se está realizado como parte del proyecto.

Agradecemos a los estudiantes, graduados, docentes, funcionarios y contratistas de Unicauca, así como a los aspirantes a ingresar a estudiar a Unicauca que participaron. La meta era alta, pero la logramos.

En este momento nos encontramos sistematizando y analizando la información obtenida y próximamente a través de este blog se publicarán los resultados.

¡Nuevamente gracias unicaucanos!

Encuesta proyecto nuevo portal web Unicauca

Hola de nuevo amigos.

En esta ocasión queremos pedirles el favor que nos ayuden a llenar una corta encuesta para el proyecto de creación del nuevo portal web de Unicauca.

Estamos seguros que no les tomará más de cinco minutos y los datos que nos proporcionen serán muy importantes para el proyecto.

Les rogamos que sean muy sinceros en sus respuestas.

Ingresa al enlace de la encuesta que se ajuste a tu perfil.

Encuesta para aspirantes a ingresar a realizar estudios de pregrado o posgrado en Unicauca

Encuesta para estudiantes regulares de los programas de pregrado y posgrado de Unicauca

Encuesta para graduados de programas de pregrado y posgrado de Unicauca

Encuesta para docentes de Unicauca

Encuesta para funcionarios y contratistas de Unicauca

Participe, nosotros sí los escuchamos porque el nuevo portal web es para que usted lo pueda usar

Hola a todos.

Recientemente una profesora de Unicauca nos hizo un comentario que nos llamó la atención y que dio motivo a esta entrada. Nos estaba comentando algunas inquietudes respecto al actual portal, relacionadas con algunas problemas que ha tenido con el directorio, pues su nombre no aparece allí.

Aprovechamos para comentarle que estábamos trabajando en un nuevo portal con el cual buscamos solucionar problemas como el que ella nos mencionó y que habíamos habilitado este blog para que los usuarios nos comentaran los problemas que han tenido y nos manifestaran sus inquietudes, sugerencias, necesidades de información o puntos de vista sobre el proyecto del nuevo portal.

En ese momento la profesora nos dijo, palabras más, palabras menos: ‘Yo sí vi el blog pero no opiné porque pensé que ustedes no van a tener en cuenta esas opiniones’. A lo que agregó que ella encontró este espacio web similar a los buzones de sugerencias que hay en diversos establecimientos u organizaciones.

Enseguida la aclaramos que aunque hay una similitud entre el objetivo del blog y el de un buzón de sugerencias, en tanto los dos son espacios de participación para los usuarios, la diferencia radica en que en este espacio digital sí hay retroalimentación constante y se establecen canales de comunicación entre los usuarios y el equipo de diseño del nuevo portal web.

Aprovechamos para comentarle además que el proyecto del nuevo portal está basado en una metodología que pone al usuario en un lugar central de todo el proceso. Esto porque es el usuario objetivo del sitio (en este caso cada uno de los miembros de la comunidad universitaria), quien va a utilizar, a diario o de forma muy seguida, el portal web de la Universidad para satisfacer diversas necesidad de información o servicios.

También es importante mencionar que algunas de las sugerencias que hagan (y que han hecho hasta ahora) los usuarios son más factibles de desarrollar que otras. Hay razones de tiempo, recursos técnicos, recursos humanos, cronogramas, etc. que hacen que unas cosas sean más fáciles de implementar que otras. Pero cada una de las ideas que expresan los usuarios son tenidas en cuenta, así sean para ser estudiadas para etapas avanzadas del proyecto.

Por eso lo invitamos, estimado unicaucano, a que participe activamente de este proyecto que es suyo: la construcción entre todos de un nuevo y mejor medio digital de Unicauca.

Siguiente página »

• Entradas recientes

  • Diseño de prototipos (wireframes) para proyecto nuevo portal web Unicauca
  • Diagramación de mapa del sitio y representación de etiquetas para proyecto nuevo portal web Unicauca
  • Análisis de sitios web universitarios colombianos mediante evaluaciones heurísticas
  • Resultados de pruebas de análisis de secuencia para el proyecto del nuevo portal web
  • Resultados y análisis de pruebas de card sorting para el proyecto del nuevo portal web

• Categorías

  • Análisis de secuencia
  • Análisis de sitios web similares
  • Análisis del contexto
  • Arquitectura de información
  • Blueprints
  • Card sorting
  • Documentos generales
  • Encuestas
  • Evaluaciones heurísiticas
  • Mapa del sitio
  • Planeación
  • Prototipos
  • Pruebas de usuarios
  • Wireframes

• Archivos

  • Febrero de 2009
  • Diciembre de 2008
  • Noviembre de 2008
  • Octubre de 2008
  • Julio de 2008
  • Junio de 2008
  • Mayo de 2008
  • Abril de 2008

• Búsqueda

• Enlaces

  • Guía web Chile
  • IA Institute
  • No solo usabilidad
  • Unicauca
  • Usability.gov
  • Usalo.es
  • Web style guide
  • Webcontent.gov