Titulo Largo Artículo 1.5. Arquitectura de la información en sedes Web Titulo Corto Artículo 1.5 Autor Cristòfol Rovira Palabras clave - Descripcion Objetivos Contenidos Actividades Evaluacion

Nota sobre la evaluación De forma intercalada en el texto de este artículo encontrará el enunciado de diversas actividades. Para superar esta unidad didáctica deberá realizar estas actividades redactando un informe en el que se incluyan comentarios y, en caso que sea pertinente, una captura de pantalla de cada actividad para ilustrar su realización. Para entregar este informe deberá crear un solo documento para todos las actividades de esta unidad didáctica en formato PDF. A continuación podrá usar el apartado de entrega de ejercicios del aula Moodle. La realización de forma satisfactoria de este ejercicio implicará la obtención de 0,75 créditos.

Introducción

La unidad didáctica está planteada para ofrecer las bases teòricas del diseño de cualquier sistema de hipertexto. No obstante el objetivo principal será el diseño de páginas y sedes web, por tanto en relación a la terminologia hay que tener en cuanta que:

- Nodo hipertextual corresponde a página web - Hiperdocumento corresponde a sede web - Sistema hipertextual corresponde a conjunto de sedes web

Diseñar la navegación es un reto en condiciones difíciles

Es bien sabido que muchas sedes Web tienen errores importantes de diseño. Las disciplinas que podrían evitar estos males (Arquitectura de la información, Usabilidad...) se están consolidando a marchas forzadas formulando principios para sedes Web accesibles, usables y navegables. Aunque se avanza de manera vertiginosa, todavía hay una distancia entre estas propuestas y la realidad. Aunque las razones para este desajuste son muchas, una de las principales es la complejidad de la implementación cuando hay que incorporar funciones avanzadas de navegación.

La implementación del diseño de una sede Web es fácil y difícil al mismo tiempo. Por un lado, la creación de páginas HTML ha llegado a ser un proceso trivial para la mayoría de los profesionales de la información y la documentación. Con los editores de páginas Web de última generación se pueden obtener unos resultados óptimos.

No obstante, esta facilidad se vuelve en muro insalvable cuando no es posible contar con un equipo multidisciplinar y el diseño contiene elementos interactivos no soportados por el lenguaje HTML. La implementación de dispositivos interactivos hace evidente que la Web, además de ser un

documento que hay que marcar (HTML), es también una interfaz que hay que programar (javascript, java, php, asp...) (Garrett, 2003).

Arquitectura de la información y Usabilidad

El diseño de navegación es especialmente sensible a estas dificultades. La mayoría de elementos para la orientación de la navegación (mapas, menús, barras, migas de pan...) pueden ser implementados con lenguaje de marcado de documentos, pero hay algunos que son especialmente útiles y que solo pueden ser creados mediante programación.

La arquitectura de la información tiene como objetivo el diseño estrutural de los sistemas de información, especialmente los que se implementan con tecnología Web. Comprende la organización de la información, su rotulación, el diseño de la interacción, el diseño de navegación y el diseño de la interfaz de usuario.

El diseño de navegación forma parte de la arquitectura de la información, disciplina más amplia encargada de proponer principios prácticos para la estructuración, etiquetado y navegación de la Web. Ambas disciplinas se nutren de los resultados obtenidos por los estudios de usabilidad.

Para Rosenfeld y Morville (2002, 2004) la arquitectura de la información es la disciplina emergente encargada del etiquetado y del diseño estructural de espacios de información digital para facilitar la realización de tareas y el acceso a los contenidos de forma intuitiva. Garret (2003: 94) apunta en la misma dirección indicando que la arquitectura de la información se ocupa de la creación de los esquemas de organización y navegación que permitan a los usuarios moverse a través de un sitio Web con eficiencia e eficacia.

En el proceso de diseño y creación de una sede Web, Rosenfeld y Morville (2002) identifican una "zona gris" en la que es muy difícil identificar las fronteras entre las distintas disciplinas implicadas: arquitectura de la información, diseño de interacción, diseño de la información, diseño gráfico e ingeniería de la usabilidad.

"The design of navigation systems takes as deep into the gray area between information architecture, interaction design, information design, visual design, and usability engineering, alt of which we might classify under the umbrella of experience design." Rosenfeld y Morville (2002: 108)

Garret (2003: 33) da un paso más proponiendo un esquema general del papel de cada una de estas disciplinas, estableciendo el tipo de interrelación entre ellas en el contexto de lo que él denomina "experiencia de usuario". Para Garret, el diseño de navegación depende de la arquitectura de la información y se implementa al mismo tiempo que el diseño de la interfaz y antes que el diseño gráfico.

Figura. diagrama de los elementos de la experiencia de usuario (Garret, 2003: 33)

Por otro lado, según Nielsen (2003), la Usabilidad es un atributo que mide como de fácil es el uso de las interfaces de usuario. La norma ISO 9241-11 (1998) la define de modo más general como el grado en que un producto puede ser usado por usuarios específicos para alcanzar objetivos específicos con eficacia, eficiencia y satisfacción en un específico contexto de uso. En la enciclopedia wikipedia podemos encontrar una definición en esta misma línea "La usabilidad (..) es la medida de la facilidad de uso de un producto o servicio, típicamente una aplicación software o un aparato (hardware)."

Así pues, la usabilidad es una característica de una sede Web y por extensión también es la disciplina encargada de evaluarla mediante distintos tipos de pruebas (automáticas, con usuarios reales o de expertos) para posteriormente indicar formas de mejorarla

Finalmente, en el contexto de las disciplinas implicadas en el diseño de navegación, es necesario mencionar las relaciones entre arquitectura de la información y usabilidad. Baeza (2004) propone un "modelo causal" en el que la arquitectura de la información proporciona los principios teóricos de diseño que conducen el diseño y la creación de las sedes Web.

La Usablidad y la Arquitectura de la Información se condicionan mutuamente. Cuando se desarrolla una sede Web los principios de la Arquitectura de la Información son evaluados por medio de los tests de Usabilidad aplicadas a prototipos. En función del resultado de estas tests se podrían modificar las decisiones tomadas por el arquitecto de la información.

"Los proyectos se diseñan pensando en un modelo de usuario y en la experiencia que éste tendría al usar el sistema. Sin embargo, el verdadero resultado no se puede conocer hasta que usuarios reales se enfrenten a él. Es por eso que en un primer nivel el modelo presenta esta dualidad entre diseño y uso. En la dimensión del diseño se encuentran la arquitectura de información y la ubicuidad. No existe ubicuidad sin arquitectura de información y sólo si el sitio es ubicuo en la web, éste podrá ser usado. En la dimensión del uso aparece la usabilidad y su evaluación, así como el registro de actividad en las bitácoras (logs) para su análisis." (Baeza 2004: 178)

En la práctica las dos disciplinas aparecen inseparables. A menudo ambas son presentadas abarcando todo el ciclo de desarrollo de una sede Web, incluyendo aspectos relativamente lejanos al núcleo central de actividad, como la definición de los objetivos, la selección de los contenidos o las políticas de mantenimiento.

No obstante, desde un planteamiento estricto, el diseño de navegación forma parte de la arquitectura de la información y ambas disciplinas reciben recomendaciones prácticas originadas en los estudios de Usabilidad.

Los sistemas de navegación

El diseño de navegación se encarga de elegir los sistemas de navegación adecuados a los contenidos y usuarios propios de una determinada sede Web.

"Because it's usually impractical (and even when practical, it's generally not a good idea) to link to every page from every other page, navigation elements have to be selected to facilitate real user behavior -and by the way that means those links have to actually work, too." (Garret, 2003: 125)

Un sistema (o elemento) de navegación es cada una de las piezas de la interfaz de usuario de una página Web encargada de permitir y favorecer la navegación hipertextual (Hagedorn, 2000:5). Ejemplos de sistemas de navegación son menús, barras de navegación, migas de pan, mapas de navegación, índices, visitas guiadas...

Los sistemas de navegación se clasifican en (Garret, 2003: 127 y Rosenfeld - Morville, 2002: 107):

Sistemas de navegación integrados

- Globales: proporcionan acceso a toda la Web- Locales: proporcionan acceso a las páginas vecinas de acuerdo la estructura o arquitectura

de la información- Adicionales: proporcionan atajos para el acceso a apartados no disponibles de forma

inmediata con los sistemas globales o locales- Contextuales: están integrados en el contenido, en el texto de las páginas para proporcionar

información complementaria en el momento de la lectura- De cortesía: proporcionan acceso a ítems no usados de forma general pero que son

proporcionados por comodidad, como por ejemplo formulario de sugerencias, información de contacto...

Sistemas de navegación remotos

- Mapas : proporciona en una sola página una visión panorámica de la arquitectura del sitio Web

- Índices: es un listado alfabético de temas con enlaces a las páginas relevantes

Por otro lado, los sistemas de navegación integrados también suelen clasificarse en función de su presencia constante en todas las páginas de una sede Web. Los sistemas globales y de cortesía suelen ser permanentes, en cambio los sistemas locales, adicionales y contextuales solo aparecen en un conjunto reducido de páginas o incluso en una sola de ellas. Los sistemas locales ayudan a identificar secciones o apartados de las sedes Web que forman una unidad integrada, constituyendo lo que Nielsen denomina subsitio.

"Por subsitio entiendo una serie de páginas web en un sitio más grande a las que se ha dotado de un estilo común y de un mecanismo de navegaci6n compartido. Este conjunto de páginas puede ser un espacio diáfano o puede tener cierta estructura, pero en todo caso probablemente deba tener una sola página que se designe corno la página de inicio del subsitio. Cada una de las páginas del subsitio debe tener un vínculo señalando a la página de inicio del subsitio, así como un vínculo con la página de inicio de todo el sitio. Además, el subsitio deberá tener opciones de navegación globales (por ejemplo, con la página de inicio del sitio y con una búsqueda en el sitio), aparte de su navegación local." (Nielsen 2000: 223)

Principios de diseño de navegación

Tanto la Arquitectura de la información y como la Usabilidad proponen principios, normas, guías y sugerencias para que el diseño de la navegación cumpla con los siguientes tres objetivos básicos (Garret, 2003: 125):

- Proporcionar los medios necesarios para desplazarse de un punto a otro en un sitio Web- Comunicar la relación entre los distintos elementos que forman el diseño de navegación, no

es suficiente con proporcionar enlaces hipertextuales, hay que indicar qué vínculos son los más importantes, que diferencias hay entre ellos indicando si son globales o locales

- Comunicar la relación entre los contenidos de la sede Web y la página que el usuario está visualizando proporcionando una perspectiva general donde quede reflejada la posición actual.

Nielsen (2000:188-191) es más sintético, señala que los sistemas de navegación tienen que ayudar a

los usuarios a responder a tres preguntas fundamentales:

- ¿Dónde estoy? Es la pregunta más importante que hay que responder. Si los usuarios no saben donde están no podrán entender la estructura del sitio. Hay que identificar claramente la página en relación a toda la Web y en relación a la estructura de la propia sede Web. La ubicación relativa de la página activa en la estructura del sitio suele indicarse mostrando la estructura del sitio y resaltando la página activa.

- ¿Dónde he estado? El usuario debe conocer en que páginas ha estado, esta funcionalidad está presente en los navegadores con el cambio de color de los enlaces incrustados.

- ¿Dónde puedo ir? Los sistemas de navegación deben proporcionar los enlaces necesarios para permitir el desplazamiento de los usuarios.

Rosenfeld y Morville (2000, 2002) sintetizan de forma magistral los principios de la Arquitectura de la Información para el diseño de sistemas de navegación indicando que es necesario proporcionar contexto y flexibilidad.

Para que el diseño de navegación proporcionen el contexto al usuario debe mostrar la estructura de la información de manera clara y consistente e indicar al usuario su posición en ella (Rosenfeld; Morville, 2002: 107). Este principio responde a la pregunta ¿dónde estoy? y se materializa, por ejemplo, en los menús contextuales donde la página activa aparece resaltada con diferente color o tipografía.

La navegación hipertextual puede proporcionar una gran flexiblidad al usuario proporcionando navegación lateral, desde una página a otras de ramas contiguas, navegación vertical, hacia páginas más altas o más profundas en la misma jerarquía, o navegación en red, entre dos páginas muy distantes en la jerarquía, pero con contenidos relacionados. Tantas posibilidades pueden llegar a abrumar al usuario.

El diseño de navegación deberá evitar estos problemas compensando las ventajas de esta flexibilidad de acceso, con los problemas de desorden. Los sistemas de navegación tienen que hacer visible la estructura implícita proporcionando contexto y flexibilidad.

"The trick to designing navigation systems is to balance the advantages of flexibility with the dangers of clutter. In a large, complex web site, a complete lack of lateral and vertical navigation aids can be very limiting. On the other hand, too many navigation aids can bary the hierarchy and overwhelm the user. Navigation systems should be designed with care the complement and reinforce the hierarchy by providing added context and flexibility." (Rosenfeld; Morville, 2002: 111, 112)

Desde la perspectiva de la Usabilidad, Beaumont propone doce normas para diseñar un menú. Algunas de ellas se pueden extrapolar a cualquier sistema de navegación y son útiles para alcanzar los objetivos indicados por Garret de forma más eficiente. Para Beaumont (2002: 11-12) un menú debe:

- Ser diseñado considerando de forma prioritaria la principal tarea del usuario- Tener una clara diferenciación con el contenido- visible de forma clara (contraste fondo forma, tamaño de la tipografía...) para permitir

lecturas rápidas- Tener un comportamiento que encaje con las expectativas del potencial usuario- Ser consistentes en todo el sitio Web

Un menú desplegable creado con DigiDocMenu con todas las páginas de una sede Web (o subsitio)

proporciona contexto y flexibilidad en un espacio muy reducido. La flexibilidad es máxima porque todas las páginas están disponibles a un clic y proporciona el contexto cuando se desplega y queda representada la estructura completa con la página activa en rojo. Un menú desplegable es un sistema de navegación compacto que puede ser incorporado de forma permanente en una banda de color a la izquierda de todas las páginas.

En este artículo abordaremos principalmente el diseño de las estructuras de navegación subyacente en un hipertexto para después crear sistemas efectivos de navegación hipertextual.

Etiquetado

El etiquetado de páginas y sistemas de navegación es un aspecto primordial de la Arquitectura de la información. Nielsen (1990) propone diez principios generales (heurísticas) de Usabilidad para el diseño de la interfaz de usuario, algunos de ellos son aplicables al diseño de etiquetas para los sistemas de navegación:

- Ajuste entre el sistema y el mundo real. El sistema debe hablar en el lenguaje de los usuarios, con palabras, frases y conceptos familiares al usuario en lugar de términos orientados al sistema.

- Consistencia y estándares. Los usuarios no deben preguntarse si diferentes palabras, situaciones o acciones significan la misma cosa.

- Estética y diseño minimalista. Los diálogos no deben contener información irrelevante o raramente necesaria. Cada unidad extra de información en un diálogo compite con unidades de información relevante y disminuye su visibilidad relativa.

Krug (2000: 72-73) propone cuatro principios para etiquetar las páginas

- Cada página debe tener explícitamente su nombre- El nombre de la página debe estar en el lugar jerárquicamente correcto para que enmarque

todo el contenido- El nombre tiene que estar destacado mediante su posición, tamaño, tipografía para indicar

que es el encabezado- El nombre de la página tiene que encajar con el texto de las palabras de los enlaces que

apuntan a ella

Este último punto tiene especial interés para el diseño de menús desplegables. Debido a que el espacio disponible es muy limitado, en muchas ocasiones el nombre del ítem del menú no puede contener todo el texto del título de la página a la que apunta. En estos casos hay que conseguir que ambos rótulos encajen lo más estrechamente posible.

"Of course, sometimes you have to compromise, usually because of space limitations. If the words I click on and the page name don't match exactly, the important thing is that (a) they match as closely as possible, and (b) the reason for the difference is obvious. For instance, at Gap.com if I click the buttons labeled "Gifts for Him" and "Gifts for Her," I get pages named "gifts for men" and "gifts for women". The wording isn't identical, but they feel so equivalent that I'm not even tempted to think about the difference." (Krung, 2000: 73)

Navegación hipertextual

La navegación hipertextual es la actividad que realizan las personas que consultan un hipertexto, y que consiste en activar sucesivas veces los enlaces que presentan los nodos hipertextuales para

