Experimental Navigation:
Avoiding the Pitfalls of Innovation

Published September 2, 2024  |  by Roger Soucy

Traditionally, websites with a lot of content use multiple levels of hierarchal menus to organize the content and provide an easy way for users to navigate it. Over the decades that the Web has evolved, menu-based navigation has remained relatively unchanged, even though designers frequently try to push the boundaries and create innovative navigation solutions. Let's examine why that's the case and how we can push innovation without sacrificing usability.

Why Has Navigation Remained Static?

With so many designers looking to push boundaries and millions of websites on the Internet, why haven't navigation elements changed much? The simple answer is usability. Users are comfortable with traditional navigation systems and require little instruction on navigating through menu options to find what they need. Conversely, non-traditional navigation systems often require hand-holding to guide users through the content.

That's not to say that we can't experiment and create new navigation concepts, but we must understand exactly what we're doing and how it can affect our users. Some websites can benefit from experimental navigation, but many more will suffer from it. Understanding when we can step away from tradition and the pitfalls to avoid can open the doors to innovation.

Understanding the Purpose of Navigation

Before pushing boundaries or creating entirely new design patterns, we need to understand the purpose of navigation. If we ignore this, we are guaranteed to create something that doesn't work and drives users away. Navigation elements serve as a roadmap for users to explore the website's content and functionality, highlighting the most critical items and allowing users to drill down to the details.

Hierarchal menus are a logical way to present hierarchical content. Well-formed navigation elements give users an at-a-glance summary of the available content and its structure, much like a content outline. Additionally, the traditional menu of options is a design pattern that most users interact with hundreds of times daily, from computer software and mobile apps to traditional file systems and book indices. These types of menu navigation are so prevalent that nearly every user inherently understands how they work.

The only real design challenge with traditional menu navigation systems is how much information to present and how to organize it. That challenge still exists when we step away from traditional navigation and creates dozens more.

Challenges of Experimental Navigation

Experimental navigation can be a great way to create a unique user experience, but it can also alienate users and make it harder for them to find the content they want. The key to successful experimental navigation is to ensure it's intuitive and easy to use with minimal effort. If users have to spend time learning how to navigate your website, they are likely to get frustrated and leave. Some of the primary challenges created by using non-traditional navigation are listed below.

See the Pen No-JS Radial Menu by Roger Soucy (@Roger-Soucy) on CodePen.

This radial menu is interesting, but some users may have trouble interacting with it.

Usability

While often designed to be visually appealing, experimental navigation must maintain a balance between creativity and usability. It's necessary to perform extensive user testing across a wide selection of users, from those who are computer savvy to novices and even those who struggle with computers. The feedback provided by user testing will highlight how easy or difficult it is to navigate the content and where users may experience frustrations that may cause them to leave the website.

Accessibility

Users with disabilities have a hard enough time navigating traditional websites. It is essential to consider how applications like screen readers may interpret experimental navigation and how it affects impaired users. Animated navigation may look amazing, but if a visually impaired user can't see where to click or a screen reader can't read the available options, then no amount of visual appeal will help the user navigate the website. Consider the needs of your target audience and ensure that navigation remains accessible to all users.

Training

Users are familiar with traditional navigation design and need little instruction on how to use it. However, experimental designs often must guide the user on their use, which may involve subtle hints or full-blown tutorials. It is important to remember that the amount of time a user is willing to spend learning how to navigate your site is directly proportional to how invested they are in accessing your content. Users will likely switch to a competitor's site with more straightforward navigation if the learning process is too long or complicated.

Consistency

Navigation that changes from page to page or only exists on one page is almost guaranteed to make users give up on your website. Experimental navigation should maintain a consistent experience by ensuring that users can always find their way around your website and only have to learn how to navigate it once. Also, remember that when the novelty of a unique design wears off, experimental navigation that takes time to use may become more of a detriment than a benefit.

Performance

