Best UI to be shown to User while his request is still in process behind the scenes ?

Question

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.

Answer 1

A Loading screen of some sort may work.

Answer 2

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 http://stackoverflow.com/questions/182112/what-are-some-funny-loading-statements-to-keep-users-amused for a list of such statements.

Answer 3

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.

Answer 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:

Answer 5

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().

Answer 6

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

Details about changing cursor with CSS here.