Increase content engagement on your website with directed images

This is not something that is often talked about, but when designing web content with images, art direction can go a long way to help keep the user engaged. Apart from the general look and feel of a page, there is also a need to ensure that a viewer transitions as smoothly as possible through the content in whatever direction we want them to move.

You must have experienced the concept at work here a lot of times. Remember watching your favourite team play and when a player is running with the ball from the right, the cameraman tries to angle the shot so there’s lot of space on the left side of the screen. The player seems to be running into space. This effect is based on a photography composition technique known as the rule of thirds.

The rule of thirds involves mentally dividing up your image using 2 horizontal lines and 2 vertical lines. You then position the important elements in your scene along those lines, or at the points where they meet.

The idea is that an off-centre composition is more pleasing to the eye and looks more natural than one where the subject is placed right in the middle of the frame. It also encourages you to make creative use of negative space, the empty areas around your subject.

We can apply the same technique to images on your website, with a little art direction we can place subtle emphasis on particular content or the flow we want your users to follow in reading our content.

For instance, here's a picture of a horse. Nothing special about it.

Here's our image, cropped a bit.

Look's odd, doesn't it? The eye is forced to move unnaturally away from the direction of the horse's movement. Here's the horse again, cropped differently this time.

Re-cropping an image to provide some space in the direction we want the user to follow, guides the eyes into that space, creating that natural feeling of movement.

The rule of thirds technique used to this effect on the web was named aptly by Mark Boulton as the looking room effect in his 24ways article.

Art Direction with a looking room Image credit: 24ways.com

With the content section to the left of the looking room, attention would transition from right to left on the page. Elements are placed in decreasing order of priority for the viewer to apprehend.

This small technique is a great winner on the web, so whether you are taking your own pictures or editing images doing it with a looking room pays off.

Ifenna Awagu

Computer Science @Unilag. Intern @Mobnia

Subscribe to Mobnia

Get the latest posts delivered right to your inbox.

or subscribe via RSS with Feedly!