Some experimental navigation techniques, particularly complex animations or interactions, can negatively impact website performance. While some users have robust computers with bleeding-edge graphics cards, laptops, tablets, and budget computers may struggle with complex animations or heavily scripted controls. Experimental navigation must be optimized for speed and performance to function on minimal computer specs. Users who have to wait for navigation to load or become usable are likely to give up and leave the website.

Mobile Access

Mobile browsing accounts for over half of all Web traffic. Experimental navigation must also translate well across different devices and screen sizes. An experience designed for a wide-screen monitor is unlikely to translate well to a small mobile device, and it's hard to make mobile-friendly navigation look good on a desktop monitor. Designs must be thoroughly tested on various mobile devices and screen sizes to ensure a seamless experience.

Testing

It's always important to thoroughly test designs before implementing them, but that goes doubly for experimental designs. Traditional navigation is often tested to ensure it displays correctly on all screens and browsers and that each link works as expected. Experimental navigation requires much more in-depth testing. Various devices, browsers, screens, operating systems, and hardware can all affect how the navigation works or doesn't work. Testing across all these variables is often difficult, time-consuming, and expensive.

See the Pen Sliding Page Sections by Roger Soucy (@Roger-Soucy) on CodePen.

While the content navigation of this example is different, it suffers from many usability and accessibility issues.

Benefits of Experimental Navigation

Given the obstacles, it is easy to see why many designers would stick to traditional navigation design patterns. So why would we want to experiment at all? Experimental navigation aims to break free from convention to create a more memorable and interactive user experience. Additionally, innovation requires experimentation. Some future experimental designs may solve existing navigation problems and become the new navigation standard. That can't happen without experimentation, and there are a few other benefits you may see as well.

Differentiation

Experimental navigation can make your website stand out and give it a uniqueness that separates you from your competitors. By stepping away from convention, you create the opportunity for a unique visual identity and experience that showcases your brand and captures your users' attention. Experimental navigation can leave a lasting impression on visitors, making them more likely to remember your website and return for future visits.

Engagement

Experimental navigation techniques like interactive or animated elements, unconventional placement, or playful designs can spark curiosity and encourage users to explore further. They can make navigating a website feel more like an adventure, fostering a sense of novelty, excitement, and engagement. Users are far more likely to share websites with unique designs so those in their social circles can share the experience.

Exhibition

An experimental navigation will set your website apart and showcase your brand's commitment to innovation, but it can also focus attention on your products and services that traditional navigation can't. Artistic websites, where the content is focused more on a visual experience than selling products or providing information, often benefit from this type of exhibition using experimental navigation.

Who Can Benefit from Experimenting?

If implemented correctly, experimental navigation can enhance any brand and website, but certain websites benefit far more than others. As mentioned above, artistic websites such as artist portfolios, galleries, and musicians that aim to create an experience rather than an informational website will benefit the most from experimental navigation. Graphic designers and developers can also use such experiments to showcase their skills to potential clients.

Websites representing cutting-edge products or services can also use experimental navigation to convey a sense of your brand's innovation and unconventionally showcase a unique product. A unique navigational experience used in that way helps demonstrate a willingness to push boundaries and your brand's forward-thinking mindset.

Finally, websites that find traditional navigation unsatisfactory may benefit from experimenting with something new. In this case, user feedback often drives innovation to create solutions to user frustrations. Sometimes, conventional design patterns aren't the solution, and user feedback can highlight when that's the case.

In Conclusion

Embracing innovation and experimenting with navigation can help differentiate your brand, increase engagement, and leave a lasting impression on your users. However, implementing an experimental navigation design must be done with careful consideration and extensive testing. Balancing creativity with usability and functionality can be challenging, but ensuring that you don't lose users through frustration is vital. Ultimately, the decision on whether or not to experiment with navigation should be based on your brand, target audience, and the journey or experience you want them to have when they visit your website.

If you're looking to try something new or explore which types of navigation can work for your website, Elusive Concepts is here to help.