comparte el articulo 

Sistema de navegación de la página web

Actualizado el 29/11/2007 < > 29 Cometarios

Resumen: Aprende a crear un buen sistema de navegación para tu página web y haz que tus visitantes encuentren lo que buscan sin problemas.

Un buen sistema de navegación es imprescindible en toda página web. Es una parte importante de la organización de la estructura de la web. Que el usuario sea capaz de moverse con soltura y facilidad por las distintas páginas del sitio, que encuentre lo que busca rápidamente, que no se pierda yendo de un enlace a otro sin saber donde está, que no quede colgado en una página concreta sin poder navegar por otras o volver atrás… son algunas de los aspectos que hay que cuidar en la navegación de un sitio web. Veamos algunos puntos importantes.

La página de inicio

La página de inicio de tu web es la puerta principal de acceso a tu web. Por ella entrarán la mayor parte de visitantes, por lo que hay que cuidar al máximo cada detalle.

Si tu sitio web es pequeño, puedes permitirte el lujo de enlazar a todas las páginas de tu web desde la página principal, así el usuario tiene a su alcance toda la información disponible en el sitio. Pero en muchos casos incluir un enlace a cada página convertiría en un caos a la portada del sitio debido a la gran cantidad de páginas internas. En estos casos lo más conveniente sería enlazar a las secciones principales de la web, desde las cuales se enlazaría al contenido de esa sección concreta, etc.

Menú de navegación

El menú de una página web es la principal herramienta de navegación que le podemos facilitar al visitante para que encuentre lo que busca. Es imprescindible para que las personas encuentren las demás páginas de la web, además del índice.

Los menús de navegación son básicamente listas de enlaces a las diferentes páginas o secciones de la web. De su estructuración dependerá en gran medida que los visitantes encuentren lo que buscan, por lo que es conveniente pensarse dos veces cómo hacerlo antes de implementarlo en la web.

Hay varios tipos de menús de navegación; podemos encontrarlos en disposición horizontal;

menu horizontal

O vertical;

Menu vertical

Como mencionamos antes, para sitios web con un número de páginas pequeño puede ser bueno enlazar a todas ellas desde cada página para que el usuario tenga en todo momento la información disponible en la web a su alcance. Por ejemplo, si es una página web informativa sobre tu empresa y no tiene otra finalidad, puede que cuente con 10 ó 15 páginas en total, las cuales pueden perfectamente ser enlazadas desde cada página individual. Sin embargo, cuando una web contiene mucha información este tipo de menús tiene poco sentido, porque entonces tendríamos menús con cientos de enlaces, algo excesivamente largo para ser usable. Lo normal en estos casos es enlazar desde la página principal a las secciones más importantes, y desde cada una de ellas a sus contenidos concretos.

Pie de página

El pié de página de la web también puede usarse para mejorar la navegación del sitio. Normalmente no se utiliza para poner enlaces a todas las secciones (para eso ya está el menú), pero sí para poner enlaces importantes o que consideras que deben aparecer en todas las páginas de la web, por ejemplo información legal sobre tu empresa, direcciones de contacto, políticas de uso del sitio, etc.

Evitar páginas huérfanas

Una página huérfana es aquella desde la cual no se puede acceder a ninguna otra. Cuando el usuario se encuentra con una de estas páginas la confusión y el enfado pueden ser importantes. Es cierto que dándole al botón “atrás” del navegador o modificando el campo de la url puede llegarse perfectamente a otra página del sitio, pero no todo el mundo tiene porqué saberlo, y hacer a la gente molestarse demasiado en navegar por un sitio es signo de falta de usabilidad web. No cuesta nada poner en cada página al menos un enlace a la principal.

Enlazar siempre al índice

Una de las formas de evitar páginas huérfanas y que mejora sin duda la navegabilidad de una web es incluir en cada página del sitio un enlace al índice.

enlace a la página principal

Parece bastante extendido el enlazar a la página principal del sitio mediante el banner o logo de cabecera. Así, el usuario siempre tiene un recurso para volver al principio y buscar lo que necesita.

Ruta de acceso o ¿dónde estoy?

Es frecuente que aunque el usuario pueda navegar con facilidad por las páginas de tu sitio no sepa exactamente donde está. Para evitar esto es muy útil incluir el camino que se sigue desde la página principal, pasando por las secciones (principales) hasta la página concreta en la que se encuentra el usuario. No hace falta que indiques cada uno de los pasos, con los más importantes es suficiente, no es cuestión de que se convierta en una guía interminable. Un ejemplo de esto lo encontramos en LaWebera.es:

ruta de acceso web

Es conveniente que cada parte de la ruta tenga su enlace correspondiente, de forma que el usuario pueda ir a esa categoría si lo desea. Sin el enlace a cada sitio, la ruta de acceso pierde sentido ya que le dice al usuario donde está pero no le da alternativas.

Incluir un buscador

Para páginas web con mucho contenido es realmente útil la inclusión de un buscador interno que permita a los usuarios buscar directamente los temas que le interesan. Páginas web didácticas, de manuales, etc. son sitios que tienen mucho contenido distribuido a su vez en muchas páginas. Buscar una información concreta en ellas puede ser complicado dado el volumen de archivos que contienen. Los buscadores mejor la experiencia del usuario en el sitio web y le ayudan a ahorrar tiempo en su búsqueda de información.

Hay herramientas gratuitas muy buenas para poner un buscador en tu web. Por ejemplo: Google Co-op o Atomz.

Publicado el 29/11/2007, última actualización 29/11/2007.

Licencia: Eres libre de distribuir este artículo bajo los términos de la licencia creative commons, siempre que pongas claramente el siguiente texto en la página que publica el artículo (enlaces activos incluidos):

Autor: Verónica Milán

URL: Sistema de navegación de la página web

Añadir Comentario (Subir al texto)

29 Cometarios

  1. marc torres

    hola!

    me quiero hacer una página web para mi.

    pero no se como se hace.

    me gustarie que me ayudaseis a hacerla, enviandome e-mails a marctb_94@hotmail.com

    muchas gracias.

    Marc Torres

    Domingo, 30 de diciembre 2007

  2. Aumentar el número de páginas vistas en la web :: LaWebera.es

    [...] de nuesto documento debemos crear enlaces relacionados de tal forma que nuestro site permita una navegación por el contenido. La creación de clusters aumenta la posibilidad de que el usuario interesado por un tema, [...]

    Lunes, 7 de enero 2008

  3. Verónica Milán

    Hola Marc. Si quieres aprender a hacer páginas web te aconsejo que te leas algunos tutoriales, puedes empezar en esta web con el tutorial básico de empezar de cero (http://www.lawebera.es/de0) y después aprender a manejar algún programa como Dreamweaver, en esta web también tienes un manual sobre eso (http://www.lawebera.es/manuales/macromedia-dreamweaver/). Sería muy recomendable también que aprendieras lo básico de html, para que sepas lo que haces y tengas un mayor control del resultado (http://www.lawebera.es/manuales/html/).

    Suerte.

    Lunes, 7 de enero 2008

  4. gena

    su pagina esta muy completa, para realizar o crear una página web, esta muy clara, precisa y concisa, cuando explica cada uno de los detalles de los puntos resaltantes de la elaboración de la web, gracias me ayudarón mucho, cuando tenga mi pagina lista les escribo, para que me den sus opiniones y comentarios de ella.

    Lunes, 3 de marzo 2008

  5. Verónica Milán

    Hola gena.

    Me alegro de que te sea útil la página y que se entiendan las explicaciones. No dudes en escribirnos para que le echemos un vistazo a tu web.

    Un saludo.

    Miércoles, 5 de marzo 2008

  6. Dejar de usar tablas en HTML y aprender a usar CSS :: LaWebera.es

    [...] que ocupa todo el ancho de la parte superior de la pagina, una columna a la izquierda con el menú de navegación, una columna principal con el contenido principal, una columna a la derecha con cosas extra y un [...]

    Miércoles, 19 de marzo 2008

  7. Recursos y Tutoriales » Blog Archive » Primeros pasos para aprender a hacer una página web

    [...] y tan diversa que llegues a la conclusión de que es más cómodo para los visitantes colocar un menú de navegación específico de la sección en la izquierda y el principal en la derecha para que puedan navegar por [...]

    Miércoles, 26 de marzo 2008

  8. Consideraciones en el diseño que inspiran confianza :: LaWebera.es

    [...] navegación: Las cosas por su nombre, nada de estructuras de navegación extrañas, un header con menús, un sidebar estructurado es el sueño de todo usuario, a veces los [...]

    Jueves, 15 de mayo 2008

  9. Crea tu página web con Joomla. 3ª parte :: LaWebera.es

    [...] de menús: crea elementos de menús (y menús completos) con ésta utilida. Podrás enlazar secciones, categorías, componentes y [...]

    Miércoles, 23 de julio 2008

  10. 11 pequeños secretos de Adsense :: LaWebera.es

    [...] usa el formato de anuncio de “300×250″ de Adsense y ponlo a la derecha de la columna de navegación izquierda (el menú). Pon un pequeño párrafo de texto por encima para que el anuncio quede [...]

    Sábado, 30 de agosto 2008

  11. 25 maneras de ser un freelancer más efectivo :: LaWebera.es

    [...] un sitio web sencillo y de fácil navegación para ofrecer tu servicios de forma clara y que los no-técnicamente instruidos pueden a llegar a [...]

    Jueves, 13 de noviembre 2008

  12. Agustin

    Felicidades. Hace más de 2 horas que entré en estas páginas buscando la forma de iniciarme en el diseño de una página web y todavía no he podido desengancharme. Y aunque al principio me parecía mucho más dificil de lo que pensaba (creía que hacer una página web era más sencillo), poco a poco he vuelto a retomar la confianza. Cuando monte mi página te la pienso dedicar. Muchas gracias.

    Martes, 13 de enero 2009

  13. Gualberto

    hola me recomendaron expression web para hacer una pagina me podrian proporcionar un maual de como disenar una pagina con este programa

    Martes, 28 de abril 2009

  14. Como usar distintos colores en un select menu con CSS :: LaWebera.es

    [...] Podemos personalizar nuestros select menu asignádoles clases a las opciones del menú. [...]

    Jueves, 28 de mayo 2009

  15. Etapas del diseño web :: LaWebera.es

    [...] a la agregación de contenidos realizada en la etapa anterior. Se provee de ayudas para la navegacion, de enlaces que permitan la jerarquización que diseñamos y de enlaces entre elementos [...]

    Jueves, 1 de octubre 2009

  16. Diseño de la navegación de una página web :: LaWebera.es

    [...] evitar confusiones en este artículo definimos “menú de navegación” como los vínculos que están presentes en todas las páginas de la web de manera fija. [...]

    Lunes, 5 de octubre 2009

  17. gaba

    si alguien sabe de algun diccionario ilustrado en cuanto elementos constituvos de una pagina web y/o sitio web, por favor pasar el dato, porque me interesa ampliar el vocabulario en el campo digital

    Domingo, 1 de noviembre 2009

  18. Primeros pasos para aprender a hacer una página web

    [...] y tan diversa que llegues a la conclusión de que es más cómodo para los visitantes colocar un menú de navegación específico de la sección en la izquierda y el principal en la derecha para que puedan navegar por [...]

    Viernes, 6 de noviembre 2009

  19. El balance en el diseño web

    [...] excelente diseño nos muestra como el logotipo, el menú, las imágenes y enlaces se distribuyen en ocho cuadros perfectamente simétricos, tanto en el [...]

    Lunes, 28 de diciembre 2009

  20. El principio de la proximidad en el diseño web

    [...] zona de la página con similitud temática y de forma. En el centro y a la derecha, se encuentra el menú, también agrupado por similitud temática, de forma, color, tamaño y disposición. Aquí se puede [...]

    Jueves, 28 de enero 2010

  21. Concursos web para aumentar visitas

    [...] formas de hacerlo visible: crea un icono y ponlo en tu menú de navegación para que cualquiera pueda conocerlo sin leer la entrada de tu [...]

    Lunes, 1 de febrero 2010

  22. El diseño de la interfaz

    [...] permite a los usuarios acceder a los contenidos, realizar tareas, comprender las funcionalidades y navegar por las diferentes páginas del [...]

    Viernes, 5 de febrero 2010

  23. 7 Consejos para diseñar tu web de forma eficaz

    [...] suscribirse a un boletín, registrarse en un foro, etc.). Para ello es necesario tener una navegación clara y sencilla, de forma que toda la información se encuentre a menos de 3 clicks de ratón. [...]

    Martes, 9 de febrero 2010

  24. camilo fuentes

    excelente aporte muy completo, pues abordan todos los temas desde la planificación hasta la realización de la pág. me está sirviendo mucho. Me la voy a “devorar” toda

    muchas gracias

    Sábado, 20 de febrero 2010

  25. El uso de menús en nuestro sitio web y su influencia en la navegación

    [...] Para seguir esta guía, conviene leer antes el capítulo sistema de navegación de una página web. [...]

    Martes, 2 de marzo 2010

  26. Estructura de una página web: diseño de plantilla

    [...] Navegación [...]

    Lunes, 8 de marzo 2010

  27. Web Developer Toolbar de Mozilla Firefox: Casi un editor Wysiwyg (primera parte)

    [...] con la aprobación de la mayoría de las personas que cuentan con buenos conocimientos acerca de la navegación en la web. Una de las grandes ventajas que tiene respecto de los demás, es la posibilidad que [...]

    Miércoles, 28 de abril 2010

  28. Maquetación de páginas web: crear un menu horizontal con CSS

    [...] página web debe contar con al menos un menú que permita a los usuarios desplazarse por las diferentes páginas en forma ágil y [...]

    Miércoles, 9 de junio 2010

  29. Eugenia

    Hola a todos, qué pensáis del NVU como editor? se trata de una página web básica, no es un gran proyecto…
    Muchas gracias!

    Sábado, 17 de julio 2010

(Subir al texto)

Añadir Comentario

* Campos obligatorios

Meneame Bitacoras