Grouping the options

Grouping the options

Grouping the options

  |   Designing Effective Navigation, Web Design

A navbar’s job is to create order and provide direction. That’s not always easy: when the site has diverse content or is large, it can be difficult to summarize it through a handful of links. Take a look at the list of nine links on the left below, for example.
It might cover everything that’s on the site, but is it easy to use? Not particularly. Long lists of links are hard for people to skim-read, so people have to slow down to use them. ‘That makes the site feel laborious to navigate. Fixing it is easy. The links can be grouped into three sections: Shop, Free downloads and About us. By putting a small heading above these links, it’s easy to see at a glance what’s on the site.
 

Before Grouping:

  • Books
  • CDs
  • Posters
  • Wallpapers
  • MP3s
  • Who we are
  • Team photos
  • Visiting us
  • Contact us

 

After Grouping:

Shop

  • Books
  • CDs
  • Posters

Free downloads

  • Wallpapers
  • MP3s

About us

  • Who we are
  • Team photos
  • Visiing us
  • Contact us

 

Whether you are creating vertical navigation or horizontal navigation, the secret of making it work is to group your links in a way that makes intuitive sense to your visitors, and then to communicate that grouping. If you’ve invested time in planning your sitemap first, you’ll find it much easier to do this.
 
You could use these links with subheadings in the sidebar or the footer, or you could create a horizontal navbar with buttons for Shop, Free Downloads and About Us. When people click those, you could take them into a page with more options for the subcategories, or you could start showing them selected content, and provide links to the different subcategories on the left.
 
Some people say that you should be able to get anywhere on the site within three clicks. It’s a helpful guideline, but the most important thing is that people can easily find what they need and feel that they are getting closer to it with every click. Arranging links in easily understood groups helps to achieve that.
 

 

The following two tabs change content below.
WebWorks Agency
We are a creative WEB-DESIGN Agency based in Los Angeles. We build Responsive, Mobile-Friendy & SEO Optimized Websites. Best Prices on the market! We’ve been increasing conversions and sales on websites for over 15 years – and with some fantastic results!
WebWorks Agency

Latest posts by WebWorks Agency (see all)