UI/UX Principles for Tabbed Website Widgets

Jake Rocheleau

9 years ago

Web design is comprised of two interrelated yet unique subjects. General interface design is about aesthetic ideas while user experience design is about how an interface works. Both concepts should be applied to all areas of design from a full page layout to the individualistic elements in each section.

This post will cover some of the basic principles for tabbed interface elements. Most designers recognize these widgets in profile pages or in small content blocks. However tabs can also be used for navigation design and even parallax interfaces. Tabs are very common in modern UI design and it helps to learn how they function through live examples.

Common Design Ideas

Let’s start off with some interesting tab designs. Tab interfaces can be created in many shapes and sizes using distinct icons, colors, and animated effects. Many tabs are designed to fit into a layout naturally so that they appear like simple links.

The majority of tab designs also have a selected class for the currently active tab. This is a guiding UX principle to demonstrate which tab is currently visible, and which tabs are not. For example take a look at this responsive tab widget on CodePen.

The widget itself blends into the white container background using white tabs. It behaves like a tabbed navigation bar where each link appears to sit along its own line. When a tab is activated it loses the bottom border so as to visually blend into the content. This is a very common technique for showcasing an active tab on a website.

A bright orange border is also found on the selected tab. Colors can be used on the tab’s text, background, or even with a simple border. Use anything at your disposal to help a selected tab stand out from the others.

If you want to see a large sample of various tab designs take a peek at this Codrops article. Mary Lou has put together over 10 different samples of tabbed widget designs. They follow a minimalist approach but feel quite whimsical and suitable for any layout.

After looking over sample tab interfaces you’ll begin to understand the structure of these elements. Tab UI principles relate to expressing which content is being displayed at any given time. You also want to ensure that the tabs blend into the overall layout and don’t appear to stick out like a sore thumb.

However design is only one half of the battle. Another piece of the design pie relates to user experience, or in layman’s terms we’re talking about the behavior of tabs.

Tabbed Navigation

Website navigation design is one of the most important aspects of every layout. Visitors need to navigate between pages and this can only happen with a properly structured navigation.

Tabs can be used as navigation features to add some eccentricity into the mix. Modern websites often try to keep it simple but tabs can be an interesting choice for design aesthetic. Since each tab link would go to a new page, these tabbed navigation menus do not load content via Ajax. But the intended effect is still visible and draws attention from users.

Looking over the navigation of YES Canada it should be quite obvious that the design relies on tabbed links. Hover effects are added to each tab and a unique color is assigned to each individual link. Creativity is a big part of navigation design when using fixed tabs.

Vertical tabs can also be used for navigation as seen on Chris Jennings’ website. These tabs also use vibrant colors to stand out against other elements on the page.

Tabbed navigation can prove to be an exciting addition to any website. Just be sure that it behaves like a navigation menu. Visitors rely on nav links for traversing through pages of a website. Tab links work great in this case as long as they fit the overall design accordingly.

Content Widgets

Tabs can also be used for switching between content on a page. Unlike navigation links, these widgets are built using Ajax so the content loads without refreshing the page.

Content widgets are very popular because they perform like small internal nav menus. These widgets allow designers to fit a bunch of content onto a single page without cramping the design style. Tabbed navigation is also very straightforward and most users are intuitively familiar with how it works.

Take the example found on Shipwire’s pricing page. Three different tabs contain calculators for sales, storage, and customer reach. The visitor can adjust these interfaces to calculate an estimated price per order.

Instead of forcing all the input elements together at once they can be viewed separately. Some people may not like this feature but I think it relieves some anxiety from the process. Tabbed content makes the page feel smaller and thus easier to consume.

These tabs most likely pull content already coded into the page, rather than relying on Ajax to pull from an external database. This way the inputs can be hidden from view but still accessible in the DOM.

Ajax is still a powerful solution for developers used in many content widgets. Take a peek at this Ajax tutorial which covers how to build an Ajax-powered tab widget from scratch. It may seem confusing at first but with practice it’ll become like second nature.

Frontend Libraries

While there are some great tab plugins available you might be better off sticking to a fully-featured frontend library. These code libraries include dozens of widgets and sample codes from buttons to tables and sliding carousels.

Twitter’s Bootstrap is undoubtedly the most popular and well-known library for web developers. The library is constantly being updated with new features and bug fixes which add upon the codebase’s renowned sense of security.

Bootstrap’s tabs are quite simple and seem to follow along with Twitter’s original tab design style. Thousands of websites are built on top of Twitter Bootstrap and these tabs are just one of many additional features.

The best part about Bootstrap is that it’s customizable. You’re free to edit any of the codes yourself, or include external 3rd party plugins for pre-built solutions.

Another great frontend library is Materialize.css built as a resource for Google material design. This is Google’s new design language used for both mobile apps and website layouts.

Material.css has its own tabbed widget feature which behaves in accordance to Google’s material design specs. This way it’s super easy to create a web application or full website based on uniform interactive rules & guidelines. You can also check out Materialize.css on GitHub if you want to learn more.

The last library I’d like to share is Semantic UI. This is simply another HTML/CSS/JS frontend library for quickly building websites from scratch. Their tabs are used more as navigation elements to switch between content on a page. The design style is somewhat bland, yet it’s very easy to customize once you read through the documentation.

Open Source Code Snippets

If you’re looking to build a simple tabbed widget design then look no further. The following code snippets can fit the role of templates or inspiration for constructing your own tabbed interface.

From vertical interfaces to dynamic animations, this collection has everything you could need. Plus each snippet is completely free and open source for use in any type of project work.