Hot answers tagged

73 votes
Accepted

Mandatory tabs-an unusual pattern?

Try using a stepper instead of a form. Tabs are often used as a UI space tradeoff for complex details, and don't imply any actions or sequence. I might not have the details of your use case, but it ...
user avatar
  • 22.8k
23 votes
Accepted

Which way do arrows point on a tabbed web page?

Which relationship do you want to emphasize? Use that to inform your decision. The down arrow in your image indicates a relationship of "is title of" or "is detailed by" or even "has child", whereas ...
user avatar
  • 408
22 votes
Accepted

Android UX - when to use Tabs and when to use Navigation Drawer?

Per the Material Design Guidelines on top-level view strategies, three main strategies are: Focus on a single view with embedded navigation. By putting all the necessary navigation directly inline ...
user avatar
21 votes

Which way do arrows point on a tabbed web page?

Adding to Will's answer, if you're looking for a non directional highlight, here is a great example from Google's material Design Material design guidelines on using Tabs The tab corresponding to ...
user avatar
21 votes
Accepted

Three tabs, each containing settings of increasing complexity - what should they be called?

If 3 tabs constraint is given and can not be changed then it is difficult to answer without understanding functionality and context. Basic, Advanced and Whatever are unlikely the categories users use ...
user avatar
21 votes
Accepted

Should my webapp's tabs use browser tabs or an in-page tab?

It's not a matter of better, it's what is the problem trying to be solved. I don't have any real details about your use case, but you can see some logic applied across a range of domains. A: Open in ...
user avatar
  • 22.8k
21 votes

How to make important unhighlighted tab more visible without conflicting with current layout and color scheme?

First, the contrast on the dark on dark text needs to be improved either way, for unimportant or important tabs. Second, you may not need to highlight it at all. Often, as long as users are well-...
user avatar
16 votes
Accepted

Android UX - When to use Bottom navigation and when to use Tabs

Keep navigation grouped together. Keep the navigation elements together to establish consistency across the application. So if you have navigation elements besides the tabs at the top, make the tabs ...
user avatar
  • 1,564
15 votes

Best way to show tabs in UI

Take cue from this. This scheme is followed almost everywhere. The selected tab seamlessly merges with the content area while other tabs have darker tone in general.
user avatar
  • 1,929
15 votes

How to make important unhighlighted tab more visible without conflicting with current layout and color scheme?

Go back to your colour picking committee and tell them their scheme violates accessibility standards and to change it, toot suite as they say. That's why it's hard to spot. https://webaim.org/...
user avatar
  • 1,773
14 votes
Accepted

Alternative to tabs with long names

You can try breaking the tab control into a master-detail combination. Then you have all the width you want and a more uniform display of the key information (the columns). download bmml source &...
user avatar
14 votes

Three tabs, each containing settings of increasing complexity - what should they be called?

Given that my comment gets some upvotes, I'll put it in as an answer. Change to two tabs, basic and advanced and put the advanced and debug options in one list. Try and let go off something if it ...
user avatar
13 votes

Is having multiple rows of tabs against Material Design?

Don't compromise your UX for the sake of following material design. Material design is meant to compliment your UX, not dictate it. So don't follow it to the word. 1st decide on what's the best user ...
user avatar
  • 10.5k
12 votes
Accepted

Should the spacebar activate tabs?

Marco Zehe, Mozilla accessibility QA engineer and evangelist, provided some advice in an article about implementing tabs in web apps with WAI-ARIA. He advocates cursor keys for moving focus between ...
user avatar
  • 14.2k
12 votes

Which way do arrows point on a tabbed web page?

They both look wrong and unecessary. For a tabbed interface the colour of the tab should be the colour of the selected page.
user avatar
  • 11.1k
12 votes

Which way do arrows point on a tabbed web page?

My recommendation would be for option A as you are providing a visual indicator from the tab text to the content below stating that this is the highlighted tab and the related content for it is below ...
user avatar
  • 43.6k
9 votes

How to make important unhighlighted tab more visible without conflicting with current layout and color scheme?

With so much restriction, the first thing that comes to my mind and eyes is to use some of the graphic resources already implemented in the design. Avoiding the change of color in the text or the tab, ...
user avatar
  • 13.8k
8 votes
Accepted

Tabbed "wizard": next vs save?

You say: I've decided for tabs (instead of a wizard) due to the fact that the user might not fill it all out in one go, but rather re-visit and edit it from time to time. So you have a hefty task ...
user avatar
8 votes

Which way do arrows point on a tabbed web page?

If you are going to use a skeuomorph you should avoid unnecessary and baroque decoration Here's some originals from my current desktop (the wooden one) to help us understand what it is we are trying ...
user avatar
8 votes

Android UX - When to use Bottom navigation and when to use Tabs

Use tabs: If there are fewer than three destinations, consider using tabs instead. Use Navigation drawer: If your top-level navigation has more than six destinations, provide access to ...
user avatar
  • 16.7k
7 votes

accordions vs tabs

Accordions What Problem Does This Solve? When there are too many items to fit into a limited space or when the number of items, if displayed all at once, would overwhelm the user, then the question ...
user avatar
  • 1,790
6 votes

Best way to show tabs in UI

Ths is called "tabbed document interface", so you can google it. From my experience: Active tab back color should match page backcolor, with no lines separating the two. All tabs should be the same ...
user avatar
6 votes

Alternative to tabs with long names

I think a good demonstration of alternatives to a standard tab control can be seen with Telerik's RadPageView control. http://www.telerik.com/products/winforms/pageview.aspx As Esin stated, you could ...
user avatar
6 votes

Which way do arrows point on a tabbed web page?

Interface design, historically, was based on physical things from the real world in order to increase familiarity for the user, and hence trivially communicate how the interface should be expected to ...
user avatar
  • 241
6 votes

Is having multiple rows of tabs against Material Design?

According to the recent updates of Google Material design, here's where material talks about tabs usage and it forbids using nested tabs: Although Google puts a lot of effort to make the best UX, the ...
user avatar
6 votes

UX improvements for tabs with access control

Users that have no access to a page should not be able to click at it at all. If you let a user click on a button only tell them later that they have no access to its content it can make them ...
user avatar
  • 783
5 votes
Accepted

Alternative to Tab View in Dashboard

It sounds like your customer is, like everyone else I know in finance, very much hooked on Excel. It might seem horribly cluttered to you, but this person is likely used to working with giant ...
user avatar
  • 12.4k
5 votes

Alternative to tabs with long names

If you can absolutely not shorten the text or re-group them meaningfully; I'ld go for side tabs. download bmml source – Wireframes created with Balsamiq Mockups
user avatar
  • 622
5 votes

Which way do arrows point on a tabbed web page?

Option B is breaking the horizontal line between tabs and content. #it just feels unpleasant. Option A is a complete menu plus an arrow dictating the flow direction telling you to read the content, ...
user avatar
5 votes
Accepted

The most efficient solution for breaking this form into multiple tabs

I would like to leave a comment but it seems that only experienced users can do it. So I have decided to write an answer instead, let's see if you can use any of my ideas for your project :-) To ...
user avatar

Only top scored, non community-wiki answers of a minimum length are eligible