Mobile website design: three anti-patterns to avoid

While it's good to know what the mobile website design best practices are, it's just as important to be able to identify bad patterns when you see them.

More than ever before, we're accessing the web from a variety of mobile devices and it's not just when we’re on the go anymore. We're starting to use it when there are computers readily available to us because it's more convenient.

It’s been great to see how much the mobile web has been growing over the last couple of years. However, we’re finding the user experience of a good portion of these sites isn’t optimized for mobile users. Websites have been being built for a long time now, where as the mobile web is still relatively new.

So let’s consider a few mobile web anti-patterns.

1. Not having a mobile site

Mobile sites are no longer so much about getting quick bits of information. For lots of people it is becoming their main method of accessing the Internet. For every business there are several possible factors surrounding the decision on whether or not to have a mobile site. Businesses should be considering how many users are they not supporting?

no-mobile-site

(Image credit: wtfmobileweb.com)

2. Doorslams

You’re searching for something and you tap on the result that best matches what you’re looking for. Suddenly, you’re greeted by a full screen overlay telling you to download an app.

doorslam

(Image credit: wtfmobileweb.com)
How do users react to this?

Most would look for the quickest way to close the interruption so they can read the article they came for. Others would get confused and leave the site altogether. In any case, it’s not a good approach as it inconveniences the majority of users (there are alternative methods). Also worth noting, Google has announced any sites using “app doorslams” will be penalized in search rankings.

3. Poor touch targets

We’ve all done this. Tapping on the wrong link because the size of the touch target was too small and it’s frustrating to say the least.

bad-touch-affordances

(image credit: wtfmobileweb.com)
So what’s a good target size? For a while now we’ve heard 44 pixels being thrown around but is this still relevant? If we look at the current state of mobile devices, they all vary in terms of pixel density. On some of the older devices they start from about 150dpi and go over 400 on the newer ones. What does this mean? Touch sizes should be based on physical size. Operating systems state the ideal minimum touch size range from 9mm–12mm. It’s also important to prioritize by targets you want to have the least chance of error on, so figure that out and prioritize accordingly.

So these are just a few of many mobile web anti-patterns. Feel free to check out the slides attached for more.

Other helpful resources: