8

Typical examples: http://msurguy.github.io/ladda-bootstrap

Crazier examples: http://tympanus.net/Development/ProgressButtonStyles

enter image description here

This is for a desktop app if it matters. Consider that the target view has about three different buttons. The advantage is that the user always knows which command of a few is executing.

Another point is that a button can transition into a different state afterwards: Inactive (press to execute) -> In Progress (execution progress spinner) -> Finish (happy icon - click to close)

  • I would say yes, do so, as from a usability perspective, it is best to give feedback as close as possible to the input – Dennis Jun 21 '16 at 1:51
1

Your button should have 3 phases if you plan on using the Progress indicator inside.

  1. Static
  2. Progress
  3. Success or Failure

Floating Action Buttons in Material Design use a similar concept. You might be able to relate to this example on Material Up.

The Static phase indicates the action to be performed. The Progress phase has a Determinate or Indeterminate progress bar, depending on the data being returned to you. The Success or Failure phase specifies the result of the action. If Success, do something.

If Failure, show a message saying [Replace with your action] Failed and allow to click on the button to perform the action again.

2

Go for it. One of the added benefits of showing immediate feedback in the button being interacted with is a reduction in duplicate form submissions. This can be really helpful in ecommerce instances where a double submission might result in a double charge.

Best practice would be to limit the behavior to 'positive' additions/submissions, rather than negative/destructive actions such as 'delete'. If the primary action is necessarily destructive in nature - be sure to include a 'cancel' or other bail-out action to undo the progress after starting.

2

It's fine to have spinner / progress indicator in a button, but try to make the button big enough and put the indicator in the corner, so that the users don't feel distracted by the spinning indicator. A good example from Facebook iOS app login page: enter image description here

  • Not sure it's a good example. The spinner is likely to be obstructed by right hand thumb for some people. – Den Jun 22 '16 at 8:13
  • 1
    It might, but I would argue that it's clear and minimal and I think the benefit outweighs. Meanwhile you can update the copy to, say "Logging in" to empathize the change. Also, you mentioned it's a desktop app, so I wouldn't worry that much for the thumb – Stephenye Jun 22 '16 at 14:47
1

I se no problem using such a solution, but keep in mind that:

When submitted, the button shall only use the progress bar (left to right). When submission is completed, the text "Submit" shall NOT be available again, instead use that check mark indication that the submission was completed.

And, of course, Use good contrast colors and remember to change the aria-label to "Submit", "sending" and "Submitted".

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.