We all hate waiting for websites to load right? It’s annoying to watch images download and wait for Twitter streams to render isn’t it? Well it’s a fact that 99% of websites have this issue – that is, that load time is about 1 or 2 seconds. Now for companies like Google it isn’t an issue, they have enough money to ensure they have sites that load instantly; but for us average folk what can we do? Investing in new and expensive serves often isn’t an option, so one method I propose is creating subtle user feedback.
I recently finished work on a site which has a load time of about 1 second – pretty average stuff. But I wasn’t happy with just providing the normal experience. I thought about fading/sliding in individual elements when the page had fully loaded (much like Apple now does on it’s product pages. But the problem with that is, if done incorrectly, you end up extending the load time of a site, and no matter how nice an effect might look, if it harms the end user-experience, it’s best to leave it out (at this point I should say that if you load a page and then send multiple requests for more data, and then fade them in, that makes sense). So I came up with a simple solution – add a loading header graphic. Allow me to elaborate.
Instead of simply loading a page with the normal logo of the site in the header, I load a GIF that looks exactly like the header graphic (minus the text), and once the page has finished loading (courtesy of jQuery), I swap the images out. So what does it look like? Head over to Cooking Pete (shameless plug I know) to see the effect in action.
I used the:
Function to allow me to detect the fully loaded DOM, and then simply change the
src attribute of my header graphic.
And that’s it! Adding simple user feedback like that let’s your users know that the site is doing something, and doesn’t leave them in the dark.