Finger Snafu

10 frequent misfires when designing emails for touch.

1. No user reconnaissance

Ignoring user context

65% of US adults sleep with their phones on or near their bed. So its no surprise that peak mobile email usage takes place at 7am, probably right after the alarm on their phone wakes them up.

We are designing for users with blurry vision, poor co-ordination until after their first cup of coffee and little time to spare. Goals? shower, what to wear, breakfast and maybe a hangover cure (yeah people also read mobile emails drunk).

Designing emails for touch


2. Dismantle cluster bombs

Clusters of links stacked closely together, mistaps unavoidable.

Most pre-header links including the, “mobile version” are not designed for touch. Fonts are tiny and the lack of vertical spacing makes it impossible to avoid a mistap without zooming in.

Zooming or pinching is a multitouch gesture which requires two hands, further inconveniencing one-handed users.

Designing emails for touch

It’s not just pre-headers that need to be re-evaluated. Check out the stack of impenetrable links in Esquire’s email and the table of contents in Smashing Magazine’s.

The Apple Human Interface Guidelines (HIG), recommend a minimum target area of 44 x 44 points.


3. Search & rescue the CTA

Tiny call to action buttons, impossible to see at a glance let alone tap.

When it comes to buttons app designers have realized you can never be too obvious. Mobile users are often distracted, for instance 62% of people use their mobile while watching TV.

Compare a typical in-app call to action with the email on the left.

Designing emails for touch

In-app buttons are at least 44px high, positioned were the thumb naturally rests and expand across the width of the page.

That way it doesn’t matter if your holding the phone in your left or right hand. Even if a user is right-handed, they’ll switch hands when multitasking -  e.g. eating lunch - then switch back after they’re done.


4. Ergonomics MIA

Some parts of the screen are easier to reach than others.

Touch screen input is via fingers and thumbs, often one-handed. Pay attention to how users grip a device, it can improve the usability of your email.

Place popular controls such as, “Web View” within easy reach of your thumb. Less popular or sensitive content such as, “Unsubscribe” place bottom right, as it’s awkward to bend your thumb back.

Designing emails for touch


5. Friendly fire mistaps

Touch targets in close proximity to the toolbar.

The Windows Phone 7 UI guidelines recommend that you increase the size of your touch targets, if they are close to the edge of the screen. Ideally leave some padding above the toolbar, as its an area susceptible to mistaps.

Designing emails for touch


6. Camouflaged creative

Creative that blends into the background making it illegible.

Poor contrast is heightened on tiny screens, making small elements hard to read. Add in partial attention, who knows what lighting conditions and white text on a gray background is not advisable.

Designing emails for touch

It’s always worth doing a grayscale check for mobile emails.


7. Navi Fubar

Messed up navigation or pre-header due to auto-scaling text.

If your HTML text is under 12px, the iPhone will automatically scale it up potentially breaking your layout.

Designing emails for touch

To turn off auto-scaling add the following code (or make your fonts bigger):

style=”-webkit-text-size-adjust:none”


8. No design element left behind

Half measures and inconsistent design.

This email is great if I’m shopping for shoes, not so great if I want to shop, “NM Kids” via the navigation.

Designing emails for touch

While small steps help, it’s frustrating for mobile users to be barred from parts of your creative. One study found poor mobile usability on par with visiting the DMV or being stuck in traffic.


9. Lack of in-field testing

Preview tools rock but for nuanced design supplement with real devices.

Get to know the platform you are designing for, or risk annoying users.

Designing emails for touch

It’s only because I own an iPod that I know how easy it is to scroll, how long it takes to load, that my thumb dislikes the bottom right corner, how cartoonishly responsive the interface is and that it has an annoying habit of flipping orientation when I’m lying in bed.

Designing for touch is a lot easier when you have a real device to interact with.


10. Tadpole training

Many users are new to touch gestures and carry desktop baggage.

When I first started using touch screens I’d avoid swiping over linked areas. I was worried I’d accidentally trigger a URL, so I’d look for, “safe” paths to navigate around the page.

Keep in mind that some users have only spent months using touch screens, compared to decades with a mouse.

Designing emails for touch

Mobile designers are also tadpoles, conventions are murky e.g. with no hover state how do you indicate an element is linked without resorting to buttons everywhere?

Users don’t know where they can click. With iPad UIs, we’re back to square one. We haven’t seen this since  mid-1990’s -  Nielsen 2010

This ambiguity, means there’s an increased risk not all users will interpret your design as intended.

I’ve committed every misfire on this list and many I’m not yet aware off. The only way to refine your skills is to give it a try.

 

