Progress bar best practices

26 Nov 2007 - 3:34pm
6 years ago
8 replies
1449 reads
jstanford
2003

Hello,

I was wondering if people had thoughts on the best practices for a progress
bar for file upload. I'm having a discussion with a client and don't have a
strong position on this issue as yet. I think the most important question to
answer is "How much time is remaining?" (i.e. should I hang out and wait or
go get a coffee?)

After that, I am wondering which of the following should be displayed --
here's a list of options on the table and there could be more:

Visual info:
- Animation showing things being copied
- Progress bar showing visually how much is done

Text info:
- X min remaining
- X of Y KB
- X% complete
- X of Y min complete

- Other stuff I missed?

What do you think should be shown?

Julie

________________________________
Julie Stanford
Principal, Sliced Bread Design
650-969-0400 / 800-969-0434 x706

Comments

26 Nov 2007 - 3:57pm
Oleh Kovalchuke
2006

File "xyz.pdf" is copied to "folder location".

| 2.1 MB of 6 MB transferred
| *[*******************..............................*]*
| 5 min to be completed

Oleh

On Nov 26, 2007 1:34 PM, Julie Stanford <julie at slicedbreaddesign.com> wrote:

> Hello,
> I was wondering if people had thoughts on the best practices for a
> progress
> bar for file upload. I'm having a discussion with a client and don't have
> a
> strong position on this issue as yet. I think the most important question
> to
> answer is "How much time is remaining?" (i.e. should I hang out and wait
> or
> go get a coffee?)
> After that, I am wondering which of the following should be displayed --
> here's a list of options on the table and there could be more:
> Visual info:
> - Animation showing things being copied
> - Progress bar showing visually how much is done
> Text info:
> - X min remaining
> - X of Y KB
> - X% complete
> - X of Y min complete
> - Other stuff I missed?
> What do you think should be shown?
> Julie
> ________________________________
> Julie Stanford
> Principal, Sliced Bread Design
> 650-969-0400 / 800-969-0434 x706
> ________________________________________________________________
> *Come to IxDA Interaction08 | Savannah*
> February 8-10, 2008 in Savannah, GA, USA
> Register today: http://interaction08.ixda.org/
> ________________________________________________________________
> Welcome to the Interaction Design Association (IxDA)!
> To post to this list ....... discuss at ixda.org
> Unsubscribe ................ http://www.ixda.org/unsubscribe
> List Guidelines ............ http://www.ixda.org/guidelines
> List Help .................. http://www.ixda.org/help
>
--
Oleh Kovalchuke
Interaction Design is the Design of Time
http://www.tangospring.com/IxDtopicWhatIsInteractionDesign.htm

26 Nov 2007 - 4:06pm
Scott Cobban
2007

I'm new to the group and this is my first response so I hope I did it correctly.

I prefer an accurate (or close-to-accurate) animation of the progress
bar loading as opposed to a looping "file moving" animation. I may be
biased because I'm not fooled into thinking that the looped animation
is exactly representative of the amount loaded. But in general, I
like the idea of seeing actual progress.

I think that showing the amount of time left is ideal, but I've
experienced that method working incorrectly too many times. It says
"X minutes remain" but for some reason (network lag, etc) the amount
of time doesn't match up.

That would bring us to "KB loaded" vs "% loaded". Well, personally, I
think I appreciate a percentage reading over the "X of Y KB" read out
because, as much as I appreciate seeing the file size and download
progress in KB, I don't care about file size as much as what amount is
complete and, thus,I always end up attempting to do the math to figure
out the ballpark percentage.

If it was me, I think I'd go for an overall percentage shown as the
main text with a "X of Y KB" or even just "X KB" message shown in a
less significant font/color/size. I appreciate knowing how big the
file is if there's a percentage shown. I just don't need the detail
of how many KB are loaded already.

I like seeing the percentage and being able to say "hmm...only 14%
loaded....OH, it's a 123456 meg file! Now I understand!"

26 Nov 2007 - 4:36pm
Alexander Baxevanis
2007

I think the algorithm used to estimate the remaining time is at least
as important as the user interface for presenting progress. This
largely depends on the tasks, and there can be some tasks (especially
those that involve network activity or have multiple stages) that do
not progress linearly. If I had to design such an algorithm, I would
err on the side of caution: if you provide a time that is a bit longer
than accurate, the risk is that the system may be initially perceived
as slow but you can let the user go and they will be happy when they
come back. Whereas if the system looks frozen and it says "1 minute
remaining" for 5 minutes :) I think it will be perceived as more slow
& frustrating.

By the way, the progress bar that Mac OS X shows while booting (just
before the log-in window) is totally fake. It does not measure
anything, it just keeps record of how long the booting process took
last time & rolls completely linearly for the same amount of time. I
doubt many people know this or would have suspected it. If you can
find a reliable way to estimate the duration of your task, maybe you
can do something like this.

Regards,
Alex