acceder a nuevos nodos y finalmente localizar la información de interés.

Desde la perspectiva del usuario de un hipertexto hay dos formas básicas de navegación: con una dirección o sin ella.

- La navegación con dirección se da cuando el usuario busca una determinada información y activa los enlaces en función de las posibilidades que tienen de llevarlo a la información deseada.

- La navegación sin dirección se produce cuando el usuario no tiene un objetivo claramente preestablecido y activa los enlaces en función del interés que le despiertan los anclajes de salida del nodo consultado.

En función del tipo de recorrido que el usuario hace hay tres estrategias básicas en la navegación hipertextual: navegación en anchura, navegación en profundidad (o longitud) y navegación combinada.

- La navegación en anchura consiste en activar todos los enlaces del nodo activo para consultar todos los nodos que están enlazados a éste. Después de cada uno de estos saltos hipertextuales, y a través del botón de retorno, se vuelve al nodo sometido a exploración. En función de este primer sondeo se escoge uno de los enlaces para avanzar en la navegación y volver a realizar la misma operación. Por lo tanto, se consultan todos los posibles caminos abiertos antes de decidir el nodo que continuará la navegación.

- En la navegación en profundidad se adopta la actitud contraria, se escoge siempre un enlace del nodo activo para avanzar en la navegación y no se exploran otras posibles rutas de los enlaces no activados.

- La estrategia combinada consiste en utilizar anchura o profundidad en función del objetivo de la navegación y/o de los resultados que se obtienen en cada momento.

Si relacionamos las estrategias con la presencia o no de un objetivo de búsqueda de información se dan las siguientes seis situaciones:

En anchura En profundidad CombinadaCon dirección Situación que se

produce cuando se ha localizado un nodo con un listado de recursos sobre el tema de interés.

Situación que se produce cuando aún no se ha encontrado ningún nodo relacionado directamente con el tema de interés.

Situación que se produce cuando se han localizado nodos con información que puede estar relacionada con el tema de interés.

Sin dirección Situación poco probable ya que si no hay una dirección difícilmente habrá una actitud de revisión sistemática

Situación poco probable ya que si no hay una dirección difícilmente se avanzará hacia un objetivo.

Situación muy común ya que se activan los enlaces de una manera aleatoria.

En una búsqueda de información por navegación normalmente se aplican las tres estrategias en el siguiente orden (ver la primera fila del cuadro anterior):

- En profundidad

- Combinada - En anchura

Es probable que en función del punto de partida y de los resultados obtenidos alguna de las fases pueda ser obviada.

Estructuras y esquemas para organizar la navegación

Rosenfeld y Morville (1998: 26) establecen que la organización de la navegación de un hipertexto se realiza en base a estructuras y esquemas.

Las estructuras de organización de la navegación son formas genéricas de relacionar fragmentos de información. Las cuatro estructuras básicas son:

- Secuencia- Jerarquía- Tabla- Red

Los esquemas de organización de la navegación son formas genéricas de fragmentar y ordenar la información. Hay diferentes tipos de esquemas:

- Esquemas exactos: cronológico y geográfico.- Esquemas ambiguos: por tópicos, orientado a tareas, específico de una audiencia y en

función de una metáfora.- Esquema híbrido cuando se mezclan dos o más esquemas.

Las estructuras y los esquemas son abstracciones que permiten comprender los elementos de la arquitectura de la información subyacentes a un sistema hipertextual

Muchas veces los esquemas y las estructuras se condicionan mutuamente. Por ejemplo, un esquema cronológico obligatoriamente tendrá asociada una estructura secuencial. Otras veces hay una tendencia a usar determinados esquemas con determinadas estructuras. Por ejemplo, un esquema por tópicos probablemente implicará una estructura jerárquica y un esquema en función de una metáfora puede asociarse a una estructura en red.

Estructuras para organizar la navegación

Las estructuras de navegación son formas genéricas de relacionar fragmentos de información que, en el caso del hipertexto, determinará el tipo de relaciones que se establecerán entre los nodos y por tanto el tipo de enlaces hipertextuales que podrán ser creados. Las cuatro estructuras básicas son la secuencia (sequence), la tabla (grid), la jerarquía (hierarchy) y la red (web).

Figura. Los cuatro patrones básicos para estructurar la navegación. Fuente: Web style Guide http://www.webstyleguide.com/wsg3/5-site-structure/3-site-file-structure.html

La estructura secuencial es la más sencilla y la que ofrece menos dificultades en el momento de navegar. Aún así, es la más rígida ya que predetermina una única ruta de consulta. En el otro extremo está la estructura en red . Es la estructura que más puede desorientar al navegador/lector y la más flexible, ya que ofrece muchas posibles rutas de navegación y permite a sus usuarios un mayor control sobre la ruta de consulta. Las estructuras jerárquica y en tabla tienen unas características de complejidad y flexibilidad intermedias entre la estructura en red y la secuencial.

- Las estructuras jerárquicas enlazan nodos que ofrecen una visión general con nodos más específicos o más localizados donde se desarrolla con más profundidad uno de los puntos tratados en el nodo central.

- Las estructuras en red normalmente enlazan nodos que tienen una relación de significado, ya sea de complementariedad, de contraste, de refutación o de ampliación. Para facilitar la navegación es recomendable proporcionar el acceso a un mapa de navegación o a la página inicial.

- Las estructuras secuenciales enlazan un nodo con el que le precede y con el que le sigue en una secuencia que puede estar basada en el desarrollo de una argumentación o puede ser la enumeración de diferentes elementos del mismo tipo.

- Las estructuras en tabla enlazan los nodos siguiendo una organización de filas y columnas. Se utiliza poco, ya que implica que los fragmentos de información puedan ordenarse siguiendo dos criterios, uno representado en las filas y otro en las columnas.

Normalmente un hipertexto integra más de una estructura de navegación. Sobre el mismo conjunto de nodos puede haber superpuestas diferentes estructuras, una estructura secuencial, una jerárquica y una en red. En estos nodos el usuario puede optar por navegar por cualquiera de las tres estructuras disponibles.

Estructura jerárquica

Normalmente la navegación de un hipertexto está basada en una estructura jerárquica que cubre la totalidad de los nodos de información. Sobre esta estructura jerárquica, y en función del contenido, se pueden superponer otras estructuras como la secuencial o la de red que permitirán el acceso al contenido mediante diversas rutas de navegación.

Para conseguir unas características óptimas de navegación se necesita que la estructura jerárquica esté bien equilibrada . Se consigue una estructura jerárquica equilibrada cuando el número de opciones de cada nivel jerárquico es proporcional al número de niveles jerárquicos.

Figura. Estructura jerárquica excesivamente ancha. Fuente: Web style Guide

Figura. Estructura jerárquica excesivamente larga. Fuente: Web style Guide

Figura. Estructura jerárquica equilibrada con la anchura y longitud correspondientes. Fuente: Web style Guide

Los principios generales que hay que seguir para conseguir una estructura jerárquica compensada son los siguientes:

- Hacer cada rama jerárquica con siete más/menos dos . Por tanto, en la estructura jerárquica, cada nodo tendría que enlazar a un mínimo de 5 páginas (7-2) y un máximo de 9 (7+2).

- No exceder los tres niveles jerárquicos.

Hay que adaptar estos principios al contenido temático del hipertexto y a la cantidad de información a organizar. No sería correcto agrupar opciones que temáticamente tienen pocos puntos en común para aumentar o reducir el número de opciones en un nivel jerárquico.

Por otro lado, si la cantidad de información no es excesiva, puede ser correcto transgredir la norma y hacer una estructura muy ancha de un sólo nivel jerárquico que cubra todo el hipertexto. En estos casos se puede llegar hasta 14 páginas enlazadas a una página inicial. En sedes Web con más páginas, se aconseja hacer una estructura jerárquica de dos niveles.

Estructuras en tabla

En casos muy concretos puede resultar útil estructurar los nodos de un hipertexto en forma de tabla. Una condición previa de esta estructura es que la información ha de organizarse en función de dos criterios . Un criterio ocupará las filas y otro las columnas.

Por ejemplo, un sitio web que contenga información sobre cursos de formación en línea puede ser estructurado en tabla utilizando los siguientes criterios organizativos:

