Artculo 1.5.

Arquitectura de la informacin en sedes Web Cristfol Rovira

Cristfol Rovira. Artculo 1.5. Arquitectura de la informacin en sedes Web [en linea]. En Cristfol Rovira; Llus Codina (dir.). Documentacin digital. Barcelona: rea de Ciencias de la Documentacin. Departamento de Comunicacin. Universidad Pompeu Fabra, 2010. http://www.documentaciondigital.org 1. Introduccin 2. Disear la navegacin es un reto en condiciones difciles 3. Arquitectura de la informacin y Usabilidad 4. Los sistemas de navegacin 5. Principios de diseo de navegacin 5.1. Etiquetado 6. Navegacin hipertextual 7. Estructuras y esquemas para organizar la navegacin 7.1. Estructuras para organizar la navegacin 7.1.1. Estructura jerrquica 7.1.2. Estructuras en tabla 7.1.3. Estructuras en red 7.1.4. Estructura secuencial 7.2. Esquemas para organizar la navegacin 8. Contexto y flexibilidad 9. Caractersticas de los enlaces 10. La navegacin en relacin a la recuperacin de la informacin 11. Dificultades en el diseo de la navegacin 12. Sistemas de ayuda a la navegacin 12.1. Barra de navegacin 12.2. Rama jerrquica, migas de pan o hilo de Ariadna 12.3. Mens desplegables de formulario 13. Mens desplegables con DigiDocMenu 13.1. Enlaces incrustados 13.2. Tabla de contenidos e ndice 13.3. Visita guiada 13.4. Mapa de navegacin 13.5. Mapa conceptual 14. Conclusiones 15. Bibliografa

Nota sobre la evaluacin De forma intercalada en el texto de este artculo encontrar el enunciado de diversas actividades. Para superar esta unidad didctica 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 realizacin. Para entregar este informe deber crear un solo documento para todos las actividades de esta unidad didctica en formato PDF. A continuacin podr usar el apartado de entrega de ejercicios del aula Moodle. La realizacin de forma satisfactoria de este ejercicio implicar la obtencin de 0,75 crditos.

1. Introduccin
La unidad didctica est planteada para ofrecer las bases tericas del diseo de cualquier sistema de hipertexto. No obstante el objetivo principal ser el diseo de pginas y sedes web, por tanto en relacin a la terminologia hay que tener en cuanta que: Nodo hipertextual corresponde a pgina web Hiperdocumento corresponde a sede web Sistema hipertextual corresponde a conjunto de sedes web

2. Disear la navegacin es un reto en condiciones difciles

Es bien sabido que muchas sedes Web tienen errores importantes de diseo. Las disciplinas que podran evitar estos males (Arquitectura de la informacin, Usabilidad...) se estn consolidando a marchas forzadas formulando principios para sedes Web accesibles, usables y navegables. Aunque se avanza de manera vertiginosa, todava 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 implementacin cuando hay que incorporar funciones avanzadas de navegacin. La implementacin del diseo de una sede Web es fcil y difcil al mismo tiempo. Por un lado, la creacin de pginas HTML ha llegado a ser un proceso trivial para la mayora de los profesionales de la informacin y la documentacin. Con los editores de pginas Web de ltima generacin 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 diseo contiene elementos interactivos no soportados por el lenguaje HTML. La implementacin de dispositivos interactivos hace evidente que la Web, adems de ser un documento que hay que marcar (HTML), es tambin una interfaz que hay que programar (javascript, java, php, asp...) (Garrett, 2003).

3. Arquitectura de la informacin y Usabilidad

