Principles of mobile design

Mobile is an exciting new space with the opportunity to create highly personalized, immersive experiences. Here are some of the principles I follow when designing products for mobile devices:

• No shovelware — Mobile has very different constraints and user environments than the Web and your design should reflect that. Just as attempts to paste newspapers on to the Web failed, so will attempts to paste Web sites on to mobile. If a vendor pitches you a zero-effort solution that will automatically transcode your Web site, just say no. (The exception to this is mobile-specific templates for articles, blog posts, etc. stored in a content management system.)
• Focus on the here and now — Mobile users are looking for quick hits and aren’t likely to engage in elaborate planning tasks. Focus on the key tasks a user is likely to be doing while mobile. When possible, show what’s going on when and where the user is. Make the server do the work instead of the user. For example, if your site has a conference schedule and it’s the middle of the show, you should have a page that lists the tracks that are happening RIGHT NOW instead of forcing the user to look through days of listings.
• Don’t create an app if you don’t have to — Apps are great, but they also cause a lot of user friction. If you can accomplish the user’s goals with a mobile Web site, do that first.
• Every click matters — The difficulty of input on mobile devices makes it all the more important to ensure that every click counts. Mobile sites should use personalization and location information to get the user to her goal as fast as possible. Provide quick links on your home page to tasks that the user has recently done.
• Make every byte count — Wireless networks aren’t anywhere near the speed or reliability of home or work networks, making it even more critical to have tight pages without gratuitous graphics, headers, toolbars, etc. Many Web designers have gotten sloppy over the years as increasing broadband speeds have masked the slowness of their pages. You can’t do that on mobile.
• Be forgiving — Phones sometimes do things like automatically capitalize usernames. Accept the capitalized username. (Assuming, of course, that your namespace is case insensitive.) Recover gracefully from dropped connectivity.
• Auto detect mobile clients — If your mobile site is at “m.foo.com” and the user goes to “foo.com”, show the mobile version anyway. Deep links for stories, photos and other objects should also be rendered in the mobile version; if the user goes to “foo.com/articleid=32”, show “m.foo.com/articleid=32”. flickr does this correctly. The New York Times does not. But be sure to offer a link to the full version just in case your server guessed wrong. And cookie that state.
• Be cross platform — Carry over user data between the Web and mobile. If the user searched for something on the Web, that search should be included in the history and typedown on mobile. Let users easily create reminders on their mobile device for things they need to do when they go to your Web site. (e.g. write a review, read a long article)
• Think different — In the post iPhone era, handset manufacturers and carriers are providing more access to phone features than ever before. Designers have access to cameras, GPS, accelerometers, microphones and more. The best applications will take advantage of these capabilities to deliver experiences that can’t be created on PCs. For example, wouldn’t it be great if when you added a contact to your address book, it would automatically log where that happened?