- Criterio columnas: los diferentes cursos que se ofrecen.- Criterio filas: los diferentes apartados de información de cada curso.

Figura. Normalmente las estructuras en tabla, red o secuencia complementan a una estructura jerárquica previa.

Estructuras en red

Las funciones de los enlaces en la estructura en red son los siguientes:

- Facilitar la navegación ya que los enlaces hipertextuales de la estructura en red facilitan el acceso a la página inicial, a un mapa de navegación, a un índice, a un sumario...

- Representar la semántica de relaciones entre los fragmentos de información ya que conectan nodos que tienen una relación de complementariedad, de contraste, de refutación, de ampliación...

Aún así, no siempre las relaciones semánticas señalan rutas útiles para facilitar la navegación, ni las rutas de navegación están siempre basadas en relaciones de significado. Por tanto, hay casos en que las dos necesidades implican relaciones independientes que incluso pueden ser contradictorias. El diseño de la estructura de la información es una actividad dinámica en la que se tienen que integrar necsidades de navegación con necesidades de relación de significado.

Las estructuras en red proporcionan flexibilidad en el acceso de información de un hipertexto pero también pueden generar desbordamiento cognitivo en los usuarios cuando ofrecen un exceso de posibilidades de consulta. Hay que equilibrar y seleccionar los enlaces semánticos que realmente sean interesantes.

Hay que evitar los hipertextos en que todo se relaciona con todo

Figura. Hipertexto donde todos los nodos están relacionados con todos los nodos. Fuente: Web style Guide

Estructura secuencial

La estructura secuencial es la estructura básica de los documentos tradicionales en soporte papel. Consiste en presentar los contenidos de una manera lineal , con los puntos de inicio y final previamente establecidos y un único recorrido de lectura posible.

Con frecuencia se ha planteado que la esencia del hipertexto tendría que ser la negación de esta estructura. En realidad es una de las estructuras más interesantes para ser incluida en un hipertexto como complemento de otros y ofrecer:

- Una visita guiada por los nodos más interesantes.- Una ruta de consulta por todo el hipertexto- La consulta de un nodo extenso .

Figura. Estructura secuencial formada por diversos nodos

Figura. Estructura secuencial formada por un nodo extenso

El interior de un documento secuencial está organizado siguiendo una nueva subestructura formada por parágrafos. En función del tipo de documento, esta subestructura tendrá unas determinadas características, aunque hay tres apartados genéricos presentes en muchos documentos secuenciales:

- Introducción donde se presenta lo que se va a explicar.- Desarrollo donde se expone y argumenta la tesis.- Conclusiones donde se remarcan las ideas esenciales ya expuestas.

Esquemas para organizar la navegación

Los esquemas de organización de la navegación son formas genéricas de fragmentar y ordenar la información. Tan genéricas como el tiempo, el espacio, el tema... La ventaja de utilizar los esquemas genéricos está en que los usuarios ya los conocen y por tanto podrán prever gran parte de

los resultados de sus decisiones de navegación. De esta manera se minimiza la desorientación y se facilita la navegación.

Hay dos tipos básicos de esquemas para organizar la navegación hipertextual (Rosenfeld y Morville, 1998: 26-46):

- Esquemas exactos- Esquemas ambiguos- Esquemas híbridos

Los esquemas exactos dividen la información en fragmentos bien definidos y mutuamente excluyentes , como por ejemplo el listín telefónico o un mapa político de Europa. Los tres esquemas exactos más utilizados son:

- Alfabético- Cronológico- Geográfico

Cada esquema podrá aplicarse en función deltipo de información que contiene el hipertexto

Los esquemas ambiguos dividen la información en fragmentos sin una definición exacta. Normalmente los fragmentos resultantes no son mutuamente excluyentes y en su definición interviene una parte de la subjetividad del diseñador. Los principales esquemas ambiguos son:

- Temático Es un esquema muy utilizado y consiste en fragmentar la información en relación a los temas y subtemas que se desarrollan. En el momento de diseñar este esquema hay que considerar la amplitud temática a cubrir. No será igual la fragmentación por temas de una enciclopedia electrónica que la clasificación por tópicos de una intranet de una organización.

- Por tareas Aplicable cuando los usuarios han de realizar un determinado proceso. El esquema fragmenta el proceso en pasos independientes y les aplicará un orden de ejecución.

- De audiencia Cuando un hipertexto tiene dos o más tipos de usuarios potenciales es interesante aplicar un esquema de audiencia dirigido a cada categoría de usuarios en la que se tienen en cuenta sus características. En estos casos se puede establecer un sistema de privilegios para permitir o no la consulta de los nodos en función de la tipología de usuario.

- De metáfora En los esquemas de metáfora se utiliza una idea, objeto o situación conocida que actúa como referente para ordenar y fragmentar la información. Como en todas las metáforas, el éxito radica en que haya un cierto paralelismo (temático, estructural o de otro tipo) entre el referente escogido y la información a organizar.

Normalmente un hipertexto está organizado con arreglo a dos o más esquemas . En el momento de presentarlos hay que mantener la integridad de cada uno y mostrarlo en nodos independientes o en el mismo nodo pero de forma claramente separada.

Contexto y flexibilidad

Un buen diseño de la estructura de navegación tiene que ofrecer (Rosenfeld y Morville, 1998: 550-52):

- Información sobre el contexto - Flexibilidad de acceso

Todos los nodos del hiperdocumento tienen que informar de su contexto indicando al usuario en cada momento donde está situado y qué información está directamente relacionada con el nodo que consulta.

Para conseguir contexto hay que seguir las normas siguientes:

- Todos los nodos han de incluir el nombre de la institución u organización responsable del hipertexto, el título del hipertexto y el título del nodo. Esta información puede estar situada en el encabezamiento o ser una parte del título.

- Cada nodo ha de mostrar una parte de la estructura jerárquica general del hipertexto indicando la localización del nodo activo en esta jerarquía.

La organización jerárquica de los enlaces ofrece una buena orientación a los usuarios, ya que la jerarquía es una forma de organización elemental utilizada en ámbitos muy diversos. Aún así, una navegación basada exclusivamente en enlaces jerárquicos proporciona muy poca flexibilidad. Por tanto, hay que proporcionar rutas alternativas al recorrido jerárquico.

La flexibilidad se consigue superponiendo a la estructura jerárquica, y sobre el mismo conjunto de nodos, otras estructuras como la secuencial o la de red. El diseño global de la estructura de navegación se realiza en tres pasos:

Figura. Primer paso de la estructura jerárquica básica. Estructura jerárquica básica de un hipertexto con dos niveles jerárquicos. El primero con 6 nodos y el segundo sólo desarrollado en dos ramas con 3 nodos cada una

Figura. Segundo paso: superponer estructuras secuenciales donde convenga. Estructura jerárquica básica con una estructura secuencial superpuesta

Figura. Tercer paso: superponer la estructura en red donde convenga. Estructura jerárquica básica con una estructura secuencial y otra en red superpuestas

El tamaño de los nodos es un elemento clave en la navegación hipertextual y en la organización de la información. Hay argumentos a favor y en contra de los nodos pequeños los que ocupaln una sola pantalla.

A favor de los nodos pequeños:

- La resolución que actualmente tienen los monitores hace inviable la lectura de gran cantidad de texto en línea. Los monitores tienen una resolución entre los 75 y los 90 puntos por pulgada, y en cambio la impresión en papel de menos calidad está por encima de los 300 puntos por pulgada.

- Los nodos pequeños facilitan el establecimiento de enlaces , ya que la información está fragmentada en unidades independientes que desarrollan un sólo concepto.

- Normalmente cuando un usuario activa un enlace espera encontrar una información concreta relacionada con el anclaje de salida y no un gran documento.

- Cada lector de un hipertexto espera poder escoger una ruta que esté de acuerdo con sus necesidades e intereses activando en cada momento los enlaces que más le convengan. Cuando mayor es el nodo, más discurso secuencial contiene y menos capacidad tendrá el lector de controlar la navegación.

En contra de los nodos pequeños:

- Con los nodos pequeños se pierde la estructura clásica de un discurso secuencial con una introducción, un desarrollo y unas conclusiones. La expresión de ideas con una cierta complejidad requiere un discurso secuencial.

- Con la información excesivamente fragmentada, el usuario se desorienta con mucha facilidad.

