Progress bar best practices
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
Get the feed
Comments
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
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!"
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
>
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
>
(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
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
--------------------------------------------------
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/
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.