How To Design for the Mobile Web

Mark Westwater, Senior Usability Consultant at user experience consultancy User Vision, looks at usability considerations when designing mobile websites

Usability Mark As an industry, we are becoming increasingly aware that designing for the mobile web is not like designing for the desktop web. No longer is it acceptable to utilise a full function website across multiple platforms. Dedicated mobile websites are on the increase, but are still not sufficiently prevalent to make the mobile user experience a straightforward one for all.
One in five UK web users now browse the Internet using their mobile device, and according to Comscore, the overall number of mobile web visits has doubled in the last 12 months. Social networking has been a prime driver of this growth.
The basics, such as understanding that the mobile web is actually mobile, and not supported by the use of a mouse and keyboard as well a table and chair, mean that the designer can better appreciate the context of use and the types of tasks likely to be undertaken.
Mobiles can be considered mini-computers but mobile apps are not mini PC apps (Ballard, B. Designing the Mobile User Experience, 2006). Therefore, the mobile site should provide a subset of the full function and complement the main site or application.

Different tasks
Research has regularly shown that users undertake different tasks on a mobile, compared to the desktop. Information browsing, media viewing and sharing, social networking and emailing are among the main tasks currently performed using a mobile. Form-filling, detailed comparison websites and long document reviewing are difficult to facilitate, even for the most experienced user. This consideration indicates that providing a desktop webpage as a mobile webpage will present certain problems for the user including unnecessary information; overly detailed and complex information architecture and navigation; and slow render time across certain networks.
The developer needs to understand, through user research, what is required and what is achievable on a mobile device. Other content should remain on the primary site alone. On the flipside, how does the web developer decide what content to provide on the mobile web and how should the information architecture (IA) be presented?
It is not a surprise to suggest that the IA should be significantly reduced from the main site. The full extent of the IA is dependent on the target audience and their device set. Guidance is provided on the number of options per page and the depth of IA, but again, understanding the device groups and user needs will help to define this.

Link list ordering
The conundrum of link list ordering should also be addressed at this point. Priority, or most-clicked links, should be at the top of a list, in order to facilitate efficient access. It is recommended that the link hierarchy is regularly reviewed to investigate clickthrough, and to re-order where necessary. What should be carried forward from desktop web design is the provision of return links to ensure that efficient access back through the site is achieved.
The multitude of handsets available provides another major design crossroads. The variation in screen size, browser type and input method does little to assist the designer. What may look good on a smaller screen may be rendered poorly on a larger display. Content on desktop browsers may be uniquely presented on the many different mobile web browsers.
The solution is to understand the target audience and the devices they use. For example, if this is a business website or app, then designing for a PDA or Smartphone use would be most applicable. However, providing a numerical based IA would facilitate both keypad and touch interaction and may therefore cater for the widest audience.
There is little doubt the introduction of the Safari browser on the iPhone has brought the mobile web to many who had perhaps not previously considered it as a viable means of online browsing. It has also had a significant impact in bringing the year of the mobile web forward. It is true that Safari is revered by many, and has many positives, including the full screen view and straightforward URL entry to name but two. However, the zoom, scroll and select methods can present problems for some, and this can impact the user experience.
To make the most of your mobile site or application, do not redeploy your standard desktop design,  and try to fully understand the needs of your target audience. The most effective solution for web providers is to develop a mobile version of a site, redirect mobile users there, and not rely on the full page view that Safari provides. This approach will allow you to get the most from your mobile site and open the content to as wide an audience as possible. Why neglect mobile users when they are on the increase?