Figura. Hipertexto con nodos estructurados y del mismo tamaño

Figura. Hipertexto con nodos heterogéneos de diferentes tamaños y no estructurados

Un segundo aspecto de gran influencia en la arquitectura de la información es la estructura interna de los nodos . Hay hipertextos con nodos que tienen una determinada estructura interna formada por diversas zonas de información de forma similar a una base de datos documental, donde los registros están estructurados en campos. Un ejemplo paradigmático de este tipo de hipertextos es una enciclopedia electrónica o un hiperdiccionario.

La uniformidad de la estructura de los nodos hace que el usuario pueda prever en todo momento cómo será el nodo que a continuación visitará. Aún así, las posibilidades expresivas se ven en gran parte limitadas por la necesidad de adaptar la información a una estructura prefijada.

Normalmente los nodos de un hipertexto no respetan una estructura rígida. Un nodo puede contener un artículo completo, otro una anotación de un par de párrafos y un tercero una ficha donde se analiza un recurso de Internet. En estos casos, cualquier tipo de información en cualquier formato (gráfico, imágen en movimiento, vídeo...) puede ser enlazado al hipertexto formando un nuevo nodo. Pero de esta manera también aumentan las posibilidades de desorientar al usuario .

Aunque estos nodos no respeten una estructura rígida, todos los nodos contendrán algunos elementos comunes para facilitar la navegación. Por ejemplo, un enlace a la página inicial, un menú de los apartados más importantes del hipertexto, el título del nodo, el nombre del autor o la fecha de creación.

Características de los enlaces

Los enlaces materializan las estructuras de navegación del hipertexto porque hacen posible la conexión entre dos nodos. Desde esta perspectiva podemos clasificar los enlaces en tres tipos básicos:

- Jerárquicos : forman parte de la estructura jerárquica.- Asociativos : hacen posible las estructuras en red y en tabla y normalmente se crean para

relacionar dos fragmentos de información con relaciones semánticas.- Secuenciales : materializan la estructura secuencial

También podemos clasificar los enlaces en función del efecto que producen en las ventanas que soportan los nodos de origen y destino. Siguiendo este criterio tenemos:

- Enlace de sustitución en el que el nodo de destino sustituye al de origen.- Enlace de superposición en el que se genera una nueva ventana que se superpone a la

ventana del nodo de origen. Normalmente este tipo de enlaces sirven para dar la definición de un término o para ofrecer informaciones puntuales complementarias.

Los anclajes son los puntos físicos de salida y llegada de un enlace hipertextual.

- El anclaje de salida , llamado referencia, toma la forma de palabra subrayada o icono.- El anclaje de llegada , llamado referente, puede asociarse a cualquier punto del nodo de

destino, pero normalmente corresponde a la parte superior del nodo.

La navegación en relación a la recuperación de la información

Navegación Recuperación de la información

Objetivo Obtener información muy a menudo a partir de una necesidad poco definida y explorar un espacio informativo.

Obtener información a partir de una necesidad relativamente concreta.

Medios Enlaces hipertextuales Lenguaje de interrogaciónUnidad informativa Nodos Registros (base de datos) -

Nodos (Internet)Organización interna de la unidad informativa

Sin trascendencia para la navegación

Por campos (base de datos) Por metadatos (Internet)

Principales ventajas El descubrimiento de información de la que no se conocía su existencia. La ampliación de la información que se consulta

La obtención de información que cumple condiciones muy completas.

Principales inconvenientes Desbordamiento cognitivo Ineficiencia: ruido y silencio.

Dificultades en el diseño de la navegación

La web de Internet ha hecho posible que la creación de hipertextos sea una actividad accesible y casi popular. Aún así, no siempre el diseño de la navegación es el más eficiente.

Para diseñar la navegación de un hipertexto hay que determinar qué fragmentos serán considerados y qué relaciones se establecerán entre esos fragmentos.

Las principales dificultades que los autores de un hipertexto se pueden encontrar en el momento de fragmentar y estructurar de forma eficiente la información son los siguientes (Rosenfeld y Morville, 1998: 23-28):

- Ambigüedad- Heterogeneidad- Diferentes perspectivas- Políticas internas

El lenguaje es ambiguo . Una misma palabra tiene muchos significados y un mismo significado puede expresarse con muchas palabras (polisemia y homonimia respectivamente). Esta ambigüedad inherente al lenguaje repercute negativamente en el momento de etiquetar las categorías de un

sistema de clasificación.

Los sitios web y en general los hipertextos son heterogéneos por dos motivos: el tamaño y el formato de los documentos (nodos) que lo componen. Un sitio web puede contener enlaces a elementos de magnitud tan diversa como artículos, revistas o bases de datos de revistas. Al mismo tiempo, el formato físico y bibliográfico de los nodos puede ser tan diverso como la definición de un término, la grabación de un mitin electoral o una selección de direcciones Internet sobre gastronomía. La heterogeneidad repercute negativamente al establecer criterios de clasificación para estructurar la información en clases y subclases.

Otro factor que dificulta la organización eficiente de la información de un hipertexto son las diferentes perspectivas y niveles de conocimiento de sus futuros usuarios. El reto del autor de un hipertexto es estructurar la información de manera óptima para el tipo específico de audiencia al que va destinado.

Cuando un sitio web contiene información estratégica de una empresa, el proceso de diseño de su estructura se convierte también en un terreno sensible al conflicto de intereses políticos. Los autores de esta estructura han de ser sensibles a las repercusiones que sus propuestas pueden tener de acuerdo con la política general de la institución.

Sistemas de ayuda a la navegación

Los sistemas de ayuda a la navegación son dispositivos de diferente tipo que incorporan los hipertextos para facilitar su navegación explicitando las estructuras y esquemas de organización de la información subyacentes en el hipertexto.

Por tanto todos los sistemas de ayuda a la navegación muestran :

- Una o más estructuras de organización de la información.- Uno o más esquemas de organización de la información.

Los objetivos de estos sistemas son:

- Proporcionar flexibilidad en el acceso a la información.- Mostrar el contexto informativo de cada nodo hipertextual.

Los principales sistemas de ayuda a la navegación son:

Sistema Forma de implementación con tecnología web Barra de navegación HTML (Javascript)Barra jerárquica HTMLMenús desplegables JavascriptEnlaces incrustados HTML (Javascript)Tabla de contenidos HTMLÍndice HTMLVisita guiada HTML (Javascript)Mapa de navegación HTML

Botón de retroceso NavegadorHistórico de nodos visitados NavegadorMarcaje de nodos NavegadorMapa conceptual javascript

No obstante, hay que indicar que cualquiera de estos sistema puede implementarse con herramientas de programación más complejas, como por ejemplo Flash o programas residentes en el servidor que puedan funcionar sobre una base de datos.

En función de su alcance:

- Sistemas globales . Permiten navegar por todo el contenido del hipertexto.- Sistemas locales . Facilitan la navegación por una parcela de hipertexto que tiene una unidad

en función de un esquema de navegación, son complementarios a los sistemas globales y tienen sentido sólo en sitios web relativamente extensos.

- Sistemas atómicos . Facilitan la realización de un único salto hipertextual.

Tipos en función del alcance Sistemas Globales Barra de navegación, Rama jerárquica, Menús

desplegables, Índice, Mapa de navegación, Visita guiada, Histórico de nodos visitados, Marcaje de nodos y Mapas conceptuales

Locales Barra de navegación, Rama jerárquica, Menús desplegables, Índice, Mapa de navegación y Visita guiada

Atómicos Botón de retroceso

En función de su emplazamiento:

- Sistemas integrados . Están situados en los nodos integrados con contenido del hipertexto.- Sistemas remotos . Están situados en nodos externos dedicados en exclusiva a la ayuda a la

navegación.

Tipos en función de su emplazamiento SistemasIntegrados Barra de navegación, Rama jerárquica, Menús

desplegables, Enlaces incrustados Tabla de contenidos, Mapa de navegación y Visita guiada

Remotos Menús desplegables, Tabla de contenidos, Índice, Mapa de navegación, Visita guiada, Botón de retroceso, Histórico de nodos visitados, Marcaje de nodos y Mapa conceptual

Barra de navegación