El diseo de navegacin es especialmente sensible a estas dificultades. La mayora de elementos para la orientacin de la navegacin (mapas, mens, 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 programacin. La arquitectura de la informacin tiene como objetivo el diseo estrutural de los sistemas de informacin, especialmente los que se implementan con tecnologa Web. Comprende la organizacin de la informacin, su rotulacin, el diseo de la interaccin, el diseo de navegacin y el diseo de la interfaz de usuario. El diseo de navegacin forma parte de la arquitectura de la informacin, disciplina ms amplia encargada de proponer principios prcticos para la estructuracin, etiquetado y navegacin 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 informacin es la disciplina encargada del etiquetado y del diseo estructural de espacios de informacin digital para facilitar la realizacin de tareas y el acceso a los contenidos de forma intuitiva. Garret (2003: 94) apunta en la misma direccin indicando que la arquitectura de la informacin se ocupa de la creacin de los esquemas de organizacin y navegacin que permitan a los usuarios moverse a travs de un sitio Web con eficiencia e eficacia. En el proceso de diseo y creacin de una sede Web, Rosenfeld y Morville (2002) identifican una "zona gris" en la que es muy difcil identificar las fronteras entre las distintas disciplinas implicadas: arquitectura de la informacin, diseo de interaccin, diseo de la informacin, diseo grfico e ingeniera 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 ms proponiendo un esquema general del papel de cada una de estas disciplinas, estableciendo el tipo de interrelacin entre ellas en el contexto de lo que l denomina "experiencia de usuario". Para Garret, el diseo de navegacin depende de la arquitectura de la informacin y se implementa al mismo tiempo que el diseo de la interfaz y antes que el diseo grfico.

Figura. diagrama de los elementos de la experiencia de usuario (Garret, 2003: 33) Por otro lado, segn Nielsen (2003), la Usabilidad es un atributo que mide como de fcil es el uso de las interfaces de usuario. La norma ISO 9241-11 (1998) la define de modo ms general como el grado en que un producto puede ser usado por usuarios especficos para alcanzar objetivos especficos con eficacia, eficiencia y satisfaccin en un especfico contexto de uso. En la enciclopedia wikipedia podemos

encontrar una definicin en esta misma lnea "La usabilidad (..) es la medida de la facilidad de uso de un producto o servicio, tpicamente una aplicacin software o un aparato (hardware)." As pues, la usabilidad es una caracterstica de una sede Web y por extensin tambin es la disciplina encargada de evaluarla mediante distintos tipos de pruebas (automticas, con usuarios reales o de expertos) para posteriormente indicar formas de mejorarla Finalmente, en el contexto de las disciplinas implicadas en el diseo de navegacin, es necesario mencionar las relaciones entre arquitectura de la informacin y usabilidad. Baeza (2004) propone un "modelo causal" en el que la arquitectura de la informacin proporciona los principios tericos de diseo que conducen el diseo y la creacin de las sedes Web. La Usablidad y la Arquitectura de la Informacin se condicionan mutuamente. Cuando se desarrolla una sede Web los principios de la Arquitectura de la Informacin son evaluados por medio de los tests de Usabilidad aplicadas a prototipos. En funcin del resultado de estas tests se podran modificar las decisiones tomadas por el arquitecto de la informacin. "Los proyectos se disean pensando en un modelo de usuario y en la experiencia que ste tendra 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 diseo y uso. En la dimensin del diseo se encuentran la arquitectura de informacin y la ubicuidad. No existe ubicuidad sin arquitectura de informacin y slo si el sitio es ubicuo en la web, ste podr ser usado. En la dimensin del uso aparece la usabilidad y su evaluacin, as como el registro de actividad en las bitcoras (logs) para su anlisis." (Baeza 2004: 178) En la prctica 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 ncleo central de actividad, como la definicin de los objetivos, la seleccin de los contenidos o las polticas de mantenimiento. No obstante, desde un planteamiento estricto, el diseo de navegacin forma parte de la arquitectura de la informacin y ambas disciplinas reciben recomendaciones prcticas originadas en los estudios de Usabilidad.

4. Los sistemas de navegacin

El diseo de navegacin se encarga de elegir los sistemas de navegacin 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 navegacin es cada una de las piezas de la interfaz de usuario de una pgina Web encargada de permitir y favorecer la navegacin hipertextual (Hagedorn, 2000:5). Ejemplos de sistemas de navegacin son mens, barras de navegacin, migas de pan, mapas de navegacin, ndices, visitas guiadas... Los sistemas de navegacin se clasifican en (Garret, 2003: 127 y Rosenfeld Morville, 2002: 107): Sistemas de navegacin integrados Globales: proporcionan acceso a toda la Web

Locales: proporcionan acceso a las pginas vecinas de acuerdo la estructura o arquitectura de la informacin Adicionales: proporcionan atajos para el acceso a apartados no disponibles de forma inmediata con los sistemas globales o locales Contextuales: estn integrados en el contenido, en el texto de las pginas para proporcionar informacin complementaria en el momento de la lectura De cortesa: proporcionan acceso a tems no usados de forma general pero que son proporcionados por comodidad, como por ejemplo formulario de sugerencias, informacin de contacto... Mapas : proporciona en una sola pgina una visin panormica de la arquitectura del sitio Web ndices: es un listado alfabtico de temas con enlaces a las pginas relevantes

Sistemas de navegacin remotos

Por otro lado, los sistemas de navegacin integrados tambin suelen clasificarse en funcin de su presencia constante en todas las pginas de una sede Web. Los sistemas globales y de cortesa suelen ser permanentes, en cambio los sistemas locales, adicionales y contextuales solo aparecen en un conjunto reducido de pginas 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 pginas web en un sitio ms grande a las que se ha dotado de un estilo comn y de un mecanismo de navegaci6n compartido. Este conjunto de pginas puede ser un espacio difano o puede tener cierta estructura, pero en todo caso probablemente deba tener una sola pgina que se designe corno la pgina de inicio del subsitio. Cada una de las pginas del subsitio debe tener un vnculo sealando a la pgina de inicio del subsitio, as como un vnculo con la pgina de inicio de todo el sitio. Adems, el subsitio deber tener opciones de navegacin globales (por ejemplo, con la pgina de inicio del sitio y con una bsqueda en el sitio), aparte de su navegacin local." (Nielsen 2000: 223)

5. Principios de diseo de navegacin

Tanto la Arquitectura de la informacin y como la Usabilidad proponen principios, normas, guas y sugerencias para que el diseo de la navegacin cumpla con los siguientes tres objetivos bsicos (Garret, 2003: 125): Proporcionar los medios necesarios para desplazarse de un punto a otro en un sitio Web Comunicar la relacin entre los distintos elementos que forman el diseo de navegacin, no es suficiente con proporcionar enlaces hipertextuales, hay que indicar qu vnculos son los ms importantes, que diferencias hay entre ellos indicando si son globales o locales Comunicar la relacin entre los contenidos de la sede Web y la pgina que el usuario est visualizando proporcionando una perspectiva general donde quede reflejada la posicin actual.

Nielsen (2000:188-191) es ms sinttico, seala que los sistemas de navegacin tienen que ayudar a los usuarios a responder a tres preguntas fundamentales: Dnde estoy? Es la pregunta ms importante que hay que responder. Si los usuarios no saben donde estn no podrn entender la estructura del sitio.

Hay que identificar claramente la pgina en relacin a toda la Web y en relacin a la estructura de la propia sede Web. La ubicacin relativa de la pgina activa en la estructura del sitio suele indicarse mostrando la estructura del sitio y resaltando la pgina activa. Dnde he estado? El usuario debe conocer en que pginas ha estado, esta funcionalidad est presente en los navegadores con el cambio de color de los enlaces incrustados. Dnde puedo ir? Los sistemas de navegacin 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 Informacin para el diseo de sistemas de navegacin indicando que es necesario proporcionar contexto y flexibilidad. Para que el diseo de navegacin proporcionen el contexto al usuario debe mostrar la estructura de la informacin de manera clara y consistente e indicar al usuario su posicin en ella (Rosenfeld; Morville, 2002: 107). Este principio responde a la pregunta dnde estoy? y se materializa, por ejemplo, en los mens contextuales donde la pgina activa aparece resaltada con diferente color o tipografa. La navegacin hipertextual puede proporcionar una gran flexiblidad al usuario proporcionando navegacin lateral, desde una pgina a otras de ramas contiguas, navegacin vertical, hacia pginas ms altas o ms profundas en la misma jerarqua, o navegacin en red, entre dos pginas muy distantes en la jerarqua, pero con contenidos relacionados. Tantas posibilidades pueden llegar a abrumar al usuario. El diseo de navegacin deber evitar estos problemas compensando las ventajas de esta flexibilidad de acceso, con los problemas de desorden. Los sistemas de navegacin tienen que hacer visible la estructura implcita 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 disear un men. Algunas de ellas se pueden extrapolar a cualquier sistema de navegacin y son tiles para alcanzar los objetivos indicados por Garret de forma ms eficiente. Para Beaumont (2002: 11-12) un men debe: Ser diseado considerando de forma prioritaria la principal tarea del usuario Tener una clara diferenciacin con el contenido visible de forma clara (contraste fondo forma, tamao de la tipografa...) para permitir lecturas rpidas 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 pginas de una sede Web (o subsitio) proporciona contexto y flexibilidad en un espacio muy reducido. La flexibilidad es mxima porque todas las pginas estn disponibles a un clic y proporciona el contexto cuando se desplega y queda representada la estructura completa con la pgina activa en rojo. Un men desplegable es un sistema de navegacin compacto que puede ser incorporado de forma permanente en una banda de color a la izquierda de todas las pginas.

En este artculo abordaremos principalmente el diseo de las estructuras de navegacin subyacente en un hipertexto para despus crear sistemas efectivos de navegacin hipertextual.

5.1. Etiquetado
El etiquetado de pginas y sistemas de navegacin es un aspecto primordial de la Arquitectura de la informacin. Nielsen (1990) propone diez principios generales (heursticas) de Usabilidad para el diseo de la interfaz de usuario, algunos de ellos son aplicables al diseo de etiquetas para los sistemas de navegacin: 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 trminos orientados al sistema. Consistencia y estndares. Los usuarios no deben preguntarse si diferentes palabras, situaciones o acciones significan la misma cosa. Esttica y diseo minimalista. Los dilogos no deben contener informacin irrelevante o raramente necesaria. Cada unidad extra de informacin en un dilogo compite con unidades de informacin relevante y disminuye su visibilidad relativa. Cada pgina debe tener explcitamente su nombre El nombre de la pgina debe estar en el lugar jerrquicamente correcto para que enmarque todo el contenido El nombre tiene que estar destacado mediante su posicin, tamao, tipografa para indicar que es el encabezado El nombre de la pgina tiene que encajar con el texto de las palabras de los enlaces que apuntan a ella

Krug (2000: 72-73) propone cuatro principios para etiquetar las pginas

Este ltimo punto tiene especial inters para el diseo de mens 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 ttulo de la pgina a la que apunta. En estos casos hay que conseguir que ambos rtulos encajen lo ms 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)

