5 Common UX Mistakes to Avoid on Your Mobile Site

By Spencer Lanoue | June 9, 2015
Image
5 Common UX Mistakes to Avoid on Your Mobile Site

Imagine you’re in an unfamiliar town and you need to quickly find some information. You do a search on your phone, but the information you need is on a site that hasn’t been optimized for mobile.

It takes forever to load, has tiny buttons that are hard to tap, and you have to copy and paste the company’s phone number in order to call them. Or, even worse, they require you to fill out a long form to get what you need. We’ve all experienced it.

Statistics from the research firm IDC say that more users will access the internet using mobile devices than desktop computers this year. Google Product Director Luke Wroblewski’s research shows that from 2009 to 2013, US media consumption of TV, desktop web, radio, and print were all in decline. The only form of media that grew during those years was mobile.

us-media-consumption-lukew

People are shopping, reading news, and browsing the web on their mobile devices more than ever before. But even though mobile has exploded in the last few years, many mobile websites haven’t adapted as quickly. Even in 2015, users still regularly experience basic issues, including:

  • Mobile sites that don’t fit their screens properly and are hard to navigate
  • Having to pinch and zoom to see what they’re looking for
  • Having to type and use their thumbs a lot
  • Slow page loads
  • Tapping the wrong buttons by accident because links and buttons are too small

With mobile usage increasing every year, improving the UX of your mobile site is more important than ever before. If your company hasn’t optimized your mobile site and you think users may be having a poor experience, this article is for you. I’m going to break down 5 of the most common mistakes mobile sites make that frustrate users, causing them to leave and go somewhere else.

Mistake #1 --- Not Optimizing for Mobile

Back in December 2012, Mashable hailed 2013 as the year of responsive design. Many of the biggest sites on the web have converted to responsive design, but there are plenty that haven’t.

caltrain-responsive-design

Responsive design is a great way to make sure your site displays well on different devices without building multiple sites. That way users can scroll to navigate your site instead of having to pinch and zoom (which is really, really annoying). Not only does responsive design improve user experience, but it also has a positive effect on conversions.

O’Neill Clothing saw impressive results when they implemented responsive design on their mobile site. They monitored conversions, transactions, and revenue for three weeks prior to the re-design. Then they monitored for three more weeks after going responsive. The results were incredible:

On iOS devices:

  • Conversions increased by 65.71%
  • Transactions increased by 112.50%
  • Revenue increased by 101.25%

On Android devices:

  • Conversions increased by 407.32%
  • Transactions increased by 333.33%
  • Revenue increased by 591.42%

There are plenty more examples that show the measurable benefits of responsive design. Skinny ties, a company that’s been designing neckties since 1971, saw overall revenue increase by 42.4% from all devices when they implemented a responsive mobile site. And Think Tank Photo, a company that produces photography equipment, increased transactions from users on smartphones and tablets by 96% from the previous year.

Google has also started to boost search rankings for sites that are mobile optimized. Whether you use responsive design or not, a well-designed mobile site can not only improve the user experience and increase your conversions, but it can also boost your SEO.

Mistake #2 --- Ignoring Mobile User Intent

Another common mistake is assuming that responsive design is going to fix all of your problems. But it’s not that simple. Even though responsive design addresses many mobile UX issues, it doesn’t necessarily take user intent into consideration.

Our VP of Mobile Mike Mace put together a report based on thousands of mobile website tests conducted by UserTesting. He said:

You need to rethink your website for mobile, rather than just reformatting it. Mobile isn’t just a different set of technologies; it’s a different set of user behaviors and expectations.

For example, smartphone users expect immediate gratification. They might only have a minute available between meetings, or on a bus, so they need to be able to get in and get out quickly. And tablets are often used at home while the user is leisurely sitting on their couch or in front of the TV, which can easily distract them.

Plus, mobile users often have different needs and priorities than desktop users, like being able to quickly find a map or a phone number. Design for how users want to use your mobile site instead of just assuming you should include everything from your desktop site.

Mistake #3 --- Long Forms

