Top Navigation Patterns for UX

What are the top navigation patterns in modern UX? There are so many layout and patterns for software an web interfaces, partly due to a desire of designers to stand out and top their competitors. This has resulted in some patterns being quite awful and illogical. The popularity of some designs or sites pioneering them, however, have pushed others into becoming standards, which are then adopted by other sites because they frankly just work.

Over the past five years or so, we’ve seen a few common navigation patterns become dominant, even if different designers put their own theme and aesthetic polish on top of them. Choosing a common navigation pattern is a very good idea, as we’ve pointed out that standardization like this is very good for web usability especially. So, let’s look at a few of the most popular patterns used in the last few years, and why they may or may not work for you.

#1 – The Article List

This pattern is common to blogs, and is the default layout for most CMS designs like Joomla, WordPress and to a lesser extent, Squidoo. Article lists are just that … featured content (sometimes minimized needing expansion or navigation for the full piece), and an archive feed bar to the left or right. They sometimes contain fields below for comments and input from viewers.

This pattern works darn well for people who publish a lot of writing, even if it’s a user-powered site. I’ve also seen artists use this system, but I’m not so sure it’s good for them.

#2 – The Tag System

Other navigation patterns use this, so it’s really a subsystem that can be integrated, but I’ve seen it stand alone as a driving force. While this does make for a little more work for content submitters and those who maintain the site, I am a big fan of this. It makes for much easier location of related data to any given object, and makes searching within a site for interrelated topics quite easily. Bear in mind most competent search engines use tabular tagging of a sort for a reason.

#3 – Pagination

I don’t like this one very much, but it has its uses. Unfortunately, it calls for a higher level of hops than other systems, and should never, ever be used in tandem with the next pattern on the list.

Pagination is where a sum of item entries are listed after a search or page list is opened, and each link opens an individual, fully-fleshed-out page with all of the item’s data present. Article list systems sometimes incorporate pagination.

#4 – Infinite Scrolling

Never use this alongside pagination. It makes for a disastrous navigation experience (you hear me, YouTube?). But, infinite scrolling has its charm when the data being scrolled is self-contained and requires no additional navigation or pagination action to be taken. Some article list systems (Tumblr for example) and simpler social systems like Twitter benefit from this.

#5 – The Thumbnail or Gallery System

Finally, we have the gallery and thumbnail systems. These are one of the older of the established patterns, and they work very well for video sites, or any other visual medium. They can work for other things such as software or product sites, where screenshots or banners can be the subject of the thumbnail.

Don’t use this for blogging or social networks. It’s just too awkward.

These are among the most popular navigation patterns in use, and of course, there are a lot more such as tag clouds (cut those out everyone), event calendars (a one trick pony to say the least), and of course accordion menus (great if you’re living in 1998). All in all, it depends on the site and the nature of the content, which of them will work for you.

Walkme for UX

Megan Wilson
Megan Wilson is user experience specialist & editor of UX Motel. She is also the Quality Assurance and UX Specialist at WalkMe Megan.w(at)walkme.com
Megan Wilson on sabtwitterMegan Wilson on sablinkedinMegan Wilson on sabgoogleMegan Wilson on sabfacebook