6. Navegacin hipertextual
La navegacin 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 informacin de inters. Desde la perspectiva del usuario de un hipertexto hay dos formas bsicas de navegacin: con una direccin o sin ella.

La navegacin con direccin se da cuando el usuario busca una determinada informacin y activa los enlaces en funcin de las posibilidades que tienen de llevarlo a la informacin deseada.

La navegacin sin direccin se produce cuando el usuario no tiene un objetivo claramente preestablecido y activa los enlaces en funcin del inters que le despiertan los anclajes de salida del nodo consultado.

En funcin del tipo de recorrido que el usuario hace hay tres estrategias bsicas en la navegacin hipertextual: navegacin en anchura, navegacin en profundidad (o longitud) y navegacin combinada.

La navegacin en anchura consiste en activar todos los enlaces del nodo activo para consultar todos los nodos que estn enlazados a ste. Despus de cada uno de estos saltos hipertextuales, y a travs del botn de retorno, se vuelve al nodo sometido a exploracin. En funcin de este primer sondeo se escoge uno de los enlaces para avanzar en la navegacin y volver a realizar la misma operacin. Por lo tanto, se consultan todos los posibles caminos abiertos antes de decidir el nodo que continuar la navegacin. En la navegacin en profundidad se adopta la actitud contraria, se escoge siempre un enlace del nodo activo para avanzar en la navegacin y no se exploran otras posibles rutas de los enlaces no activados. La estrategia combinada consiste en utilizar anchura o profundidad en funcin del objetivo de la navegacin y/o de los resultados que se obtienen en cada momento.

Si relacionamos las estrategias con la presencia o no de un objetivo de bsqueda de informacin se dan las siguientes seis situaciones: En anchura Situacin que se produce cuando se Con ha localizado un direccin nodo con un listado de recursos sobre el tema de inters. Situacin poco probable ya que si no hay una Sin direccin direccin difcilmente habr una actitud de revisin sistemtica En profundidad Situacin que se produce cuando an no se ha encontrado ningn nodo relacionado directamente con el tema de inters. Situacin poco probable ya que si no hay una direccin difcilmente se avanzar hacia un objetivo. Combinada Situacin que se produce cuando se han localizado nodos con informacin que puede estar relacionada con el tema de inters.

Situacin muy comn ya que se activan los enlaces de una manera aleatoria.

En una bsqueda de informacin por navegacin 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 funcin del punto de partida y de los resultados obtenidos alguna de las fases pueda ser obviada.

7. Estructuras y esquemas para organizar la navegacin

Rosenfeld y Morville (1998: 26) establecen que la organizacin de la navegacin de un hipertexto se realiza en base a estructuras y esquemas. Las estructuras de organizacin de la navegacin son formas genricas de relacionar fragmentos de informacin. Las cuatro estructuras bsicas son: Secuencia Jerarqua Tabla Red

Los esquemas de organizacin de la navegacin son formas genricas de fragmentar y ordenar la informacin. Hay diferentes tipos de esquemas:

Esquemas exactos: cronolgico y geogrfico. Esquemas ambiguos: por tpicos, orientado a tareas, especfico de una audiencia y en funcin de una metfora. Esquema hbrido cuando se mezclan dos o ms esquemas.

Las estructuras y los esquemas son abstracciones que permiten comprender los elementos de la arquitectura de la informacin subyacentes a un sistema hipertextual Muchas veces los esquemas y las estructuras se condicionan mutuamente. Por ejemplo, un esquema cronolgico obligatoriamente tendr asociada una estructura secuencial. Otras veces hay una tendencia a usar determinados esquemas con determinadas estructuras. Por ejemplo, un esquema por tpicos probablemente implicar una estructura jerrquica y un esquema en funcin de una metfora puede asociarse a una estructura en red.

7.1. Estructuras para organizar la navegacin

Las estructuras de navegacin son formas genricas de relacionar fragmentos de informacin que, en el caso del hipertexto, determinar el tipo de relaciones que se establecern entre los nodos y por tanto el tipo de enlaces hipertextuales que podrn ser creados. Las cuatro estructuras bsicas son la secuencia (sequence), la tabla (grid), la jerarqua (hierarchy) y la red (web).

Figura. Los cuatro patrones bsicos para estructurar la navegacin. Fuente: Web style Guide http://www.webstyleguide.com/wsg3/3-informationarchitecture/3-site-structure.html La estructura secuencial es la ms sencilla y la que ofrece menos dificultades en el momento de navegar. An as, es la ms rgida ya que predetermina una nica ruta de consulta. En el otro extremo est la estructura en red . Es la estructura que ms puede desorientar al navegador/lector y la ms flexible, ya que ofrece muchas posibles rutas de navegacin y permite a sus usuarios un mayor control sobre la ruta de consulta. Las estructuras jerrquica y en tabla tienen unas caractersticas de complejidad y flexibilidad intermedias entre la estructura en red y la secuencial.

