3

I've made a sketch of different button progressbars, but I need to know which is the best one and why based on a few key factors:

  • Perceived speed (fastest).
  • Noise/Distraction level (least noise/distraction).
  • Beauty (moar awesome).
  • Perceived performance (smoothest).

In the following sketch, I've numbered each button progress bar type with a different number, and to the left you can see the stage mapping (initial/neutral state, between click and final stage, Done msg and Final/done stage).

different-type-of-progress-buttons

I'm not that much experienced with UX so I hope you UX gurus can help me sort this out!

Improve this question
1
  • 5, it gives clear display in both graphical and textual format
    – tim.baker
    Dec 11, 2014 at 9:20

6 Answers 6

Reset to default
7

To avoid ambiguity I would go for something like this:

enter image description here

The benefits of doing this is that the user is given a clear message that something is going on and more importantly that they should not leave the current page until it has finished.

Maybe even give a lighter green for the "not yet completed" portion of the bar.

Improve this answer
2
  • What about the 1st option and changing "Submit" text to "Please wait" ? The element would then keep the same boundaries, making the relation unambiguous..
    – Florian F.
    Dec 10, 2014 at 17:06
  • 1
    @FlorianF. With the color palette presented I would argue that if the loader was stuck at 0% for any period greater than .2 seconds then the user could start fearing that something is broken because the button will appear to have only changed text and the signal of "we're working on it!" is lost.
    – MonkeyZeus
    Dec 10, 2014 at 17:14
3

Regarding "Perceived Speed" - research shows that you should never start a progress bar at zero regardless of how long a process will take to complete.

never start a progress bar at zero

Edit: this research is actually talking about a different use case, however, I noticed that Apple always starts their generic progress bar with a little bit filled in so I'd say it applies in this case as well.

Improve this answer
1
  • 1
    Dave, what app did you use for drawing these windows?
    – Pavel Voronin
    Dec 17, 2014 at 20:33
1

Well, I can't comment on the perceived speed/performance part because you can make it as fast and smooth by just playing with the animation.

Beauty is subjective, so I can't really comment on that.

The only thing I can note is this, the distraction levels are quite high when the button suddenly turns into a circular loader. This issue can be resolved by making the button less visually different from the circular loader.

Some examples:

Circular progress bar

Progress button styles

Improve this answer
0

I do agree on 'beauty is subjective', but still I think what the question's autor means with 'beauty' has more to do with 'user experience' than with 'decoration'. Anyways – just spontaniously to me the most user friendy solution would be a combination of 1) and 4) while leaving the wording ("SUBMIT") out.

This is or course just a personal view – but that's also how e.g. the progress bar of vimeo looks like – and that's a progress bar I would actually want to call not only user friendly, but beautiful.

Improve this answer
0

First off, you have a mix of determinate and indeterminate progress indicators. All your examples, but #3, are determinate and show that your system can quantify how much progress has been made towards a known total. #3 is indeterminate, meaning something is happening but your system doesn't know how close it is to completed.

My suggestions? Number #3 or #5. See below for why.

#1 seems aesthetically pleasing, it could be rather subtle and you might run into an issue where the user has clicked and may believe nothing has happened or the system is unresponsive if they don't notice the animation.

#2 incorporates some change, showing that the system has responded. However it is very similar, yet different, from the original state, and to me looks like something broke.

#3 As mentioned in the first paragraph, this is the only indeterminate progress indicator, so if your action has an unknown completion time or progress, this is your go-to of the 5 examples. I like this treatment as it is clear that something has happened, and avoids the user attempting to click the button again. You often see something similar to this on "Place Order" call to actions in e-commerce sites, helping to assure the user they can't accidentally place multiple orders.

#4 and #5 are very similar, but I think of the two #5 looks better. This is the determinate cousin of #3. I think it has the same advantages as #3.

I hope this helps with your decision.

Improve this answer
0

On perceived speed/performance: There was a study showing that "a backward moving ribbon increases the perceived speed of a progress bar". You could apply that effect to any of your options, though the research was about a horizontal bar specifically. I also second @DaveAlger's assertion about not starting at empty.

On distraction/awesomeness: I often find these two to be opposing goals. In my opinion your option 5 is both the most awesome and most distracting.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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