Today, let’s talk about user experience, also referred to as UX, which is the positive, negative or neutral experience someone has on your website, blog or social media.

In the following example, I’d like to talk about website user experience, and how it can be affected — positively or negatively — by a site’s navigation.

Let’s look at two desktop homepage examples, one with a solid UX, and one that’s not so good …

The first is Dollar Shave Club, and it’s an excellent example of a good UX.

• As you can see, there is only one clear, easy to digest navigation, which immediately helps website visitors feel grounded and at home.

As opposed to this website that has FIVE different navigations …

• Five navigations can easily leave website visitors confused. The hierarchy of the page is unclear, hard to digest, and difficult to understand.

• In essence, a web page like this forces a visitor to think way harder than necessary … not a recipe for a good user experience.

I hope these examples give you a better understanding of how to handle your own website navigation for a better UX.

Want to learn more about this topic and others like it?

Check out my book, A Holistic Guide to Online Marketing.

Just when you thought we were probably done talking about navigation — I spring mobile nav on you. Mobile nav needs just as much attention as desktop navigation. Luckily the same principals apply here, but they look different because we’re on a mobile platform.

Here are a handful of examples of mobile navigation with an excellent UX.

The first example is from the Dollar Shave Club mobile site. The second example is from the Lighthouse Healing Massage therapy site (built by Cuppa SEO). In both cases, the navigation follows a clear, easy to digest hierarchy …

If you have multiple services or products, another nice touch is to implement an accordion-style mobile nav. In other words, one that expands and contracts when there’s a dropdown menu. Here’s what this looks like on the Cuppa SEO site.

On the left is an example of the collapsed navigation. On the right is an example of the expanded nav, which is triggered when you click on “Services.”

NAVIGATION ORDER

The final point I’d like to cover regarding navigation is the order in which your tabs should appear.

It can be tempting to lead with your About section, just after your Home tab, but it’s not the optimal place for it. Businesses often feel it’s important that potential customers know their history and what they’re about. But if you remember when we talked about content in Part 1 of the book, this information is often less important to the customer. What they care about is their pain points being addressed.

Keith Gilmore, a local Madison friend and conversion expert, once told me a story about a person who broke their arm and was rushed to the hospital. When the person got to the emergency room, the doctor began telling him about her credentials — where she went to school, when she graduated, the different hospitals and private practice’s she’s worked at over the years, and how many broken bones she’s set back into place.

Now, do you think for one second that the patient cared about any of this? That patient is sitting there IN PAIN! He wants the doctor to fix his pain!

So, just as you need to keep your content customer-centric, the same holds true for your navigation.

Instead of a nav that’s ordered like this …

Make your nav look like this …

In the first example, you’re offered to check out “About,” “Why Artisan,” and a “Tour,” before you get to the services they provide. Yes, it only takes a few seconds to find the “Services” tab, but why diminish the UX in your nav unnecessarily? Remember, most people look for services when they’re in some kind of pain. Address their pain!

Social Side Note: notice that this website navigation also includes social buttons right in the navigation. Would you want to check out a dentist’s Facebook page if you needed a root canal? Although there are some cases where use of social buttons can actually be helpful (as we’ll see shortly), in most cases they won’t prove helpful as part of your navigation.

The second example is from one of our client’s websites, Roger Wolkoff, and of course it provides the “Programs” and “Event Planners” tabs right up at the front of the nav — making it all about the customer.

We hope this helps you create a mobile website navigation that’s geared toward a great UX!

Related Topics

• Website Navigation and the User Experience, Part 1: Desktop