Manual mapas de_navegacion

Unidad didáctica: Mapas de Navegación P.E. Diseño y Programación Web
Recopilado por: Mg. Roberto Macetas Rodríguez 1
Instituto de Educación Superior Tecnológica Público
SANTIAGO ANTUNEZ DE MAYOLO

MACETAS RODRÍGUEZ, ROBERTO JOHNNY
HUANCAYO - PERÚ
2019

MAPAS DE NAVEGACIÓN
AUTOR:
MACETAS RODRÍGUEZ, ROBERTO
© Reservado todos los derechos
EDITOR:
MACETAS RODRÍGUEZ, ROBERTO
Email: rmacetas@hotmail.com
Publicación.
Primera Edición, abril 2019

Resumen: Análisis de sistemas de navegación de sitios Web.
Muchos de los sitios Web que encontramos en Internet presentan
una serie de enlaces hacia sus diferentes secciones a lo largo de
todas sus páginas, como una manera de mostrar al usuario los
contenidos del sitio.
Estos menús de navegación pueden presentarse en diferentes
formatos y organización, ya sean simples listas de opciones,
sistemas gráficos, sistemas de pestañas, menús desplegables, etc.
En primer lugar, este trabajo define los sistemas y menús de
navegación más utilizados que se pueden encontrar en las sedes
Web.
En segundo lugar, analiza los diferentes tipos de sitios Web en
función de la estructura, tipo de contenido, volumen de
información y perfil de usuario y presenta los menús de
navegación más comunes que podemos encontrar.
Por último, se analizan con más detalle los diferentes sistemas de
navegación, descritos bajo los aspectos de usabilidad y
accesibilidad tanto desde el punto de vista del diseño como desde
el punto de vista tecnológico.

Guía de práctica N° 01
Fundamentos de Mapas de
navegación
Semana 1
¿QUE ES MAPA DE NAVEGACION?
Los mapas de navegación proporcionan una representación esquemática de
la estructura del hipertexto, indicando los principales conceptos incluidos en el
espacio de la información y las interrelaciones que existen entre ellos. Un
mapa es, por ejemplo, una representación completa (o resumida) del sitio
web para orientar al lector/usuario durante el recorrido o para facilitarle un acceso
directo al lugar que le interese. Reflejará la estructura del web por
medio de enlaces a los nodos principales, y éstos también pueden
desarrollarse para mostrar los subnodos. El mapa de navegación puede
representarse bien en forma textual, bien en forma gráfica, o una combinación
de ambas.

De manera similar a los sumarios, índices y tablas de contenido que sirven
para "navegar" por los documentos en papel, estas herramientas también
son útiles para navegar por un hipertexto. En la Web, estos mecanismos
tradicionales pueden tomar la forma de menús.
Para ofrecer una visión global, es muy útil mostrar un mapa de todo el
contenido, poder verlo en una sola pantalla y que esté accesible desde
cualquier nodo del hiperdocumento. Sin embargo, mostrar todo el contenido
reflejado en un mapa o esquema global en una sola pantalla cuando el espacio
web o un hipertexto son demasiado grandes, es casi imposible de llevar a
la práctica y tampoco tiene ninguna utilidad confeccionar una farragosa sopa
de letras o imágenes. Una solución es emplear diagramas globales con los
nodos más importantes y luego desarrollar cada subnodo en diagramas locales
con información más detallada. También puede ofrecerse el empleo de las
llamadas fish-eye views o mapas ojo de pez que muestran todo el espacio
hipertextual en un único gráfico en distintos niveles de detalle, ofreciendo más
información sobre la posición actual en la que se encuentra el usuario y
disminuyendo los detalles de forma gradual según estén más alejadas las partes.
Sin embargo, este tipo de mapas son muy difíciles de confeccionar con la
tecnología web, puesto que cada nodo necesitaría un tratamiento específico.
Para confeccionar mapas que reflejan el contexto del nodo activo existen
programas específicos que también son capaces de mostrar en forma gráfica
toda la estructura de un hipertexto. Estas funcionalidades las tienen algunos
programas de creación de páginas web, tales como FrontPage de Microsoft.
Sin embargo, no se trata de verdaderas herramientas de navegación, ya que
estas funcionalidades son posibles únicamente dentro del programa de
construcción de las páginas web residentes en el disco duro, y no cuando el
hipertexto se publica en la web. Ejemplos de mapas de este tipo, creados con
el programa Knowledge Manager, se puede encontrar en:
http://www.knowledgemanager.it/ Se trata de un programa que permite
crear mapas conceptuales que puedan representar los recorridos cognitivos de
un hipertexto: la estructura reticular, los grados, extensión y profundidad
de los conceptos y sus relaciones.
¿CARACTERISTICAS DE LOS MAPAS DE
NAVEGACION?
Entre las características de los mismos se encontraban funciones que
pretendían evitar el desbordamiento cognitivo de los usuarios, y orientar sus
procesos de Exploración recuperación de la información deseada
 Mapas Hipertextuales: Estas herramientas dibujan una
representación gráfica de los documentos y de los enlaces existentes
entre los mismos.
 Mapas de Navegación en Acción: Desarrolla en profundidad las
categorías existentes en el menú de navegación.

 Software para crear mapas: Se utiliza código JavaScript para generar
un menú activo que utiliza los iconos de carpetas y documentos
estándares.
¿PARA QUE SE UTILIZAN LOS MAPAS
DE NAVEGACION?
Nos sirve para organizar la información en una página Web
¿Para qué Sirven?
El principal valor de un mapa de navegación es que permite anticipar
errores de organización de la información, de modo de corregirlos cuando
aún no se ha invertido tiempo y dinero en la construcción del producto.
La falla más frecuente que se busca soslayar a través de la
nacionalización de un mapa es el desequilibrio entre amplitud y profundidad
de la información. Amplitud se refiere a la cantidad de secciones o páginas
de igual jerarquía a las que se puede acceder desde el inicio o desde
secciones concentradoras de contenidos y se expresa horizontalmente en un
mapa. La profundidad se gráfica de manera vertical e indica el número de
opciones de jerarquía decreciente que hay dentro de una misma sección.
¿En Qué Proyectos se Aplican los Mapas de
Navegación?
Casi cualquier proyecto en formato web requiere graficar la información en
un mapa de navegación, pero resulta especialmente necesario en sitios web
que poseen un volumen importante de contenidos. Cuando los proyectos
están enfocados a funcionalidades (esto es más típico de las Intranets y
Extranets) el mapa de navegación es complementado o directamente
reemplazado por el diseño de interacción.
¿Qué es un Diseño de Interacción?
En todo proyecto de Internet (o Intranet/Extranet) con operaciones que
involucren la participación de diversos usuarios y variables del propio
proceso, debiera planificarse su ejecución partiendo con un diseño de
interacción que bosqueje el panorama general.
El sólo hecho de que un usuario ingrese su nombre y contraseña en un
producto de acceso privado, involucra un llamado a una base de datos y una

validación. Puede que existan distintos perfiles de usuarios que ingresen al
sistema a través de la misma puerta de entrada, como un administrador y
editor de contenidos.
Errores Más Comunes a la Hora de Hacer un Mapa
de Navegación
 Error N° 1: Una estructura de navegación demasiado amplia y poco
profunda expresada en este mapa. Se ofrecen ocho opciones
principales, de las cuales sólo dos (la primera y la tercera) dan la
posibilidad de seguir navegando.
 Error N° 2: una estructura de navegación demasiado profunda y poco
amplia expresada en este mapa. El usuario enfrenta sólo tres opciones
de inicio y en cada una de ellas debe hacer demasiados clics para
acceder a contenidos de su interés.
Se Debe Tener en Cuenta: La Busca del Equilibrio
El mapa expresa la estructura básica del propio web de arquitectura de
información. Para intentar facilitar la navegación al usuario, se ofrecen pocas
opciones en el menú principal; y luego, dentro de cada una de ellas, basta un
clic para acceder a contenidos específicos.
TIPOS DE MAPAS DE NAVEGACION
Existen seis tipos o clases de mapas de navegación primarias utilizadas
en los entornos virtuales:
• Navegación lineal
• Navegación lineal en estrella
• Navegación jerárquica
• Navegación no lineal
• Navegación compuesta
• Navegación múltiple
NAVEGACIÓN LINEAL:
La navegación lineal permite un flujo de la información mas estable, es muy
útil cuando se quiere lllevar un proceso paso a paso, con una multimedia de
estructura lineal permite que el usuario reciba la información en un orden
adecuado, únicamente con la opción de ir adelante y atrás.

La estructura lineal es la más simple de todas, la manera de recorrerla es la misma que si
estuviésemos leyendo un libro, de manera que estando en una página, podemos ir a la
siguiente página o a la anterior.
Esta estructura es muy útil cuando queremos que el lector siga un camino fijo y guiado,
además impedimos su distracción con enlaces a otras páginas.
Por otra parte podemos causar al usuario la sensación de estar encerrado si el camino es
muy largo o poco interesante. Este tipo de estructura sería válido para temas no muy largos
en contenido.
NAVEGACIÓN LINEAL EN ESTRELLA
La navegación en estrella se basa es igual que el sistema explicado
anteriormente, a diferencia que este va y vuelve hacia el inicio.

NAVEGACIÓN JERÁRQUICA
Navegación jerarquica o de arbol. Esta estructura comienza con una
página principal o raíz , se presentan varias opciones que permite
ir visualizando páginas más especificas . el contenido se desarrolla
en forma ramificada pudiendose visitar cada una de las secciones por
separado.
NAVEGACIÓN NO LINEAL
Es adecuada cuando se tiene que conservar el camino general, pero
hay que dar cabida a ligeras variaciones, tales como saltarse
determinadas páginas. Permite algunos desvíos controlados, la
estructura obliga a regresar al camino principal, al tener un desvió
lateral es una pequeña información adicional.

NAVEGACIÓN COMPUESTA
La navegación multiple es la que combina diferentes sistemas de navegación
NAVEGACIÓN MÚLTIPLE
La estructura de un sitio en el que cada una de sus páginas está vinculada
a todas las demás se denomina navegación multiple. Con este sistema

el número de vínculos o enlaces es igual al número de páginas por el
número de páginas menos una.
ACTIVIDAD INDIVIDUAL Nº 01
Elaborar el mapa conceptual de lo estudiado en la Guía Nº 01 Semana 01
Fundamentos de Mapas de navegación.

Semana 2
HERRAMIENTAS PARA ELABORAR LOS MAPAS
DE NAVEGACIÓN
MAPA DE NAVEGACIÓN EN MICROSOFT WORD
MAQUETA DEL SITIO EN WORD O ADOBE ILUSTRATOR:

MAPA DE NAVEGACIÓN EN GOCONQR
Link de acceso: https://www.goconqr.com/es-ES/mind_maps/

MAPA DE NAVEGACIÓN EN STARUML ó RATIONAL ROSE
(DIAGRAMA DE ESTADOS)

MAPA DE NAVEGACIÓN EN POWER POINT

Semana 3 y 4
2. Tipos de navegación. Definición.
Uno de los principios básicos de la Web estriba en el hecho de que los usuarios
pueden moverse libremente por las diferentes secciones que componen un sitio
Web o entre los “infinitos” volúmenes de información diseminados por millones
de páginas Web distribuidas en servidores de todo el mundo.
Esta intrínseca característica de Internet provoca que en numerables ocasiones el
usuario se sienta perdido en el ciberespacio y sienta incapacidad de encontrar el
camino hacia la información que realmente le interesa.
Tal y como comenta Jakob Nielsen en el libro “Usabilidad. Diseño de sitios
Web”1
esta sensación de pérdida se produce cuando el usuario:
• No sabe dónde está: El usuario desconoce su situación actual en
relación a la estructura global de la información del sitio Web y no
percibe la relación que hay entre la página actual y el resto de páginas.
• No sabe dónde ha estado: El usuario desconoce la ruta de navegación
que ha seguido hasta la posición actual y por consiguiente no es capaz de
identificar las páginas ya visitadas.
• No sabe a dónde puede ir: El usuario no puede identificar los enlaces
que contienen información relacionada con la página actual.
Este problema de orientación se ha intentado resolver mediante la búsqueda de
sistemas que permitan al usuario ubicarse y desplazarse a través de las
estructuras de información de una manera fácil y eficaz.
Los sistemas de navegación, compuestos por los diferentes enlaces a las
diferentes secciones de un sitio Web, permiten ubicarnos y desplazarnos a través
de las estructuras de la información, facilitando a los usuarios saber en cada
momento dónde están, dónde pueden ir y cómo está organizada la información.
Existen diversas formas de organizar estos enlaces dentro de una página Web y
según los autores Louis Rosenfeld y Peter Morville en el libro "Arquitectura de
la información para la World Wide Web"2
podemos diferenciar entre cuatro
tipos diferentes de sistemas de navegación: Sistemas de navegación jerárquicos,
Sistemas de navegación globales, Sistemas de navegación locales y Sistemas de
navegación ad hoc.
1
Libro: Nielse, J. Usabilidad. Diseño de sitios Web. Madrid, Ed. Pearson Educación S.A.,
2000.
2
Libro: Morville, P. Rosenfeld, L. Arquitectura de la información para la World Wide
Web. Madrid, Ed. McGraw-Hill, 1998.

A estos cuatro tipos de sistemas de navegación podemos añadir dos más que
denominaríamos Sistemas de navegación directos o buscadores y Sistemas de
navegación lineales.
2.1 Sistemas de navegación jerárquicos
Los sistemas de navegación jerárquicos son aquellos que nos permiten
conocer tanto las subsecciones que están subordinadas a la sección en la
que nos encontramos como la sección a la que pertenece la subsección
actual.
Los sistemas de navegación jerárquicos se han consolidado como uno de
los sistemas más utilizados, ya que a través de la organización jerárquica
de los contenidos de los sitios Web se organiza la navegación en los
mismos. Podemos observar un claro ejemplo de estructura y navegación
jerárquica en la página Web del "DOGC - Diari Oficial de la Generalitat
de Catalunya" (http://www.gencat.net/diari), donde los contenidos se
organizan en un árbol jerárquico de diferentes niveles tal y como se
muestra en la siguiente figura:
Ilustración 1: Estructura de la información en DOGC

Esta estructura jerárquica se plasma después de manera directa en la
navegación del sitio Web. Por ejemplo, en las siguientes ilustraciones se
ve el camino para acceder al DOGC 4041 correspondiente al mes de
enero de 2004:
Ilustración 2: Home DOGC (1er
Nivel). Ilustración 3: Indice DOGC's
2002, 2003 y 2004 (2º nivel).
Ilustración 4: Listado DOGC's enero
2004 (3er
nivel).
Ilustración 5: DOGC 4041 (4º nivel).
Rápidamente podemos deducir que estos sistemas serán de gran utilidad
cuando se dispone de grandes volúmenes de información agrupados por
temas o unidades conceptuales. Además, una de las principales ventajas
estriba en el hecho de que permite a los diseñadores y arquitectos de la
información guiar fácilmente la navegación de los usuarios hacia el
objetivo deseado. En contrapartida no se permite la libre navegación de
los usuarios a través de sitio Web.
Debido a la rigidez de navegación que presenta este sistema, se suele
utilizar combinado con otros sistemas de navegación que lo dotan de
mayor flexibilidad y permite a los usuarios escapar de la rigidez que
imprimen las estructuras de la información jerarquizadas.

