Responsive Website Navigation Design Patterns

Early methods of web design did not anticipate the wide variety of screen sizes we have today. Users expect consistency and continuity of websites when viewed on smartphones, tablets, laptops, or desktop computers. Website design has naturally had to change to adapt to this new need.

As web designers must envision not only the appearance, but the entire user experience of a website on each screen size. One of the most difficult areas of design for varied screen size is site navigation structure. From organization to display, there are endless ways to create a responsive navigation. The real trick is making it a great user experience.

The Challenges Of Responsive Navigation On Informational Websites

Informational websites tend to have large and complex navigation systems made up of numerous sections. Each section can have multiple levels of pages. User experience is improved by simplifying these systems and creating a well-structured navigation. It is important for the user to be able to navigate quickly and efficiently on any size screen.

Large Websites With Multiple Levels

The larger and more complex a website is, the more difficult it becomes to navigate. A clearly organized and intuitive navigation hierarchy will quickly direct users to their destinations. The Lonely Planet website, for example, does this by grouping items into categories and making the most popular navigation items stand out with photos and larger font size.

Multiple Audiences

Many websites cater to multiple audiences. Serving users with different needs means you need more than one navigational path for users to take. Organizing content based on audience will help keep users on the correct path and ensure that they are only seeing content that applies to them. Cambria cleverly approaches this situation by having their users select which audience they belong to before they even enter the site.

Different Entry Points

Users are led to websites from many different channels. Ads, emails, links, and direct urls are all avenues users follow to a site, which means they may not always be entering a site on its homepage. When this happens, it is important that the user can easily figure out where they are and where they need to go next.

The ie University website uses breadcrumbs at the top of the page and highlights the page the user is on when they open the menu. This makes it easy for them to distinguish where they are in the site and what other pages they may want to visit.

How These Challenges Affect Responsive Web Design Navigation

Approaching information architecture from a mobile perspective, initially, can help you get your foot in the door. Keep these four things in mind:

1: Simplicity Is Key

Always consider simplifying the complexity of your navigation structure. The Knight Foundation reduced their navigation to three items that are always visible on any screen size. The site uses the same navigation layout for deeper levels at smaller screen sizes by converting them to horizontal scrolling navigation. Having the navigation visible at all times makes it easy for users to quickly move between different sections and pages on the site.

2: Make It Intuitive

Until a user reaches their destination, it is important that their next step is always clear to them. This is especially true when users are coming to a site from a variety of entry points. You want to eliminate guesswork on the part of the user. The Museum of Science & Industry includes calls to actions throughout all of their pages, placing some of the most important ones at the top of the page. These items eliminate the user’s need to open the menu.

3: Keep It Consistent

Understanding user behavior can help you prioritize navigation items. User end goals should be easily achieved from anywhere on your site. The Science Museum of Minnesota designed their main header so that users can access Tickets, Membership and the Calendar at all times no matter what the screen size without having to go to a new page or open a menu.

4: Meet User Expectations

UI components that users are comfortable with can improve the usability of your site. Introducing a new icon or way to interact can confuse the user and distract them from achieving their goals. The following options are proven navigational components:

• Hamburger Menus - The hamburger menu is one of the most common forms of mobile navigation on informational websites. It can accommodate many different levels of navigation while freeing up space on your screen so that the user is not overwhelmed with navigation options.

  

  

• Dot Navigation - When users see dot navigation, whether it is in a masthead image or content within a page, they expect to be able to swipe through it. If they are not able to do this, they may think your site is broken or underperforming.

  

  

  

• Arrows/Plus Icons - Arrows pointing to the right or down and Plus Icons in a menu usually indicate that there is another level of content. When users click/tap on the arrow, they expect more content to load. Once the user has opened a menu item, the icon should change accordingly (the arrow that pointed right should now point down, arrow down should now be up, and the plus icon should now be a minus icon).

  

  

• Logo linking to homepage - This functionality is common on desktop sites. Keeping it consistent and available on any screen size makes it easy for the user to navigate.

It’s Worth It

Organizing complex, multi-level navigation structures is never an easy task, but your users will reward your efforts. There are always ways to simplify. Thinking about things from a responsive web design perspective will help you prioritize key pages and eliminate unnecessary content. If you get stuck, go back to your user goals and use them to prioritize. Using this method of thinking will ensure that your end result will be a site structure that is both easy to understand and navigate, no matter what the screen size.