Las estructuras jerrquicas enlazan nodos que ofrecen una visin general con nodos ms especficos o ms localizados donde se desarrolla con ms profundidad uno de los puntos tratados en el nodo central. Las estructuras en red normalmente enlazan nodos que tienen una relacin de significado, ya sea de complementariedad, de contraste, de refutacin o de ampliacin. Para facilitar la navegacin es recomendable proporcionar el acceso a un mapa de navegacin o a la pgina 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 argumentacin o puede ser la enumeracin de diferentes elementos del mismo tipo. Las estructuras en tabla enlazan los nodos siguiendo una organizacin de filas y columnas. Se utiliza poco, ya que implica que los fragmentos de informacin puedan ordenarse siguiendo dos criterios, uno representado en las filas y otro en las columnas.

Normalmente un hipertexto integra ms de una estructura de navegacin. Sobre el mismo conjunto de nodos puede haber superpuestas diferentes estructuras, una estructura secuencial, una jerrquica y una en red. En estos nodos el usuario puede optar por navegar por cualquiera de las tres estructuras disponibles.

7.1.1. Estructura jerrquica

Normalmente la navegacin de un hipertexto est basada en una estructura jerrquica que cubre la totalidad de los nodos de informacin. Sobre esta estructura jerrquica, y en funcin del contenido, se pueden superponer otras estructuras como la secuencial o la de red que permitirn el acceso al contenido mediante diversas rutas de navegacin. Para conseguir unas caractersticas ptimas de navegacin se necesita que la estructura jerrquica est bien equilibrada . Se consigue una estructura jerrquica equilibrada cuando el nmero de opciones de cada nivel jerrquico es proporcional al nmero de niveles jerrquicos.

Figura. Estructura jerrquica excesivamente ancha. Fuente: Web style Guide

Figura. Estructura jerrquica excesivamente larga. Fuente: Web style Guide

Figura. Estructura jerrquica correspondientes. Fuente: Web style Guide

equilibrada

con

la

anchura

longitud

Los principios generales que hay que seguir para conseguir una estructura jerrquica compensada son los siguientes:

Hacer cada rama jerrquica con siete ms/menos dos . Por tanto, en la estructura jerrquica, cada nodo tendra que enlazar a un mnimo de 5 pginas (7-2) y un mximo de 9 (7+2). No exceder los tres niveles jerrquicos.

Hay que adaptar estos principios al contenido temtico del hipertexto y a la cantidad de informacin a organizar. No sera correcto agrupar opciones que temticamente tienen pocos puntos en comn para aumentar o reducir el nmero de opciones en un nivel jerrquico. Por otro lado, si la cantidad de informacin no es excesiva, puede ser correcto transgredir la norma y hacer una estructura muy ancha de un slo nivel jerrquico que cubra todo el hipertexto. En estos casos se puede llegar hasta 14 pginas enlazadas a una pgina inicial. En sedes Web con ms pginas, se aconseja hacer una estructura jerrquica de dos niveles.

7.1.2. Estructuras en tabla

En casos muy concretos puede resultar til estructurar los nodos de un hipertexto en forma de tabla. Una condicin previa de esta estructura es que la informacin ha de organizarse en funcin de dos criterios . Un criterio ocupar las filas y otro las columnas. Por ejemplo, un sitio web que contenga informacin sobre cursos de formacin en lnea puede ser estructurado en tabla utilizando los siguientes criterios organizativos: Criterio columnas: los diferentes cursos que se ofrecen. Criterio filas: los diferentes apartados de informacin de cada curso.

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

7.1.3. Estructuras en red

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

Facilitar la navegacin ya que los enlaces hipertextuales de la estructura en red facilitan el acceso a la pgina inicial, a un mapa de navegacin, a un ndice, a un sumario... Representar la semntica de relaciones entre los fragmentos de informacin ya que conectan nodos que tienen una relacin de complementariedad, de contraste, de refutacin, de ampliacin...

An as, no siempre las relaciones semnticas sealan rutas tiles para facilitar la navegacin, ni las rutas de navegacin estn siempre basadas en relaciones de significado. Por tanto, hay casos en que las dos necesidades implican relaciones independientes que incluso pueden ser contradictorias. El diseo de la estructura de la informacin es una actividad dinmica en la que se tienen que integrar necsidades de navegacin con necesidades de relacin de significado. Las estructuras en red proporcionan flexibilidad en el acceso de informacin de un hipertexto pero tambin pueden generar desbordamiento cognitivo en los usuarios cuando ofrecen un exceso de posibilidades de consulta. Hay que equilibrar y seleccionar los enlaces semnticos que realmente sean interesantes. Hay que evitar los hipertextos en que todo se relaciona con todo

Figura. Hipertexto donde todos los nodos estn relacionados con todos los nodos. Fuente: Web style Guide

7.1.4. Estructura secuencial

La estructura secuencial es la estructura bsica 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 tendra que ser la negacin de esta estructura. En realidad es una de las estructuras ms interesantes para ser incluida en un hipertexto como complemento de otros y ofrecer:

Una visita guiada por los nodos ms 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 pargrafos. En funcin del tipo de documento, esta subestructura tendr unas determinadas caractersticas, aunque hay tres apartados genricos presentes en muchos documentos secuenciales:

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

7.2. Esquemas para organizar la navegacin

Los esquemas de organizacin de la navegacin son formas genricas de fragmentar y ordenar la informacin. Tan genricas como el tiempo, el espacio, el tema... La ventaja de utilizar los esquemas genricos est en que los usuarios ya los conocen y por tanto podrn prever gran parte de los resultados de sus decisiones de navegacin. De esta manera se minimiza la desorientacin y se facilita la navegacin. Hay dos tipos bsicos de esquemas para organizar la navegacin hipertextual (Rosenfeld y Morville, 1998: 26-46): Esquemas exactos Esquemas ambiguos Esquemas hbridos

Los esquemas exactos dividen la informacin en fragmentos bien definidos y mutuamente excluyentes , como por ejemplo el listn telefnico o un mapa poltico de Europa. Los tres esquemas exactos ms utilizados son: Alfabtico Cronolgico Geogrfico