2.2 Sistemas de navegación globales
Los sistemas de navegación globales suelen servir de complemento a los
sistemas de navegación jerárquicos ya que permiten a los usuarios
moverse libremente por las estructuras de la información mediante saltos
verticales y laterales.
Estos sistemas permiten que el visitante acceda directamente a la
información que desea consultar sin la necesidad de retroceder por las
páginas visitadas para alcanzar otra rama del árbol de contenidos.
Este sistema de navegación no implica que desde una determinada
posición podamos desplazarnos hacia cualquier otro punto de la
estructura de contenidos, ya que esto podría provocar una sensación de
pérdida en el usuario. Por consiguiente, se hace indispensable que los
diseñadores y arquitectos de la información diseñen cuidadosamente
cuales serán los caminos a través de los cuales los usuarios podrán
desplazarse vertical y lateralmente dentro de la estructura de la
información del sitio Web.
Un sistema global de navegación podría estar formado por un menú
situado en los diferentes niveles de un sistema jerárquico y que
permitiera a los usuarios interrumpir la navegación jerárquica para
acceder a otra información en otra parte de la estructura.
Un claro ejemplo de este tipo de sistemas de navegación lo podemos
encontrar en Terra (http://www.terra.es/). En la home de este portal,
podemos acceder a cualquiera de los ejes temáticos (o canales) que
proponen los autores de este sitio mediante un menú de navegación
jerárquico ubicado en la parte izquierda del navegador.
Ilustración 6: Terra con sistema de
navegación jerárquico: Acceso a Internet,
Canales y Servicios.
Ilustración 7: Área temática de cine.

Una vez dentro de un canal temático podemos acceder a todos los
contenidos relacionados con esta área mediante el menú de navegación
izquierdo, pero también disponemos en la parte superior de la pantalla de
una sistema de navegación global denominado Canales y Servicios que
nos permite abandonar esta sección y acceder a cualquier otro canal
temático:
Ilustración 8: Menú de navegación global; Canales y Servicios.
2.3 Sistemas de navegación locales
Si los sistemas de navegación globales complementaban a los sistemas
jerárquicos, los sistemas de navegación locales complementan a los
sistemas de navegación globales.
Así pues, en los sitios Web complejos donde existe diversidad en los
contenidos o incluso cada subsección posee un estilo propio, los sistemas
de navegación globales se ven complementados con uno o más sistemas
de navegación adaptados a las características y necesidades propias del
sub-sitio en cuestión.
Sin embargo, el sistema de navegación local no sustituye al sistema de
navegación global, simplemente lo complementa.
Un ejemplo claro de sistemas de navegación local lo encontramos en los
diferentes menús de navegación de los canales del portal de Terra.

Ya se ha comentado la característica de la navegación global de este
portal. Ahora centramos la atención en los sistemas de navegación
locales de los diferentes canales que aparecen como listas de opciones
ubicadas en la parte izquierda del navegador. Por ejemplo, en las
siguientes ilustraciones se muestran los sistemas de navegación local de
los canales de Cine y Actualidad respectivamente.
Ilustración 9: Sistemas de navegación local de Terra
Estos menús ubicados en la misma posición de la pantalla siempre
complementan al sistema de navegación global situado en la parte
superior del navegador y en ningún caso lo sustituyen.
2.4 Sistemas de navegación ad hoc
Los sistemas de navegación no siempre encajan en los sistemas descritos
anteriormente. Por ejemplo, un sistema muy utilizado en los documentos
electrónicos consiste en relacionar palabras, expresiones o frases con
contenidos que amplían la información proporcionada por el autor. De
esta manera estas palabras, expresiones o frases se convierten en vínculos
incrustados en el propio texto.
Ilustración 10:Texto con enlaces incrustado; Navegación ad hoc.

La principal ventaja de este tipo de navegación estriba en el hecho de que
permite enriquecer los contenidos con información complementaria y
permite la navegación entre contenidos relacionados entre sí.
En contrapartida, este sistema ha de ser utilizado por los diseñadores de
manera muy cuidadosa ya que si se utiliza indiscriminadamente suele
producir sobre el usuario una sensación de pérdida y desorientación al no
entender cuál es la estructura del documento ni cuál es el orden de la
información.
2.5 Sistemas de navegación directos
Infinidad de sitios presentan a los usuarios un quinto modelo de
navegación que permite acceder directamente a una información
específica lo más rápidamente posible.
Los sistemas de navegación directos o buscadores son alternativas o
complementos de los sistemas de navegación citados anteriormente y
facilitan a los usuarios la posibilidad de buscar directamente una
determinada información, sin necesidad de navegar por las distintas
secciones que componen el sitio Web.
Sin entrar en detalles del funcionamiento de este tipo de navegación hay
que mencionar el hecho de que estos sistemas normalmente se dirigen
hacia usuarios más expertos ya que el proceso de búsqueda requiere, en
la mayoría de casos, un aprendizaje de la herramienta de búsqueda.
Ilustración 11: Sitio Web de IBM con
sistema de navegación directo.
Ilustración 12: Resultado de una
búsqueda en www.ibm.com/es.
Existen algunas tendencias que afirman que este tipo de navegación
directa se convertirá en el sistema de navegación del futuro y que no
tardará mucho en poder verse buscadores internos como sistemas de
navegación principal de las páginas Web.

Estas tendencias se basan en la argumentación de que nadie dejaría su
negocio sin una persona que atendiera al público y por consiguiente no se
deberían dejar las páginas Web sin una interface que pudiera resolver las
preguntas de los usuarios.
Afirman que los buscadores internos son lo más cercano a estas personas
físicas que atienden a los clientes. Así pues, el usuario no busca en
nuestra Web mediante el buscador, sino que hace preguntas y el buscador
no da resultados, sino que responde.
Para que esto llegue a ser una realidad se deberán mejorar los sistemas de
búsqueda actuales. Los sistemas de búsqueda tradicionales están muy
limitados por los lenguajes de consulta, que en ocasiones provocan unos
resultados que no son la información esperada por el usuario.
Estos estudios intentan desarrollar un buscador capaz de admitir frases y
preguntas en lenguaje coloquial, por ejemplo: ¿Dónde puedo encontrar
información sobre el cambio climático?. El buscador convertirá la
consulta del usuario en lenguaje natural a una consulta booleana. Una vez
identificado el tema de la consulta, se obtendrá una lista de enlaces
relacionados.
Algunos ejemplos de este tipo de buscadores se pueden encontrar en Ask
Jeeves (www.ask.com) o una versión de demostración en
tornado.dia.fi.upm.es/mesia/mesia_demo.html.
2.6 Sistemas de navegación lineales
Los Sistemas de navegación lineales son aquellos que nos permiten
recorrer el contenido de las páginas de una manera secuencial y
preestablecida por el diseñador. Las únicas opciones de navegación que
se le permiten al usuario son avanzar, retroceder o regresar al índice.
Este tipo de navegación se utiliza en contadas ocasiones pero suele ser de
gran ayuda cuando se quiere presentar la información en una secuencia
preestablecida, como por ejemplo en el uso de un manual o algún tipo de
material docente donde se pretende que la información pueda ser recorrida
de una sola manera.
La navegación lineal provoca una necesaria transición por todas y cada
una de las páginas lo que puede también inducir al abandono o desinterés
por parte del usuario.
Ilustración 13: Ejemplo de navegación secuencial

Unidad didáctica: Mapas de navegación Programa de estudios: Diseño y Programación Web
PRÁCTICA DE LABORATORIO
SEMANA 04
PASOS PARA REGISTRARSE EN WORDPRESS.COM
Ingresar a la página web de wordpress en español

Tutorial: crear menús en WordPress
Ahora sí, vamos con la parte más “técnica”
Lo primero de todo es que, desde el escritorio WordPress vayas a Apariencia -> Menús
[1].
Lo que te saldrá a continuación es el lugar desde el que vamos a gestionar la creación y
modificación de los menús de navegación del blog.

En la columna de la izquierda [2] salen todos los elementos que puedes añadir a un menú, y
que son los que te había comentado antes: páginas, entradas, enlaces personalizados
(hacia donde tú quieras) y etiquetas.
Ahora mismo sale todo en gris atenuado porque aún no se pueden usar. Hasta que no crees
un menú no podrás acceder a esas opciones.
Y para crear el menú, solo tienes que poner el nombre del menú en la casilla donde te lo
pide [3].
Lo mejor es que aquí le pongas como nombre el de su ubicación. Es decir, si el menú que
vas a crear va a ser el principal, ponle de nombre menú principal o algo similar, sino luego
los confundirás.
Y es que puedes crear tantos menús como quieras, aunque luego solo puedes usar los que
el tema te permita (alguno más si utilizas un widgets de menús).
Y una vez que hayas elegido el nombre del menú, haz clic en el botón azul donde pone
“Crear menú” [4].

Como puedes ver, ahora la columna de la izquierda que no podrías usar antes [2] sí que la
puedes usar.
Básicamente, lo que hay que hacer es ir seleccionando, dentro de todas las opciones que te
da, las páginas (o entradas o lo que sea) que quieres añadir al menú y hacer clic en el
botón “Añadir al menú” [5].
Automáticamente, los elementos seleccionados de pasarán a la zona de la derecha, donde
pone “Estructura del menú” [6], y cada uno de ellos será un botón de tu nuevo menú.

Lo veremos todo más adelante, no te preocupes
Pero vayamos por partes. Vamos a ver primero cómo se agregan botones al menú (si ya
te imaginas lo que hay que hacer, puedes saltarte todo lo que viene a continuación rodeado
con el marco azul).
Cómo agregar páginas, entradas y categorías al menú
Para agregar páginas, entradas o categorías al menú solo tienes que hacer clic en la
sección correspondiente en la columna de la izquierda [2], y te saldrá un desplegable
similar a los de la imagen.

Es muy fácil.
Solo tienes que seleccionar las páginas, entradas o categorías que quieras añadir al
menú [8] y hacer clic en el botón “Añadir al menú” [5].
Para facilitarte la vida, también puedes usar de las pestañas de arriba [7] que te ayudarán a
encontrar lo que andes buscando (muy útil si tienes muchas entradas o páginas y no quieres
perder tiempo buscando en la lista que te sale).
Una vez le des al botón de “Añadir al menú” verás como a la derecha, en la “Estructura del
menú” [6], se añaden los nuevos botones.
Cómo agregar enlaces personalizados al menú
Ésta opción la separo porque es un poco diferente a las anteriores, pero ya verás que
tampoco tiene ningún misterio.
En donde pone URL [9] tienes que poner la url a donde quieres que el botón lleve al hacer
clic en él.
En “texto de enlace” [10] tienes que poner lo que quieres que ponga en el botón del
menú.
Y cuando ya lo tengas, le das al botón “Añadir al menú” [5] y se añadirá a la
“Estructura del menú” [6] para que podemos seguir trabajando con él.
Si quieres guardar el menú tal y como está ahora haz clic en el botón azul donde pone
«Guardar menú», pero te aconsejo que sigas leyendo porque aún queda por hacer alguna
cosilla más.

Cómo modificar un menú en WordPress
Vale, ahora que ya hemos añadido los botones al menú, toca hacer algunas modificaciones
para que se vea como queremos, ya que si te fijas hasta ahora solo hemos añadido los
botones, pero también supongo que también querrás elegir en qué orden los quieres poner.
O incluso si quieres crear un submenú desplegable.
Ahora vamos a trabajar solo con la parte derecha de la pantalla, lo que corresponde a
la estructura del menú.
Si te fijas, todas las páginas que he agregado al menú para este tutorial salen como si ya
fuesen botones.
El orden en que aparecen de arriba abajo es el orden en cómo se van a ver los botones
en tu blog, solo que de izquierda a derecha (porque aquí vemos los botones como una
columna, pero lo más normal es que en el blog se vean como una fila).
Así que si quieres cambiar el orden de los botones, lo que tienes que hacer es cambiar el
orden de los mismos desde estructura del menú, donde estamos ahora.
Para ello tienes que hacer clic sobre el botón que quieres mover y arrastrarlo hasta
ponerlo en el nuevo lugar en que quieres que se vea.

Una vez que tengas todos los botones ordenados, toca elegir dónde se va a mostrar el
menú. Para ello, en “Opciones del menú”, donde pone “Ubicación del tema”, elige la
posición marcando la casilla correspondiente [11].

Para este ejemplo yo he seleccionado la ubicación principal, pero ten en cuenta que ésto
depende al 100% del tema que estés utilizando, ya que habrá temas que te den más
opciones que otras.
Además, la “posición principal” puede variar de un tema a otro. Por eso es importante que
a la hora de elegir un tema te fijes en la ubicación de los menús.
Una vez que hayas ordenado los botones y hayas elegido la ubicación, haz clic en el botón
azul done pone “Guardar menú” [12] (si te olvidas de hacer clic aquí y te vas de la
página perderás todos los cambios que hayas hecho, así que ten cuidado jejeje).
Si marcas la opción de añadir páginas automáticamente, cada vez que publiques una página
Una vez que guardes el menú, vamos a ver cómo queda en el blog.

Cómo crear un menú desplegable
Ahora vamos a ver cómo hacer un menú desplegable en WordPress, para que cuando
pases el cursor sobre alguno de los botones se despliegue un submenú con más opciones.
Para ello, tenemos que volver a la estructura del menú.
Lo que hay que hacer es coger el botón que queremos que aparezca en el desplegable, y
ponerlo debajo del botón principal (el que generará el desplegable al pasar el cursor por
encima), pero un poquito a la derecha.
Si te fijas, mientras haces clic en el botón y lo arrastras para cambiarlo de posición, te van
saliendo unos contornos dibujados con una línea discontinua que indican dónde va a
quedar el botón cuando lo sueltes.

Y si te fijas, si en vez de poner el botón justo debajo del anterior, y alineado con él, lo
mueves un poquito hacia la derecha, verás que queda como más desplazado [13].
Eso indica que cuando sueltes ese botón va a ser un subelemento del botón principal, que
será el que tiene justo encima y que está alineado a la izquierda del todo. Y ésto lo puedes
hacer tantas veces como quieras.
Fíjate en la siguiente imagen:
En este ejemplo, los servicios que «ofrezco» en el blog son 2: “Asesoría WordPress” y
“Servicio Crear Blog”. Entonces, quiero que al pasar el cursor sobre el botón servicios del
menú se despliegue un submenú con esos dos servicios.
Para ello, los botones tendrán que quedar ordenados como en la imagen anterior, donde los
2 servicios [14] están un poco más desplazados a la derecha, y están justo debajo del botón
principal, que es el de “Servicios”.
Y así es cómo se verá en el blog al pasar el cursor por encima [15] (acuérdate siempre
de darle al botón azul de “Guardar Menú” para que los cambios se hagan efectivos):

Todo ésto se ve bastante mejor en el vídeo que te he dejado al empezar el post, la verdad,
así que si aún no lo has visto te animo a que le eches un vistazo. Pero bueno, aún así creo
que me ha quedado bastante bien explicado
Si me permites un consejo, aunque el botón servicios se convierta en un desplegable al
pasar el cursor por encima, haz que también sea una página, ya que muchos harán clic
Cómo editar y eliminar botones del menú
Para editar o eliminar un botón, desde la pantalla de “Estructura del menú” en la que
estamos trabajando tienes que hacer clic en la flechita pequeña que sale a la derecha de
cada botón [16], y se abrirá un desplegable con más opciones.
Si el botón es un enlace personalizado tienes la opción de cambiar la url poniendo otra
nueva [17].
Luego, y ésto ya es común para todos los botones, en “Etiqueta de navegación” [18]
puedes elegir el texto que quieres que contenga cada botón.
Ya ves que los botones en WordPress son bastante personalizables.
Una vez hechos todos los cambios no te olvides de darle al botón azul de “Guardar
menú”.
Y si lo que quieres es eliminar un botón del menú haz clic donde pone “Eliminar” [19].
Cómo crear y gestionar múltiples menús de navegación

Cuando ya tienes creado un menú, para crear otro (por ejemplo un menú secundario) tienes
que ir a donde pone “Edita tu menú abajo o crea uno nuevo” y hacer clic donde pone
“Crea uno nuevo” [20].
Y automáticamente volveremos al principio, donde te pedirá que le pongas nombre al
nuevo menú [21].
Luego haz clic en el botón azul de crear menú [22] y ya, al igual que antes, desde la
columna de la izquierda solo tendrás que añadir los botones que quieres que tenga, elegir
su orden (y si quieres añadir menús desplegables), elegir su posición en donde pone
“ubicación del tema”. Finalmente, dale al botón azul de guardar menú.
Vamos, todo lo que hemos visto a lo largo de este tutorial.

Una vez que tienes varios menús creados, para modificar uno u otro tienes que ir a donde
pone “Elige el menú que quieras editar” [23], elegirlo en el desplegable, y luego hacer
clic en el botón “Elegir” [24].
Y si quieres eliminar un menú entero que has creado pero que no quieres usar, solo tienes
que seleccionar el menú tal y como te acabo de explicar, y abajo del todo verás un botón
que pone “Borrar menú” [25].
Te saldrá un mensaje de confirmación, haces clic en “Aceptar” y listo
Gestionar los lugares del menú
Por último, cuando tienes varios menús, si te vas a la pestaña “Gestionar lugares” [26]
desde ahí podrás elegir la ubicación de cada menú haciendo clic en el desplegable que tiene
a su lado [27], seleccionando la ubicación y haciendo clic en “Guardar cambios” [28].

Pero bueno, no me voy a entretener más en ésto porque la ubicación de los menús también
se puede elegir desde la “Ubicación del tema” [29] en la pantalla de editar menús [30],
tal y como hemos visto antes y a lo largo de todo este tutorial.

Semana 5 y 6
3. Menús de navegación.
Los distintos tipos de navegación que se han descrito en el apartado anterior
(exceptuando la navegación ad hoc) pueden representarse de diferentes formas,
pero lo más habitual es encontrar bloques compactos de enlaces ubicados en la
misma posición, permitiendo a los usuarios usarlos reiteradamente para poder
desplazarse por las distintas páginas de un sitio Web.
Así pues, podemos definir estos vínculos, que están presentes en todas las
páginas de una Web de manera fija y que dan acceso a otras áreas de
información del mismo sitio, como menús de navegación.
Estos menús de navegación constituyen una pieza fundamental para el éxito de
un sitio Web ya que de ellos depende que el usuario pueda desplazarse
adecuadamente por las distintas páginas y sea capaz de encontrar la información
que le interesa, que en definitiva es una de las principales causas por las que los
usuarios deciden visitar un sitio Web.
3.1 Tipos de menús. Definición y características.
Casi todos los menús de navegación se pueden catalogar en dos tipos
diferentes: Barras de navegación y Menús desplegables. Pero en
cualquier caso, siempre cumplen estas dos condiciones:
• Su comportamiento es igual al de un simple enlace que será
utilizado para acceder a otro punto de la información dentro
de la estructura del sitio Web.
• Siempre están agrupados en una determinada zona de la
pantalla, que se suele repetir a lo largo de todo el site y se
presentan al usuario como un bloque unitario.
Barras de navegación
Las barras de navegación son probablemente uno de los sistemas de
navegación más utilizados en la actualidad y pueden consistir sólo en un
conjunto de enlaces de texto como estar formados por elaboradas
imágenes con sofisticados efectos que realizan las funciones de vínculos.

Por ejemplo, en la siguiente imagen correspondiente a la página Web de
la Ciudad de Barcelona (www.bcn.es/castella/laciutat/barcelona),
podemos encontrar tres claros ejemplos de barras de navegación en
formato textual. En primer lugar, un sistema de navegación local
implementado por una barra de navegación vertical (1) y en segundo
lugar dos sistemas de navegación globales implementados por dos barras
de navegación verticales (2).
2
1 2
Ilustración 14: Sitio Web de la Ciudad de Barcelona
Aunque la tendencia actual es eliminar estos enlaces textuales y
sustituirlos por elaborados sistemas gráficos, los enlaces de texto son el
método más versátil de vincular páginas. De los cuales podemos destacar
los siguientes aspectos:
• Las barras de navegación textuales son lo primero que el
usuario percibe como vínculo, dado que el texto es la primera
información que se visualiza debido a la velocidad de
transferencia de datos.
• Por otro lado, si el diseñador mantiene el uso de enlaces de
color azul y subrayados, permite al usuario localizar
rápidamente dónde se encuentran los recursos de navegación
de la página.
• Permiten ser generados directamente desde contenido de
bases de datos, como por ejemplo los resultados de un
buscador.

Por otro lado, tenemos las barras de navegación en formato gráfico, como
por ejemplo el que se muestra en la siguiente ilustración correspondiente
a la Web corporativa del Grupo Caprabo (www.caprabo.es) en la que se
puede observar en la parte superior de la pantalla un típico caso de barra
de navegación gráfica.
Ilustración 15: Sitio Web del Grupo Caprabo
Estas barras de navegación dotan a los diseñadores de un gran número de
posibilidades ya que pueden presentarse en forma de botones, imágenes,
iconos, etc. Cualquier imagen puede convertirse en un enlace, dando total
libertad a los diseñadores para mejorar espectacularmente los diseños de
las páginas Web.
A continuación se destacan las características más relevantes de las
barras graficas de navegación:
• El formato y el tamaño de las imágenes debe ser el apropiado
ya que si no se pueden provocar esperas demasiado largas en
los tiempos de transmisión de datos.
• Puede suceder que las imágenes no sean suficientemente
representativas, provocando que el usuario no pueda
relacionar la imagen con la información asociada.
• Los enlaces pueden pasar desapercibidos como meros
elementos de diseño, sobre todos en aquellos sitios Web
donde el diseño grafico es abusivo.

Sobre el tema del tamaño de las imágenes y su tiempo de descarga, existe
actualmente la incipiente tendencia de no confeccionar las barras de
navegación gráficas con diversas imágenes, sino confeccionarlas a partir
de una sola imagen que en realidad se convierte en un mapa de
navegación. Este sistema produce que la navegación sea más rápida
debido a que las imágenes agrupadas se descargan con mayor rapidez, al
no ser necesarias tantas peticiones al servidor.
Existe una combinación entres las barras de navegación textuales y las
barras de navegación gráficas ampliamente aceptada y utilizada,
consistente en un híbrido entre estos dos sistemas. Se trata de utilizar
imágenes o iconos acompañadas de pequeños rótulos de texto que
ayudan a corregir algunas de las debilidades de las barras de navegación
gráficas.
En la siguiente ilustración, podemos observar el sitio Web de La Caixa
de Catalunya (www.caixacat.es), donde se observa una barra de
navegación con pequeños iconos acompañados de un texto descriptivo.
Ilustración 16: Sitio Web de La Caixa de Catalunya
Independientemente de que las barras de navegación sean textuales,
gráficas o híbridas hay un aspecto esencial en el uso de estos sistemas.
Indiscutiblemente las barras de navegación permiten que los usuarios
puedan generarse mentalmente la estructura del sitio Web y obtener una
idea de cuales son los contenidos que podrán encontrar.
Este hecho es de vital importancia para los diseñadores que ven las barras
de navegación no sólo como simples agrupaciones de enlaces, sino como
herramientas que les van a permitir transmitir a los usuarios la estructura
y las piezas claves del site en cuanto a contenidos se refiere.

Así pues, los principales formatos que podemos encontrar dentro de las
barras de navegación son:
• Listas de opciones.
• Breadcrumbs.
• Barras de imágenes.
• Sistemas de pestañas.
Menús desplegables
Existen versiones más sofisticadas de las barras de navegación, con
elementos desplegables, árboles de carpetas y opciones que se expanden
y se contraen como si se tratara de menús de programas. Estos sistemas
son los que se conocen con el nombre de menús desplegables.
En estos menús se han ido imponiendo a medida que han ido avanzando
las tecnologías de programación para páginas Web, como los lenguajes
de programación Java, Javascript, HTML dinámico, etc. ya que es
necesario implementarlos en alguno de estos lenguajes. Estos lenguajes
de programación permiten interactuar con el navegador de manera
dinámica, proporcionando a las páginas Web mayor potencia y
flexibilidad.
Los menús desplegables presentan a los usuarios muchas opciones de
navegación de un modo compacto. Lo que en principio parece un simple
menú se desplega bajo petición del usuario para mostrar una ampliación
del menú inicial con submenús. Estos menús dan al diseñador la
posibilidad de compactar muchas opciones bajo simples rótulos o títulos
en una página, por lo que ocultan ciertos contenidos y obligan al usuario
a actuar antes de que pueda visualizar dichas opciones.
En las siguientes ilustraciones se puede observar el sitio Web de la
Generalitat de Catalunya (www.gencat.es), un claro ejemplo de menú
desplegable implementando un sistema de navegación jerárquico.
Ilustración 17: Sistema de menú desplegable. Ilustración 18: Submenú
desplegado.

Al igual que las barras de navegación, los menús desplegables presentan
las mismas características en cuanto al uso de texto e imágenes. Todo lo
descrito en al apartado anterior es aplicable a los menús desplegables. La
tendencia mayoritaria de estos menús es que sean de tipo texto o sistemas
híbridos que combinan textos con iconos, ya que en pocas ocasiones se
encuentra este tipo de sistemas implementados exclusivamente de
manera gráfica.
Los principales formatos que podemos encontrar dentro de los menús
desplegables son:
• Menús desplegables.
• Listas expandibles.
• Menús pop-up.
• Menús pop-up interactuantes.
3.2 Implementación de los menús. El formato.
Si bien es cierto que todos los sistemas de navegación se pueden
clasificar en uno de los dos sistemas descritos en el apartado anterior
(barras de menús y menús desplegables) pueden presentarse en las
páginas Web implementados en un sinfín de formas y estructuras
diferentes.
Aparecen así los elementos de interface con los que el usuario final
interactúa: listas de opciones, barras de imágenes, sistemas de pestañas,
menús desplegables, listas expandibles y los breadcrumbs.
Además de existir innumerables combinaciones de los principales
sistemas enumerados, estos diseños siguen evolucionando a medida que
avanzan las técnicas de programación y los sistemas de diseño gráficos,
provocando nuevas interfaces de navegación.
Listas de opciones
Esta implementación es la más básica y simple y la que primero se utilizó
en las páginas Web. No consiste más que en una barra de navegación en
la que se agrupan una serie de vínculos en una posición concreta de la
pantalla y se muestran como una simple lista unitaria de opciones, entre
las cuales el usuario puede seleccionar la que más le interese.

Ilustración 19: Lista de opciones en Google.
En la ilustración anterior se puede observar una lista textual de opciones
en Google (www.google.com) donde se ha respetado el color azul y
subrayado para los enlaces no visitados.
Como se ha mencionado anteriormente, el uso de estos enlaces textuales
conlleva unos indiscutibles beneficios en cuanto a velocidad de
transmisión de datos. Si además se respeta el uso de los colores y
tipografía por defecto, tenemos un simple pero eficaz sistema de
navegación.
Es evidente que aunque la tipografía es un punto esencial en cualquiera
de los sistemas de navegación, en este tipo concreto es crucial ya que en
este caso no hay ningún otro elemento que pueda subsanar el gravísimo
error de una mala elección en la tipografía, el tamaño o el color.
Existe una evolución de este tipo de menús, que consiste en provocar un
efecto sobre el texto cuando el usuario interactúa con una determinada
opción (coloca el curso sobre la opción, clica sobre la opción, etc.)
Ilustración 20: Lista de
opciones en
Portalmi
x.
Cursor sobre la opción Viajes.
En la imagen anterior se puede observar el comportamiento de la lista de
opciones del Portal de ocio Portalmix (www.portalmix.es) donde el
fondo de la lista cambia de color cuando el usuario pone el cursor sobre
una de las opciones.
Esta técnica es ampliamente utilizada por los diseñadores, ya que les
permite definir un diseño específico para la opción del menú
seleccionada y se ha convertido en un método de refuerzo a la hora de
presentar los elementos que se pueden clicar. De esta manera se facilita al
usuario la identificación de los enlaces dentro de la página Web y se
aumenta la navegabilidad del sistema.

Existe una variante de estas listas de opciones que es interesante
mencionar no por su diseño sino por la función que desempeñan dentro
de la página y por ser práctica habitual en el diseño Web.
Consiste en las denominadas listas de opciones a pie de página que, como
su nombre indica, se ubican siempre como pie de página cerrando los
contenidos de las páginas Web
En estas listas de opciones a pie de página es una regla generalizada
poner información referente a la empresa, enlaces de contacto, ubicación
de la empresa, aspectos legales, política de privacidad, ayuda y en
general todo tipo de información de carácter global.
Aunque son enlaces poco utilizados por los usuarios, ofrecen una imagen
de seriedad y realizan la función de cierre de los contenidos de las
páginas.
Ilustración 21: Lista de opciones a pie de página en www.wanadoo.es
Los breadcrumbs
El conjunto de enlaces que forman un sistema de navegación de
breadcrumbs cambia en cada página en función de la ubicación de esta
dentro de la estructura. Es decir, estos enlaces cambian en cada página
mostrando el camino que el usuario ha seguido desde la página de inicio
hasta el punto actual, como si el usuario hubiera ido dejando migas de
pan para localizar su posición dentro de la estructura.

Por consiguiente se considera que los breadcrumbs, más que un sistema
de navegación, son un sistema de posicionamiento, ya que indican al
usuario dónde está dentro de la jerarquía de contenidos del sitio Web.
Ilustración 22: Página Web del Forum de las Culturas
En la imagen anterior se puede observar el encabezado de la página Web
del Forum de las Culturas de Barcelona 2004 (www.barcelona2004.org).
Una primera barra de menús desplegables implementando una
navegación global, a continuación se observa una navegación mediante
breadcrumbs que nos indican la situación de la página actual, en el
ejemplo:
Eventos > Exposiciones > Guerreros de Xi’an > Presentación
Este tipo de menús siempre presenta el mismo formato; rótulos de textos
correspondientes a los títulos de las páginas visitadas separadas por algún
elemento que en la mayoría de casos se representa mediante el símbolo
“>”:
Portada > Página 1 > Página 2 > Página 3 > Página actual.
Una de las principales características de estos menús estriba en el hecho
de que suponen una solución sencilla y que ocupa muy poco espacio en
pantalla, en comparación con el resto de menús de navegación fijos que
pretenden mostrar los contenidos del sitio Web.

Barras de imágenes
Con la evolución de las tecnologías en desarrollo de páginas Web y los
diseños gráficos aparecen las listas de opciones compuestas por
imágenes. Estas Barras de imágenes no son más que una evolución de las
listas de opciones y por consiguiente se basan en los mismos principios.
Ilustración 23: Barra de imágenes en Televisió de Catalunya.
En la ilustración anterior se puede visualizar el sistema de navegación
global implementado mediante una barra de imágenes en el sitio Web de
Televisió de Catalunya (www.tvcatalunya.com).
Este sistema tiene mayor potencial, al poder ofrecer mayor variedad de
formas que el simple texto del formato HTML. Evidentemente permite
presentar los enlaces en forma de imágenes, logotipos (como el caso de la
anterior ilustración) , botones, gráficos, iconos, etc. Cualquier archivo en
formato JPG o GIF puede convertirse en un enlace y por consiguiente
formar parte de una barra de imágenes.
Evidentemente no todos las imágenes son tan representativas como el
ejemplo de la ilustración anterior y por consiguiente en ocasiones se hace
necesario reforzar estos vínculos gráficos con textos que ayuden a la
compresión de los enlaces.
Ilustración 24: Barra de imágenes híbrida (texto e imágenes) en Portalmix.
Al igual que en las listas de opciones, otra de las variantes de este sistema
consiste en generar efectos dinámicos cuando el usuario interactúa con
las opciones. Existe una interesante variante que consiste en una barra de
imágenes que solo se ve reforzada con rótulo de texto cuando el usuario
se interesa por alguna de las opciones.
Ilustración 25: Efectos dinámicos en Televisó de Catalunya.
En el ejemplo anterior se puede apreciar el efecto dinámico que provoca
la aparición de un pequeño texto descriptivo de cada enlace cuando el
usuario coloca el cursor sobre cada una de las imágenes que componen la
barra de navegación.

Un último estilo de barra de imágenes que merecen una especial atención
son las formadas por los elementos de tipo botón.
Los botones son elementos a través de los cuales los usuarios interactúan
con las máquinas en sus vidas cotidianas y por consiguiente no es de
extrañar que los diseñadores crearan una metáfora, es decir, la imitación
de un elemento de la realidad física en las aplicaciones informáticas para
aprovechar este hecho.
Esta metáfora también llegó a Internet y estos botones aparecieron
rápidamente, tanto representando enlaces como en formularios dentro de
las páginas Web.
Estas botoneras de navegación no dejan de ser más que barras de
imágenes en las cuales los iconos o imágenes han sido sustituidos por
pequeñas representaciones de botones acompañados de un texto
descriptivo que reforzará la idea de acción-causa (comprar, buscar, ir a,
etc).
Por otro lado, también se pueden aplicar efectos dinámicos sobre este
tipo de barras de navegación y provocar el efecto de botón pulsado con la
intención de realzar y enfatizar la metáfora.
Sistemas de pestañas
Al igual que las barras de botones, las pestañas fueron creadas para
aprovechar un hecho real de la vida cotidiana. Estos sistemas intentan
imitar las pestañas de los archivadores, que permiten a los usuarios
localizar información categorizada en un archivador.
Perece ser que la primera página Web en utilizar este sistema fue
Amazon (www.amazon.com) que con este sistema consigue una clara y
eficaz distribución de sus productos y permite a sus clientes localizarlos
rápidamente.
Ilustración 26: Sistemas de pestañas en Amazon.
Estos sistemas de pestañas no son más que barras de navegación que
permiten implementar sistemas de navegación globales.

Tal y como Eduardo Manchón especifica en el artículo “Pestañas en
diseño Web, cuándo y cómo usarlas”1
hay una serie de características
fundamentales en este tipo de sistemas que conviene remarcar.
Fundamentalmente son:
• La categorización de una sección dentro de una pestaña la
excluye de cualquiera de las otras pestaña.
• No existe conexión directa entre varias pestañas. La única
manera de pasar de una pestaña a otra (de una sección a otra)
es cliclando sobre la pestaña de destino.
• Una de las piezas claves para el correcto funcionamiento de
este tipo de sistema, estriba en el etiquetaje de las pestañas.
• Permite a los usuarios generarse una clara y rápida idea de los
diferentes contenidos que va a encontrar en el site.
Algunos sitios Web que utilizan este sistema han creado una doble
categorización en un segundo nivel. Por lo general, este segundo nivel se
muestra en la parte inmediatamente inferior a la navegación principal y
solo se ve aquel relacionado con la pestaña activa.
Ilustración 27: Sistema de pestañas en Apple.
Como se puede observar en la ilustración anterior, en el sitio Web de
Apple (www.apple.es) existe un sistema de navegación en pestañas con
segundo nivel lo que permite a los diseñadores crear una doble
categorización: la primera identifica claramente las secciones por
pestañas y la segunda se oculta en un segundo nivel.
Menús desplegables
Tal y como se ha descrito en este mismo capítulo, los menús desplegables
son utilizados para proporcionar diferentes opciones, agrupadas en una
lista y que en un principio están ocultas al usuario. Sólo se mostrarán bajo
petición, normalmente cuando el internauta pasa el cursor o clica sobre el
título que agrupa dicha lista de opciones.
Las implementaciones más utilizadas de los menús desplegables son
principalmente tres:
1
Ainda.info: Usabilidad, diseño Web fácil
de usar. Pestañas en diseño Web, cuándo y
cómo usarlas.
[http://www.ainda.info/pestanas.html,
Marzo 2004].

• Los menús desplegables:
Ilustración 28.
Menú desplegable en La Generalitat de Catalunya
(www.gencat.es). En este tipo de menús el usuario accede al
conjunto de opciones agrupadas bajo cada título cuando pone
el cursor encima.
• Las listas expandibles:
Ilustración 29.
Lista expandible en la Web corporativa del Grupo Caprabo
(www.caprabo.es). En este tipo de menús los submenús se
expanden o se contaren cuando el usuario realiza un clic sobre
una de las opciones.
• Los menús pop-up:
Ilustración 30.
Menús pop-up en Terra (www.terra.es). En este tipo de
menús los submenús también se expanden y se contraen
cuando el usuario interactúa con ellos. Utilizan un elemento
de formulario para su implementación.

Una variante de estos menús es la denominada Menús pop-up
interactuantes, en donde las opciones en un menú cambian
cuando los usuarios seleccionan algo en otro menú de la
misma página.
Ilustración 31.
En la ilustración anterior se puede observar el sistema de
menús pop-up interactuantes de tres niveles de Capraboacasa
(www.capraboacasa.com), que nos permite seleccionar las
diferentes secciones, las familias dentro de las secciones y las
subfamilias de cada uno de los productos.

Análisis de sistemas de navegación de sitios Web
Los menús en los distintos tipos de sitios Web
Semana 7 y 8
4. Los menús en los distintos tipos de sitios Web.
Internet cuenta con cientos de millones de sitios Web y crece anualmente a un
ritmo que difícilmente permite predecir que ocurrirá en un futuro. En esta
vorágine de información es difícil catalogar las diferentes páginas Web en
función de su contenido, el perfil de su audiencia, el tipo de estructura, etc. y
más difícil todavía especificar qué sistemas de navegación se implementan en
cada una de estas categorías.
En este apartado se van a describir los tipos de menú más característicos que se
utilizan en los diferentes sitios Web en función de:
• Estructura del sitio Web.
• Tipo de contenido.
• Volumen de información.
• Perfil del usuario.
4.1 Estructura de la información
La estructura de la información de un sitio Web es una de las piezas
fundamentales en la navegabilidad ya que influirá directamente en la
forma en que los usuarios acceden a la información.
Según Adrián Coutin en “Arquitectura de la información para sitos
Web”1
existen tres tipos de estructuras de información que no son
excluyentes y son:
• Estructura jerárquica:
Las estructuras jerárquicas son aquellas que agrupan la información
en subsecciones que están subordinadas a una sección “madre”. A su
vez, estás subsecciones pueden contener otras subsecciones.
Así pues, la información se divide en bloques que son divididos en
subbloques y así sucesivamente. Estas subsecciones descendentes son
excluyentes y al ubicar un bloque en una sección queda excluido de
estar en cualquier otra de las secciones “hermanas”.
1
Libro: Coutin, A. Arquitectura de la información para sitos Web. Madrid, Ed. Ediciones
Anaya
Multimedia (Grupo Anaya S.A.), 2002.

Ilustración 32: Estructura jerárquica
Este tipo de estructura es fácilmente comprensible por los usuarios,
ya que las estructuras jerarquizadas se utilizan ampliamente en la vida
cotidiana, lo que permite que los usuarios pueden generarse una
estructura mental del sitio donde se encuentran y de su posición
actual dentro de la estructura.
Debido a las características de estas estructuras, los menús de
navegación que mejor se adaptan son los sistemas de pestañas de
varios niveles (por ejemplo, un sistema de pestañas como el utilizado
en Amazon.com o Fnac.es o un sistema de pestañas con doble nivel
como el utilizado en la página de Apple.es). Tal y como se comentó
en el apartado anterior, infinidad de páginas Web implementan estos
sistemas, especialmente sitios dedicados al comercio electrónico.
Los sistemas de menús desplegables también son ampliamente
utilizados en este tipo de estructuras: menús desplegables de varios
niveles, listas expandibles y finalmente los sistemas de menús pop-up
interactuantes.
Todos ellos respetan una de las características principales de las
estructuras jerárquicas: presentan en un primer nivel las áreas de
contenido más generales y relevantes y esconden las subdivisiones de
estas áreas principales, que se irán presentando al usuario en
sucesivas subdivisiones bajo petición de éste.
Normalmente, cuando la estructura jerárquica es muy profunda se
suele acompañar la navegación principal con algún tipo de sistema de
posicionamiento, como los breadcrumbs, para ubicar al usuario
dentro de la estructura general.
• Estructura de hipertexto:
Este tipo de estructura consiste en organizar la información de una
manera no lineal, es decir los bloques de información pueden estar
enlazados utilizando cualquier tipo de asociación, ya sea jerárquica o
no.

Ilustración 33: Estructura secuencial versus estructura de hipertexto
Por consiguiente, estos sistemas proporcionan gran flexibilidad ya
que permite establecer relaciones entre cualquiera de los elementos y
áreas de información.
Si el modelo jerárquico era un sistema fácilmente entendible por los
usuarios, ahora nos encontramos en el lado opuesto ya que la
estructura de hipertexto plantea una complejidad conceptual que
pueden confundir al usuario. El usuario puede sentirse perdido al no
ser capaz de generar un modelo mental de la organización del sitio y
al no poder encontrar la información que realmente le interesa.
Por este motivo, estas estructuras de la información suelen utilizarse
como complemento a otro tipo de estructuras.
Los sistemas de navegación que mejor implementan este tipo de
estructura son los sistemas de navegación ad hoc, que relacionan
palabras, expresiones o frases con contenidos que amplían la
información proporcionada por el autor.
Estas palabras, expresiones o frases suelen ser vínculos incrustados
en el propio texto y por consiguiente no podemos tratarlos como
menús de navegación.
El único sistema de menús de navegación que de alguna manera se
podría ajustar a este tipo de estructura de la información serían las
listas de opciones o las barras de imágenes. Estas podrían ser
diferentes en cada uno de los bloques de información y, de esta
manera, cada nodo de información tendría sus propios enlaces
personalizados.
• Estructura relacional base de datos:
Las bases de datos son herramientas muy potentes para organizar y
manipular la información. Por este motivo, el uso de bases de datos
como estructuras de la información para sitios Web, permite
organizar los bloques de información de un determinado site de una
manera eficaz y permite recuperar la información desde diferentes
niveles y en diferentes formatos.

Las aplicaciones de las estructuras relacionales de bases de datos en
páginas Web son principalmente dos.
En primer lugar, son utilizadas para facilitar la búsqueda de
contenidos entre los distintos bloques de información que conforman
el sitio Web.
En segundo lugar, son utilizadas para confeccionar sitios Web
dinámicos y personalizados, donde los contenidos que provienen de
una base de datos pueden variar en función del usuario que los
visualiza, la plataforma u otras variables externas.
Los menús de navegación de este tipo de estructura también pueden
ser generados dinámicamente. Mediante sistemas de programación se
pueden generar listas de opciones y algunos tipos de sistemas de
pestañas y menús desplegables cuyos elementos provienen
directamente de una base de datos.
Así pues, cualquier menú de navegación se puede obtener a partir de
un sistema de bases de datos con mayor o menor dificultad.

Semana 9 y 10
4.2 Tipo de contenido
Los sitios Web se pueden clasificar, en función de sus contenidos, en los
siguientes tipos:
• Personales:
Son un medio de expresión de su creador o creadores, cuyo propósito
suele ser difundir información personal o recopilada por los autores
del sitio Web.
Sus contenidos y audiencia pueden ser de los más variopinto, desde
colecciones de fotografías familiares a estudios universitarios
pasando por páginas con información personal, laboral y por supuesto
todo tipo de hobbis y aficiones.
Por regla general, este tipo de páginas suele tener una estructura y
diseño bastante caótico. Aunque se pueden encontrar páginas
personales cuidadas, con una estructura bien definida y un diseño
elaborado, lo normal es que estas páginas hayan ido creciendo
desordenadamente sin ningún tipo de criterio y donde en muchos
casos el diseño ahoga los contenidos.

Es difícil determinar el tipo de menús de navegación que utilizan
estas páginas, debido al amplio sector de internatutas que cada día se
lanza a confeccionar sus propias páginas Web, pero lo más corriente
es encontrar Listas de opciones y Barras de imágenes ya que estos
dos tipos de menús son los más fáciles de implementar. Unos básicos
conocimientos de HTML permiten a los usuarios confeccionar los
sistemas de navegación de sus sites.
Ilustración 34: Barra de botones en una Web personal.
Tal y como se ve en la ilustración anterior, un recurso gráfico muy
utilizado en este tipo de site consiste en la implementación de barras
de navegación mediante botones.
• Corporativos:
Están pensados para promocionar los negocios de una empresa. Su
finalidad es puramente comercial y su audiencia puede estar formada
por clientes, inversores, empleados, empresas de la competencia,
medios de comunicación, etc.
En este tipo de sitios Web podemos encontrar, básicamente, los
siguientes subapartados: “Quiénes somos”, “La historia de la
empresa”, “Los productos” y “Contacte con nosotros”.
La sección de productos es una de las piezas fundamentales en este
tipo de páginas Web y se desarrolla con la finalidad de que los
potenciales clientes encuentren toda la información sobre los mismos.
Enfatizan las ventajas y características de un producto o marca y
suelen incluir todo tipo de información técnica, precios,
distribuidores, etc.
No suelen ser sitios de comercio electrónico, ya que no buscan una
relación comercial a través de Internet. Solo pretenden utilizar la red
como un canal más para dar a conocer sus productos y servicios.
Las empresas intentan alinear la entidad corporativa con el diseño de
las páginas Web y por consiguiente suelen invertir gran cantidad de
recursos para confeccionar sus sedes en Internet (lo que provoca que
este tipo de páginas sean tecnológicamente avanzadas, con diseños
gráficos y multimedia muy elaborados y con información muy
detallada y organizada).

Debido a la gran variedad de empresas, servicios y productos, es
difícil determinar el tipo de menús que utilizan estas páginas para
implementar los sistemas de navegación. Lo más frecuente, igual que
en los sitios Web personales, es encontrar Listas de opciones y Barras
de imágenes y por la gran cantidad de recursos que las empresas
invierten en este medio, es común encontrar todo tipo de elaborados y
avanzados menús desplegables.
Ilustración 35: Menú desplegable en el site corporativo de Lexmark
(www.lexmark.es)
Cuando los contenidos son muy amplios es normal en este tipo de
sitios encontrar implementado un sistema de navegación de
Breadcrumbs o migas de pan para informar al usuario de la su
posición dentro del site.
• Institucionales:
Son una variante del Web corporativo pero en este caso el titular del
site será una institución publica o privada en lugar de una empresa.
La información que presentan depende de los objetivos de la
organización pero lo más común es que pretendan darse a conocer al
público en general. Suele ser muy parecida a la información que
presentan los Sites corporativos, pero eliminado el subapartado de
productos, añadiendo la sección “Qué hacemos” y fortaleciendo la
sección “Contacte con nosotros”.
Algunas Web institucionales públicas empiezan a adaptar sus sedes
en Internet para que los ciudadanos pueden realizar trámites
administrativos on-line. Con la aparición de las técnicas de
programación seguras a través de Internet, cada vez son más las
entidades que presentan sistemas transacionales remotos a través del
navegador.
Las características de los sistemas de navegación implementados en
este tipo de site son idénticas a las Web corporativas, todo está en
función de los medios y de los recursos de la organización, si es
pública o privada y de qué tipo de servicios presta a través de
Internet.

Ilustración 36: Lista de opciones en el Parlament de Catalunya
(www.parlament- cat.net)
• Contenido y entretenimiento:
El valor de estos sitios es la información que proporcionan,
actualizada de manera permanente en tiempo real, cómo por ejemplo
noticias, estado del tiempo, cotizaciones en bolsa, etc.
Claros ejemplos de este tipo de sitios son las páginas de los
periódicos, los portales de entretenimiento, de contenidos,
financieros, etc.
Como su principal objetivo es distribuir información, la audiencia de
este tipo de sitios depende en gran medida del tipo de información
que distribuyen.
Normalmente son sitios con una finalidad económica, propiamente
derivada de la información que ofrecen o comercializan. Intentan
fidelizar a los usuarios, además de con la propia información,
mediante sofisticados diseños y sorprendentes experiencias
multimedia.
Por este motivo, los sistemas de navegación son los más complejos,
elaborados y evolucionados de todos los sites Web. Podemos
encontrar cualquier tipo de menú, cualquier tipo de recurso grafico o
multimedia y mayoritariamente están implementadas con efectos
dinámicos para sorprender al usuario.
Normalmente, cuando los contenidos son muy amplios, es normal
encontrar Breadcrumbs de apoyo al sistema de navegación principal.
Ilustración 37: Sofisticado menú de navegación en el portal
multimedia de Amena
(www.amena.com/mms)
• Comercio electrónico:
Los sitios Web de comercio electrónico se centran en vender
productos de manera on-line a través de Internet, los cuales se pueden
pagar mediante tarjeta de crédito o cualquier otro medio de pago.

La evolución de los sistemas de pago seguros en Internet ha
provocado un tímido despegue del comercio electrónico, ya que cada
vez son más los usuarios que provocados por la comodidad y la
facilidad se deciden a comprar a través de las páginas Web.
La cantidad de productos que podemos comprar a través de Internet
es infinita, desde un simple libro o CD de música hasta una parcela
de terreno en la Luna. Cualquier cosa se puede vender o comprar a
través de la red.
La mayoría de páginas Web de comercio electrónico utilizan sistemas
de navegación centrados en un proceso de compra simple e
inmediata. Las sedes Web de los comercios virtuales utilizan sistemas
enfocados a usuarios que tienen muy claro que es lo que quieren
comprar y por consiguiente navegan con un objetivo muy definido.
Tal y como afirma Jakob Nielsen en el artículo “The 3Cs of Critical
Web Use: Collect, Compare, Choose”2
, el 96% de los usuarios tienen
objetivos muy claros cuando navegan por este tipo de sedes.
Para conseguir estos sistemas de navegación simples y claros se
organizan los artículos e información en una estructura muy
jerarquizada conocida por los usuarios. Es decir, se utiliza una
categorización y un etiquetado que al usuario le son familiares, ya
que los conoce del mundo real.
Esto se consigue mediante los sistemas de navegación basados en
pestañas, listas expandibles, menús pop-up y menús pop-up
inetractuantes. Utilizando etiquetas en un lenguaje cercano al usuario
se fomenta la navegación intuitiva, que favorece la localización de los
productos.
Además, estos sistemas permiten agrupar gran cantidad de productos,
ya que son capaces de compactar gran cantidad de opciones en muy
poco espacio de la pantalla.
Ilustración 38: Sistema de menús pop-up interactuantes en Condisline
2
Useit.com: Jakob Nielsen's Website
The 3Cs of Critical Web Use: Collect, Compare, Choose
[http://www.useit.com/alertbox/20010415.html, Marzo 2004]

Tal y como se puede observar en la ilustración anterior, el menú pop-
up interactuante del supermercado virtual Condisline
(www.condisline.com) permite en un menú de tres niveles de ancho
catalogar los más de 5.000 productos que podemos encontrar en este
supermercado virtual, utilizando un etiquetado familiar al usuario (en
el ejemplo, Droguería – Insecticidas – Spray).
Por este motivo, este sistema se ha convertido prácticamente en un
estándar de navegación en los comercios electrónicos y muy
especialmente en aquellos donde se ha de catalogar gran cantidad de
productos, como es el caso de los supermercados virtuales.
Otro de los sistemas de navegación estándar ampliamente utilizado en
los sitios de comercio electrónico son los sistemas de pestañas. Este
sistema es otro de los sistemas ampliamente utilizado ya que, igual
que el anterior, nos permite catalogar gran cantidad de productos
fácilmente encontrables por los usuarios, debido al uso de un
etiquetaje familiar al cliente.
Si bien este tipo de sistema debe apoyarse en algún sistema de
navegación lateral (principalmente lateral izquierdo) para ampliar las
subsecciones de las categorías principales, que se encuentran
ubicadas en las pestañas superiores.
Ilustración 39: Sistema de pestañas en la web de Fnac
En la imagen anterior se puede observar un típico ejemplo de sistema
de pestañas reforzado con una barra lateral izquierda, mostrando las
subsecciones de la categoría seleccionada.

Este tipo de estructura ampliamente utilizado se conoce con el nombre
de diseño en forma de “L invertida”. Como ya se ha comentado, se
trata de una cabecera en la parte superior con un sistema de navegación
global, reforzado con un menú en una barra lateral izquierda.
Hasta la fecha, algunos estudios afirmaban que esta estructura intenta
aprovechar la forma de operar del cerebro humano: el hemisferio
izquierdo corresponde al lado racional capaz de controlar más fácilmente
textos y procesar información, mientras que el hemisferio derecho se
asocia con la visión y está más capacitado para procesar contenidos.
Las investigaciones llevadas a cabo en los últimos años por James
Kalbach y Tim Bosenick y reflejadas en el artículo “Web Page
Layout: A Comparison Between Left- and Right-justified Site
Navigation Menus”3
afirman que la facilidad de uso de la estructura
de “L-invertida” no se debe a la distribución de tareas entre los
hemisferios del cerebro humano, sino que concluye afirmando que el
cerebro del ser humano es ambidiestro y que la facilidad de uso de
esta estructura estriba en una convención aceptada por los
diseñadores y aprendida y asimilada por los usuarios.
Otra de la maneras de reforzar la navegación global en este tipo de
sistemas es mediante los breadcrumbs que permiten ubicar a los
usuarios dentro de las diferentes categorías tal y como se puede
apreciar en la siguiente ilustración.
Ilustración 40: Sistema de pestañas y Breadcrumbs en la Web de Fnac
Una características a tener en cuenta sobre este tipo de sitios Web es
que habitualmente utilizan otro tipo de sistema de navegación basado
en la navegación directa mediante herramientas de búsqueda.
Jakob Nielsen en el libro “Usabilidad: Diseño de sitios Web”4
afirma
que algo más de la mitad de los usuarios se decantan por la búsqueda
directa dentro de las sedes Web.
Estos sistemas directos de navegación también
se han convertido en un estándar que
implementan prácticamente la totalidad de
sitios Web de comercio electrónico, ya que
brindan al usuario la posibilidad de acceder
directamente a los productos de su interés.
Ilustración 41:
Buscador en
Elcorteingles.es
3
Artículo: Bosenick, T. Kalbach, J. Web Page Layout: A Comparison Between Left- and
Right-justified
Site Navigation Menus, 2003 - Journal of Digital Information, Volume 4 Issue 14
Libro: Nielse, J. Usabilidad. Diseño de sitios Web. Madrid, Ed. Pearson Educación S.A.,
2000.

Evidentemente, este tipo de sistema resta oportunidades de venta en
comparación con los sistemas de navegación descritos hasta el
momento ya que mediante las herramientas de búsqueda el usuario ya
no tiene la necesidad de ir desplazándose por las distintas categorías y
visualizando listas de productos, con lo que se reduce drásticamente
la denominada “compra impulsiva”.
Por último, un punto a destacar de las sedes de comercio electrónico,
aunque no es un elemento propio de la navegación, es otro de los
estándares que habitualmente implementan y consiste en la
utilización de la metáfora del carro de la compra para facilitar a los
usuarios el proceso de compra mediante una simbología que les sea
familiar.
4.3 Volumen de la información
En cuanto al volumen de información que podemos encontrar en las
páginas Web y que afecten directamente a los sistemas de navegación,
tenemos dos grandes categorías: páginas con poco volumen y que
normalmente no se actualizan con mucha frecuencia (por ejemplo,
páginas personales) y páginas con grandes volúmenes de información
que se actualizan con mayor frecuencia (por ejemplo, los portales de
entretenimiento y ocio).
Para los site con escasa información cualquier tipo de menú será válido,
pero se adaptan mejor las simples listas de opciones o barras de imágenes
con pocos elementos. Esto se debe a que desde uno de estos menús de
navegación podemos acceder rápidamente a cualquiera de las secciones
que componen el sitio Web.
En cambio, para los site donde los volúmenes de información son más
amplios una lista de opciones o una barra de imágenes no se adaptará
adecuadamente.
Recordemos que los sites con grandes volúmenes de información suelen
organizarse en estructuras jerárquicas. Tal y como se comentó en el
subapartado anterior, este tipo de páginas optan por menús de navegación
que permiten mostrar en un primer nivel las áreas de contenido más
generales y relevantes y esconder las subdivisiones de estas áreas
principales. Por consiguiente, los menús más utilizados serán todo tipo de
menús desplegables y los sistemas de pestañas de varios niveles.
Muchos sistemas con grandes volúmenes de información utilizan los
sistemas de navegación directos, que permiten acceder a la información
mediante búsquedas específicas.

Estos sistemas de navegación no se implementan mediante menús de
navegación, sino que lo hacen mediante índices que normalmente suelen
ser generados como resultado de peticiones a bases de datos.
4.4 Perfil del usuario
Otra de las piezas claves para determinar los sistemas y menús de
navegación es el perfil del usuario que visitará una determinada página
Web.
Es evidente que los diseños se enfocan de diferente manera en función de
la audiencia a quien se dirige el site. No tendrá la misma interface una
Web de entretenimiento y ocio dirigido a un público joven, que una
tienda on line de alimentación dirigida principalmente a un público
femenino.
Los menús de navegación también se deben adaptar a las características
de la audiencia: edad, nivel cultural, grado de uso de Internet, etc.
De todas las características que podemos citar, existe una especialmente
relevante para los menús de navegación: el grado de experiencia en el
uso de Internet, tanto a nivel profesional como a nivel personal.
Así pues, para usuarios menos avanzados y con niveles de utilización
más bajo de Internet serán preferibles las litas de opciones y barras de
imágenes, ya que permiten que el usuario identifique rápida y claramente
cuáles son las diferentes secciones a las que puede acceder y que se
genere una estructura mental de sitio Web.
Además, si los elementos de estos menús se acompañan de efectos
dinámicos que se activan cuando el usuario pasa el cursor sobre ellos, se
ayuda a la localización de los enlaces y las zonas de navegación.
Otro de los sistemas que ayuda a la navegación de estos usuarios son los
sistemas de navegación lineales, donde el diseñador establece el camino
más optimo para recorrer una estructura de la información y le da al
usuario un número muy reducido de posibilidades, que normalmente se
reducen a “Página siguiente”, “Página anterior” y “Índice de contenidos”.
Por otro lado, para este tipo de usuario son muy aconsejables la
utilización de metáforas, como las barras de imágenes en forma de
botones o sistemas de navegación de pestañas. Los usuarios saben como
funcionan estos elementos (botones y pestañas) en su vida cotidiana y por
consiguiente sabrán utilizarlos en la Web sin necesidad de ningún
aprendizaje previo.

En cambio, para este tipo de usuarios no son tan recomendables los
menús desplegables, ya sean menús desplegables como listas expandibles
o menús pop-up. Tal y como afirma Xavier Mestres en su artículo “El
usuario español en Internet: ¿no quiere o no puede?”5
el 52% de los
usuarios tiene dificultades en utilizar este tipo de menús.
Estos menús no permiten ver a simple vista cuales son todos los enlaces
que hay disponibles, lo cual puede llevar a confusión a los usuarios más
inexpertos. Esta ocultación parcial provoca que el usuario no sea capaz
de hacerse una composición del site ni del volumen de información a la
que puede acceder y por eso son más recomendables para usuarios con
un nivel más avanzado en el uso de Internet.
5
Propiedad intelectual
El usuario español en Internet: ¿no quiere o no puede?
[http://www.propiedadintelectual.info/opinan_los_medios/usuario_local_Internet_noQ
uiereONoPuede.ht m, Abril 2004]

La usabilidad en los menús de navegación
Semana 11 y 12
5. La usabilidad en los sistemas de navegación.
Debido al ingente volumen de información que se puede encontrar en Internet y
a la gran diversidad de fuentes disponibles sobre un mismo tema, los usuarios
han desarrollado un modelo de navegación que algunos autores denominan “La
navegación impaciente”.
Este sistema de navegación se basa en el hecho de que un usuario, cuando busca
información en la red, sabe que cuantos más sitios Web visite más posibilidades
tendrá de encontrar la información que busca, y por consiguiente, dedicará pocos
segundos a cada una de las páginas que se encuentra durante su búsqueda, con el
fin de “ojear” el mayor número de páginas posible.
Así pues, las páginas Web deben tener la capacidad de transmitir a los usuarios,
en pocos segundos, la sensación de que en ese site podrán encontrar de una
manera fácil y eficaz toda la información que necesitan.
En resumen, los usuarios quieren el mayor número de resultados en el menor
tiempo posible y de una manera fácil y eficaz. Los usuarios no están dispuestos a
perder su tiempo en el aprendizaje de sofisticados sistemas de navegación, o de
deslumbrantes pero complicados diseños, o de perder tiempo en la descarga de
un determinado plug-in para la correcta visualización de un site en concreto.
Por esta razón, existe la necesidad de crear diseños centrados en los usuarios
donde prime la sencillez y que permita a los internautas navegar con facilidad,
para optimizar al máximo los tiempos de búsqueda de información y de
navegación.
Este enfoque de diseño es lo que se conoce como “la facilidad de ser usado” o
usabilidad. Esta perspectiva es aplicable a cualquier elemento, herramienta,
dispositivo, etc. con el cual el hombre interactúa: desde pequeños dispositivos
electrónicos domésticos hasta sofisticados sistemas informáticos, pasando por
cualquier herramienta o utensilio de nuestra vida cotidiana.
5.1 La usabilidad en el entorno Web
La usabilidad para la Web surge a partir del uso masivo de Internet como
sistema de comunicación. El desarrollo de la tecnología permite la
aparición de sites más complejos y de diseños más sofisticados con
interfaces más difíciles de usar por los usuarios.

Aunque las páginas Web están basadas en principios relativamente
básicos como texto, enlaces, imágenes, tablas, etc., existen un sinfín de
aspectos que pueden convertir un sitio Web en un verdadero reto para un
usuario inexperto.
La usabilidad aporta un enfoque para la confección de entornos Web, de
tal manera que los diseños elaborados sean fáciles de usar y de aprender,
efectivos, eficaces y que cubran las expectativas tanto de los diseñadores
como de los futuros usuarios.
La usabilidad engloba una amplia gama de aspectos. Estos abarcan desde
los aspectos más puramente de diseño gráfico, como las tipografías,
colores e imágenes, a los aspectos más específicos, como el estilo
narrativo, la estructura de la información, los elementos que integran los
sistemas de navegación, etc. Principalmente podemos agrupar estos
aspectos en cuatro grandes bloques:
• La información: Podemos englobar en este apartado todos los
aspectos referentes a los sistemas de organización de la
información, que vendrán determinados por las características de
la misma y que serán decisivos para los sistemas de navegación
del sitio Web.
• La navegabilidad: Este apartado engloba todos los aspectos que
permitirán a los usuarios moverse a través de las diferentes
páginas del sitio. Este apartado está estrechamente relacionado
con la arquitectura de la información del sitio Web.
• El interface: Es uno de los elementos fundamentales, ya que es la
herramienta a través de la cual el usuario se comunica con el
sistema. Debe ser fácil de usar y de aprender, eficaz, cómodo y
agradable. En este apartado se englobaría los aspectos puramente
de diseño, como los colores, tipografía, imágenes, etc.
• Los lenguajes de programación: Engloba lo aspectos más
tecnológicos: lenguajes de enmaquetación y de programación
(htnl, dhtml, javascript, etc), formatos de diseño gráfico (flash,
formatos multimedia, etc.) y de manipulación de información
(recuperación de información de bases de datos, envío de
información mediante formularios, etc.).
La Organización Internacional para la Estandarización definió la
usabilidad como “el grado en el que un producto puede ser utilizado por
usuarios específicos para conseguir objetivos específicos con
efectividad, eficiencia y satisfacción en un determinado contexto de uso”
(ISO 9241-11).

Como se puede apreciar en el párrafo anterior, hay tres elementos claves
en esta definición: usuarios específicos, objetivos específicos y contexto
de uso. Es decir, la usabilidad de un sitio Web está en función del público
que ha de utilizarlo, del objetivo para el que fue creado y de la situación
en la que se utilizará.
En consecuencia, las posibles variables en estos tres elementos impiden
que existan una serie de reglas que se deban aplicar de manera estricta,
sino más bien un conjunto de principios básicos que los sitios Web
usables deben respetar. Así, deben ser:
• Fácilmente entendibles.
• Fáciles de aprender.
• Eficaces.
• Intuitivos.
• Rápidos.
• Libres de errores.
• Proporcionar satisfacción al usuario.
• Visualmente agradable.
• Flexibles.
5.2 La accesibilidad
Otra de las piezas claves de la usabilidad es la accesibilidad, que es
definida por W3C World Wide Web Consortium como la posibilidad del
acceso a la información por el mayor número de personas posibles sin
limitaciones por razones de deficiencia, discapacidad, minusvalía o
cualquier otra limitación derivada del contexto de uso.
Aunque las páginas Web están basadas en principios básicos, las
personas con discapacidades se encuentran con toda una serie de barreras
al utilizar Internet, impidiéndoles acceder a gran parte de la información
y servicios.
La accesibilidad no solo hace referencia al acceso de la información por
parte de personas con discapacidades, sino también a cualquier otro
colectivo que sin sufrir ningún tipo de deficiencia física o psíquica puede
encontrar problemas al utilizar los entornos Web, como por ejemplo,
personas de edad que pueden ver reducidas sus posibilidades de
utilización de los sitios Web por encontrar sistemas de navegación muy
complejos, estructuras de la información poco coherentes, etc. o
simplemente aspectos relacionados con el idioma o experiencia
informática.

Aunque en un principio se podría pensar que este tipo de problemas
afectan a un pequeño número de personas, según datos del Instituto
nacional de Estadística el porcentaje de ciudadanos españoles con algún
tipo de discapacidad es del 9% y según el informe “eEurope 2002:
Accesibilidad de los sitios Web públicos y de su contenido”1
más de 37
millones de ciudadanos europeos sufren algún tipo de discapacidad. En
Estados unidos, según datos del US Census, el porcentaje se dispara hasta
un 20% (que una persona de cada cinco tiene algún tipo de discapacidad).
Estos datos demuestran la necesidad de mejorar la accesibilidad mediante
el respeto de una serie de normas aplicadas en los procesos de creación
de los sitios Web. Además hay que tener en cuenta que es predecible que
estos porcentajes aumenten en las próximas décadas debido al progresivo
aumento de la longevidad de la población.
Estas normas de “buena conducta” de los creadores y diseñadores se
recogen en las “Pautas de accesibilidad al contenido en la Web 1.0”2
publicadas por la WAI del World Wide Consortium. También se
encuentra disponible una “Guía de referencia rápida”3
con diez
recomendaciones sobre la accesibilidad aplicables al diseño de sitios
Web publicadas por la misma organización:
1. Imágenes y animaciones: Use texto alternativo (atributo alt)
para describir la función de los elementos visuales.
2. Mapas de imagen: Use mapas de cliente y texto alternativo para
las zonas activas.
3. Multimedia: Facilite subtítulos y transcripción de los ficheros de
sonido, descripción de los vídeos y versiones accesibles en el caso
de usar formatos no accesibles.
4. Enlaces de hipertexto: Use texto que tenga sentido cuando se lea
fuera de contexto. Por ejemplo, no usar "pincha aquí".
5. Organización de las páginas: Use encabezados (H1, H2, H3,...),
listas y estructura consistente. Use Hojas de Estilo en Cascada
(CSS) para maquetación y estilo, donde sea posible.
6. Gráficos de datos: Resuma o use el atributo longdesc.
1
El portal de la Unión Europea
eEurope 2002: Accessibility of Public Web Sites and their Content
[http://europa.eu.int/information_society/eeurope/2002/news_library/pdf_files/communi
cation_accessibili ty_en.doc, Abril 2004]
2
W3C World Wide Web Consortium
Web Content Accessibility Guidelines
1.0 [http://www.w3.org/TR/WCAG10/,
Mayo 2004]
3
W3C World Wide Web Consortium
WAI Quick Tips Reference Card
[http://www.w3.org/WAI/References/QuickTips/, Mayo 2004]

Manual mapas de_navegacion

Recomendados

Recomendados

Más contenido relacionado

Similar a Manual mapas de_navegacion

Similar a Manual mapas de_navegacion (20)

Último

Último (20)

Manual mapas de_navegacion