Many brands mistakenly assume that porting web content over to a mobile platform is a relatively cheap and simple exercise: resize the pages, reduce the graphics, et voila, a mini website. Don't make this mistake! The mobile platform differs greatly from that of the traditional web, and failing to anticipate user needs and constraints will lead to failure. Porting content to the mobile environment is not hard, but a thorough and meticulous plan for execution is an absolute must. This article will review five key differences between online and mobile websites, and discuss the design practices that are prerequisites for success.
1.) Develop a solid business case, as defined by user requirements
Usability is the nexus between business goals and consumer needs, and if a mobile project is not fulfilling both, it's not worth doing. Citibank and Coca-Cola have met this challenge with their recent mobile launches. By being the first in the U.S. to develop a strong mobile platform, . This tool enables Coke to reach a huge global audience in a new way, while offering participants free downloads and a platform to communicate with their friends.
2.) Review the information architecture to account for different needs
Needs change based on context, and a site's information architecture (IA) and design must adapt to meet these needs. For example, a user browsing Epicurious' mobile site of food recipes will have a very different experience than when he visits the online version. Content is stripped down and broken apart differently. A mobile user in the supermarket can view a list of ingredients on the mobile site to ensure that he has everything he needs, rather than seeing the entire recipe all at once. Content models should be designed as flexibly as possible, separating data from presentation.
3.) Keep it consistent with the old site, but streamlined
Mobile experiences need to be clean and concise. Presenting a consistent theme across the online and mobile sites will make it easier for users to adopt the new platform. Foodies flock to Zagat's for reliable reviews of restaurants and nightlife. Differences between the mobile application and the site complicate the learning process. Extra steps required to navigate to critical data make the experience challenging for the user on the go.
4.) Optimize small screens
It's more than just breaking it apart based on user need; it's presenting the information in a manner which facilitates browsing and reading through a small interface. The NY Times mobile site gives the user an overview of the main news stories, and navigation systems at the bottom of the page facilitate browsing or searching for specific content elements.
5.) Simplify your feature set
For the vast majority of the mobile world, browsers are rudimentary tools at best. Scripts won't always run, and page elements like drop downs are at times difficult to use. Combined with a small screen and a distracting environment, it becomes very difficult to perform complicated tasks. Therefore, it is important that functionality is simplified. Kayak's beta mobile site can't run the rich content featured on its website, but it has a highly simplified user interface which, for example, allows users to enter in flight data in one text area.
As the mobile web becomes increasingly important, brands are eager to reach out to their users through this channel. Before getting started, make sure that there is a solid case, built on business goals and user needs. Don't just port the existing site into a mobile format; give the user experience careful consideration. Update the information architecture, the user flow, and the feature set to conform to the constraints of the devices. The mobile channel is just beginning to realize its potential in the U.S., and with a little forethought, there are ample opportunities to create easy-to-use, meaningful experiences for users on the go.