On Nov 26, 2007 8:34 PM, Julie Stanford <julie at slicedbreaddesign.com> wrote:
> Hello,
>
> I was wondering if people had thoughts on the best practices for a progress
> bar for file upload. I'm having a discussion with a client and don't have a
> strong position on this issue as yet. I think the most important question to
> answer is "How much time is remaining?" (i.e. should I hang out and wait or
> go get a coffee?)
>
> After that, I am wondering which of the following should be displayed --
> here's a list of options on the table and there could be more:
>
> Visual info:
> - Animation showing things being copied
> - Progress bar showing visually how much is done
>
> Text info:
> - X min remaining
> - X of Y KB
> - X% complete
> - X of Y min complete
>
> - Other stuff I missed?
>
> What do you think should be shown?
>
> Julie
>
> ________________________________
> Julie Stanford
> Principal, Sliced Bread Design
> 650-969-0400 / 800-969-0434 x706
>
>
> ________________________________________________________________
> *Come to IxDA Interaction08 | Savannah*
> February 8-10, 2008 in Savannah, GA, USA
> Register today: http://interaction08.ixda.org/
>
> ________________________________________________________________
> Welcome to the Interaction Design Association (IxDA)!
> To post to this list ....... discuss at ixda.org
> Unsubscribe ................ http://www.ixda.org/unsubscribe
> List Guidelines ............ http://www.ixda.org/guidelines
> List Help .................. http://www.ixda.org/help
>

27 Nov 2007 - 3:36am
Håkan Reis
2006

I wouldn't go for tome left. The % done and the time elapsed will give a
quite good approximation when it comes to file up/downloads. We are good at
approximating time, if it took 2 min for 25% theres a good chance it will
take another 6 minutes for the rest, time for a quick coffee...

