Showing a loader for longer than required because it looks good?

Question

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?

Thanks

Answer 1

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.

Answer 2

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.

Answer 3

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

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.