16 Responses to “Finger Snafu”

  • Jim Kelley
    July 6th, 2011 08:40

    Best set of mobile email design tips I’ve read to date.

  • Anna Yeaman
    July 6th, 2011 08:55

    Thanks so much Jim! Wish I could have caught your recent BB presentation.

  • Elena
    July 6th, 2011 10:06

    Ditto to Jim Kelly. Specific, reasonable, original tips. Keep it coming.

  • Justin Sykes
    July 6th, 2011 13:23

    Have used these tips and previous ones to craft some good fluid emails. Thank you Anna, keep them coming!! :@)

  • E-postdesign för mobila användare : I love e-mail
    July 6th, 2011 13:43

    […] hela artikeln på Style Campaign. […]

  • josh
    July 6th, 2011 14:08

    This article makes some really great points and if you appreciated the content please check out my article Make Your HTML Email 5½ Times More Mobile Friendly
    http://webdesignerwall.com/general/make-your-html-email-5-times-more-mobile-friendly

  • Anna Yeaman
    July 6th, 2011 15:51

    Thanks everyone! Glad someone finds it useful.

    Hopefully going to be putting up a new mobile email screencast on the blog at some point, building on the mobile email webinar I did earlier this year. Anything you’d like to see covered just let me know…btw you should share some of your fluid layouts with us Justin! (not worried about max-width support in Outlook/IE?).

  • Pete Austin @MarketingXD
    July 9th, 2011 04:42

    Very good list! Personally I hate these useability glitches with over-complex layouts, small text and tiny targets, or blurry backgrounds on *all* email platforms, not just mobile.

    Some minor issues with point 2. Your advice about zooming is only for iOS. I can’t zoom Android mail at all, but the Android browser allows 1-finger zooming.

  • Anna Yeaman
    July 11th, 2011 10:00

    Thanks Pete, sorry I should have made it clearer that the post was about iOS. You’re right, one of my coders has an Android Evo and I’d noticed you can hardly zoom on it (also that thing is huge compared to an iPhone!)

    There’s some Android screenshots in this post I wrote for anyone who’s not seen the limited zoom: http://tinyurl.com/6xz7dja

    We have only 2.7% Android compared to 20% iOS for our newsletter, even taking image blocking via Gmail app into account its low. Though as its now the no.1 platform in the US maybe those no.s will start to rise…

  • Julie
    July 13th, 2011 14:16

    I really like these tips. I am absolutely a person who checks my mobile email first thing in the morning.
    This blog has a pretty good list of statistics and how the future is going to change for email marketers as everything moves to mobile.

    Here is a quote from the blog:

    Mobile usage will be explosive - By 2014, mobile and Internet technology will help over 3 billion of the world’s adults to electronically transact. Emerging economies will see increase in mobile and Internet adoption through 2014. Worldwide mobile penetration rate will get to 90%.

  • Roy
    July 15th, 2011 06:43

    Concerning 7. Navi Fubar, there’s third option, it’s NOWRAP attribute on TD’s. For example, . This sometimes saves the situation. Check out, in the example image, padding is retained, yet text is wrapped and doesn’t use-up that precious padding space. NOWRAP sometimes fixes that (1-2 hanging letters).

  • James Trumbly
    July 26th, 2011 15:51

    Great Tips, thanks so much for sharing!

  • Anna Yeaman
    July 26th, 2011 16:15

    Thanks for passing on the stats Julie. I’ve seen a handful of studies now, that confirm mobile email peaks around 7am. So you are not alone checking email first thing.

    Thanks for the nowrap tip Roy, I’ll look into it.

    Cheers James!

  • Zoe Gillenwater
    August 24th, 2011 14:12

    These are great tips not just for email design on mobile but also web page design on mobile!

    Regarding fluid layouts and lack of min/max-width support in IE, does anyone know which versions of IE correspond to which versions of Outlook (if there even is a match-up)? IE 7 has min/max-width support (so IE on Windows Phone 7 probably does too, as it mostly corresponds to desktop IE 7), but I don’t know what versions of Outlook have min/max-width support. Unfortunately, the Campaign Monitor CSS support guide (http://www.campaignmonitor.com/css/) doesn’t cover max-width. In any case, the number of people running Outlook windows that are so extreme that min/max-width would be really necessary instead of a “nice-to-have” has to be pretty low–especially compared to the number of mobile users who would benefit from the liquid layout. I think the benefit outweighs the risk.

    For more info on creating fluid layouts, you could check out my first book, Flexible Web Design: Creating Liquid and Elastic Layouts with CSS (www.flexiblewebbook.com). I also cover media queries in my second book, Stunning CSS3: A Project-based Guide to the Latest in CSS (www.stunningcss3.com).

  • Anna Yeaman
    August 24th, 2011 15:53

    Thanks Zoe! I know Outlook 07 (most popular version of Outlook) doesn’t support max-width and IE6 and below.

    I’ve not tested in Outlook 2010 (but my guess is that it doesn’t, can anyone confirm?). Though Outlook 2011 on the Mac uses Webkit and not Word :) http://www.campaignmonitor.com/blog/post/3412/outlook-2011-for-mac-review/

    Outlook 2000 supports it…

    Just posted a simple workaround using @media here: http://stylecampaign.com/blog/?p=117

    btw enjoyed reading your blog Zoe, your burger progressive enhancement slide made me smile.

  • Zoe Gillenwater
    August 25th, 2011 06:28

    Anna, that’s another good option! Thanks for writing it up. So many ways to come at this. I’m not one of those who thinks there’s one right answer–fluid sometimes, fixed sometimes, hybrid, etc. I’m glad we have media queries as another tool now.

    As I say in my book, if you’re a vegetarian and don’t like the hamburger-progressive enhancement metaphor, just substitute ice cream sundaes. :-) I’m all about food!

 

Leave a comment: