A black and white photo of me looking quite serious

Jordan Moore UX & Interaction Designer

The Art of Deception

June 8, 2012 in technique

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.

Via Wisconsin Historical Images on Flickr

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.

Biography

I make cool things for the web for Eyekiller most days, the rest of the time is spent with my family and cycling Ireland's hills and coasts.

My interests lie in the areas of responsive web design and helping create good typography for the web.

Ambassadors

Become an ambassador