Mobile device ergonomics and links in email newsletters

When it comes to link and button placement in email newsletters, most of the decision-making seems to revolve around 'where they can be seen'. However, given the popularity of mobile email clients, should we also consider 'where they can be tapped'?

Now that a large percentage of us are managing our email using inputs other than a mouse and keyboard, it's likely time that we considered the ergonomics of email design. Luke Wroblewski's recent post on responsive navigation got us thinking that the same concerns with link placement as it relates to adaptive design apply to email as they do the web.

U Can't Touch This: The trouble with touchscreens

From a usability point of view, two features that regularly differentiate emails viewed on touch devices from those opened by the keyboard-and-mouse set are:

  1. Viewport dimensions that are often on the small side (ie. phones)
  2. Buttons, links and content that are not as easy to use on touch screens as they are on other displays

If you browse your email on a mobile device, you've likely come across email newsletters that are near-impossible to read and navigate. In most cases, its a matter of a wide layout, or a lot of content forcing the mobile email client to zoom out as to fit it all on a small screen. The result - content and links that are too small to be usable. As Luke's post mentions:

"...while big touch targets can be comfortably used with a mouse, small mouse size targets can't be used easily with touch." 'Responsive Navigation: Optimizing for Touch Across Devices ', Luke Wroblewski

Then, there's the ergonomic factor. Unlike screens which can be quickly manipulated using a mouse's wide range of motion, touch interfaces tend to be more or less usable, depending on the posture you assume (eg. thumb typing, using the device with the hand you're holding it with, or resting it on a table). Again, over to Luke:

"These common patterns of posture create easy to hit and hard to reach touch areas. The area toward the bottom of the screen is easy, whereas the upper corners are a bit of stretch".'Responsive Navigation: Optimizing for Touch Across Devices', Luke Wroblewski
Levels of difficulty in touching controls on a mobile screen, by location

Pictured above is Luke's diagram of what are considered to be 'Hard', 'OK' and 'Easy' touch areas on a mobile device, when used by a right-handed person in a variety of postures. If on opening an email, your primary call-to-action is in an 'OK' or 'Hard' area, could this have implications for your response rates?

Putting this into practice

Now, it would be silly to radically alter a perfectly good email layout based on this touch area hypothesis alone. However, as we covered in a previous blog post on email usability, aligning your content to the left does already have a proven advantage - being seen. To recap:

"...readers of left-to-right languages (like English) are accustomed to scanning from the top-left first. Keep this in mind when designing two- or more column layouts."'Email usability: The science of keeping it short and sweet', Campaign Monitor

This scanning-from-the-left behavior continues as a reader scrolls down a screen, which means links placed in the 'Easy' zone are optimal for both reading and tapping.

In the 'Design techniques' chapter of our Guide to Responsive Email Design, we make a couple of additional recommendations regarding touch target size and placement, so we highly recommend giving this short chapter a read if you're interested in making the most of your links.

Finally, we'd like to hear your take on this crazy idea. Should we consider device ergonomics when designing newsletters? Do you struggle to navigate emails, because links are out of reach? How could this affect your response rates? Let us know in the comments below.

Posted by Ros Hodgekiss

6 Comments

  • James
    15th January

    Great article, love how it’s written and it’s straight to the point. There’s just one thing that I don’t understand:
    Luke’s diagram of the touch areas for a right-handed person shows the “easy” area to be bottom left… I just checked how I myself use my phone and, as a right-handed person, I always navigate using my right hand.
    Wouldn’t that place the “easy” area in the bottom right corner, where my thumb is located?

  • Tim
    15th January

    James, while using your phone with your right hand, do you find it easier to reach the bottom left, or bottom right corner?

    I find the bottom left easier, as I have to curl my thumb up to get into the bottom right corner.

    And a great article btw.

  • James
    16th January

    @Tim Yeah that’s what I thought first too but I don’t know maybe I’m just holding my phone strange. I use the Samsung Galaxy S2 and it rests on my fingers and not in my palm, so maybe that’s why.

    But makes total sense what you are saying here, I can relate to that.

  • Robin @ Responsive Design
    23rd January

    Nice articles. With challenges comes the oppurtunities too.

    The article shared in this tutorial is quiet awesome. The experimentation and documentation was amazing.

    Good to see CM -updating on so many aspect of the latest trends. Make life easy to catch up with latest trends.

  • Jachin Sheehy
    22nd February

    Steven Hoober has published some interesting research on how people really hold their phones:

    http://www.uxmatters.com/mt/archives/2013/02/how-do-users-really-hold-mobile-devices.php

    It’s not as clear-cut as Luke W.‘s diagrams.

  • Chris
    22nd February

    @James - I think because the thumb has to be bent in order to press the bottom right and so the bottom left is where your hand in a more relaxed ‘hover’ state, which would mean for a simple drop of the thumb in order to hit a button.

Got something to add?

Sign up for free.
Then send campaigns for as little as $9/month

Create an account