A Fresh Start: Revamping Your Navigation

Compass

Let’s say you’re thinking about a total design overhaul. With your current website, you are getting frequent calls from customers that can’t find information. Despite all your efforts, your traffic is decreasing.  Your current navigation leaves users confused on where to find what they’re looking for, and in turn, frustrated.

But you grouped everything in a way that made sense, right? Why can’t anyone find your staff page? It’s so obvious- it’s right under “About”!

Your navigation may seem optimal to you, but what do we tell our clients? Scrap it. Start over. While you may have a seemingly well-organized navigation that just needs finessing, your site architecture is the foundation of the entire website experience. Do you really want to build on something that could be cracking at the base?

When it comes to your site architecture, don’t get too attached to what you’re used to using. A clean slate can help you reflect on what was going wrong before. When you’re a business owner that has seen your website countless times more than your users, you make different assumptions than you would as a potential customer. Evaluating site architecture is a major iterative part of our process for just about any project. We can’t spend time on content users will have trouble finding, so we need to pave our pathways.
 

Where to start?

 

Card sorting. Put all your page names in a pile. This can be a big unordered list of them or a physical pile of word post-its. There are online tools such as OptimalSort you can use as well. From here you can start to edit. If there are pages or sections that haven’t gotten much traffic or can be factored in elsewhere, consider taking them out. If there are sections you were thinking of adding or could see a use for, add them in. If there are any core pages you know users have had a hard time identifying, start writing some alternate names for those.

A common issue with navigation can be within the naming rather than grouping. While creativity is welcome, expected language is crucial to provide. If you named your blog something that users aren’t familiar with, call it “Blog” in the navigation link, and save your clever name for the blog landing page header.

Defining your business and user goals

Now where are we putting these pages? Consider your business goals and goals of a user. Can you sum up the main reasons a user is on your site? Are they looking to purchase an item? Are many looking for contact info? Do they need to know who you are to move on to other content? Do they have an account they use the website under? Answering these questions will help your concerns of: how many links, what order should they be in, and what should go in the footer. It will help to first spell out a few user personas and stories to determine expected behavior for each type of user on your site.

 

A company we work with, The Fruit Guys, is a product-based company that delivers fresh fruit to offices. As a unique direct to consumer business, the navigation focuses completely on info about the delivery service and incentives to order from multiple outlets. While most ecommerce sites list product categories in their main navigation, The Fruit Guys identified the need to explain how their service works. By doing so, they’ve evoked trust and assurance in their customers’ needs, instead of laying them all out there and expecting users to get it. The “About” pages were defined as secondary for The Fruit Guys, but should still be accessible on the homepage, so these were the focus of the footer links.

Get grouping

 

After evaluating your users’ goals and needs, figure out how items can be grouped. Don’t fear being unconventional with your grouping if your business demands it. It is likely your first way of grouping links won’t end up being final, so again, don’t get attached.

If your website is account-based and you have someone looking to upgrade, do you put this under the group “Settings” or “My Account”? Does an upgrade provide enhanced functionality in multiple parts of the site? If so, maybe “Upgrade your account” is a main navigation item or an attention grabbing button. For instance, with our CI tool, Probo.Ci, our subscription tier benefits only go up in a quantitative manner (i.e. amount of storage or builds). The levels do not add functionality to the experience that should be frequently advertised in the main navigation. We have it under “Account” while providing more incentives within content, such as next to a listing of storage usage.

If you’re a university, you have many user stories to go off of. Perhaps you want to help users filter by degree level or program. There are different needs of a parent, student, alumni and staff to factor in your navigation tools.  Maybe your goals are selling the quality of the school, where the navigation should be more school information-based rather than by user group filtering.

Let’s take a look at a few ways of categorizing links:

  • Most visited - One of the top ways to categorize is look at your analytics and see which pages get the most traffic. The assumption is, that these are the most important pages to your users, and they should be listed upfront. These may not end up being specific popular pages, but can include their overarching categories.

  • Sequence - This is good for singular processes to be done on your website. In the example of The Fruit Guys above, the order of the navigation is based off the mental process it takes for a customer to order. It goes: Definition of product types > Explanation of how the product deliveries work and options the user has > Ordering.

  • Topic - This is commonly used for ecommerce or blog websites where you want to define more literal groupings of links. For instance on Wired, the navigation is separated by topics such as “Business”, “Culture”, and “Design”. New York Times breaks their navigation down by topics such as “World”, “U.S”, and “N.Y”. While ecommerce websites define by product type, not so much a conversational topic, the same principle applies to categorizing by “Jeans” or “Jackets”. (Uh oh, jean jackets are going to have a panic attack).

  • Audience - This is for refining an experience per user group. The university example above may make their main navigation based off user type such as “Students” or “Parents”. This helps in creating a more customized experience that assures the user they’re in the right place.

  • Alphabetical - Alphabetical typically goes hand in hand with topic categorization. Alphabetical can be used when the website calls for a larger list of links. This can be applied to ecommerce and blog websites as well. Amazon uses alphabetical categorization to show it’s massive list of product types.

Choosing your menu hierarchy levels

 

Getting the balance right of how many links to show when, is one of the more difficult tasks within user experience. You want to provide as much helpful information as possible without hiding it too deep, or overwhelming with too many on the surface. There is no golden point on that scale no matter what industry that website falls under.  

We came across a tough decision in a recent A/B testing session we did, where it was a near even split of users that preferred a list of eight long links to four boxed short ones. We received the expected feedback of “I prefer the big list so I can find my specific category and not have to guess where it is” and “I prefer the four boxes because they stand out to me and I don’t have to take the time to read a big list of links”. What do you do when you want to find the balance of both? Do you show six links instead? Possibly, but there’s probably better solutions. For this particular project, we looked at the type of users that were giving which feedback and what the business goals were next. A current client base of users versus the target audience we wanted to capture gave us the answer on which solution to go with.

A broad rule of thumb is to use the larger lists of links when you have distinct, well-known links. More descriptive lists are good to use when your user stories showcase very specific purposes of coming to your site, such as a medical website or large ecommerce. Use fewer links with a deeper hierarchy when your categories are not as distinguishable. Your website could need to lead your user through a couple overarching landing pages for them to understand the concept. This may be the case for a smaller business that you need to wine and dine your users a little first. Larger businesses may also use a deeper hierarchy of pages to create a more enticing experience.

Participation points

 

The more feedback you can get on your navigation (or any part of your website), the better. Others interpret information on your site differently than you do. There are a few methods for getting feedback on your navigation. Bring others in on your card sorting process. Put all your page names back in a pile for someone else to organize. Record observations of how each person sorts the cards, and you will start to pick up on patterns. The more people you get, the more validation you get on these patterns. OptimalSort, has it’s own recruitment efforts where you can post your card study for anonymous users of all different backgrounds to sort.

When performing card sorting testing sessions, there are a couple options on how to define your navigation categories. You can start with open card sorting, where categories for the pages are not yet defined. By presenting participants with the task of defining their own categories, they have the same starting point as you, and may confirm you were on the right track. With the open ended answers, you may get some better ideas on how to name categories you didn’t think of right away.

The other card sorting testing option is closed card. You guessed it- the categories are already defined in this organization style. While open card leaves more room for suggestions and isn’t confined to your ideas, these keep participants focused and create more solidified patterns to base your decisions off of. If you have a pretty set vision on how to group your navigation, closed sorting may provide more valuable data as to where the lower tier pages fall.

Another form of feedback gathering for your navigation is A/B testing. If you are deciding between naming conventions or even categorization methods, this is a way to present participants with your options and see which option more people gravitate towards. If possible, it is best to do both of these methods and at a multiple points in a project life cycle.

Further reading & resources

https://www.optimalworkshop.com/optimalsort

http://www.uxbooth.com/articles/effective-presentation-of-a-websites-navigation/

https://www.nngroup.com/articles/flat-vs-deep-hierarchy/

http://alistapart.com/article/design-patterns-faceted-navigation

https://www.smashingmagazine.com/2013/12/efficiently-simplifying-navigation-information-architecture/

Jen
Jen Rovner

Lead UX / UI Designer

After exploring every corner of graphic design from animation to exhibits, Jen ended up fascinated with user experience design above all. She moved to Philadelphia in 2008, and graduated from Drexel University with a concentration in web and animation.

Related Services

Ready to get started?

Tell us about your project