UI/UX Design Trends For Tabular Content On The Web - envato.com coupon

Tabs are common design features for all modern websites. They offer a navigation system where users can browse content without reloading the page.

These tabbed widgets can fit anywhere like the top navigation, the sidebar, or even inside the main page content. But how do you design quality tabbed widgets that blend naturally into a layout?

In this post I’ll share some design trends and strategies for modern tabbed content in web design. Whether you’re looking for inspiration or UX design techniques I guarantee this post will help.

Custom Tab Animations

Modern web animation is one of the easiest features you can add for some extra pizzazz. Users enjoy animations that respond to interactions because they validate behaviors like clicks or swipes.

This is a popular trend that can also be easy to overdo if you’re not careful. Let’s look over some examples of tabbed animations to see how they look in the real world.

Here’s a really simple hover animation effect used on a tabbed content widget. The tabs animate up when hovered and transition to a darker background color.

Once clicked the active tabs lighten and jump off the page. This is used for contrast to help visitors quickly determine which tab they’re reading. I couldn’t imagine a better design style that would work on any website.

If you’re looking for animation ideas but aren’t sure where to start then heir on the side of simplicity.

For a more complex example check out Sky Tabs which uses 3D transitions for content animations.

Whenever you click on a tab the content fades out and back in, but moves in a 3D direction into the background. This is much more complex and it’s sure to catch the eye, but won’t work in all instances.

I like this style for pages that want to break the linear animation style. 3D is still fairly new on the web so it’s an emerging technology. But I expect to see a lot more of it in the coming years.

And you can use animation for more than just horizontal tabbed blocks. Take a look at this theme demo which uses a tabbed FAQ widget lower on the page.

Each question displays like a link and you click to animate the answer into view. Each click auto-hides the previously visible answer which makes it easier to skim and pick up content from a distance.

This is typically called an accordion menu and it works very well in websites that have FAQ pages or question/answer content blocks.

All of these examples work great with animations and each animation fits the design perfectly. Animation isn’t a necessity but if you can work it into your site it’s well worth the effort.

Highlighting Active Tabs

This might seem like common sense, but you should always designate one active tab through some design change. This can be a background color, font size, height/width change, border color, or anything similar.

How you add highlights and where you add them will change for each project. But every tab design should incorporate a highlight effect.

Take a look at this tabs framework which offers dozens of different examples to choose from. I like this design because it’s fairly innocuous yet it’s also detailed enough to stand out.

The highlighted tab uses a different background color and border color along with a light tooltip popping up from the content area. This arrow visually connects the tab to the content so your eye just follows the path naturally.

You can use any of these highlight features by themselves and they’d all look fantastic. But combined they give off a stunning look and really draw your attention.

For a much simpler example check out the Evnt theme. Lower on the homepage you’ll notice a scheduled events section with tabbed links for the dates.

As you click through the tabs you get a nice fading animation in the content. This is very simple and it aligns well with the simple tab color highlight.

This is the perfect example of a traditional tabbed widget design because it conforms to standard design practices that anyone could mimic. Whenever in doubt always go with a minimalist design style.

The SOZO theme is another fine example of simplicity in action. This is an ecommerce theme and the homepage uses tabbed text links for sorting new products, best products, and featured products together.

All you get for the highlight is a simple underline. This looks like a bottom border which helps define the tab’s space, but it also draws your eye to distinguish which label is selected. The small animation effect is also nice on the eyes.

Use these examples to plan your own tab highlight effects. There are only so many different styles you can achieve for tab highlights and you’ll want them to mesh nicely with your design. But study as many examples as you can and don’t be afraid to try new things on your own.

Dynamic Content Sorting

Ajax widgets are a staple in all modern websites. They work on desktop and mobile browsers and they reduce HTTP requests for most visitors.

Tabbed widgets and Ajax content go together like PB & J. It’s fine to use tabs for linking to different pages, but full tabbed widgets provide a lot of value when users can browse through content without reloading the page every time.

I find these to work best on homepages for sites that have a lot of sortable content. For example the Assyrian theme uses a widget for sorting items based on two categories labeled “jewellry” and “women”.

These are just default filler categories for the theme, but they represent products that could be sorted dynamically on the homepage. This feature could be handy for any ecommerce site or small business website that has a lot to offer.

Dynamic content is typically pulled from a database via JavaScript, but you can also embed the content into the HTML and hide it until clicked. This way your tabbed content loads super fast and works like an in-page catalog.

Another similar example is the Fobe theme for Prestashop which has four unique layout styles using this same tabbed content widget.

I like this design a bit more because the links are huge and they use big icons to grab your attention. There’s nothing inherently right or wrong about this design style. It just seems nicer on the eyes and blends well into the website.

There are so many different reasons to add dynamic content onto your page. These two examples are for ecommerce products but you could also dynamically sort the most popular posts of a blog or your recent tweets from Twitter.

The type of content doesn’t really matter as much as your tab design style. Also these widgets can take up a lot of space so I recommend containing them to high traffic pages like the homepage.

Feature Post Tabs

In a recent post I covered magazine blog trends including the featured post section. This appears at the top of every major magazine site and it prominently lists a handful of feature posts.

This featured post widget can be designed with static links, with small content blocks, or with tabs that cycle through recent posts. The tabbed effect isn’t as common but it can work insanely well if designed properly.

Take a look at the above university theme right underneath the top navigation bar. You’ll notice a long widget that features one post with a thumbnail to the left, along with a vertical list of featured posts on the right.