Cada esquema podr aplicarse en funcin deltipo de informacin que contiene el hipertexto Los esquemas ambiguos dividen la informacin en fragmentos sin una definicin exacta. Normalmente los fragmentos resultantes no son mutuamente excluyentes y en su definicin interviene una parte de la subjetividad del diseador. Los principales esquemas ambiguos son: Temtico Es un esquema muy utilizado y consiste en fragmentar la informacin en relacin a los temas y subtemas que se desarrollan. En el momento de disear este esquema hay que considerar la amplitud temtica a cubrir. No ser igual la fragmentacin por temas de una enciclopedia electrnica que la clasificacin por tpicos de una intranet de una organizacin. 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 ejecucin. De audiencia Cuando un hipertexto tiene dos o ms tipos de usuarios potenciales interesante aplicar un esquema de audiencia dirigido a cada categora usuarios en la que se tienen en cuenta sus caractersticas. En estos casos puede establecer un sistema de privilegios para permitir o no la consulta los nodos en funcin de la tipologa de usuario. De metfora En los esquemas de metfora se utiliza una idea, objeto o situacin conocida que acta como referente para ordenar y fragmentar la informacin. Como en todas las metforas, el xito radica en que haya un cierto paralelismo (temtico, estructural o de otro tipo) entre el referente escogido y la informacin a organizar. Normalmente un hipertexto est organizado con arreglo a dos o ms 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. es de se de

8. Contexto y flexibilidad
Un buen diseo de la estructura de navegacin tiene que ofrecer (Rosenfeld y Morville, 1998: 550-52):

Informacin 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 informacin 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 institucin u organizacin responsable del hipertexto, el ttulo del hipertexto y el ttulo del nodo. Esta informacin puede estar situada en el encabezamiento o ser una parte del ttulo. Cada nodo ha de mostrar una parte de la estructura jerrquica general del hipertexto indicando la localizacin del nodo activo en esta jerarqua.

La organizacin jerrquica de los enlaces ofrece una buena orientacin a los usuarios, ya que la jerarqua es una forma de organizacin elemental utilizada en mbitos muy diversos. An as, una navegacin basada exclusivamente en enlaces jerrquicos proporciona muy poca flexibilidad. Por tanto, hay que proporcionar rutas alternativas al recorrido jerrquico. La flexibilidad se consigue superponiendo a la estructura jerrquica, y sobre el mismo conjunto de nodos, otras estructuras como la secuencial o la de red. El diseo global de la estructura de navegacin se realiza en tres pasos:

Figura. Primer paso de la estructura jerrquica bsica. Estructura jerrquica bsica de un hipertexto con dos niveles jerrquicos. El primero con 6 nodos y el segundo slo desarrollado en dos ramas con 3 nodos cada una

Figura. Segundo paso: superponer estructuras secuenciales donde convenga. Estructura jerrquica bsica con una estructura secuencial superpuesta

Figura. Tercer paso: superponer la estructura en red donde convenga. Estructura jerrquica bsica con una estructura secuencial y otra en red superpuestas El tamao de los nodos es un elemento clave en la navegacin hipertextual y en la organizacin de la informacin. Hay argumentos a favor y en contra de los nodos pequeos los que ocupaln una sola pantalla. A favor de los nodos pequeos:

La resolucin que actualmente tienen los monitores hace inviable la lectura de gran cantidad de texto en lnea. Los monitores tienen una resolucin entre los 75 y los 90 puntos por pulgada, y en cambio la impresin en papel de menos calidad est por encima de los 300 puntos por pulgada. Los nodos pequeos facilitan el establecimiento de enlaces , ya que la informacin est fragmentada en unidades independientes que desarrollan un slo concepto. Normalmente cuando un usuario activa un enlace espera encontrar una informacin 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 ms le convengan. Cuando mayor es el nodo, ms discurso secuencial contiene y menos capacidad tendr el lector de controlar la navegacin. Con los nodos pequeos se pierde la estructura clsica de un discurso secuencial con una introduccin, un desarrollo y unas conclusiones. La expresin de ideas con una cierta complejidad requiere un discurso secuencial. Con la informacin excesivamente fragmentada, el usuario se desorienta con mucha facilidad.

En contra de los nodos pequeos:

Figura. Hipertexto con nodos estructurados y del mismo tamao

Figura. Hipertexto estructurados

con

nodos

heterogneos

de

diferentes

tamaos

no

Un segundo aspecto de gran influencia en la arquitectura de la informacin es la estructura interna de los nodos . Hay hipertextos con nodos que tienen una determinada estructura interna formada por diversas zonas de informacin de forma similar a una base de datos documental, donde los registros estn estructurados en campos. Un ejemplo paradigmtico de este tipo de hipertextos es una enciclopedia electrnica o un hiperdiccionario. La uniformidad de la estructura de los nodos hace que el usuario pueda prever en todo momento cmo ser el nodo que a continuacin visitar. An as, las posibilidades expresivas se ven en gran parte limitadas por la necesidad de adaptar la informacin a una estructura prefijada. Normalmente los nodos de un hipertexto no respetan una estructura rgida. Un nodo puede contener un artculo completo, otro una anotacin de un par de prrafos y un tercero una ficha donde se analiza un recurso de Internet. En estos casos, cualquier tipo de informacin en cualquier formato (grfico, imgen en movimiento, vdeo...) puede ser enlazado al hipertexto formando un nuevo nodo. Pero de esta manera tambin aumentan las posibilidades de desorientar al usuario . Aunque estos nodos no respeten una estructura rgida, todos los nodos contendrn algunos elementos comunes para facilitar la navegacin. Por ejemplo, un enlace a la pgina inicial, un men de los apartados ms importantes del hipertexto, el ttulo del nodo, el nombre del autor o la fecha de creacin.

9. Caractersticas de los enlaces

Los enlaces materializan las estructuras de navegacin del hipertexto porque hacen posible la conexin entre dos nodos. Desde esta perspectiva podemos clasificar los enlaces en tres tipos bsicos:

Jerrquicos : forman parte de la estructura jerrquica. Asociativos : hacen posible las estructuras en red y en tabla y normalmente se crean para relacionar dos fragmentos de informacin con relaciones semnticas. Secuenciales : materializan la estructura secuencial

Tambin podemos clasificar los enlaces en funcin del efecto que producen en las ventanas que soportan los nodos de origen y destino. Siguiendo este criterio tenemos:

Enlace de sustitucin en el que el nodo de destino sustituye al de origen. Enlace de superposicin 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 definicin de un trmino o para ofrecer informaciones puntuales complementarias. 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.

Los anclajes son los puntos fsicos de salida y llegada de un enlace hipertextual.

10. La navegacin en relacin a la recuperacin de la informacin

Navegacin Recuperacin informacin de la Obtener informacin muy a menudo a partir de una Obtener informacin a necesidad poco definida y partir de una necesidad explorar un espacio relativamente concreta. informativo. Enlaces hipertextuales Lenguaje interrogacin de

Objetivo

Medios

Unidad informativa

Nodos

Registros (base de datos) Nodos (Internet)

Organizacin Sin trascendencia interna de la unidad navegacin informativa

para

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

El descubrimiento de informacin de la que no se Principales ventajas conoca su existencia. La ampliacin de la informacin que se consulta Principales inconvenientes Desbordamiento cognitivo

La obtencin de informacin que cumple condiciones muy completas.

Ineficiencia: silencio.

ruido

11. Dificultades en el diseo de la navegacin

La web de Internet ha hecho posible que la creacin de hipertextos sea una actividad accesible y casi popular. An as, no siempre el diseo de la navegacin es el ms eficiente. Para disear la navegacin de un hipertexto hay que determinar qu fragmentos sern considerados y qu relaciones se establecern 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 informacin son los siguientes (Rosenfeld y Morville, 1998: 23-28): Ambigedad Heterogeneidad Diferentes perspectivas Polticas 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 ambigedad inherente al lenguaje repercute negativamente en el momento de etiquetar las categoras de un sistema de clasificacin. Los sitios web y en general los hipertextos son heterogneos por dos motivos: el tamao y el formato de los documentos (nodos) que lo componen. Un sitio web puede contener enlaces a elementos de magnitud tan diversa como artculos, revistas o bases de datos de revistas. Al mismo tiempo, el formato fsico y bibliogrfico de los nodos puede ser tan diverso como la definicin de un trmino, la grabacin de un mitin electoral o una seleccin de direcciones Internet sobre gastronoma. La heterogeneidad repercute negativamente al establecer criterios de clasificacin para estructurar la informacin en clases y subclases. Otro factor que dificulta la organizacin eficiente de la informacin 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 informacin de manera ptima para el tipo especfico de audiencia al que va destinado. Cuando un sitio web contiene informacin estratgica de una empresa, el proceso de diseo de su estructura se convierte tambin en un terreno sensible al conflicto

de intereses polticos. Los autores de esta estructura han de ser sensibles a las repercusiones que sus propuestas pueden tener de acuerdo con la poltica general de la institucin.

12. Sistemas de ayuda a la navegacin

Los sistemas de ayuda a la navegacin son dispositivos de diferente tipo que incorporan los hipertextos para facilitar su navegacin explicitando las estructuras y esquemas de organizacin de la informacin subyacentes en el hipertexto. Por tanto todos los sistemas de ayuda a la navegacin muestran :

Una o ms estructuras de organizacin de la informacin. Uno o ms esquemas de organizacin de la informacin. Proporcionar flexibilidad en el acceso a la informacin. Mostrar el contexto informativo de cada nodo hipertextual.

Los objetivos de estos sistemas son:

Los principales sistemas de ayuda a la navegacin son: Sistema Barra de navegacin Barra jerrquica Mens desplegables Enlaces incrustados Tabla de contenidos ndice Visita guiada Mapa de navegacin Botn de retroceso Histrico visitados de nodos Forma de implementacin con tecnologa web HTML (Javascript) HTML Javascript HTML (Javascript) HTML HTML HTML (Javascript) HTML Navegador Navegador Navegador javascript

Marcaje de nodos Mapa conceptual

No obstante, hay que indicar que cualquiera de estos sistema puede implementarse con herramientas de programacin ms complejas, como por ejemplo Flash o programas residentes en el servidor que puedan funcionar sobre una base de datos. En funcin de su alcance:

Sistemas globales . Permiten navegar por todo el contenido del hipertexto. Sistemas locales . Facilitan la navegacin por una parcela de hipertexto que tiene una unidad en funcin de un esquema de navegacin, son complementarios a los sistemas globales y tienen sentido slo en sitios web relativamente extensos. Sistemas atmicos . Facilitan la realizacin de un nico salto hipertextual. en del Sistemas

Tipos funcin alcance

Globales

Barra de navegacin, Rama jerrquica, Mens desplegables, ndice, Mapa de navegacin, Visita guiada, Histrico de nodos visitados, Marcaje de nodos y Mapas conceptuales Barra de navegacin, Rama jerrquica, Mens desplegables, ndice, Mapa de navegacin y Visita guiada Botn de retroceso

Locales Atmicos

En funcin de su emplazamiento:

Sistemas integrados . Estn situados en los nodos integrados con contenido del hipertexto. Sistemas remotos . Estn situados en nodos externos dedicados en exclusiva a la ayuda a la navegacin.

Tipos en funcin de Sistemas su emplazamiento Barra de navegacin, Rama jerrquica, Mens desplegables, Enlaces incrustados Tabla de contenidos, Mapa de navegacin y Visita guiada Mens desplegables, Tabla de contenidos, ndice, Mapa de navegacin, Visita guiada, Botn de retroceso, Histrico de nodos visitados, Marcaje de nodos y Mapa conceptual

Integrados

Remotos

12.1. Barra de navegacin

En su forma ms simple una barra o men de navegacin es un conjunto de enlaces que se va repitiendo en todos los nodos del hipertexto. Se puede implementar de forma textual, grfica o de forma combinada, con un grfico etiquetado. Para ofrecer contexto es importante que la opcin de la barra de men que corresponde a la pgina 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 ms sencilla de implementar la barra de navegacin es usando lenguaje HTML, colocando una serie de enlaces separados por guiones o barras verticales en la parte inferior o superior de todas las pginas web. Tambin se puede hacer usando iconos grficos asociados a un enlace y colocados en una tabla (que puede ser sin borde para que no se vea) para situar cada grfico en el sitio que le corresponde. Se puede aadir una etiqueta a cada grfico para complementar la parte visual con un texto. Grfico con enlace Etiqueta con enlace Grfico con enlace Etiqueta con enlace Grfico con enlace Etiqueta con enlace

Es muy fcil marcar la pgina activa cuando se ha colocado la barra de navegacin 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 pgina 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> Cdgo HTML de ejemplo. El lenguaje HTML se explica en otras unidades didcticas

Figura. Ejemplo de barra de navegacin Actividad 1. Localice una pgina web con un men de navegacin con iconos grficos que a su entender es de buena calidad. Haga una captura de pantalla y redacte dos o tres prrafos justificando su eleccin.

12.2. Rama jerrquica, migas de pan o hilo de Ariadna

