Published on | Prototyping: From UX to Front End — Medium Justinmind

UI/UX designers, strengthen your tab design with these eight awesome tips. Number four is a no-brainer!

In-page tabs that modularize content are a popular UI design pattern, and rightly so. They’re an intuitive way to present lots of information on-screen, whilst allowing you to save on real estate and avoid overwhelming the user. Tick, tick and tick!

But contrary to popular belief, tab design isn’t always easy. As we’ve learned from UX guru Jakob Nielsen, tabs are often poorly designed and can build up interaction cost.

So in today’s post, we’re lending a helping hand. If you’re getting started with tabs, or just need a refresher, this post is for you. We’ll be discussing everything from functionality and logic to visualization and consistency, plus some great DIY tab tips. Read on and get educated!

8 useful tips for tab design

Consider the goal of tab design

Full disclosure: this post discusses in-page and module tabs, not navigation tabs. The goal of in-page tabs is to allow the user to alternate between sibling views on the same screen. In-page tabs should not be used to navigate to different areas of a website or app, and definitely shouldn’t be used to replace navigation patterns like breadcrumbs.

As Jakob Nielsen points out, being able to switch between different groups of content within the same context is the reason we even have in-page tabs. So stick to the rules!

Do it yourself: in-page tabs only make sense if the user doesn’t need to see content from multiple tabs simultaneously. Use user personas and user stories to help you visualize what user need you’re going to address and how to present the appropriate solution in your site or app.

Do your homework. Test your tab design skills with a prototype now!

Arrange tabs in a logical order

Movement through a site or app should follow a logical order that visitors are familiar with. In the same way, your tabs should be arranged in an order that makes sense for your users.

The default tab (usually the furthest-left tab) is the first tab the user will see when the land on a page, so it should contain the most important/frequently-read information. The followings tabs should be arranged in order of importance or logic.

A great example of logical tab order can be seen on the Bobbi Brown cosmetics website:

tab-design-tips-correct-order

The first tab you’ll see explains what the product is, the second who might use it, the third why you should buy it, and so on.

Do it yourself: during usability testing, use heat maps to track where users are spending the most time on your site or app. Not only will heat maps help you gather feedback on which areas of your site need to be improved, you’ll also gain a better understanding of where users usually click for specific bits of information.

Chunk text responsibly in tab design

Tabs are a great way to display lots of information in the same section of a site or app. The downside to this is that you need to be careful about how you chunk your content. Poorly chunked content may lead to interaction cost, and cognitive load, putting a particular burden on the short-term memory.

For instance, if you display too much content in one tab, you’ll have users jumping back and forth between tabs trying to memorize information. Display mismatched content across tabs and users won’t be able to predict what they’ll find and may even mistake each tab as a new section of navigation.

Do it yourself: keep content concise and parallel in nature wherever possible. Card sorting is a great way to test your information architecture and interface controls.

Design labels that guide the user

Equally important as content in tab design is how you display it. As Nick Babich points out, text should be easy to scan and so labels should provide short, meaningful descriptions of what the tab contains.

For instance, use of logical, short key words (one or two words) and plain language. Likewise, avoid “ALL CAPS”, and instead, just capitalize the first letter of each word/label in each tab. Remember that module tabs will have space constraints in accordance with the layout of the interface too.

Do it yourself: use a design tool with ample font and label options to try out. Justinmind’s Text widget contains a Single/Multi line control which may come in handy.

Size matters

When it comes to tab design, the bigger the better. Well, sort of. Tabs need to be big enough so users can easily click or tap them.

Tab size is particularly important when designing for mobile, as the tapping area is obviously going to be much smaller. As a general rule of thumb, mobile tabs need to be at least the size of a finger.

Do it yourself: Android’s Material Design guidelines have a great section on tab specs. Likewise, Ivo Mynttinen provides an awesome cheat sheet for iOS here.

tab-design-ios-tabs Image credit: Design Code

Consider accessibility: active vs. inactive tabs

The accessibility of your UI design needs to be fool proof, and if it includes tabs, they need some attention. When working on tab design, keep the following in mind:

For starters, make sure that your tabs are placed at the top of the tab panel, not on the side of below where they might be overlooked.
Next, visually connect each tab with the content panel. Experiment with color palettes and drop shadow — this will help the user connect the dots.
Finally, differentiate between active and inactive tabs so that the active tab appears more prominent than the rest. Using high contrast colors and clean separation will help users with low vision get around your site.

Do it yourself: check out this simple tutorial by Markku Lukkarinen on how to create tabs in your wireframes, plus this post on achieving better accessibility in your designs.

Keep things consistent

Keeping the elements in your UI design consistent is always a good idea. As UX Researcher Euphemia Wong tells us, consistency is important in GUI control design because it eliminates confusion and reduces the learning curve.

When it comes to UI design patterns, it’s important to make it quick and easy for users to find their way around. In order to prioritize consistency in tab design, make sure that your tabs all look and behave in the same way.

Do it yourself: use Justinmind’s templates and masters to reapply styles and spread global changes across your prototype’s screens and UI elements. Save yourself some time, and ensure 100% consistency throughout your design.

And finally, let’s talk interaction

So you’ve got your tab design down pat, now it’s time to make those tabs interactive.

If you’re designing a website, you’ll need to decide whether to create a click or hover trigger. For in-page tabs when the user doesn’t need to switch between pages to access each tab, the hover may substitute the click for a more seamless experience.

tab-design-hover-movement

However, for the sake of accessibility, many users prefer the mouse click, as Creative Bloq points out.

tab-design-mouse-click-movement

If you opt for the hover, let the user know that they can click on content within each tab by changing the mouse cursor property to a pointer.

Mobile tabs will need a tap trigger. Whichever you choose, pair your trigger with a swipe or slide action for a smooth transition between tabs.

Do it yourself: head over to Justinmind and try out our Events system. Combine “On Click”, “One Mouse Over” (hover) or “On Mouse Tap” event triggers with “Show” actions and “slide left” or “slide right” transition effects.

Feeling confident? It’s time to put everything you’ve learned into practice. Download Justinmind and get started with tab design right away. You’ll enjoy a 30-day free trial, so don’t delay!

<a href="https://medium.com/media/b85dfbb5286d8a25cf2e754b9462cf45/href">https://medium.com/media/b85dfbb5286d8a25cf2e754b9462cf45/href</a>

8 tips to get tabs right in web design was originally published in Prototypr on Medium, where people are continuing the conversation by highlighting and responding to this story.

8 tips to get tabs right in web design

Cool stuff, every week

More Articles