Mobile content – the eyes have it

At the risk of stating the obvious, the proliferation of hand held devices and the emergence of responsive design has changed the way users engage with content. This poses new challenges for content strategists, not only in terms of what-goes-where but how the content engages the eye of the viewer.

Training

For some time I’ve been working with clients and delivering training that holds the content implications of responsive design (and mobile first) at its core.

Content ordering for mobile

Responsive design repositions chunks of content that might populate a standard web page horizontally (as viewed on a big screen), to enable vertical viewing on smaller screens. The visual below illustrates a simplified view of what typically happens.
standard content layout web and mobile
As a result, users are increasing scanning less distance left to right, while being prepared to drop further from the top of a screen to the bottom, in search of what they need.

Of course, the content does not have to follow the A, B, C, D ranking when it is repositioned.

So we all need  to think carefully about how we want our content to be served up on smaller devices.

What makes sense, top right on a desk top, may be less relevant on a mobile. For example, on a mobile you may be better opting for A, C, D, B, reflecting things such as the preferred vertical position for data capture forms, call to action/buy buttons, key offer text, links etc (when viewed on a narrow screen).

Some content may be dispensed with altogether. Depending on your content management system you may be able to make huge numbers of changes dependent on the type of device is being used to view with.

But there are a number of other factors to take into account. Not least how mobile devices require visually appealing, as well as useful content and how even small amounts of content need to operate independent of other elements on the page. These are what I tend to term “eye-modules”.

We all know that users do not consume page content in its entirety. Most of us keep in mind that critical “golden triangle”, which reflects the F-pattern work done by Jakob Nielsen and later underpinned by the way people consume (or consumed) Google search results.

The two images below underpin this traditional view.

traditional web page layouttraditional web page layout with heat map overlay
But… this is changing.

My own analysis and review of the latest research indicates that while mobile searching is stretching how far downward we are willing to scan when looking for useful information – whether that’s a website viewed on mobile or Google search results – we still seem to deploy a mini F-pattern when we find something that engages us.

eye module mini F patternSo… where am I going with all this?

I think content needs to be constructed with the eye-module in mind.

This means each content module or chunk needs to contain more component parts, allowing for more self-contained/independent delivery.

Button love

Content strategy

In practice it means integrating more calls to action and links and more integrated use of buttons.

For example, I’ll be looking to embed buttons into images (where it makes sense) and have learned a lot from Facebook ad construction.

And I’ve been particularly struck by the layout below from the Sumo Me website. It strikes me there are some interesting, and very visually appealing, lessons to be learned.
sumo me website

More reading

readThere’s a whole load of research out there to do with the way our eyes and brains work together to consume content but Wikipedia on eye movement is not a bad place to start, if you’re interested.

I’ve also written about this topic on the Emarketeers’ blog