1

Let's say I have a login form and after a user clicks the "Login" button, the form begins working and a spinner is added to the button until HTTP processes are complete.

For this example, I will use [*] to represent a spinner (one of those circles that just spins around and around until loading is complete).

In the loading state, would it be best to keep the "Login" label text inside the button and add the spinner beside it, or remove the "Login" label text and just have a spinner?

For example,

Normal button state content: Login

Scenario A loading state content: [*] (loading spinner only)

Scenario B loading state content: [*] Loading

I'm leaning towards keeping the text inside the button so the user doesn't get confused as to what the form is currently doing.

Edit: I just found this article that goes into pretty good depth: https://uxmovement.com/buttons/when-you-need-to-show-a-buttons-loading-state/

1
  • Yup, don't rob the user of the hint until the action is complete Feb 13 at 12:33

2 Answers 2

1

I would have to agree, having visual cues combined with typography is always clearer in demonstrating and articulating what the action is. To call it and raise it one more, if the loading spinner also had some sort of counter or visual cue to show how complete or how close to completion it is, that would be most ideal in my opinion

1

Here is a related answer on UX.SE: Is showing a loader inside a button on mobile a good practice?

This is what I think: I agree with keeping the text in the button so that the user knows which action is being acted upon while also disabling the button so the user does not click on it.

Another approach that could work:

A progress loader come up on the screen when an action is triggered through the button - and the button itself goes into the active-disabled state or is replaced by a stop action - this could be useful in situations when the action takes a while. For e.g.

1

Img src: https://material.io/archive/guidelines/components/progress-activity.html#

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.