En su forma más simple una barra o menú de navegación es un conjunto de enlaces que se va repitiendo en todos los nodos del hipertexto. Se puede implementar de forma textual, gráfica o de forma combinada, con un gráfico etiquetado.

Para ofrecer contexto es importante que la opción de la barra de menú que corresponde a la página activa esté resaltada o identificada de alguna forma, como por ejemplo con un color diferente, con la ausencia de enlace o con un color de fondo.

La manera más sencilla de implementar la barra de navegación es usando lenguaje HTML, colocando una serie de enlaces separados por guiones o barras verticales en la parte inferior o superior de todas las páginas web.

También se puede hacer usando iconos gráficos asociados a un enlace y colocados en una tabla (que puede ser sin borde para que no se vea) para situar cada gráfico en el sitio que le corresponde. Se puede añadir una etiqueta a cada gráfico para complementar la parte visual con un texto.

Gráfico con enlace Gráfico con enlace Gráfico con enlaceEtiqueta con enlace Etiqueta con enlace Etiqueta con enlace

Es muy fácil marcar la página activa cuando se ha colocado la barra de navegación en una tabla, ya que se puede variar el color de fondo de cada celda y por tanto se puede asignar un color diferente a la página donde esté situado el lector.

Un ejemplo:

<TABLE border="0"> <TR> <TD> <A href="lligam1.htm"> <IMG SRC="icona1.gif"> </A> </TD> <TD> <A href="lligam2.htm"> <IMG SRC="icona2.gif"> </A> </TD> <TD BGCOLOR="blue"> <A href="lligam3.htm"> <IMG SRC="icona3.gif"> </A> </TD> <TD> <A href="lligam4.htm"> <IMG SRC="icona4.gif"> </A> </TD> </TR> <TR> <TD> <A href="lligam1.htm">Etiqueta 1 </A> </TD> <TD> <A href="lligam1.htm">Etiqueta 2 </A> </TD> <TD BGCOLOR="blue"> <A href="lligam1.htm"> Etiqueta 3 </A> </TD> <TD> <A href="lligam1.htm"> Etiqueta 4 </A> </TD> </TR> </TABLE> Códgo HTML de ejemplo. El lenguaje HTML será tratado en las próximas unidades didácticas

Figura. Ejemplo de barra de navegación

Actividad 1 . Localice una página web con un menú de navegación con iconos gráficos que a su entender es de buena calidad. Haga una captura de pantalla y redacte dos o tres párrafos justificando su elección.

http://www.vancouver2010.com/olympic-bobsleigh/

En este menú de navegación se nos ofrece la posibilidad de distinguir, en un simple vistazo, las diferentes modalidades deportivas que se desarrollaron en los JJOO de invierno en Vancuver 2010. Por otra parte, bajo cada gráfico también consta el nombre específico del deporte concreto que el usuario quiera visitar. Vemos pues de forma global (sistema global) todo el contenido del hipertexto.

En segundo lugar, ofrece a los usuarios contextualización, ya que la pestaña activa se mantiene en color verde, como es el caso de la pantalla capturada en la pestaña Home y que es una función característica de cada una de las pestañas que recorren el nodo. Se ha de mencionar también que por cada página que activamos a lo largo del menú, aparece un menú local que sólo se refiere a esa parcela del hipertexto, característica de ese deporte y que se refleja bajo el menú principal y en el mismo color verde de la página activa.

Rama jerárquica, migas de pan o hilo de Ariadna

Se trata de un sistema de ayuda a la navegación que muestra las páginas que corresponden a los antecedentes jerárquicos de la página activa. Está formado por el título de todas las páginas que hay que pasar para llegar a la página activa siguiendo la estructura jerárquica del hipertexto. Normalmente aparece en la parte superior de los nodos. Además, cada título de página es un enlace activo que permite el enlace a la página correspondiente. Este sistema de ayuda a la navegación también es conocido como migas de pan o Breadcrumbs

La rama jerárquica ofrece contexto , al informar de qué lugar de la estructura jerárquica es el que ocupa la página activa, y flexibilidad, ya que permite el acceso directo a todas las páginas que sean sus antecesores directos.

La manera más sencilla de implementar la rama jerárquica es con HTML por medio de un conjunto de enlaces separados con una flecha que puede ser gráfica o de texto. El último elemento coincide con la página activa y no tiene sentido que sea un enlace.

El código de esta rama jerárquica es el siguiente:

<A href="lligam1.htm"> Bisabuelo jerárquico </A> -> <A href="lligam2.htm"> Abuelo jerárquico </A> -> <A href="lligam3.htm"> Códgo HTML de ejemplo. El lenguaje HTML será tratado en las próximas unidades didácticas

Bisabuelo jerárquico -> Abuelo jerárquico -> Padre jerárquico -> Página activa

Como por ejemplo:

Inicio -> productos -> Gamma blanca -> Frigorífico

Actividad 2 . Localice una página web con unas "migas de pan" que a su entender son de buena calidad. Haga una captura de pantalla y redacte dos o tres párrafos justificando su elección.

http://www.ub.edu/web/ub/ca/

El ejemplo que presenta la Universidad de Barcelona sería un buen ejemplo de migas de pan, ya que desde su página principal, podemos ir a cualquier enlace y una vez en él, veremos en la parte superior de la pantalla las páginas de las que depende jerárquicamente dicho enlace.Esto proporciona al usuario un sentido constante de la orientación, ya que siempre sabe dónde está y de dónde viene, pero además, sabrá dónde puede ir si busca por los campos que tiene en la presente página y si no es así, siempre se puede retornar al principio sin ninguna dificultad e iniciar la búsqueda.

Menús desplegables de formulario

El menú desplegable de formulario se utiliza cuando hay poco espacio para mostrar muchos enlaces. Consiste en un dispositivo que una vez presionado se despliega y muestra un listado de enlaces. Tiene la desventaja de que hasta que no se despliega no se puede saber qué opciones hay disponibles, pero por otra parte permite concentrar muchas opciones en muy poco espacio.

El menú desplegable puede implementarse con un formulario y un guión de Javascript . El guión puede colocarse en cualquier lugar de la página web, aunque es recomendable colocarlo en la zona de TITLE. El formulario ha de contener el nombre del fichero HTML que tiene asociado cada opción.

El código para el menú desplegable es el siguiente:

<SCRIPT LANGUAGE="Javascript"> function salta(Sel){ if(Sel.adreces.selectedIndex!=0){ document.location=Sel.adreces.options[Sel.adreces.selectedIndex].value}} </SCRIPT> <form> <select name="adreces" onchange="salta(this.form)"> <option value="">Escoja una opción <option value="fichero1.htm">Opción 1 <option value="fichero2.htm">Opción 2 <option value="fichero3.htm">Opción 3 <option value="fichero4.htm">Opción 4 </select> </form> Códgo HTML de ejemplo. El lenguaje HTML será tratado en las próximas unidades didácticas

Como por ejemplo, un menú desplegable de formulario para acceder a universidades de Catalunya: function salta(Sel){if(Sel.adreces.selectedIndex!=0){ window.open(Sel.adreces.options[Sel.adreces.selectedIndex].value, "destino")}} Escoja una opción Universidad Pompeu Fabra Universidad de Barcelona Universidad Autónoma de Barcelona

Menús desplegables con DigiDocMenu

Los menús desplegables son sistemas de navegación de descubrimiento progresivo (Kahan, 94: 82) que se manejan en función de la interacción del usuario en botones de desplegar y replegar.

La mayoría de menús o barras de navegación fijos muestran un solo nivel jerárquico, ya sea actuado como sistema global o local. Cuando se plantea la posibilidad de mostrar dos o más niveles surge el inconveniente del poco espacio disponible.

Una posible solución consiste en desplazar al usuario a un mapa situado en una página aparte dedicada enteramente a mostrar la jerarquía. Esta opción tiene el inconveniente que el usuario abandona la página de contenido deteniendo la consulta. Una segunda alternativa es el menú desplegable donde en función de la demanda del usuario se va mostrando o ocultando la estructura de la Web. Por defecto solo son visibles los apartados vecinos a la página activa. Un menú construido de este modo actúa como:

- Una presentación de ojo de pez proporcionando más detalles a niveles más próximos al foco de atención del usuario

- Un mapa de navegación proporcionando una representación completa de la estructura de la sede Web

