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.
One way to accomplish this is to go all AJAX, instead of letting the browser jump between pages, simply load they pages using Javascript and fade in a loading animation while you do just that. Great, problem solved. Or is it? What about large sites that are already up and running? Is it a good idea to re-write a lot of code? Well while AJAX will provide you with the most control over UX, I propose a slightly different method, details of which follow.
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:
$(document).ready(function(){ });
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.