In today’s world, the term universal design refers to a design philosophy in which a product is usable by anyone with a disability. It began though, as a school of thought that represents a concept of designing a product or an environment that is universally acceptable. Take for example, car door handles.
Whether it’s a Lamborghini or a Corolla, you know instinctively how to open the door even if the door itself opens in a different way. Every car manufacturer from America’s Ford, Sweden’s Volvo, Japan’s Toyota etc follows the same design principle with their door. Sure, there are a few of stylistic digressions here and there but the basic design still persists even now, a century after the first Model T rolled out of a factory in Detroit. This very same principle applies to modern web navigation.
The unequivocal rules of web navigation.
The details of how your website should look like or what kind of functionality you’d like to add is up to you and your web developers but when it comes to web navigation, there are several ground rules you are required to abide by. Most of these rules are strictly non-negotiable, they’re as elementary as eating your steak at medium or below. One in particular is meant to be followed only if it’s applicable to your website. Those 4 rules are as follows:
- Your logo or your company title should always link to your homepage
The golden rule of any website. Clicking on your company’s logo should always, and I mean always redirect your visitors to your homepage. I have yet to find a website that diverge from this rule but do let me know if you do. I am oddly interested in finding an exception to this rule.
- Consistent and direct navigation
It doesn’t matter if your website navigation bar is placed on top, on the side, on the bottom, accessed from a dropdown menu or any combination of the three, what you need to make sure is that it stays consistent across every page within your website. I’m not talking just about the placement. The design, the size, the typeface and the color palette used should also be standardized for consistency.
Additionally, keep your navigation bar simple. If your website has lots of different sections, use a dropdown menu instead of listing each and every section in your navigation bar. In fact, you could use what is called a mega dropdown menu to handle your all of your sections, leaving the navigation bar for the bare essentials such as your company’s logo, a search box and links to social media channels.
- Be clear with your language and symbols
In literature, there is a term known as a purple prose. A purple prose is a prose that is so ornately obscure which serve little to no purpose other than to underline the fact that the writer in question knows a bunch of big words, or know how to use a thesaurus. This is pretty much an unforgivable sin in literature. In navigation, it is even more so. I get the inclination to stand out with your web design but navigation is the one place you shouldn’t mess with.
The company Juicero, even though they sell juice and have juice right there in its name describe what they sell as “raw, plant-based nutrition” and that is a big no-no. There are industry standards that are already at place. A magnifying glass signifies a search box. Three horizontal lines in parallel (the famous hamburger icon) is the universally accepted icon for dropdown menus. About is used for your company’s history and mission statements. Contact is used for your company’s contact information and address. Those things are the standard for a reason; leave your disruption on things that actually need disrupting.
- Use sticky navigation in conjuction with excessive scrolling
One of the trends most widely used in today’s web design is the use of infinite scrolling. Instead of separating contents into several different pages, infinite scrolling automatically load more contents once the user has reached the bottom of the page, like what you’d find on Buzzfeed. There is an alternative to infinite scrolling, in which a prompt is added to the bottom of the page and the page will only load more content when it is clicked, like on the tech blog TechCrunch, but the basic principle remains the same. Infinite scrolling gives off a seamless experience compared to the traditional pagination experience that is still in use over at pop-culture blog AVClub.
It’s not an approach that would work indiscriminately and I’m not advocating for or against that technique but if you do decide to use it, remember to use a sticky navigation bar as well. A sticky navigation bar is a navigation bar that stays in place as you scroll down. Buzzfeed uses a top sticky navigation bar while TechCrunch uses a side sticky navigation bar. Now, the topic of sticky navigation bar is a pretty hot-button issue in itself since it takes away screen space that could be used for content, especially on a mobile device, which is a fair complaint. The idea is to make your sticky navigation bar as minimal as possible by using a dynamic navigation bar.
Instead of keeping your standard navigation bar on top at all time, use a specialized navigation bar that will only come into view when your visitor decides to scroll down. Keep this special navigation bar as minimal as it can possibly be to keep it from being intrusive. For an example, take at look at the tech blog Engadget. Notice how the simplicity of the sticky navigation bar compared to the actual header of the website is helped by using a dropdown menu? Ideally, the sticky navigation bar should be shorter in height compared to the one at Engadget but the principle is on point. Keep in mind that even if you use pagination, a sticky navigation bar might still be useful if your page is as content-heavy as Engadget.
This only scratch the basic rules of web navigation, there are a lot of things you could do regarding layout and animation but there are wide-ranging opinions on those subject that it’d be better for you to find out which would work in your specific case. The 4 golden rules I defined above are the universal designs. They’re there so that if any visitor went to visit your website for the first time, they’d already know what to look for. A website is a globally accessible forum and making sure that everyone, no matter how little their experience with the internet is, wouldn’t get lost navigating your website is key to good navigation.