How to Design a User-Friendly Navigation Bar in Squarespace
When someone visits your website, they are often there because of a referral link from somewhere. And once they get there, you’ve gotta keep them around! One of the ways to do this is to make it easy for them to find out what else they’re looking for, especially if you’re running a product-based business.
In this post, I’m breaking down a few simple ways to improve your navigation bar to make your site experience better for visitors. Navigation is a complex topic so this guide should be considered as a “phase 1 check-in” in the evolution of your navigation design. In this post I’ll cover:
Essential navigation elements check-up
How to map out a happy path
How to refine your folders and categories
What is a navigation bar?
If you’re unfamiliar with the term “navigation bar,” it’s simply the header area of a website that contains links of various types. Sometimes it can be referred to as a “navigation menu.” Navigation is a really important aspect of your website because after you put all that work into creating content, users need a way to find it easily!
Foundational Elements
Clear Clickable Areas
Starting on the left of the navigation bar, make sure you have a clickable logo that directs the user to your homepage when clicked.
Next, make sure your search bar is prominent. On desktop-sized screens, you should have a full search bar with a search icon on the left and a “search” label. On mobile, you can get away with just a search icon. According to Nielsen Norman Group, a search icon is one of the few items that have universal recognition. It’s important to note that some Squarespace plans don’t allow for search in the header (like mine!) so just keep trucking away and upgrade when you’re ready.
If you’re an e-commerce site, is your shopping cart icon prominently displayed? The best position for this is in the top right-hand corner of your site, which is luckily the default position in Squarespace.
Is your about page linked? This is one of the most often clicked pages on your site.
Usability
All navigation links should be in an easy-to-read style and size. Ideally, you’d want to set your type somewhere between 14 and 16pt here.
Make sure there is ample space between the navigation links to ensure maximum tappability. If you don’t have room, that’s a sign you might need to fine-tune your labels to be more concise and evaluate how many categories you’re showing. Unless you’re a massive e-commerce retailer, it’s unlikely that you’ll need more than 5-7 links in your navigation.
Test how your navigation bar behaves as you scroll down the page. Make sure your logo or other elements don’t obstruct the content on the page.
Writing Labels
Writing labels is one of the most important of navigation design because for each label you’re essentially picking one or two words that will get your whole audience where they need to go! When you’re thinking about what to use as labels, it’s best to avoid industry or brand-specific jargon. For example, if you call your blog something like “journal,” other people might not know what that term means. Your job is to remove any of the guesswork someone might experience when searching for something.
Avoid using repetitive language for labels. For example, instead of listing “Recipes for Instant Pot,” “Recipes for Air Fryer,” it would be better to have a “Recipe” folder with the labels “Instant Pot” and “Air Fryer” under it. The most concise label is almost always the best choice. Remember, users have a very short attention span so it’s important to make it super speedy and efficient for them to reach their desired destination.
Lastly, always opt for organizing your labels alphabetically within category folders unless there is a specific reason users would grasp a non-alphabetical organization easily. For example, if you’re selling holiday products it might make sense to organize your links in the order of the holiday name, rather than alphabetically. In this scenario, more people would be able to recognize that Halloween comes before Christmas, for example.
Category Link Guidelines
Category links are the top-level navigation labels that are always displayed on your site. Kinda important, right? Here are some tips to ensure they’re working their hardest.
Make sure your top-level folders link to some sort of category page. The label on the category landing page should always match whatever the navigation label is because it’s essentially a signal to the user that says “Hey, you clicked on this and now you’re exactly where you wanted to go!”
Your category links should come before any social icons or calls to action in your navigation because you want them to be the first thing users scan when they arrive on your site.
When a category link is clicked on, it’s a good idea to include an “active state” that shows which page the user is currently on.
As I mentioned above, navigation is a super complex subject but by covering off on these foundational elements, you’re well on your way to a more usable site! Navigation can be endlessly tweaked and refined so your rule of thumb should be to always strive for the simplest and most concise option.