But it depends, theres no best practices, theres a pattern to provide
progress feedback. It always comes down to the the users, most don't care or
even understand the concept of bits and bytes but half the progress is a
good concept. Some understand all the details and want to know all about it,
like the progress and details in uTorrent (of the interested, look at what
Jeff Atwood wrote in http://www.codinghorror.com/blog/archives/000978.html).

--
Håkan Reis
Dotway AB

My blog || http://blog.reis.se
My company || http://dotway.se
Our conference || http://oredev.org - See you in 2008

On 11/26/07, Alexander Baxevanis <alex.baxevanis at gmail.com> wrote:
>
> I think the algorithm used to estimate the remaining time is at least
> as important as the user interface for presenting progress. This
> largely depends on the tasks, and there can be some tasks (especially
> those that involve network activity or have multiple stages) that do
> not progress linearly. If I had to design such an algorithm, I would
> err on the side of caution: if you provide a time that is a bit longer
> than accurate, the risk is that the system may be initially perceived
> as slow but you can let the user go and they will be happy when they
> come back. Whereas if the system looks frozen and it says "1 minute
> remaining" for 5 minutes :) I think it will be perceived as more slow
> & frustrating.
>
> By the way, the progress bar that Mac OS X shows while booting (just
> before the log-in window) is totally fake. It does not measure
> anything, it just keeps record of how long the booting process took
> last time & rolls completely linearly for the same amount of time. I
> doubt many people know this or would have suspected it. If you can
> find a reliable way to estimate the duration of your task, maybe you
> can do something like this.
>
> Regards,
> Alex
>
> On Nov 26, 2007 8:34 PM, Julie Stanford <julie at slicedbreaddesign.com>
> wrote:
> > Hello,
> >
> > I was wondering if people had thoughts on the best practices for a
> progress
> > bar for file upload. I'm having a discussion with a client and don't
> have a
> > strong position on this issue as yet. I think the most important
> question to
> > answer is "How much time is remaining?" (i.e. should I hang out and wait
> or
> > go get a coffee?)
> >
> > After that, I am wondering which of the following should be displayed --
> > here's a list of options on the table and there could be more:
> >
> > Visual info:
> > - Animation showing things being copied
> > - Progress bar showing visually how much is done
> >
> > Text info:
> > - X min remaining
> > - X of Y KB
> > - X% complete
> > - X of Y min complete
> >
> > - Other stuff I missed?
> >
> > What do you think should be shown?
> >
> > Julie
> >
> > ________________________________
> > Julie Stanford
> > Principal, Sliced Bread Design
> > 650-969-0400 / 800-969-0434 x706
> >
> >
> > ________________________________________________________________
> > *Come to IxDA Interaction08 | Savannah*
> > February 8-10, 2008 in Savannah, GA, USA
> > Register today: http://interaction08.ixda.org/
> >
> > ________________________________________________________________
> > Welcome to the Interaction Design Association (IxDA)!
> > To post to this list ....... discuss at ixda.org
> > Unsubscribe ................ http://www.ixda.org/unsubscribe
> > List Guidelines ............ http://www.ixda.org/guidelines
> > List Help .................. http://www.ixda.org/help
> >
> ________________________________________________________________
> *Come to IxDA Interaction08 | Savannah*
> February 8-10, 2008 in Savannah, GA, USA
> Register today: http://interaction08.ixda.org/
>
> ________________________________________________________________
> Welcome to the Interaction Design Association (IxDA)!
> To post to this list ....... discuss at ixda.org
> Unsubscribe ................ http://www.ixda.org/unsubscribe
> List Guidelines ............ http://www.ixda.org/guidelines
> List Help .................. http://www.ixda.org/help
>

27 Nov 2007 - 4:06pm
Rik
2007

(Like Scott, I'm new to the group...)

I'm really impressed with the way Flickr.com deals with it. For 2
months now, they have a multiple image-uploader. Wich gives you
realtime feedback. Check:
http://blog.eight.nl/assets/2007/10/17/Picture_6-1.jpg
It gives you useful information and little checks that show when
it's done.

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Posted from the new ixda.org
http://www.ixda.org/discuss?post=22928

27 Nov 2007 - 6:42pm
Ari
2006

i worked on a social networking site that also had video uploading and
sharing.
we implemented a real time uploading system that displayed a progress
bar/feedback mechanism that:

- displayed a visual horizontal progress bar along with a % indicator
that updated as the upload progressed
- a real-time estimate of when your upload would be done
- it would change appearance once the upload was completed

it was done as a pop up window so the window could be minimize allowing you
to upload your video in the background while you continued to use the site.
as long as your didn't surf away from the site itself or close the browser,
the session wasn't detached.

this mechanism seemed to work well and it conveyed plenty of useful
information.

On Tue, 27 Nov 2007 13:06:50, Rik Schot <rik at eight.nl> wrote:
>
> (Like Scott, I'm new to the group...)
>
> I'm really impressed with the way Flickr.com deals with it. For 2
> months now, they have a multiple image-uploader. Wich gives you
> realtime feedback. Check:
> http://blog.eight.nl/assets/2007/10/17/Picture_6-1.jpg
> It gives you useful information and little checks that show when
> it's done.
>
>
>
>
>
> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
> Posted from the new ixda.org
> http://www.ixda.org/discuss?post=22928
>
>
> ________________________________________________________________
> *Come to IxDA Interaction08 | Savannah*
> February 8-10, 2008 in Savannah, GA, USA
> Register today: http://interaction08.ixda.org/
>
> ________________________________________________________________
> Welcome to the Interaction Design Association (IxDA)!
> To post to this list ....... discuss at ixda.org
> Unsubscribe ................ http://www.ixda.org/unsubscribe
> List Guidelines ............ http://www.ixda.org/guidelines
> List Help .................. http://www.ixda.org/help
>

--
--------------------------------------------------
www.flyingyogi.com
--------------------------------------------------

28 Nov 2007 - 3:08am
cfmdesigns
2004

On Nov 26, 2007, at 12:34 PM, Julie Stanford wrote:

> After that, I am wondering which of the following should be
> displayed --
> here's a list of options on the table and there could be more:
>
> Visual info:
> - Animation showing things being copied

Make sure that any animation is appropriate to the project. The old
Windows animation of crumpled paper being tossed to the trash can, for
example: great for a home audience, maybe less so for an office. (And
myself, I found it cute the first three times, annoying after that.
Always a risk with something that draws the eye a lot and is seen a
lot.)

> - Progress bar showing visually how much is done

Be sure that if there is non-specific progress -- "We're working on
this, but we have no way to tell when we may be done" -- that an
appropriate progress meter is used. The project I'm on has legacy
progress bars that fill to the full point, then start over; bait-and-
switch, but there are too many more significant issues to deal with to
fix that.

> Text info:
> - X min remaining
> - X of Y KB
> - X% complete
> - X of Y min complete

Make sure that the size chunks and the text update rate are
reasonable. Time should be like 4:42, not 4.7 minutes. If content
chunks are on the order of MB, then don't show at the KB level, since
anything under 100 KB is junk info.

If viable, use both time and some other factor: "Transferring 87 of
203 files, about 4:30 minutes remaining". Different people find
different value representations to be more informative, so why limit
to just one.

>
> - Other stuff I missed?

Appropriate use of color?

We had a "disk fullness" meter at one point which went from green
through yellow to red. Great idea on the surface, lousy in practice
because it was "nearly red" (which implies dangerously full) at about
the 80% mark. So with a 40 GB disk, it was saying "don't transfer any
more" when there was still 8 GB remaining (and content chunks tended
to be 500KB to 5 MB, so there was still room for, oh, 3 *thousand*
pieces of content).

-- Jim Drew
cfmdesigns at earthlink.net
http://www.soundskinky.com/blog/

28 Nov 2007 - 10:10am
Mike Long
2007

I like simplicity.

File abc to location 123
x% completed
time elapsed 2min 30sec.

As previously mentioned, be wary of animations and if used be sure they actually denote the status of the function.

Syndicate content Get the feed