Australians are now the largest users of smartphones in the world[1] with reports suggesting that up to 86% own a mobile internet-capable device [2]. However, as Jakob Nielsen’s 2009 study on mobile usability pointed out, users’ success rates when using mobile devices to access mobile sites averaged only 64%, which is quite low in comparison to the 80% average success rate for users who access Web sites on a computer. Neilson suggested that the form-factor difference seems to have a dramatic impact on the success rates of users’ interactions, and therefore, impact how mobile sites are designed.
Recently we did an information architecture project for a website redevelopment. The client’s webs statistics for the previous 12 months, showed that a large proportion of users are visiting the site using a mobile device. This required us to consider screen resolutions of 320px, 480px and 768px to be considered in the layout for the new website to take account of usability on small screens on top of a resolution of 992px typically used on desktop and laptop PCs.
Our solution was designed with a “mobile first” philosophy, that is, with basic navigation and functionality that is progressively enhanced as it scales toward a 992px device resolution (i.e.: desktop PC). This approach was designed to assist the implementation of a responsive design for the website so that content remains accessible regardless of the device people use to consume its content.
In developing the wireframes for mobile (320px) vs desktop (992px) there were a number of key ways that we found that designing for mobile sites differed from desktop. Here are my top 5 ways designing for mobile differs from desktop:
- Content prioritisation – Users are not browsing the site, therefore it was important to make it easy for them to do the tasks they are most likely to do. Priority was given to the features and content that users are most likely to need when viewing a site using a mobile device. For example we used the content scope uncovered in the research findings to provide insight into common tasks and needs of the personas.
- Vertical instead of horizontal navigation – Mobile users prefer to scroll from top to bottom, so the 320px wireframe design eliminates left to right scrolling. Navigation menus for mobile should not scroll left or right, therefore when the menu items are too long to fit horizontally then a vertical navigation structure is preferred by users.
- “Tap-able” not “clickable” – Design the mobile site’s buttons, navigation items, and links for touch screens, not for a mouse. This will improve the user experience and prevent accidental navigation away from the site. Hypertext is ideal when users click links using a mouse on a computer, but tapping links using your fingers on a touchscreen mobile device is not easy (for example, a “thumb” cannot hoover over an item on a mobile site).
- Fewer Graphics and Text – Mobile sites have fewer graphics to accommodate the small screen size, limited screen real estate in which to display content and slow download speeds on mobile devices. Branding in the header may still be used but it remains for navigational purposes as users can tap on the branding to get back to the homepage. Limiting graphics and use of a responsive design will aid the user experience.
- Contextual rather than global navigation – Use of global navigation that remains consistent across a site assists the users to know “where they are” and not get “lost”. Reducing hierarchy and using contextual navigation is an effective mechanism when organising the content on mobile sites as the users won’t have to dig too deeply to get things done. Users should be able to achieve what they want to accomplish before becoming lost.