No obstante, con este tipo de instrumentos hay que ser cuidadoso para evitar los siguientes problemas (Nielsen; Tahir, 2002: 25, 287):

- Contienen textos no suficientemente explicativos. Es un problema derivado del escaso espacio disponible y relacionado con la necesidad ya comentada de encajar el texto del ítem del menú con el título completo de la página. Este inconveniente se presenta cuando los menús desplegables son implementados con un formulario select. En DigiDocMenu se evita este problema mostrando el título completo de la página en un recuadro flotante al poner el cursor encima del ítem del menú.

- Contienen listas excesivamente largas. Este es un problema relacionado con el diseño de la

estructura de la Web. El menú refleja las opciones en cada nivel jerárquico. Se evita este problema si se diseña adecuadamente esta estructura con un máximo de 9 opciones por menú.

- Son desplegables al pasar el ratón por encima sin previo aviso. Como hemos indicado, los menús desplegables creados con DigiDocMenu no tienen este problema, se desplegan clicando en el símbolo "+" de forma análoga al Administrador de Archivos de Windows.

DigiDocMenú es un editor de menús desplegables freeware y open source creado por el grup de investigación en Documentación Digital DigiDoc de la Universidad Pompeu Fabra. Ha sido desarrollado en el contexto del proyecto de investigación financiado por el Plan Nacional I+D+I del Ministerio de Educación y Ciencia (España).

Actividad 3 . Localice una sede web con cualquier tipo de menú desplegable que a su entender es de buena calidad. Haga una captura de pantalla y redacte dos o tres párrafos justificando su elección.

http://espanol.bestbuy.com/enes/site/index.jsp

En mi opinión la página Bestbuy contiene un menú bastante visible y sencillo, con 4 apartados, los cuales, si pasamos con el cursor por encima desplegan el menú. Es importante el hecho de que se indiquen los apartados que contienen menú, en este caso utilizan el signo v (flecha hacia abajo). Esto evita sorpresas y como mínimo orienta al usuario de que aparecerá un desplegable.

Al pasar el cursor por alguno de los apartados del menú, vemos que primero los epígrafes cambian de color y, segundo, la pestaña se hunde generando el despliegue de los apartados jerárquicamente dependientes a éstos.

Por otra parte, tampoco son muy profundos y además, mediante la tipografía podemos observar, qué subapartados son más generales y cuales más específicos o concretos.

Enlaces incrustados

Los enlaces incrustados son los enlaces clásicos de los hipertextos que aparecen en el interior de los párrafos asociados a una o más palabras con la forma de palabras subrayadas.

Uno de los principales inconvenientes de estos enlaces es que a veces pasan desapercibidos por los usuarios. Por tanto, cuando el enlace es importante es muy recomendable situarlo de forma independiente del cuerpo principal del documento para remarcarlo.

Para ofrecer el contexto es importante escoger las palabras a subrayar que sean más significativas en relación al nodo de destino. Un sistema adicional muy utilizado para dar más información de

contexto consiste en etiquetar de alguna manera el enlace de manera que el usuario obtenga más información del nodo de destino antes de activarlo. Por otra parte, hay que evitar que la zona subrayada cambie de línea.

Los enlaces incrustados se realizan con lenguaje HTML y con la etiqueta A HREF. El parámetro TITLE contiene la información adicional.

El código del enlace incrustado es el siguiente:

<a href="fitxer.htm" Title="Informacion adicional"> Enlace </a> Códgo HTML de ejemplo. El lenguaje HTML será tratado en las próximas unidades didácticas

Tabla de contenidos e índice

Los sitios web han heredado la tabla de contenidos y el índice de los documentos tradicionales secuenciales en papel. Normalmente quedan situados en una página dedicada en exclusiva a esos elementos. Se usan para obtener una idea de conjunto sobre el contenido del hipertexto o para solucionar momentos de desorientación.

- Una Tabla de contenido (o mapa de navegación textual) es una lista de los apartados y subapartados del hipertexto ordenada temáticamente y que propone un recorrido secuencial por sus contenidos.

- Un índice es un listado alfabético de los conceptos más importantes que desarrolla el hipertexto.

En cualquiera de los dos casos cada elemento del listado será un enlace a la página correspondiente. Desde la perspectiva de la implementación, la tabla de contenido y el índice son simplemente listas de enlaces . En el caso de la tabla de contenido se puede utilizar una tabla para sangrar los ítems que son subapartados.

La página inicial suele contener una versión más o menos ámplia de la tabla de contenido de la sede web. En toras ocasiones las funciones de la tabla de contenido son realizadas por un menú desplegable situado de forma permanente a la izquierda de todas las páginas como la propia aula digital del master.

Actividad 4 . Localice una página web con una tabla de contenidos o índice que a su entender son de buena calidad. Haga una captura de pantalla y redacte dos o tres párrafos justificando su elección

http://www.al-dia.cl/

En este hipertexto tenemos un índice de revistas especializadas en diferentes temáticas. Tanto los títulos de revistas, como los diferentes temas de los que tratan están ordenados alfabéticamente.Si entramos en algún enlace temático, por ejemplo Ciencias de la infomración nos remite al conjunto de revistas especializadas que tratan sobre ese tema y ordenadas alfabéticamente. Si enlazásemos con alguna, por ejemplo Electronic Library, veríamos las referencias básicas de los artículos que contienen los volúmenes seleccionados por el hipertexto y la opción de consultar los documentos a texto completo. Aunque tendremos que registrarnos para ello.

Visita guiada

La visita guiada es un sistema de ayuda a la navegación con el objetivo de mostrar los nodos más significativos del hipertexto siguiendo un recorrido secuencial. Está pensado para los usuarios que acceden por primera vez al hipertexto y quieren una primera visión global.

A veces se combina el listado de enlaces con una explicación y se puede añadir una barra de navegación en cada nodo que se visita para ofrecer más flexibilidad.

La implementación del listado de enlaces de la visita guiada puede integrarse de dos formas:

- En todas las paginas a visitar- En una página externa

En el caso de ser una página externa, cada página a visitar debe incluir un enlace para volver a la página externa que contiene el listado.

Mapa de navegación

El mapa de navegación es una representación gráfica de la arquitectura del hipertexto. Cumple las mismas funciones que un índice o una tabla de contenido: ofrecer una visión global del hipertexto y ayudar en la orientación. Pero, además, el mapa de navegación muestra también de forma gráfica los principales enlaces hipertextuales.

De la misma manera que un mapa de una zona geográfica no contiene absolutamente todos los accidentes geográficos, un mapa de navegación hace una selección de los enlaces y sólo representa los que considera esenciales.

El mapa de navegación se puede implementar por medio de un gráfico que contenga la representación de las páginas y los enlaces asociados a una etiqueta MAP que convierte el gráfico en un mapa sensitivo clicable.

El código del mapa de navegación es el siguiente:

<IMG SRC="mapa.gif" USEMAP="#formes"> <MAP name="formes"> <AREA SHAPE="RECT" COORDS="11,16,39,46" href="fichero1.htm"> <AREA SHAPE="RECT" COORDS="62,16,90,46" href="fichero2.htm"> </MAP>

Códgo HTML de ejemplo. El lenguaje HTML será tratado en las próximas unidades didácticas

Observaciones:

- El parámetro SHAPE indica la forma que tiene la zona clicable. Hay otras formas posibles como POLY para un área poligonal o CIRCLE para un área circular.

- El parámetro COORDS indica qué coordenadas definen la zona clicable. En el caso del rectángulo las coordenadas especifican la esquina superior izquierda (dos primeros números) y la esquina inferior derecha (los dos últimos).

Actividad 5 . Localice una mapa de navegación que a su entender son de buena calidad. Haga una captura de pantalla y redacte dos o tres párrafos justificando su elección.

http://www.gencat.cat/web/cat/mapa.htm

Un buen ejemplo de mapa de navegación es el relativo a la sede de la Generalitat de Catalunya ya que estructura muy bien los temas principales por intereses de los usuarios, dando origen a temas principales, temas secundarios y subtemas en muchos de sus apartados.

Es una buena herramienta de trabajo para orientar al usuario, que en un principio no sepa como dirigirse al a información que precisa, ya que la página principal es abrumadora en cuanto a la cantidad de información que ofrece y a la saturación de la estructura temática. Aún y así no ofrece toda la información que contiene.

