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

Question

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 complete.

Hence, users may resubmit forms, so I need a loader.

My initial idea was to just replace the content on the page with an animated GIF. This, however, looks a little boring. Whilst playing around with ideas 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 despite being a complex process, it is important that the user understands this.

This looks really good, so why not use it for all loading screens? That is, blur out the screen and place a lightbox 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 and they can't read any of its contents.

So I thought, regardless of how quickly the content loads, the site should show the lightbox for 2 seconds so 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 experience.

Is this correct? What are your thoughts on this?

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.

Answer 4

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

Answer 5

Ask yourself the question "What are my user's primary goals?"

Most likely their goals are to save and retrieve content from that database. Learning or reading the content and watching a gif are likely not even secondary goals for the user and they will notice load times getting in their way of their task.

Consider entertainment focused apps such as the popular Skyrim game. Their loading screens provide value to the user by showing off 3D models of characters or items and a description that either provides lore or game mechanic hints.

Despite how nice loading screens like the one below are, users still want to get past the loading screen and into the game itself. Here is a Reddit post of users modding/appropriating the nice loading screen in order to reduce load times. So pretty and entertaining. Still gets between me and my game.