Android FAB with progress indicator

Question

Is a good idea to put (infinite) progress indicator into a Floating Action Button (FAB)?

I am dealing with a situation where there is a bottom navigation panel with inset FAB and there is no toolbar at the top. The action is related to clicking the FAB.

If the progressbar in FAB is not ideal solution, is there any other way to inform users about the ongoing activity?

Answer 1

Dropbox mobile did it, it used a progress indicator to show the progress of scanning a document. Here's a screenshot of it.

But do note that there isn't a need for the user to click the button. Once the progress indicator turns a full circle, the app will automatically capture and scan the picture. To cancel the action, users only need to move the camera.

So I'm not sure what the use case is, but this feature on Dropbox is certainly a feature you need to study before adapting it to your application. Hope this helps!

Answer 2

Let's think about what could be the potential problems if we include an indefinite progress indicator of the action button.

1. Can symbolize the state of the action button is changing

Since the loading state comes soon after tapping the button and tied with it, the user may think the state of the action button is changing and would expect a different state for the button after loading disappears.

2. Expecting, users would tap on the button more than once to stop ongoing activity

Since the loading state appears once user hits the button, the user may interact with the button again to stop the ongoing activity.

A disable state of a button might help ~ but won't recommend since it's your CTA and the user would be wondering why you disabled the button as they interact.

Suggestions

I am assuming you are loading a page once the user clicks on CTA.

1. More clearer visual cue would be the center/top of the page.

2. Or you can show the loading stage through lazy loading feature.

3. If current page stays intact, till new page loads

   The material design usually shows an indefinite progress state below the navigation. The design presented here has a constraint here because of the position of the fab button.

   If you are thinking to keep it along with the navbar itself, the extreme bottom is the place to consider. Reminder ~ Visual cue should be strong

   4. Whatever you do, the next action must have some headers. You can explore that area as well.

A screenshot of few screens would have been helpful to decide on where to place.