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 ...
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 ...
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 ...
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-...
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 ...
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/...
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 ...
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, ...
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 ...
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 ...
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 ...
5
votes
Tabs vs Scroll in content heavy website
Which is a better UX principle in case of in a data intense website? It depends on a use case...
Tabs
The primary goal of the module tabs UI pattern is to permit users to view a group of related data ...
5
votes
Accepted
Tabs design pattern, solving for "N" tabs
Nice question - I am looking for other answers than mine as well!
@ Version 1:
Android introduced this as a more "standard" element for mobile apps (swiping screens that mimic "tabs"), when iOS ...
5
votes
Why does this UI (Google Translate) have a set of toggle buttons instead of radio buttons?
I believe it is a matter of choice. Toggle buttons need less UI as the label is already the input.
Toggle buttons may be used to group related options. Arrange layout and spacing to convey that ...
5
votes
Naming Confusion
If B is the main application and A is external application. The process can be called Push (B to A) and Pull (A to B). You can be more descriptive by using the real names such as Push contact to A, ...
5
votes
Mandatory tabs-an unusual pattern?
This is often the compromise between a developer (hopefully not a designer) wanting some flexibility for the user to provide input but still needing to make sure that a lot of information can be ...
5
votes
Should my webapp's tabs use browser tabs or an in-page tab?
The tabs belong to the application, not the browser, a browser is a different application.
Answer:
A – Tabs that open directly on the application page
5
votes
Should my webapp's tabs use browser tabs or an in-page tab?
Overall my opinion is that using browser tabs would be the more familiar experience for the user and easier for them to work with. Absent compelling reasons to use in-app tabs, the overhead of ...
4
votes
Tabs vs Scroll in content heavy website
If you have so much data, why wouldn't you want to use both methods?
Facebook does this really well in their documentations.
You can click the link on the side to scroll to the content. This gives ...
4
votes
Element transition between tabs
I think the two main things to consider here:
1) How helpful is the staggered transition compared to the simple?
2) How does the animation affect long-time users vs short-term users?
For number 1, ...
4
votes
How to indicate that an item has been moved to another tab?
First of all, I think that, as a core of Kanban approach, this should not be an issue for the Users, as there is a natural connection between swiping an item right and the fact that it lands in the ...
4
votes
Accepted
Should I spread my enterprise application across multiple browser tabs?
In enterprise environments, with cloud-based browser-based solutions like salesforce becoming the new standard, using browser tabs is fine. Also, somewhat enterprise-like websites like DropBox also ...
4
votes
Wizard component - current state vs active state
Use matching labels and colors
Showing incomplete tasks in gray quickly highlights the tasks which are being worked on and/or complete if they are shown in a different color.
Here are a few ways to ...
4
votes
Accepted
Multi-Tabs - how to handle invalid fields on non active tab with save for all tabs?
Indicate which tabs have errors, and show the errors for each section within the tab.
Optionally, if you find it suits your use case and how users interact with these tabs, you could include a ...
4
votes
Live/interactive elements in browser tab bars
The particular one that you have mentioned in the question do not have a name by definition as of now it seems.
Anyways, from a technical side it is adding JS functions to document.title. Therefore ...
4
votes
Stuck on handling common scroll gestures
I think the solution is to understand that although the gesture is the same, the functionality is different. The first is a Swipeable Menu with hidden tabs and the second is a Swipeable List with ...
4
votes
Mandatory tabs-an unusual pattern?
Why using a tab? Use instead a single page with some *mandatory fileds. Or as correctly indicated a stepper
4
votes
Should my webapp's tabs use browser tabs or an in-page tab?
That depends on how tabs/pages are related in your application; but speaking of a more general scenario:
Are the tabs related amongst them i.e. different parts of the same information? Or are them ...
4
votes
How to make important unhighlighted tab more visible without conflicting with current layout and color scheme?
A red circle with a number in it is an instantly recognizable indicator for "this many action items," and will never be interpreted as "this item is currently selected." In your ...
4
votes
Should a tab selection persist after refresh?
Yes, persist the tab. If a user is refreshing the page, most of the time it means something went wrong and they got stuck. It's a good practice to help them get back to what they were trying to do as ...
Only top scored, non community-wiki answers of a minimum length are eligible
Related Tags
tabs × 360navigation × 71
usability × 38
gui-design × 33
android × 31
mobile × 27
website-design × 19
forms × 17
ios × 16
buttons × 14
web-app × 14
material-design × 14
accordion × 14
menu × 13
information-architecture × 13
browser × 13
user-expectation × 12
filter × 11
layout × 10
lists × 10
desktop-application × 10
user-behavior × 9
design-patterns × 9
iphone × 9
tables × 8