Is it acceptable to place an action button on a tab bar?

Question

Consider a two tabbed view, in this case tasks and participants, whereby in the task view you are able to view cards of the tasks. Within these Task cards you are able to edit the content and assign them to participants.

It would also be required to create new tasks and this is where the question comes: Is it acceptable to have the 'create new task' button on the 'Tasks' navigation tab?

Here is the visual where the navy blue button on the tab bar will add a new task:

I'm reluctant to use the floating action button (FAB) because:

1. adding a task is not necessarily the most common action in this view and
2. the FAB is not so commonly used on iOS, nor is it in the iOS guidelines.

This design is for both Android and iOS mobile platforms so the answer should take into consideration both UI practices.

Answer 1

You should separate the two actions. Use tabs just for selection and for adding a task you should stick the action to bottom of visible area. Your tasks can be viewed by scrolling within the tabs and add action

Here is the wire-frame of concept explained above.

Answer 2

Selection category and its action can be separate, as it likely to confuse most of the users. Having a clear separation between them will be more clear and it also standard practice for mobile. You may also want to consider any other actions that users might require on the screen and group them together. Have quickly modified the wireframe earlier shared by 'Shaz' to explain the same.

Answer 3

On mobile, enclosing a touch element within another touch element should be avoided if possible.

Differences in displays, touch sensors, and user anatomy can make it difficult for some users to activate the desired region consistently.

The layouts by Shaz and Yobuddy adhere to this principle, so I would lean toward either of them. Shaz's layout is simpler, but Yobuddy's layout will be cleaner if you ever support an interaction beyond 'create new task' there.

Answer 4

I have two suggestions to consider so please read through and consider the arguments for each.

Floating Action Button

A floating action button button provides the primary action for the screen on which it appears. I strongly recommend this approach however you've expressed concern about using these in the question so allow me to address them:

1. adding a task is not necessarily the most common action in this view

Whilst it may not obviously be the most common action that exists within the view it may be the most prominent action for a list of tasks. Take each of the other actions and review what they apply to as I will for your mock up:

• tabs These are part of the higher-level navigation structure, they allow the user to get to the list but they don't apply to the list
• task card The user may click directly on the task card to edit or view that individual task, this is a property of the task within the list as it allows the user to change the card but does not modify the list (except for updating the displayed summary)
• assign like the previous point, this allows changes to the task card rather than the list

Though there are several actions the user might take (and likely actions that could be used more than adding tasks) the creation of a new task may be the only action that is a behaviour of the list, rather than something specific to a particular task. If it does turn out to be the only property that applies directly to the list then a floating action button is likely most material tool for the job, if not consider the "Bottom Navigation" below.

2. the FAB is not so commonly used on iOS, nor is it in the iOS guidelines

Whilst it is true that it is not yet common, it is used and is becoming more popular as material design spreads into apple's domain, as well as from android applications maintaining a single interface design. Several answers on this question show that the floating action button is in use in iOS applications including Spotify, the current Gmail interface (updated to follow the material interface) and the iOS 11 Notes App.

Note as well that, as in the Spotify case above, a floating action button is not required to sit in the bottom-right corner. The material docs have some great examples of this but unless some other alignment fits into your interface I would recommend the ordinary position for the sake of familiarity.

Bottom Navigation

This is an extension on Shaz's great answer to provide an alternative. If my previous offering does not assuage your concerns about using a floating action button or you find you do require additional actions on your list (such as sorting/filtering the contents) then I second shaz's suggestion to place the option at the bottom of the screen.

I would recommend making use of the bottom navigation bar for this feature. This is intended for navigation so though it may make sense for it to navigate to a "new task" screen, it may be out of place to "sort" from this bar. A solution here could be to use a sheet to provide sorting/filtering options, so that the button "navigates" to the sheet for that purpose.

Final Thoughts

The floating action button is the most material approach to including this option and may not be as out of place in this purpose as you have thought. The bottom navigation whilst not strictly the correct use of the component will make the option suitably visible to users of either iOS or android. If neither of these options suffice a simple three-dot menu in the toolbar (as depicted in the tab mobile examples) would still be more in-line with material design than placing the action inside of the navigation.

Answer 5

I like your idea but I would say "it depends".

If you plan to have the tabs visible at all times and scroll the tasks within the tab (I assume there are more tasks than one screen can hold) without any header within the tab itself, then the tab is the correct place. If you want to decrease users' surprise with the function of the button (many may expect adding a new tab, not an action within a tab) you can add a balloon with a simple message "Add a new task" (may be challenging for a mobile app).
Also think about the placement of the newly created task - are they sorted newest on the top or the other way round? In the latter you can immediately scroll to an in-place form for task creation.

If, however, your tabs resize to accommodate the complete content of all tasks, the header will disappear with scrolling (not clear whether you are asking about a standalone application or a web page), then unless you are at the very top, it's not possible to add a new task.

I agree that you should stay away from FAB - I was experiencing an accounting app recently and when using it on the mobile device, the button, even though placed at the bottom of the screen, is partly obscuring the list of the items.

Answer 6

I see a problem in the meaning of this place.

An action button on a tab suggests that you can interact with the tab when the tab is inactive.

The most common example is the close tab button in a browser. Another option is the new tab button at the end of the tab bar of a browser. Another possible button on such a tab would be "duplicate tab".

When you want to have the action "Add task" (in the tasklist in this tab) this is probably nothing which should be done silently in the background while working in another tab, but something which requires switching to the tasks tab.

So I would opt for another solution as suggested in the other answers.

Answer 7

Acceptable maybe, but I don't recommend it.

If people are looking for a way to add a new task, it could be not so easy to find since the button has no label nor any contextual clue. This design could be subject to inattentional blindness: People will not see the plus icon since they don't need the tab switch. This can be the case for people that know they can add a new task and people that don't know that yet.

A simple scroll might cost less effort than scanning every detail on the screen to find something that could be the button. This may sound exaggerated for something that is in plain sight and an icon that is seemingly obvious, but don't be surprised if it is not! Scrolling to the end of the task list and seeing a directly noticeable button with a clear label could be the better solution. Since you mentioned that this is not the most important action it is probably acceptable that it is not always within sight. Even if users already added tasks in the past; let them recall how to do it by going through the same search, it could be better than letting them remember where/what the button was again.

Answer 8

I will suggest to have at each task level id space allows, along with the next to title (which is in ur design) and as Shaz's suggestion to keep at bottom as a single button.

Answer 9

What's wrong with using a simple plus button in action bar like this:

Plus button can either add task or participant depending on the current tab. You can also hide the plus button if its not needed in participant tab.

Answer 10

I'll just put the solution that I eventually came to for this problem as it differs from the accepted answer.

I came to the conclusion that I was looking at the problem in the wrong way and that I should have focused initially on the tabs being the problem and not the "add new" action button.

As such, I decided to merged the 'participants' and 'tasks' tabs into one page and dedicate the top and bottom parts of the page to the respective sections.

Here is the solution I came to: