User experience is the most important aspect of any website design. Improve a user’s experience immediately by organizing WordPress content in a more accessible manner. Both module tabs and submenus with anchors are ideal options, but you have to weigh the pros and cons to determine which works best for UX on both desktop and mobile.

The Value of User Experience

As long as the content’s accessible in some way, that’s good enough, right? Not at all. Here are a few eye-opening UX statistics showcasing just how important the user’s experience is:

• Improved UX design boosts conversions by up to 400%
• 88% of shoppers online won’t return after a bad user experience
• Poor usability, such as the wrong content organization menu choice, causes up to 70% of online businesses to fail

The most difficult part is ensuring the best user experience on both desktop and mobile. Considering, mobile devices, not including tablets, have a 52% market share, while desktops have a 45% market share, it’s a good idea to focus on the UX for all the devices a user might come to you from.

Organizing WordPress Content: Tabs or Submenus?

Organizing WordPress content in menus makes it easier to access. The type of navigation you choose makes all the difference. But, should you choose module tabs or submenus?

Both are good choices. They provide easy access to a site’s content. The main benefit of these systems is they quickly show users every content section at a glance. Of course, they can still be used with traditional hamburger, drop-down menus, and navigation bars.

Module tabs and submenus with anchors are specific ways to organize content on a single page. Think of it as a single-page menu that complements your main menu. Also, the content in these menus are all related to a single topic.

Instead of just scrolling, these menu systems provide a quick outline of what’s on the page and one-click or tap access to individual sections. It’s user experience at its finest.

Using Tabs – WordPress Tab Example

While tabs and submenus in WordPress often look similar, they function differently. A great example of a tab menu is EarthDaily. Under each resource section we neatly organized page content into individual tabs.

Each tab you click switches to a sub-section of the page. All categories are easy to see and it’s not difficult to navigate at all.

The Benefits of Using Module Tabs in WordPress

• Tabs allow all the content on a single page to load immediately. The user doesn’t have to click to a new page to view a new sub-category of the main topic. Reducing loading times without clutter always improves the user experience.
• Users get to interact with the page itself. Instead of just scrolling through, they have to manually interact to go from section to section. This engages them and helps them reach just the sections that are most relevant to them.
• They improve the overall visual appeal of a site.
• Tabs are intuitive. Users don’t have to guess about how to best navigate a page.
• Dividing a page’s content into tabs places less content on the page at a time. Content’s easier to absorb and doesn’t require as much scrolling

Obviously, module tabs only work if you implement them correctly. As with any UX and UI elements, there are usability recommendations to make the most of them. UsabilityGeek lists 14 such recommendations, with some of the most important rules including:

• Ensure the tabs look like tabs. Don’t try to be too creative here.
• Stick to a single row/set of tabs. Double tab navigation is good, but multiple sets of tabs is just confusing.
• Make it easy to see which tab is active and always set a default active tab.
• Keep tab labels simple and only use a few words at most.
• Ensure all tab content loads in the background so the user doesn’t have to wait for the page to reload with each click.

The Difficulties

There is one downside to these tabs. They’re not always easy to implement on mobile, though we have had success. Screen real estate is limited and multiple rows of tabs take up too much space. A few tricks to get around mobile implementation problems include:

• Limit the number of tabs. Make it obvious to the user they need to scroll left/right to show more options on the menu.
• Allow swiping to jump from one tab to another.
• Hide the tab menu when scrolling down, only to reappear when scrolling up.

Design Your Way shows great examples of tabs on mobile.

Implementing Submenus – WordPress Submenu Example

At first glance, submenus might look like tabs. The solution we built for BedRock Systems showcases exactly what makes submenus so different – all content is on a single page versus hidden behind individual tabs.

• 

It’s important to note that these are submenus with anchors to content on the page and not drop-down submenus. Instead of navigating a large multi-page site, submenus with anchors are used for either single-page sites or to organize content on a single page of a multi-page site.

When you click on any of the submenu options directly below the header image on BedRock’s site, you’re taken to a different section of the page. For instance, Resources takes you to the bottom of the page versus a different tab.

Much like module tabs, users still get the benefit of the entire page being loaded from the start. However, there’s one more noticeable benefit. Users don’t have to interact if they don’t want to. If they want to read everything, they just keep scrolling. Each menu option is anchored to a particular section of the content.

The submenu stays sticky near the top of the page. It’s easy to find, intuitive, and still allows users to jump to just the sections of content on a page that matter most to them.

Building Your Chosen System

WordPress allows you to implement both types of menus. One of the easiest ways is with Elementor Pro. It’s one of the leading theme builders in the industry. Gain full control over every part of your WordPress site design, including implementing module tabs and submenus with anchors.

While Elementor Pro works well for either menu system, JetTabs makes a great addition to Elementor Pro for building tabs. Instead of text-only tab widget editors, JetTabs allows you to build complete templates for your tabs, giving you even more control and flexibility.

Content organization is key to a site’s success. Contact us for assistance choosing the right organization menu option based on your audience.