8th June 2012
As you have probably noticed by now — I have a thing about magic. It has fascinated me since I was a young boy, particularly the tricks that would lead you down a path of thinking expecting a certain result only for it to produce an unexpected, yet astounding result.
Magic is entertainment. Magicians are masters in the art of deception — they deceive to astound, to delight their audience, to make their experience with the show an enjoyable and memorable one.
We can use deception where appropriate in our medium. Think of a scenario where you may present something very image heavy, like a photo gallery — if a user can only see 4 out of 50 images in their viewport it would be wrong to force them to download every image on that page. Using a technique like lazy loading gives the user the impression they have quickly loaded a full page of images, thus enhancing their experience, but instead we only show them on demand. It’s deceiving — but in a good way.
When lazy loading images there can be a flash of an empty placeholder before the requested image comes into view. It’s not a big deal but that split second flash can be a bit jarring. Maybe there is another way we could use deception to prevent this, like changing the placeholder to become an extremely compressed version of the higher quality yet to be loaded. The transition from heavily compressed image to the higher quality version intended for the visitor to see is a lot more subtle.
Progressively saved images offer a similar approach. They load the image as quickly as possible onto the page which produces an initially rough version of the image before it begins to render clearer. Sadly this technique doesn’t work in Safari iOS which is a shame. Safari instead waits until it is ready to show the full quality image before showing anything. Progressively saved images do work as expected on most desktop browsers though, so they are still useful in producing a faster perceived page load.
Sometimes using deception can greatly improve a user’s experience with your product. I have outlined some basic ideas focused on images and speed. There is a lot more we could tap into, I would love to hear your thoughts.
Jordan is a web designer passionate about responsive web design and content choreography. He as a penchant for typography having worked previously with the Typecast team.
He writes occasionally for .net Magazine and Smashing Magazine and currently works for Eyekiller in Bangor, Northern Ireland. You can follow him on twitter @jordanmoore
Available for freelance projects in early 2014