1

I am currently involved with an Application where I need to design the UI part of the Application and current I am in the process of implementation of UI which would be displayed to end user while his or her request is being processed behind the scenes.

So my question is that:

  1. What is the best UI approach/symbol/suggestions to be displayed to end User while his or her request is still being processed behind the scenes ?

Thanks.

2
  • 1
    You mean other than the "spinning pie of death"? Apr 10, 2010 at 2:59
  • @David: I am not sure how to implement spinning pie of death. Just as an aside, am using jquery, css and phtml combination for my front end and business logic is implemented in php.
    – Rachel
    Apr 10, 2010 at 3:02

6 Answers 6

4

Any sort of throbber is adequate enough. Here's a nice throbber generator you can use.

And there's nothing wrong with progress bars, unless there the kind of progress bars that start over without actually indicating progress.

If you don't take your program too seriously, this one is always a crowd pleaser:

This is going to take a while, so to pass the time, here's a dancing bunny:

http://img251.imageshack.us/img251/4828/thdancingbunny.gif

3
  • Kind of funny...Really I like the bunny dance.
    – Rachel
    Apr 10, 2010 at 3:09
  • I just thought of something; I would find the bunny extremely annoying after a short period of time. If you use it, please give me the option to kill it in a fun way. Thankyou.
    – Jonta
    Apr 16, 2010 at 9:31
  • I am so tempted to change the spinner at work to this dancing bunny. Also, I like the idea of killing the bunny like @Jonta suggested. Maybe turn it into a game while the user is waiting? I know YouTube lets you play Snake while you're waiting for a video to load.
    – styfle
    Nov 12, 2012 at 19:04
0

A Loading screen of some sort may work.

1
  • Yes. I understanding Loading Screen but my question is about what would be an best UI approach to be placed on the Loading Screen and how it should be implemented.
    – Rachel
    Apr 10, 2010 at 2:59
0

It depends on how long your user must wait. If it will be <10 seconds, then just show the spinning pie of death as an animated GIF (or flash if you prefer to be non-accessible) (a simple jquery hide/show with CSS)

If it is a longer wait, like >10 seconds, you may want to implement a short but entertaining caption system. Something like the old "Reticulating Splines" type system to give the users a bit of humor while they wait.. see https://stackoverflow.com/questions/182112/what-are-some-funny-loading-statements-to-keep-users-amused for a list of such statements.

0

If you've got a long running background process, I'd simply display a progress bar with a message below it that states in the least technical terms possible what the current task is. And then, if possible, a cancel button in case the user gets impatient or mistakenly started the process.

I can't provide any specific links to back me up, but I believe its been proven that just the presence of a progress bar can make a longer task seem shorter than a task without the progress bar.

The worst thing you can do is nothing. Users have been conditioned to think that no feedback = locked up program.

1
  • I would also add an estimation on how long the task might take.
    – Tom
    Apr 10, 2010 at 22:07
0

Note on typical implementation (that I use):

jQuery has the .ajax function. When I call the function (onClick or whatever) I .remove() the contents of the (div or whatever seems appropriate) and add a css class of waiting which looks like:

.waiting {
    background-color: #eee;
    background-image: url('some-spinner.png');
}

the .ajax function has a success callback where I remove the .waiting class and put in the new data I got back from ajax (or put back the data I took out with .remove().

0

Additionally you may change default mouse cursor to wait or progress states with CSS.

Details about changing cursor with CSS here.

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.