Se trata de un sistema de ayuda a la navegacin que muestra las pginas que corresponden a los antecedentes jerrquicos de la pgina activa. Est formado por el ttulo de todas las pginas que hay que pasar para llegar a la pgina activa siguiendo la estructura jerrquica del hipertexto. Normalmente aparece en la parte superior de los nodos. Adems, cada ttulo de pgina es un enlace activo que permite el enlace a la pgina correspondiente. Este sistema de ayuda a la navegacin tambin es conocido como migas de pan o Breadcrumbs La rama jerrquica ofrece contexto , al informar de qu lugar de la estructura jerrquica es el que ocupa la pgina activa, y flexibilidad, ya que permite el acceso directo a todas las pginas que sean sus antecesores directos. La manera ms sencilla de implementar la rama jerrquica es con HTML por medio de un conjunto de enlaces separados con una flecha que puede ser grfica o de texto. El ltimo elemento coincide con la pgina activa y no tiene sentido que sea un enlace. El cdigo de esta rama jerrquica es el siguiente: <A href="lligam1.htm"> Bisabuelo jerrquico </A> -> <A href="lligam2.htm"> Abuelo jerrquico </A> -> <A href="lligam3.htm"> Cdgo HTML de ejemplo. El lenguaje HTML se explica en otras unidades didcticas Bisabuelo jerrquico -> Abuelo jerrquico -> Padre jerrquico -> Pgina activa Como por ejemplo: Inicio -> productos -> Gamma blanca -> Frigorfico Actividad 2. Localice una pgina web con unas "migas de pan" que a su entender son de buena calidad. Haga una captura de pantalla y redacte dos o tres prrafos justificando su eleccin.

12.3. Mens 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 guin de Javascript . El guin puede colocarse en cualquier lugar de la pgina web, aunque es recomendable colocarlo en la zona de TITLE. El formulario ha de contener el nombre del fichero HTML que tiene asociado cada opcin. El cdigo 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 opcin <option value="fichero1.htm">Opcin 1 <option value="fichero2.htm">Opcin 2 <option value="fichero3.htm">Opcin 3 <option value="fichero4.htm">Opcin 4 </select> </form> Cdgo HTML de ejemplo. El lenguaje HTML se explica en otras unidades didcticas Como por ejemplo, un men universidades de Catalunya: desplegable de formulario para acceder a

Principio del formulario

Escoja una opcin

Final del formulario

13. Mens desplegables con DigiDocMenu

Los mens desplegables son sistemas de navegacin de descubrimiento progresivo (Kahan, 94: 82) que se manejan en funcin de la interaccin del usuario en botones de desplegar y replegar. La mayora de mens o barras de navegacin fijos muestran un solo nivel jerrquico, ya sea actuado como sistema global o local. Cuando se plantea la posibilidad de mostrar dos o ms niveles surge el inconveniente del poco espacio disponible. Una posible solucin consiste en desplazar al usuario a un mapa situado en una pgina aparte dedicada enteramente a mostrar la jerarqua. Esta opcin tiene el inconveniente que el usuario abandona la pgina de contenido deteniendo la consulta. Una segunda alternativa es el men desplegable donde en funcin 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 pgina activa. Un men construido de este modo acta como: Una presentacin de ojo de pez proporcionando ms detalles a niveles ms prximos al foco de atencin del usuario Un mapa de navegacin proporcionando una representacin 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 ttulo completo de la pgina. Este inconveniente se presenta cuando los mens desplegables son implementados con un formulario select. En DigiDocMenu se evita este

problema mostrando el ttulo completo de la pgina en un recuadro flotante al poner el cursor encima del tem del men. Contienen listas excesivamente largas. Este es un problema relacionado con el diseo de la estructura de la Web. El men refleja las opciones en cada nivel jerrquico. Se evita este problema si se disea adecuadamente esta estructura con un mximo de 9 opciones por men. Son desplegables al pasar el ratn por encima sin previo aviso. Como hemos indicado, los mens desplegables creados con DigiDocMenu no tienen este problema, se desplegan clicando en el smbolo "+" de forma anloga al Administrador de Archivos de Windows.

DigiDocMen es un editor de mens desplegables freeware y open source creado por el grup de investigacin en Documentacin Digital DigiDoc de la Universidad Pompeu Fabra. Ha sido desarrollado en el contexto del proyecto de investigacin financiado por el Plan Nacional I+D+I del Ministerio de Educacin y Ciencia (Espaa). Actividad 3. Localice una sede web con culaquier tipo de men desplegable que a su entender es de buena calidad. Haga una captura de pantalla y redacte dos o tres prrafos justificando su eleccin. http://www.menudesplegable.com

13.1. Enlaces incrustados

Los enlaces incrustados son los enlaces clsicos de los hipertextos que aparecen en el interior de los prrafos asociados a una o ms 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 ms significativas en relacin al nodo de destino. Un sistema adicional muy utilizado para dar ms informacin de contexto consiste en etiquetar de alguna manera el enlace de manera que el usuario obtenga ms informacin del nodo de destino antes de activarlo. Por otra parte, hay que evitar que la zona subrayada cambie de lnea. Los enlaces incrustados se realizan con lenguaje HTML y con la etiqueta A HREF. El parmetro TITLE contiene la informacin adicional. El cdigo del enlace incrustado es el siguiente: <a href="fitxer.htm" Title="Informacion adicional"> Enlace </a> Cdgo HTML de ejemplo. El lenguaje HTML ser tratado en las prximas unidades didcticas

13.2. 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 pgina dedicada en exclusiva a esos elementos. Se usan para obtener una idea de conjunto sobre el contenido del hipertexto o para solucionar momentos de desorientacin.

Una Tabla de contenido (o mapa de navegacin textual) es una lista de los apartados y subapartados del hipertexto ordenada temticamente y que propone un recorrido secuencial por sus contenidos. Un ndice es un listado alfabtico de los conceptos ms importantes que desarrolla el hipertexto.

En cualquiera de los dos casos cada elemento del listado ser un enlace a la pgina correspondiente. Desde la perspectiva de la implementacin, 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 pgina inicial suele contener una versin ms 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 pginas como la propia aula digital del master. Actividad 4. Localice una pgina 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 prrafos justificando su eleccin.

13.3. Visita guiada

La visita guiada es un sistema de ayuda a la navegacin con el objetivo de mostrar los nodos ms significativos del hipertexto siguiendo un recorrido secuencial. Est pensado para los usuarios que acceden por primera vez al hipertexto y quieren una primera visin global. A veces se combina el listado de enlaces con una explicacin y se puede aadir una barra de navegacin en cada nodo que se visita para ofrecer ms flexibilidad. La implementacin del listado de enlaces de la visita guiada puede integrarse de dos formas:

En todas las paginas a visitar En una pgina externa

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

13.4. Mapa de navegacin