Sin embargo, el mapa de navegación de dicha institución, aclara mucho más las temáticas del sitio web ofreciendo una mayor visibilidad de todos los grandes temas que se pueden encontrar.

Mapa conceptual

De la misma forma que un mapa de navegación representa la estructura de enlaces de un hipertexto, un mapa conceptual muestra la estructura de las relaciones entre conceptos del contenido del hipertexto. Es un instrumento que tiene sus orígenes antes de la aparición de Internet en el contexto de la investigación en psicología del aprendizaje (Novak, 1982; Ausubel, 1983). Se ha aplicado con éxito en todos los niveles educativos para favorecer el aprendizaje.

Un mapa conceptual creado en una página Web puede aportar la representación de la red de conexiones conceptuales que sintetizan el contenido de la Web. Si se añaden enlaces, al mapa se conseguirá además facilitar la navegación.

Mapa de navegación Mapa conceptual

Representa Arquitectura de los enlaces Estructura conceptual del contenido

Facilita Navegación y orientación Comprensión y navegación

Normalmente la estructura conceptual de los contenidos de un hipertexto no encaja con su arquitectura de páginas y enlaces. Un hipertexto con un nivel medio o alto de contenidos suele contener página extensas que quedarán reflejadas con un número importante de conceptos en un mapa conceptual pero con un solo ítem en un mapa de navegación.

Algunas herramientas útiles para realizar mapas de conceptuales o mapas mentales: - CMapTools http:// cmap.ihmc.us - Mindomo http://www.mindomo.com

Figura. Ejemplo de mapa conceptual

Bibliografía

Ausubel, David P.; Novak Joseph D.; Hanesian, Helen (1983). Psicologia educativa. Un punto de vista cognoscitivo. México, D.F.: Trillas, 1983.

Baeza, R.; Riverca, C.; Velasco, J. (2004). "Arquitectura de la información y usabilidad en la web". El profesional de la información, v. 13, n. 3, mayo-junio 2004.

Baeza-Yates, R.; Rivera, C.;Velasco, J. Arquitectura de la información y usabilidad en la web. El profesional de la información , vol. 13, num. 3, mayo-junio, 2004.

Beaumont, a. et al. (2002). Constructing usable web menus. Birmingham: glasshaus Bush, V. (1945). "As we may think". Atlantic Monthly (no. 176, july, pàg. 101-108)

Cassany, D. (1993). La cuina de l'escriptura. Barcelona: Les Naus d'Empúries, 1993 Codina, L. (2000). El libro digital y la www. Madrid: tauro ediciones, 2000,

Codina, L.; rovira, C. (2001). "Diseño hipertextual basado en la evidencia: nuevos resultados del proyecto documentación digital de la universidad pompeu fabra de barcelona". Revista española de documentación científica, vol 24, núm. 1, pàgs. 85-89

Codina, Lluis (1996). El llibre digital. Una exploració sobre la informació electrònica i el futur de l'edició. Barcelona: Centre d'Investigació de la Comunicació, 1996

Conklin, J. (1987). "Hypertext: An Introduction and Survey". IEEE Computer (vol. 20, no. 9,

september, pàg. 17-41) Diaz, Paloma; N. Catenazzi; I. Aedo (1996). De la Multimedia a la Hipermedia. Madrid: Rama, 1996.

Engelbart, D.C. (1963). "A Conceptual Framework for the Augmentation of Man's Intellect". A: Howerton (ed.) Vistas in Information Handing. London: Spartan Books, Vol 1.

Garret, J. J. (2003). The elements of user experience: user-centered disign for the web. New york: aiga. Garret, J. Los elementos de la experiencia de usuario, 2000. http://www.jjg.net/ia/elements_es.pdf

Hill, S. (2000). An interview with louis rosenfeld and peter morville. http://www.oreillynet.com/pub/a/oreilly/web/news/infoarch_0100.html

Kahn P.; Lenk, K. (1994). Mapas de sitios web. Barcelona: index books. Krug, S. (2001). No me hagas pensar. Madrid: prentice hall

Landow, G. P. (1991) "The rethoric of hypermedia: soma rules for authors". A: P. Delay and Gearge P. Landow. Hypermedia and literary studies. Massachusetts: MIT.

Lynch, P.; S. Horton (1997). Yale C/AIM Web Stile guide [en línia]. Rev. 1/97.Yale University, 1997. Marcos, M.C.; Cñada, J (2004). "Cómo medir la usabilidad: técnicas y métodos para evaluar el uso de sitios web" [cd-rom]. En Rovira, C.; Codina, L. (dir.). Documentación digital 2004. Barcelona: upf

Nelson T. H. (1974). Dream Machines. South Bend, IN: The Distributers., 1974 Nielsen, J (1998). The Alertbox: Current Issues in Web Usability

Nielsen, J. (1990). "ten usability heuristics". Useit.com. Http://www.useit.com/papers/heuristic/heuristic_list.html

Nielsen, J. (1991). Hypertext and hypermedia. Boston: Academic Press, 1991 Nielsen, J. (1997). "Discount usability for the web". Useit.com, 1997 http://www.useit.com/papers/web_discount_usability.html .

Nielsen, J. (2000). Usabilidad: diseño de sitios web. Madrid: pearson educación. Nielsen, J. (2003). "jakob nielsen's alertbox, august 25, 2003: usability 101: introduction to usability". Useit.com http://www.useit.com/alertbox/20030825.html

Nielsen, J. (1993) Usability engineering. Morgan Fufmann, 1993. Nielsen, J.; Tahir, M. (2002). Usabilidad de páginas de inicio: análisis de 50 sitios web. Barcelona: pearson educación.

Novak, J. D. (1982). Teoria i pràctica de la educación. Madrid: Alianza, 1982. Rada. Roy. (1991). Hypertext: From text to Expertext. London: McGraw-Hill, 1991

Reiss, E. L. (2000). Practical information architecture: a hands-on approach to structuring successful web sites. Harlow: addison-wesley

Rosenfeld, L.; Morville, P (2002). Information architecture for the world wide web: designing large-scale web sites. Sebastopol (canada): o'reilly.

Rosenfeld, L; Mrville, P (1998). Information architecture for the world wide web. Sebastopol (canada): o'reilly. Rovira C. (1997). La documentació dins la societat de la informació. En A. Pérez (coord.) . Documentació i arxivística. Barcelona: Universitat Oberta de Catalunya, 1997

Rovira, C. (2001). "Eines d'ajuda a la navegació". Temes de disseny, núm. 18, abril 2001, pàgs. 48- 80 Rovira, C.; Codina, L. (2003). "La orientación a objetos en el diseño de sedes web: hipertextos y representación de la información". Revista española de documentación científica, vol 26, num. 3, pags. 267-290.

Rovira, Cristòfol (1997a). Entornos hipertextuales de aprendizaje. En Pilr cid y Jaume Baró (eds.) Anuari Socadi de Documentació i Informació. Barcelona: SOCADI, 1997

Rovira, Cristòfol (1997b). La Intranet Documental: una eina per a la docència en documentació. Comunicación presentada en las 6es. Jornades Catalanes de Documentació. Barcelona, 1997

Rovira, Cristòfol (1998). L'hipertext la recuperació d'informció en el Web. En Jaume Baró (ed.) Cercar i col·locar informació en el World Wide Web. Barcelona: Llibres de l'Índex, 1998

Rovira, Cristòfol (1999a). "Documents hipertextuals per a entorns virtuals d'aprenentatge". DIGIT·HVM. Revista Digital d'Humanitats, vol 1. http://www.uoc.es/humfil/digithum/digithum1/crovira/croviraf.htm

Shneiderman, B.; G. Kearsley (1989). Hypertext Hands-On!: An Introduction to a New Way of Organizing and Accesing Information. Reading, Massachussetts: Addison-Wesley, 1989

Siegel D. (1997). Técnicas avanzadas para el diseño de páginas Web. Madrid: Anaya Multimedia, 1997. Spiro, Rand J. et al. (1991). "Cognitive Flexibility, Constructivism, and Hypertext". Educational Technology (may 1991, pàg. 24-33)

Veen, J. (2001). Arte y ciencia del diseño web. Madrid: prentice hall W3 Consortium (2005). Web accessibility initiative (WAI). Http://www.w3.org/wai/