English Português

Los enlaces de navegación (Siguiente página, página anterior o la paginación) son uno de los elementos más importantes del diseño de un sitio. Una barra de navegación bien diseñada permite al usuario pasar de página de manera casi instintiva e lo invita a seguir leyendo.

Revisando el top 100 de blogs en Technorati (sí, aun esta online), les presento algunos que llamaron mi atención para encontrar algunas buenas prácticas y malas prácticas.

Showcase

Mashable

Mashable.com tiene una navegación por paginación, con números en contenedores grandes y cliqueables en toda su área. Tiene enlaces de Adelante y Atrás, pero no de Última y Primera, que en mi opinión, rara vez son útiles.mashable

Engadget

Engadget.com tiene una navegación limpia y fácilmente reconocible.

engadget

Celebrity Gossip

tmz.com tiene una navegación fácilmente reconocible, pero que además invita a leer, adelantando que encontraras.

tmz

The Daily Dish

En The daily dish parece que no les interesa que sigamos navegando, una navegación pequeña y que se pierde entre el contenido.

thedailydish

ReadWriteWeb

En Readwriteweb.com los números de paginación se confunden entre ellos. es difícil darles clic si logras distinguirlos del contenido.

ReadWriteWeb

Popeater

En Popeater.com la navegación tiene buen espacio y es inconfundible su función. Otro punto interesante es que todos enlaces de navegación, usan el mismo color, distinto al color de los enlaces de contenido.

popeater

Politics Daily

Politicsdaily.com también cuenta con una navegación fácil de encontrar.

politicsdaily

Slash Film

Slashfilm.com además del clásico “Siguiente”, “Anterior”, tiene un banner, pero que por sus dimensiones es fácil confundirlo con publicidad.

slashfilm

The Next Web

Thenextweb.com tiene una navegación minimalista y elegante, acorde a su diseño, pero que puede pasar desapercibida si no la estas buscando.

thenextweb

Joystiq

Joystiq.com tiene un par de botones en suficiente espacio y bien resaltados que no te hace buscar si quisieres seguir leyendo.

joystiq

GigaOm

Gigaom.com tiene una buena combinación entre la sencillez de los botones siguiente y anterior y lo informativo de una paginación.

gigaom

Neatorama

En Neatorama.com a cada enlace le agregan la información sobre en que dirección temporal de publicación se dirige. Al no haber una norma si “Siguiente” se refiere a más nuevo o más viejo, es una buena idea aclararlo.

neatorama

Daily Intel

En Daily Intel agregan un enlace a la página principal en la navegación.

dailyintel

Yanko Design

En Yankodesign.com además de la típico paginación, agregan un enlace a un post aleatorio.

yankodesign

Conclusiones

Algunas conclusiones en base a mi experiencia de usuario en estos blogs son:

  • Los enlaces de navegación deben diferenciarse claramente del contenido, por color, diseño, tamaño, espacio o cualquier otra propiedad.
  • Dentro de una paginación los botones de Siguiente/Anterior deben resaltarse.
  • Los números en un paginación, deben tener la mayor área cliqueable posible.
  • En la mayoría de estos sitios, el botón “Siguiente”, se encuentra a la izquierda. Esto puede significar que el usuario esta más acostumbrado a verlo de ese lado, habrá que comprobarlo con una revisión de muchos más blogs.
  • Usar “Artículos anteriores” puede ser más informativo que “Siguiente página”, pues este último no da referencia de la edad de las publicaciones.
  • En algunos casos, es buena idea colocar una barra de navegación al inicio y al final de la página.

Con este ejercicio, he encontrado varios puntos a mejorar en mis sistemas de navegación. ¿Encontraste algo a mejorar en los tuyos?

Escrito por Francisco Oliveros

Soy un gran aficionado del diseño y de todo lo que el código puede comunicar. Ingeniero mecánico por profesión, pero dedicado al desarrollo web a tiempo completo.

Blog / Twitter

Artículos relacionados

Sigue leyendo consejos, tips y tutoriales para tu blog.

    Comentarios

    1. the_mastersok / Hace 6 años /

      Muy buena entrada, me gustaron mucho los ejemplos, y pienso que cada barra de navegacion le da una identidad personal a cada blog…
      Lamentablemente en mi blog no se pueden realizar por el tipo de Theme que tiene 🙁
      Alguna sugerencia???
      Saludos desde Chile.

      Responder a the_mastersok →
    2. Elisabet / Hace 6 años /

      Gracias Francisco.
      Me ha resultado muy útil tu información. He camiado el texto según tu recomendación.
      Un saludo.
      Bet

      Responder a Elisabet →
    3. Odomera / Hace 6 años /

      Interesante. Por lo que he visto, una inmensa mayoría de blogs que usan Blogger tienen “Entradas antiguas” a la derecha al contrario de los que usan WordPress que tienen sus “Artículos anteriores” etc., a la izquierda. Y a veces eso resulta un poco confuso…

      Responder a Odomera →
    4. Diakchimba / Hace 5 años /

      Hola Francisco quisiera saber como puedo modificar los enlaces de navegación de mi blogger.

      Responder a Diakchimba →

    Responder

    ¡Gracias por dejar tu opinión! Por favor procura que tus comentarios estén dentro tema, que no sean promocionales (spam), ilegales u ofensivos, de otro modo, serán borrados. Todos los enlaces serán moderados y la URL indicada NO será enlazada.

    Blog and Web es un blog de Blógstica. Hospedado desde 2008 en Liquid Web.

    Términos de uso - Política de privacidad