Nobody likes filling out long forms on desktop sites, but having to type all your information with your thumbs on mobile is just obnoxious. Avoid using long, tedious forms that make users type a lot.

long-forms-2

Good mobile UX isn’t just about building great experiences, it’s about increasing revenue and growing your business. Long forms are difficult and frustrating for your users, and if you’re using them for any sort of transaction, it’s going to hurt your conversions. For example, Expedia lost $12 million dollars in profit because of an unnecessary form field that was confusing their users.

When users see long forms on their mobile device, they’ll avoid filling it out at all costs. HubSpot increased their completion rates by 50% when they reduced their form from four fields to three. When it comes to forms, shorter is better—especially on mobile.

Author of UX for Lean Startups, Laura Klein said:

The biggest mistake that companies make on mobile is expecting users to input data in the same way on a mobile device that they would with a keyboard and screen.

Don’t force users to type all of their information with their thumbs. Here are a few ways you can make mobile forms as simple and straightforward as possible:

  • Build simple forms and don’t ask users for too much information
  • Remove unnecessary form fields
  • Auto-fill their forms whenever possible
  • Auto-suggest common words and phrases
  • Make use of the tools built into mobile devices (number pad, GPS, address books, cameras, etc)

Mistake #4 --- Tiny Links and Touch Targets

Have you ever tried to tap a link or a form field on your mobile device and accidentally tapped the one next to it instead? The combination of small screens and large fingers can be frustrating for users.

small-links

You’ll want to make sure that there’s enough space between your links and touch targets so that users don’t accidentally tap the wrong one because they’re too close together. Hoo53ber says, “Make sure that touch targets are at least 8 millimeters apart on center—with 10-millimeter spacing being strongly preferable.” On center means measuring from the center of each touch target.

steve-hoober-targets

Photo Credit: Steven Hoober

Links, form fields, and other tappable items have to be large enough for users to tap with relative ease. In order to make it easy for people to interact with their content, Apple decided that the minimum size of a target should be 44 x 44 pixels. They’ve made this a standard across all of their products.

There are no definitive rules that govern the proper size of touch targets, but according to Steven Hoober, they should meet three criteria: they must be readable, legible, and tappable.

Photo Credit: Steven Hoober

Photo Credit: Steven Hoober

Mistake #5 --- Slow Page Load Time

Slow page load times are a major problem because mobile users are very impatient. In fact, 80% of mobile users expect pages to load as fast as they load on desktop. After analyzing thousands of user tests, we’ve found that when a mobile site doesn’t respond instantly to a touch, users generally get frustrated and do one of two things:

  1. Rapidly push a series of buttons to get it to work
  2. Move on to something else

Users tend to get frustrated if they have to wait too long to see your content. In his book Usability Engineering, Jakob Nielsen says people can handle up to 10 seconds of load time before they leave, but even a few seconds delay is enough to create an unpleasant user experience.

Some of the biggest companies in the world understand that site performance --- and valuing their users time --- can be a competitive advantage in the market. It’s a big part of Google’s philosophy, and they’ve been able to reduce the average response time on a search result to a fraction of a second.

Facebook’s design team says, “We recognize faster experiences are more efficient and feel more effortless. As such, site performance is something our users should never notice. Our site should move as fast as we do.”

Conclusion

Mobile media consumption is growing faster than TV, desktop web, radio, and print. More people are accessing the internet on mobile devices than ever before, and it’s important to build mobile sites that are easy and enjoyable to use.

Difficult sites frustrate and annoy mobile users, causing them to leave and find something else. If you don’t make your site mobile-friendly, users are going to abandon your shopping cart, fail to complete your forms, leave your site, and do business with your competitors.

If you want to learn more about how to optimize your mobile site, check out our ebook The Four Mobile Traps. Not only does it contain the four most common mistakes made by mobile websites, it also features detailed tips on how you can avoid them.

Insights that drive innovation

Get our best human insight resources delivered right to your inbox every month. As a bonus, we'll send you our latest industry report: When business is human, insights drive innovation.

About the author(s)
Spencer Lanoue

Spencer Lanoue is a marketer who helps UX designers, PMs, and marketers make things people want.