Follow Mobile Design Do's and Don'ts - dummies

Follow Mobile Design Do’s and Don’ts

What makes mobile commerce so exciting is that the mobile web puts your store in your customers’ pockets wherever they go, in their iPhone or iPad.

Before you get too excited by visions of ’round-the-clock shoppers, here are a few deadly design errors you need to avoid:

  • Don’t cram too many items on your page. The screen size is small, and even if you have hundreds of things you want to offer, if you try to put them all in one space, your customers can’t figure out what they’re supposed to click.

  • Don’t use gimmicks, such as hokey animations and music, to try to grab users’ attention. If they’ve made the effort to hit your mobile site, they’re already interested. But they’re also skittish — mobile shopping is still a new experience for most people. If your site looks like a 13-year-old girl’s MySpace page, they’re probably not going to trust that their financial information is safe with you.

  • Don’t get cute and hide prices. Maybe your mobile customer is running up stairs, rushing into a meeting, or stopped at a traffic light. If they have to go through the whole checkout process only to find that your price isn’t what they thought it was, they may never come back.

Guide customers by using just a few options per screen until they’re ready to make a buying decision. eBay provides a particularly useful example of how efficient mobile web design can boost sales and profits. By designing for the mobile web, eBay encouraged millions of users to shop using their mobile phones — and they’ve added hundreds of millions of dollars of sales.

The differences between the desktop experience and the mobile web experience come into sharp focus when you look at how eBay appears when you navigate to the regular desktop site on a iPhone, as shown on the left side of the figure.


Note how tiny the icons all look, how they all seem jumbled together, and how you can’t really read any of the links. On the right side of the figure is eBay’s site as it appears when you go to the version that’s optimized for the mobile platform. Note how having fewer choices makes it easier to figure out how to navigate the site.