« Story Mapping | Main | 20 Minute iPhone Optimization: Noomii.com »

Button as Progress Bar

I haven't seen this done anywhere on the web. There may be a good reason for that, and by all means chime in. But until then, let's explore the possibility. Let's work with the task of uploading a photo as our use case. I would first browse for a photo on my local drive, then I'd click or touch the Upload button. Normally, I would see a new element appear indicating the progress of my upload, the upload button still visible but greyed out indicating it is not active. What I am proposing is that instead we tap into existing elements in the layout to serve the same needs. Let the button become the progress bar!

What do you think?

PrintView Printer Friendly Version

EmailEmail Article to Friend

Reader Comments (5)

Truly and original, and yet obvious, idea. (Obvious as in "why didn't I think of that?!?") I love it!

August 25, 2010 | Unregistered CommenterBill Shander

Thanks. It's yours for $9.99 ;)

August 25, 2010 | Registered CommenterThomas Daly

I love the efficiency of this concept; the colors are the only thing giving me pause...cuz i would think of green as being the "done" color, not gray. What if the upload button started with an outline of green, and then filled with green, then final state could be a "full button" of green?

September 23, 2010 | Unregistered CommenterCharlene Jaszewski

Thanks for the feedback! Let me see how it works.

October 17, 2010 | Registered CommenterThomas Daly

Love this idea! I would like to also see it, fill to be usable, as well - In other words the button becomes more green until it is able to be pressed, applied where the button would allow you to proceed only once it's done loading.

Great blend of two elements!

December 1, 2010 | Unregistered CommenterMike Massie

PostPost a New Comment

Enter your information below to add a new comment.

My response is on my own website »
Author Email (optional):
Author URL (optional):
Some HTML allowed: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong>