Two cool principles of design that drive engagement

“Design is to invent with intent. If you take away the ‘invent’ bit, you have an engineer. If you take away the ‘intent’ bit, you have an artist.” — Rebecca Reubens

You want to engage your readers, grow traffic and make money. Content is one thing. Design is another. Both should be beautiful and clever and driven by a consideration for results. For publishers and bloggers it is essential to do them both well.

Here are two cool principles of design applied to real publications that illustrate how to “invent with intent”.

1. Design that moves

The real brilliance of design is in how it moves. Design that enhances the experience is not static like a picture. It is dynamic like a movie and has a logic that can be played forward and back. Movement can achieve balance between different elements of a site and maximize your objectives.

For example, here is how we used movement to boost brand awareness with a striking logo at the same time we cleaned up the user experience:

Research of user behavior on the Internet shows that when someone lands on a website their first and immediate action is to slightly scroll orMarfeel Mobile Experience--Impactful Design swipe down the page whether on desktop or mobile. This has been learned in response to the thin banner ads often appearing at the top of a page and now it has become a habitual fact of user experience.

Learning from this research we decided to make that initial downward swipe on mobile work to our advantage.

As the user swipes slightly down the content moves, but the logo and editorial section bar remain constant at the top of the screen in the most prominent position. The effect this creates is to introduce a marked contrast between the steady brand of the publication and the shifting content that comprises it.

The stickiness of the brand heightens the publication’s impact and enhances brand awareness.

As the reader moves farther down the brand elements recede in stages. When the user is fully engaged with the content and has moved farther down, the editorial section bar and then the logo finally slide away.

At the moment the reader is most engaged with the content the user experience is clean and minimized.

Designing a mobile experience using movement is one way to achieve business objectives and meet user needs at the same time.

2. Design that teaches

A significant percentage of traffic to most sites is made up of new readers. Any pattern we notice of users interacting with our sites for the first time in a less than optimal way is an opportunity for us to “teach” them a better way through design.

We design the publication to be flipped through like a magazine. But we’ve seen that some readers do not expect to be able to swipe on a web-app at least at first. And we know that a higher percentage of impressions come from readers who swipe.

We set out to teach new users how.

What we have done is to create a thin, semi-transparent bar towards the top of the interface with arrows pointing to both sides indicating the direction where one can find new articles. These indications reveal the side by side arrangement of the layout.

At first, the user might touch these arrows, which will still transition to the next page. But what is remarkable is the visual effect of the transition. The new article slides across in a motion that simulates being swiped.

We believe this will provide the guidance readers need to begin flipping through the content. And once they have learned to swipe, this bar fades away to optimize the use of the interface.

Because a higher percentage of the audience will now be converted into “swipers” we calculate higher quality impressions and more revenue will be generated.

On a platform as compact as mobile one change affects everything else and finding balance calls for thousands of iterations. It is easy to get overwhelmed.

Just remember every time you invent you should answer the question: Does this fulfill my intent? If it doesn’t then keep designing, keep moving and keep teaching your users a better way to experience your site.