Strange question this :)

Basically I have a website whereby lots of the loading/posting to a database is done with ajax.

At the moment there are no loading screens. As such if something breaks the user has no idea that anything was even registered as being submitted. Likewise if their connection is slow, it looks like nothing is being done until it is done.

People may because of this resubmit forms etc. So I need some loaders.

My initial idea was to just replace the content on the page with an animated gif. THis however looks a little boring.

Then whilst playing I had another thought.

Elsewhere on my site, if data cannot be found a lightbox is loaded which explains why nothing could be found. I have done this because it is a complex process, yet it is important that the user understands.

This looks really good so why not use it for all loading screens - blur out the screen, place a lightbox there containing the loader gif and some information to keep the user entertained.

I implemented this and it looks good, BUT if the user has a very fast connection for example, the lightbox appears and before they know what has happened it is gone again.. they cant read any of its contents.

My thinking was as follows.. regardless of how quickly the content loads, show the lightbox for 2 seconds such that even if it is only very briefly, they know exactly what was happening. This functionality would be consistent across the site, and 2 seconds really is not a lot.

In my opinion waiting longer actually adds to the user expereince.. THoughts?



Don't waste user's time just because the visuals look good. 2 seconds is plenty of time to frustrate the user if it happens every time - and will make the site appear really slow because nothing appears to happen fast.

It's important to provide feedback and confirmation of completion - but not to fake it like that.

In any case, a lightbox is a distraction from progress that covers or partially obscures the current content. You want to provide a sense of continuous progression towards a goal, not spike that advancement with distractions and diversions.

| improve this answer | |
  • Ok - what are you suggesting? In many respects I want the screen covered as such because then a user cannot click elsewhere whilst something is happening... Are you proposing the simply replacing the content with an animated gif option? – Thomas Clowes Feb 27 '13 at 11:38
  • Can you do something like my answer to this question on design recommendations for a button – Roger Attrill Feb 27 '13 at 11:42
  • By the way - the advice in that answer on the button design may seem at odds with what I said above, but the difference is the small animation in place feels more progressive while a lightbox feels more blocking. – Roger Attrill Feb 27 '13 at 11:57

It's a loading screen. It's shown to "entertain" the user when there is nothing else he can do. If showcasing the visuals/information is that important to the user simply then simply don't show it in the loading screen but elsewhere in the app/site.

| improve this answer | |
  • Well the site is visually pleasing elsewhere.. I just want loading to be visually pleasing too.. – Thomas Clowes Feb 27 '13 at 11:39

You can show small preloader near to button or input. For example, you need create todo list, you may made it like this:

enter image description here

This solution have several benefits:

  1. Preloader does not take up much space. It's not big lightbox which expanded to whole page
  2. After-preloader icon display the status of operation, user can see status simply look to this icon
  3. Inactive state of input and button tell user, that operation in progress. It's important to slowly actions and connections. On the other hand, users with fast connection quickly understand, that operation is success.
| improve this answer | |

I'll keep it simple and short.

  1. Don't fake loading times. You want your site to be fast and more responsive, giving the user accurate real time updates.
  2. Don't use Alpha tweens i.e. fadein/fadeout. They usually consume more memory and are slower.
  3. This is exactly what you need
| improve this answer | |

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.