Unidad 5. Preparar nuestro sitio (III)


5.4. Navegación

Antes de comenzar a definir la navegación, debemos de tener una idea de cómo va a ser el sitio web, es decir, debemos tener una idea formada de la estructura y extensión del sitio. Así podremos decidir qué sistema de navegación es el más adecuado.

Si construimos un sitio sobre la marcha, sin planificación, según vaya creciendo, se irá complicando la navegación y al final no nos quedará más remedio que hacer modificaciones que resultarán más costosas que haberlo pensado un poco mejor con anterioridad.

Existe una regla que dice que un usuario no debería de necesitar más de tres clics para llegar a la página que busca. Por eso lo primero que hemos de pensar es en facilitar a navegación.

El usuario debe de ser capaz de moverse de forma intuitiva por nuestro sitio sin perderse, para ello:

  • Debe de saber dónde está. Debemos de dejarle claro en qué parte del sitio se encuentra. Para esto es muy útil el título de la página y utilizar un encabezado que identifique la sección. También debe de distinguir si sigue en nuestro sitio, o si ha pulsado un enlace que le lleve a un sitio distinto.
  • Debe de saber dónde ha estado. Debemos de evitar que el usuario pase una y otra vez por la misma página para buscar algo. Por ejemplo, distinguiendo los enlaces ya visitados.
  • Debe de saber dónde puede ir. Una página web se basa en enlaces, y estos deben de ser claramente identificables. Además, no deben de ofrecer dudas de a dónde llevan, por ejemplo con nombres de páginas entendibles, que se muestran en la barra de estado, o con textos de información emergentes.
  • Debe de poder seguir navegando. No le enviaremos a una página sin enlaces, desde la que no pueda continuar recorriendo el sitio. Piensa que puede acceder directamente a esa página, por ejemplo a través de un buscador, por lo que no podría utilizar ni el botón Atrás del navegador.

La forma de navegar por nuestro sitio, debe de ser constante. Así, con visitar unas pocas páginas aprenderá a moverse por nuestro sitio, y le resultará más cómodo.

La forma más habitual de solucionar todo esto es utilizar un menú, que se mostrará en todas las páginas.

5.5. Estructura del menú

El uso de menús es muy habitual en las páginas web. Un menú no es más que una lista de enlaces relativos a nuestro sitio, llamados elementos del menú.

  • Por lo general el menú se suele colocar en la parte superior de la página, junto al logo o debajo de él, o en un lateral, normalmente el izquierdo.
  • El menú no debe de ser demasiado extenso. En un sitio grande no podemos pretender enlazar con todas las páginas, y no sería útil hacer buscar al usuario entre cincuenta enlaces.
  • Normalmente, aparecerán las secciones de nuestro sitio web. Y por ejemplo, podemos utilizar diversos métodos para que el usuario pueda expandir cada sección y ver enlaces a los apartados de la sección, o utilizar menús desplegables. También podemos mostrar los enlaces a las distintas partes de la sección en que se encuentra el usuario, ya que si está en esa sección es probable que le interesen los apartados relacionados.
  • Los elementos del menú deben de ser descriptivos. Por ejemplo, no es útil poner una imagen, por bonita que sea, si puede que el usuario no entienda qué significa o a dónde lleva. O que para saberlo tenga que poner el cursor sobre él.
  • El menú debe de ser ligero, y no ocupar demasiado espacio, ya que se repetirá en todas las páginas.

 

En lo que se refiere al código, el menú suele tener estos elementos:

  • Los menús se suelen basar en listas <ul></ul>. Dentro de cada elemento de la lista, colocaremos un enlace. Si no sabes qué son las listas, puedes verlo en este básico Básico.
  • El aspecto del menú se consigue por CSS.
  • Suelen tener código javascript, por ejemplo para mostrarlo, producir efectos más o menos avanzados, o en vez de los enlaces.

 

Por lo tanto, comenzaremos creando nuestro menú como una lista, a la que más adelante le iremos dando estilo hasta convertirla en un atractivo elemento de navegación.


Enero-2010
Pág. 5.3

Atrás  Inicio  Adelante





.