Good and bad practices in navigation bars
The navigation bar (Next page link, previous page link or pagination) is one of the most important elements of a web design. A well-designed navigation bar allows user to turn the page on an almost instintive way and invites him to continue reading.
Reviewing the top 100 blogs of Technorati (yes, it’s still online) I present you a few that caught my attention to find some good and bad practices.
Mashable.com has a pagination, with numbers in big and clickable containers. Has links “Next” and “Previous” but not “Last” and “First”, which, in my opinion, are rarely helpful.
Engadget.com has a clean and easily recognizable navigation.
Tmz.com has a recognizable navigation and also invites to keep reading.
The Daily Dish
In The daily dish seems that they are not interested in that we continue browsing with their discreet navigation bar.
In Readwriteweb.com the pagination numbers are confused each other. It’s hard to click on each and is even, is difficult to distinguish between navigation and content.
In Popeater.com the navigation bar has enough space and its function is unmistakable. Another interesting point is that all navigation links are using the same color, a different color than the color of the content.
Politicsdaily.com also an easy to find navigation bar.
Slashfilm.com well as the classic “Next” “Previous “, has a banner, but for its size, it can be confused with advertising.
The Next Web
Thenextweb.com has a minimalist and elegant navigation bar, suitable to its design, but may go unnoticed if you’re not looking for it.
Joystiq.com has two buttons in enough space. No need to search them if you want to read more.
Gigaom.com has a good combination between the simplicity of the “Next” and “Previous” buttons and the information of a pagination.
In Neatorama.com they show if the next page contains newer or older posts.
In Daily Intel they add a link to the home page in the navigation bar.
Conclusions based on my user experience in these blogs are:
- Navigation links must be clearly distinguished from content, by color, design, size, space or any other property.
- Within a pagination, the Next / Previous buttons should be highlighted.
- In pagination numbers, its whole area should be clickable.
- Use “previous articles” may be more informative than “next page”, since the latter doesn’t report the age of the publications.
- In some cases, is a good idea to put a navigation bar at the beginning and end of the page.
With it exercise, I have found several points to improve in my navigation systems. Do you find something to improve on yours?
You must be logged in to post a comment.