In real estate, it’s location, location, location. In UX, the location is mobile, mobile, mobile. Mobile devices account for over half of all visits to most websites. Chances are you are reading this post on your phone. Various sources now put web access via mobile devices between 55-65%.
While it certainly varies by site, if you look at your analytics it probably looks something like this, give or take a few percentage points.
And while agencies, web designers and developers generally know this—and they often tout a “mobile first” design philosophy—they sometimes don’t act accordingly. It’s just too tempting—especially when working on an oversize monitor—for designers to make it look great on a large screen and simply relegate the mobile experience to an afterthought.
The three common mistakes I’ll cover in this post are so common that I can point out all three with a single example: this credit card promotional email.
It’s shown here with images loaded (left) and images not loaded, which is sometimes the way users have their defaults set, especially for marketing emails (right).
Common Mistake #1: Images of Text
When text is embedded within an image, several problems are created. First, it doesn’t meet W3C accessibility recommendations (screen readers can’t read text in an image and the user can’t easily resize the text with normal browser controls). Even for people without accessibility challenges, text in images is hard to optimize for the screen size. In other words, a site or an email designed to automatically resize to the user’s device (responsive design) can’t resize the text in an optimal way. Accordingly, text may display too large on a big screen and too small on a phone. Plus, if users have remote images blocked in their email clients, the result is that no communication takes place—the message is missing altogether (as seen at right in the illustration above).
Common Mistake #2: Text Too Small for Mobile
This is by far the most common of the three problems. Most people over 40 begin to develop a number of vision challenges, including their ability to easily read small text. As we age this only gets worse. W3C standards recommend allowing users to have control over the text size. That’s easily accomplished on websites using text size controls in the web browser (unless the text is an image…see mistake #1). It’s harder for users to adjust text size on mobile devices.
There’s a simple solution: make the text bigger. I can only guess that the causes of this ubiquitous problem are one of two things (or both). Either the people creating the websites and emails are working on large screens and not previewing their designs—and text sizes—on mobile devices; or, the designers of these materials are young and not yet experiencing what happens to your eyesight after 40.
Common Mistake #3: Touch Target Size is Too Small
Links on web pages, emails or apps must allow for a “fat finger” factor when viewed on mobile devices. That means the links must not be so close together that the user has a hard time tapping the link they want without hitting another target by mistake.
According to NNG, the target size should be a minimum of 1cm x 1cm (.4in x .4in). NNG also notes that, “A past study from the MIT Touch Lab found that the average person’s fingertips are 1.6– 2cm (0.6–0.8 in) wide. The impact area of the typical thumb is even larger—an average of 2.5cm (1 inch) wide!”
Those are physical measurements (not pixel sizes), so links must be reviewed on various mobile devices to be sure they meet this standard. This fat finger touch target often translates to much more space than designers typically allow.
The good news? All three of these mistakes are relatively easy to prevent or fix. All we need to do is apply a just little more effort to create better mobile user experiences.