1

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?

enter image description here

0

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.

  1. 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

    1. 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.

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.