You might assume this vertical list is just a series of links. But it actually works like a tabbed widget where clicking a link loads that story into the left-hand side.

Some visitors might find this annoying because they’d rather just click and go right to the story. There is no right or wrong way to do any of this. But I personally like the tabbed widget in conjunction with a slideshow timer that moves between featured stories every X seconds.

You’ll notice this effect on the Journalist theme which has a very similar setup with a timed loading bar.

The tabs are a bit more subtle and the featured image box takes up the entire page width. But minor aesthetic details don’t change much about the functionality, so it’s really just another tab-based featured post widget.

I like the added animation effects and the small loading bar behind each post. This is a clever addition and it lets visitors know at a glance where they are in the slideshow.

For a more professional style check out the DW Focus design. This looks more like a newspaper so the featured image box doesn’t take up as much room. It also feels very grid-like with a professional color tone.

What’s different here is that each tabbed link is just text, so no more small thumbnails. But the big visible story does have a thumbnail and that draws most of the attention.

This is a nice effect if you want to remove clutter and keep attention focused on one area. Again there’s no wrong way to do this, but it depends heavily on your target audience and your site’s theme.

In this slider you’ll notice there’s also a small dot navigation at the bottom of the vertical link pane. It’s a nice addition but certainly not necessary considering the tab links are clearly visible.

But some people might not like how the vertical tabs can feel cramped in that small pane.

That’s why the Belle theme uses a horizontal tab bar full of tabbed links with full headlines.

You can clearly see each post’s title and categories along with a very clear tab highlight effect. The selected post also uses a huge fullscreen featured image which paints a picture of the content and draws your attention with visuals.

This trend works best on blogs and magazines. However most websites these days are structured as blogs so it’s not crazy to add this somewhere. And even personal/corporate websites often have their own blogs somewhere on the site. So this is a nice trend if you publish enough content to justify a featured post section in the first place.

Sidebar Tab Widgets

So far I’ve focused primarily on in-page content with tabs. But there’s plenty of room for sidebar content widgets running tabs for all sorts of reasons.

Blogs mostly have the room for these sidebar widgets but you could also add them to ecommerce sites to sort through categories or specific properties.

The simplest widgets often provide specific value to the user and aid in the browsing experience. Take for example the DirectNews theme which has a “trending on socials” widget in the sidebar.

You only find this on the homepage and it organizes whatever posts are doing the best on certain social networks. Granted this really works best for very large brandable websites that get thousands of shares per day.

However the concept can be translated to anything social. For example, you could pull the latest updates from your site’s social accounts and show these in the sidebar. The tabs could switch between different social sites in your network.

This idea also works well for sorting different types of posts based on metrics like recency, popularity, or even randomized listings. The Blogoma theme is a great example of this in action.

The tab design is really simple but it stands out against the tan background. Each tab is clearly visible and the content is organized like most typical blog post widgets.

You could use this for recent products in an ecommerce shop, recent updates to a social network, or recent users who logged into their accounts.

Be creative with your tabbed sidebar widgets and always try to add value to the user experience.

Diverse Content Widgets

Lastly I want to look at more diverse tabbed content that doesn’t fit into a particular trend or mold. These are all fantastic examples of creative web design and they’re easy to mimic in your own projects if it makes sense to do so.

First is the Fajar theme which lists the company’s partners in a tabbed widget box. Each partner has a photo, a description, and links to their social accounts which update dynamically.

This is an excellent example of a valuable widget that could be found on any landing page or corporate homepage. It gives visitors a peek into the humans running a company and lets them connect on social.

The highlighted tab is clearly visible and it draws a distinct line between other areas of the page. This is one of the better tabbed widgets I’ve ever seen in regards to functionality and it serves a purpose on the homepage.

In the Gamez theme you’ll find a ton of different tab widgets. This design actually uses tabs in many different places on the homepage, but my favorite is the small widget near the bottom full of preview videos.

It uses vertical tabs that switch between different previews for video games. The preview doesn’t start playing right away, but instead gives you a thumbnail with the play icon.

You can click the icon to start playing the preview in a modal window. This tabbed widget is a nice way to hide content on the page until a visitor wants to see it. Otherwise you’d have to list all the previews together which takes up much more space.

But I really like the animation style and the highlight effect when clicking through these tabs. The currently active tab increases white space so it actually takes up more room in the tab menu. Definitely a solid technique to grab attention.

Lastly I want to showcase the unique CeeVee theme which uses tabs for the overall layout. On the homepage you get a list of vertical tabs with simple labels for about, work, clients, etc.

Everything loads dynamically so there is no reason to hit the back button. Some users may hate this and find it overly complex. But this design pushes the boundaries of what you can do with tabs in UX design, and it’s definitely a creative idea for an online portfolio site.

I recommend borrowing ideas that you like and combining them into your own projects. No single design always has everything you’ll want for your current project. But you can pick different tabbed elements that you like and combine them together to get the best results.

Wrapping Up

Tabbed widgets offer a unique way to organize your pages without taking up too much space. You can squeeze a lot of content into a series of tabs if you know how to design them properly.

I hope the examples in this post can guide you along the way and help you build incredible tab-oriented websites. Always be open to borrowing trends from different designs and don’t be afraid to get creative.

The post UI/UX Design Trends For Tabular Content On The Web appeared first on Envato.

envato.com coupon from Envato https://envato.com/blog/uiux-design-trends-tabular-content-web/
envato.com coupon