The Art of Web Navigation: Seven Tips for Optimal UX

Blog_WebNavigation (2)

You’re a client. You want a website. Something simple. But, come on, nothing in the design world is ever simple. We have a reason behind every little thing we do. That’s the art of design. And that includes web. So let’s start at the top, literally, with how to “up” your main navigation menu.        

1. Be descriptive with your menu item names.

Since Al Gore invented the Internet, the main navigation bar has featured some pretty familiar menu items like “About Us,” “People” and “Services” to identify internal pages. Butno one ever searches for “Products” or “Services,” so these generic terms aren’t gonna help your SEO rankings. Or your organization. Or your brand.

Instead, use your navigation bar as a place to start telling your story. Try to be more descriptive and unique in naming your menu items. For example, rather than “Services,” go with “Digital Services” or instead of  just “Products,” try “Wellness Products.” The more specific the better. Consider popular keyphrases that are relevant to your business to engage users faster (most decide in 3-4 seconds if a site is worth staying), as well as enhance your search engine ranking.

Have you heard the old saying a “cobbler’s children have no shoes”? This is in reference to our own website. Yeah, it’s a little embarrassing…

2. Limit menu to seven key items.

Studies as far back as 1956 cite seven as the magic number of items that can be stored in our short-term memories at one time. (It’s actually “seven, plus or minus two.”) Anywho, we use this little nugget of knowledge to recommend the ideal number of top-tier items. Using an average of seven menu items makes the information easier for visitors to remember and process. More than seven may cause eyeballs to quickly scan past important items and can actually hurt your search engine ranking. If you need help remembering the number, just recall this Seinfeld episode. It’s a classic…

3. List most significant items at either end.

Since items that appear first or last on any list are shown to be most effective, position the most prominent items – the meat of your website – at either end of your menu. (Think of it as an inside-out sandwich.) What makes items most prominent depends on your site’s business goals. If you’re selling products and want visitors to contact you with orders or questions, your product menu item should be first and contact menu item last. All other tasty morsels – careers, testimonials, etc. – should be neatly tucked in between. Yum!

4. Try a mega-menu for large amounts of content.

With traditional drop-down menus, you have to go – one by one – throughout a menu to see what’s in each section. Right when you decide to click on an item, the drop-down gives you even more options. How annoying! A better solution, especially for larger sites, is the mega drop-down menu, aka a tray. It’s like a drop-down menu on steroids. Just mouse over a main menu item and voila! – an expansive dropdown lists out all options and/or pages within that section at once.

See the benefit of the tray design we developed for Kichler. Users can view everything in the category!



5. Reimagine the search function.

We’re all familiar with the search input field and its magnifying glass icon. We know it. We use it. We love it. But guess what? It’s evolving... A current trend is to “hide” the search field and just show the search icon. This new “inline page search field” shows up once you click on the magnifying glass. What’s the point? If your site doesn’t have a lot of content, most users won’t need the search function. But, if they do, the magnifying glass icon is recognizable enough as a cue. “Hiding” it simply helps declutter your web page, keeping the focus on what really matters: your content.

Another popular search bar trend? Go all in with a full-page search. When youclick on the search icon, the whole search field can morph into a full-page overlay– a page completely dedicated to (yes, you guessed it) your search function. Boom. The idea is to enlarge the search input, while allowing room to display relevant content and/or search results. And it looks pretty cool, too.

6.  Keep the main menu visible at all times.

In the “old days” of web design, the navigation bar would stay at the top of the page and disappear as you scrolled down. What a bummer! To get back to it, you’d have to scroll allllll the way back up to the top.

Nowadays, with mobile browsing and social media sites, long-scrolling and even single-page sites have become all the rage. That’s why the “sticky nav,” also referred to as a fixed or floating navigation or sticky header, is so handy. It’s basically just a menu that scrolls with the page until a certain point and then remains locked on the browser window. So you have easy access to the navigation bar at all times. In fact, a study featured in Smashing magazine cited that, with the sticky nav, users were able to find what they were looking for 22% faster since they didn’t have to scroll back to the top of the page.

7. Animate the main navigation bar.

No, we don’t mean make it dance. Animating a navigation bar may be as simple as opening the site with the nav prominent, then automatically scaling it down or shrinking it to one side or corner as you begin to scroll. It helps conserve screen space without limiting user options, as well as adds visual interest. On the WhiteSpace site, you’ll notice that our navigation bar shrinks down – just watch the size of our logo. Or check out the color change on site we created for Good Place Holdings.

The main navigation bar starts off as transparent...



But scroll down just a bit further and it changes to blue...



Like everything digital, web design is constantly changing. We are always trying new things to see how users respond. Think about search fields again. They’re traditionally positioned in the upper-right corner, right? Well, Facebook and Twitter – sites that many of us visit every day (some every hour) – place their search bar in the left, or middle, of page tops. Hmmmm… If that’s where users are used to going now, maybe we should try a search field on the left next time? Or what about the sites that have said “bye Felicia” to main menus completely? Some believe a search bar is all you need. Sound crazy? Perhaps. But isn’t that what people say about any true artist? So let’s get creative!

Does your website need a quick refresh or maybe a complete overhaul? Contact our digital team to see what artistry we can create with you.


Check out these related blog posts:

Post a Comment

*Required Fields

WhiteSpace Workbook

Workbook lets you compile all the things you think are awesome about us. Look for the plus sign to add people, projects, concepts – anything – to your Workbook. Then, save what you like as a PDF.

Your workbook is empty.