El mapa de navegacin es una representacin grfica de la arquitectura del hipertexto. Cumple las mismas funciones que un ndice o una tabla de contenido: ofrecer una visin global del hipertexto y ayudar en la orientacin. Pero, adems, el mapa de navegacin muestra tambin de forma grfica los principales enlaces hipertextuales. De la misma manera que un mapa de una zona geogrfica no contiene absolutamente todos los accidentes geogrficos, un mapa de navegacin hace una seleccin de los enlaces y slo representa los que considera esenciales. Actividad 5. Localice una mapa de navegacin que a su entender son de buena calidad. Haga una captura de pantalla y redacte dos o tres prrafos justificando su eleccin.

13.5. Mapa conceptual

De la misma forma que un mapa de navegacin 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 orgenes antes de la aparicin de Internet en el contexto de la investigacin en psicologa 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 pgina Web puede aportar la representacin de la red de conexiones conceptuales que sintetizan el contenido de la Web. Si se aaden enlaces, al mapa se conseguir adems facilitar la navegacin. Mapa de navegacin Representa Arquitectura de los enlaces Facilita Navegacin y orientacin Mapa conceptual Estructura conceptual del contenido Comprensin y navegacin

Normalmente la estructura conceptual de los contenidos de un hipertexto no encaja con su arquitectura de pginas y enlaces. Un hipertexto con un nivel medio o alto de contenidos suele contener pgina extensas que quedarn reflejadas con un nmero importante de conceptos en un mapa conceptual pero con un solo tem en un mapa de navegacin. 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

14. Conclusiones
En esta unidad didctica hemos podido ver que la usabilidad, la arquitectura de la informacin, la experiencia de usuario, el diseo de navegacin son disciplinas interconectadas y que todas ellas tienen una perspectiva distinta para hacer lo mismo: pginas web de calidad. Tambin se han visto algunos ejemplos de cmo implementar con HTML algunos de los elementos de navegacin analizados.

En las siguientes unidades didcticas se profundizar en el lenguaje HTML y se aprender a usar distintos tipos de herramientas para la creacin de pginas web. Algunas de estas herramientas, como por ejemplo los gestores de contenido, resuelven algunos problemas de diseo de navegacin sin un especial esfuerzo, generan de forma automtica los mens, mapas e incluso ndices. La desventaja est en que hay un lmite para la personalizacin del diseo. Este inconveniente no existe cuando se realiza una sede web con un editor de HTML, donde tendremos la libertad de crear cualquier diseo pero tendremos que dedicar ms esfuerzo y ms tiempo, incluso con la ayuda de plantillas prediseadas.

15. Bibliografa
Ausubel, David P.; Novak Joseph D.; Hanesian, Helen (1983). Psicologia educativa. Un punto de vista cognoscitivo. Mxico, D.F.: Trillas, 1983. Baeza, R.; Riverca, C.; Velasco, J. (2004). "Arquitectura de la informacin y usabilidad en la web". El profesional de la informacin, v. 13, n. 3, mayo-junio 2004. Baeza-Yates, R.; Rivera, C.;Velasco, J. Arquitectura de la informacin y usabilidad en la web. El profesional de la informacin , 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, pg. 101-108) Cassany, D. (1993). La cuina de l'escriptura. Barcelona: Les Naus d'Empries, 1993 Codina, L. (2000). El libro digital y la www. Madrid: tauro ediciones, 2000, Codina, L.; rovira, C. (2001). "Diseo hipertextual basado en la evidencia: nuevos resultados del proyecto documentacin digital de la universidad pompeu fabra de barcelona". Revista espaola de documentacin cientfica, vol 24, nm. 1, pgs. 8589 Codina, Lluis (1996). El llibre digital. Una exploraci sobre la informaci electrnica 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, pg. 17-41) Diaz, Paloma; N. Catenazzi; I. Aedo (1996). De la Multimedia a la Hipermedia. Madrid: Rama, 1996. Coutin Domnguez, Adrin (2002). Arquitectura de informacin para sitios web. Madrid : Anaya Multimedia. 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 http://www.oreillynet.com/pub/a/oreilly/web/news/infoarch_0100.html morville.

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 lnia]. Rev. 1/97.Yale University, 1997. Marcos, M.C.; Cada, J (2004). "Cmo medir la usabilidad:

tcnicas y mtodos para evaluar el uso de sitios web" [cd-rom]. En Rovira, C.; Codina, L. (dir.). Documentacin 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". Http://www.useit.com/papers/heuristic/heuristic_list.html Useit.com.

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: diseo de sitios web. Madrid: pearson educacin. 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 pginas de inicio: anlisis de 50 sitios web. Barcelona: pearson educacin. Novak, J. D. (1982). Teoria i prctica de la educacin. Madrid: Alianza, 1982. Rada. Roy. (1991). Hypertext: From text to Expertext. London: McGraw-Hill, 1991 Perez-Montoro Guirrez, Mario (2010). Arquitectura de la informacin en entornos web. Gijon: Trea. 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. Prez (coord.) . Documentaci i arxivstica. Barcelona: Universitat Oberta de Catalunya, 1997 Rovira, C. (2001). "Eines d'ajuda a la navegaci". Temes de disseny, nm. 18, abril 2001, pgs. 48- 80 Rovira, C.; Codina, L. (2003). "La orientacin a objetos en el diseo de sedes web: hipertextos y representacin de la informacin". Revista espaola de documentacin cientfica, vol 26, num. 3, pags. 267-290. Rovira, Cristfol (1997a). Entornos hipertextuales de aprendizaje. En Pilr cid y Jaume Bar (eds.) Anuari Socadi de Documentaci i Informaci. Barcelona: SOCADI, 1997 Rovira, Cristfol (1997b). La Intranet Documental: una eina per a la docncia en documentaci. Comunicacin presentada en las 6es. Jornades Catalanes de Documentaci. Barcelona, 1997 Rovira, Cristfol (1998). L'hipertext la recuperaci d'informci en el Web. En Jaume Bar (ed.) Cercar i collocar informaci en el World Wide Web. Barcelona: Llibres de l'ndex, 1998 Rovira, Cristfol (1999a). "Documents hipertextuals per a entorns virtuals d\'aprenentatge". DIGITHVM. Revista Digital d\'Humanitats, vol 1. http://www.uoc.edu/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). Tcnicas avanzadas para el diseo de pginas Web. Madrid: Anaya Multimedia, 1997. Spiro, Rand J. et al. (1991). "Cognitive Flexibility, Constructivism, and Hypertext". Educational Technology (may 1991, pg. 24-33)

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

Master en Documentacin Digital (IDEC-UPF) 03/10/2011