Domain7

Nine Mobile Web Don'ts

Fellow D7 designer, Dan Bartley, and I recently attended a conference in Seattle put on by An Event Apart. It was the first time I realized just how many mobile “don’ts” there are.

Among other gems, I came away with this is a handily little checklist that I now refer to when working on mobile sites:

1. Don’t allow multiple page reloads. One of the big advantages mobile websites have over mobile apps is that they typically load faster. When you have multiple page reloads, you run the risk of annoying your users. And if service is patchy you may lose them altogether.

2. Don’t use image heavy slideshows. On a mobile website content is crucial. Cut out features that are taking up space that would be better used for content. Image heavy slideshows don’t need to move over to your mobile site.

3. Don’t duplicate your menus. Some sites have menus on top which appear again at the bottom—this makes navigating frustrating and confusing. Stick to bottom-heavy navigation and use an anchor link up top to direct users down. But don’t duplicate.

4. Don’t have form labels that get cut off when you zoom in. Users can’t see what they are supposed to be inputting when the label is cut off or when the text disappears on click. Top-aligned form labels get my vote.

5. Don’t bother adding in a big back button. I’m always surprised when sites do this. Many phones come with a back button built into the hardware and most mobile browsers have one along the bottom as well. Which means placing a back button in top left corner is a waste of valuable real estate.

6. Don’t bother designing for feature phones. Designing for feature phones is pointless. It would be like designing for IE6: unless you have a unique use-case, its just not worthwhile.

7. Don’t put your cancel button right next to your submit button. And if you do have to put them near each other, give them generous margins. There is nothing worse than attempting to hit submit and accidentally hitting cancel.

8. Don’t design buttons that are too tiny to be clickable. Usability experts agree that a 9mm touch target is ideal. Since you are basically designing for users who are on the go, keep in mind that at any given time you’ve probably only got one thumb and one eye (as Luke Wroblewski put it). So make your buttons large enough to be usable.

9. Don’t force users to use ONLY the mobile site. Offer them the ability to use the desktop site as well. If the differences between your mobile site and your desktop site are vast, site visitors may just want to use what they are familiar with. Give them that choice.

The underlying theme that comes up when talking mobile is that you should design your mobile site differently than your desktop site. Its not enough to re-size the content or turn your website into a one column layout. You need to take accessibility, speed and use-case into consideration. You need to cut down excessive styling and focus on delivering as much content up front as you can.

blog comments powered by Disqus