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: pega esta imagen en tú pagina, Foro, Myspace o Ebay con este código...

<a href="http://blog.yaaqui.com/buenas-y-malas-pr-e1cticas-en-las-barras-de-navegaci-f3n_articulo_581_566925.html"><img src="http://bw.imagenes.info/wp-content/uploads/2011/02/mashable.png" border="0" alt="mashable en Blogs de YAAQUI"></a>

Engadget

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

engadget: pega esta imagen en tú pagina, Foro, Myspace o Ebay con este código...

<a href="http://blog.yaaqui.com/buenas-y-malas-pr-e1cticas-en-las-barras-de-navegaci-f3n_articulo_581_566925.html"><img src="http://bw.imagenes.info/wp-content/uploads/2011/02/engadget.png" border="0" alt="engadget en Blogs de YAAQUI"></a>

Celebrity Gossip

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

tmz: pega esta imagen en tú pagina, Foro, Myspace o Ebay con este código...

<a href="http://blog.yaaqui.com/buenas-y-malas-pr-e1cticas-en-las-barras-de-navegaci-f3n_articulo_581_566925.html"><img src="http://bw.imagenes.info/wp-content/uploads/2011/02/tmz.jpg" border="0" alt="tmz en Blogs de YAAQUI"></a>

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: pega esta imagen en tú pagina, Foro, Myspace o Ebay con este código...

<a href="http://blog.yaaqui.com/buenas-y-malas-pr-e1cticas-en-las-barras-de-navegaci-f3n_articulo_581_566925.html"><img src="http://bw.imagenes.info/wp-content/uploads/2011/02/thedailydish.png" border="0" alt="thedailydish en Blogs de YAAQUI"></a>

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: pega esta imagen en tú pagina, Foro, Myspace o Ebay con este código...

<a href="http://blog.yaaqui.com/buenas-y-malas-pr-e1cticas-en-las-barras-de-navegaci-f3n_articulo_581_566925.html"><img src="http://bw.imagenes.info/wp-content/uploads/2011/02/ReadWriteWeb.png" border="0" alt="ReadWriteWeb en Blogs de YAAQUI"></a>

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: pega esta imagen en tú pagina, Foro, Myspace o Ebay con este código...

<a href="http://blog.yaaqui.com/buenas-y-malas-pr-e1cticas-en-las-barras-de-navegaci-f3n_articulo_581_566925.html"><img src="http://bw.imagenes.info/wp-content/uploads/2011/02/popeater.png" border="0" alt="popeater en Blogs de YAAQUI"></a>

Politics Daily

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

politicsdaily: pega esta imagen en tú pagina, Foro, Myspace o Ebay con este código...

<a href="http://blog.yaaqui.com/buenas-y-malas-pr-e1cticas-en-las-barras-de-navegaci-f3n_articulo_581_566925.html"><img src="http://bw.imagenes.info/wp-content/uploads/2011/02/politicsdaily.png" border="0" alt="politicsdaily en Blogs de YAAQUI"></a>

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: pega esta imagen en tú pagina, Foro, Myspace o Ebay con este código...

<a href="http://blog.yaaqui.com/buenas-y-malas-pr-e1cticas-en-las-barras-de-navegaci-f3n_articulo_581_566925.html"><img src="http://bw.imagenes.info/wp-content/uploads/2011/02/slashfilm.jpg" border="0" alt="slashfilm en Blogs de YAAQUI"></a>

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: pega esta imagen en tú pagina, Foro, Myspace o Ebay con este código...

<a href="http://blog.yaaqui.com/buenas-y-malas-pr-e1cticas-en-las-barras-de-navegaci-f3n_articulo_581_566925.html"><img src="http://bw.imagenes.info/wp-content/uploads/2011/02/thenextweb.png" border="0" alt="thenextweb en Blogs de YAAQUI"></a>

Joystiq

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

joystiq: pega esta imagen en tú pagina, Foro, Myspace o Ebay con este código...

<a href="http://blog.yaaqui.com/buenas-y-malas-pr-e1cticas-en-las-barras-de-navegaci-f3n_articulo_581_566925.html"><img src="http://bw.imagenes.info/wp-content/uploads/2011/02/joystiq.png" border="0" alt="joystiq en Blogs de YAAQUI"></a>

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: pega esta imagen en tú pagina, Foro, Myspace o Ebay con este código...

<a href="http://blog.yaaqui.com/buenas-y-malas-pr-e1cticas-en-las-barras-de-navegaci-f3n_articulo_581_566925.html"><img src="http://bw.imagenes.info/wp-content/uploads/2011/02/gigaom.png" border="0" alt="gigaom en Blogs de YAAQUI"></a>

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: pega esta imagen en tú pagina, Foro, Myspace o Ebay con este código...

<a href="http://blog.yaaqui.com/buenas-y-malas-pr-e1cticas-en-las-barras-de-navegaci-f3n_articulo_581_566925.html"><img src="http://bw.imagenes.info/wp-content/uploads/2011/02/neatorama.png" border="0" alt="neatorama en Blogs de YAAQUI"></a>

Daily Intel

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

dailyintel: pega esta imagen en tú pagina, Foro, Myspace o Ebay con este código...

<a href="http://blog.yaaqui.com/buenas-y-malas-pr-e1cticas-en-las-barras-de-navegaci-f3n_articulo_581_566925.html"><img src="http://bw.imagenes.info/wp-content/uploads/2011/02/dailyintel.jpg" border="0" alt="dailyintel en Blogs de YAAQUI"></a>

Yanko Design

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

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?