Heuristic Approach to Designing Websites for Mobile

by David Scales

Responsive design techniques have gained a good foothold in recent years and a flurry of associated technologies for image optimisation, fluid grid frameworks, responsive prototyping, fluid video and so on has followed thereafter.

Alongside this, we are seeing the development of new approaches to designing for mobile both from a UI, UX and content perspective. In an attempt to apply some broadly stated characteristics for designing websites for mobile with the latter in mind I have decided to note down a number of heuristics that I could use as a kind of pre-flight checklist – some rules of thumb for me to keep in mind when designing.

Rethink (the experience)

When comparing the mobile experience with that of the desktop there are certain things we should consider. The context for a desktop user is fairly predictable, mobile users find themselves in all kinds of different situations meaning that mobile experiences are unlikely to be immersive in the way that the desktop can be. People only have partial attention when using mobile, but the device is carried with them for large parts of the day – on the commute, at the dinner table, in an office meeting. This means the user is often multi-tasking and task-switching with what has been termed ‘continuous partial attention’ i.e. behaviour where users pay attention, but only partially. A good example of this is a user who throughout the day scans and updates a FaceBook stream. With this in mind, we move on to the next heuristic to consider how this affects content.

Focus (the content)

With limited screen space and competing for attention from the outside world not to mention other distractions on the same device, we clearly need to focus on core content and actions for our site and prioritise these so that what stays on the screen is most important. It is essential therefore to know what customers want, what matters most to them and to focus the content on this (not a bad idea for the desktop too!). There is no room for the content of questionable value, the kind of content fluff that’s added to a page to make it look ‘busy’. The emphasis is on the content, not the chrome, so get rid of the interface debris while you’re at it. If you think about popular read-later services such as Instapaper or Readability, this is exactly what they do. An important point to note here is that this approach does not advocate a lesser or reduced experience for the mobile user – it is more a question of prioritisation and focuses rather than removal and deletion.

(build) Pathways

structure

Building pathways is about getting users to the content quickly and intuitively and giving them options for exploration and pivoting.  The traditional horizontal menu across the header isn’t going to work on mobile if you have more than just a couple of links. It’s worth trying to simplify your navigational structure providing the top few items most users want, and shortening copy wherever possible. Stack menu items vertically rather than horizontally, for longer items. For more complex navigation it’s common to partially hide the menu, with the full menu being revealed when tapped. There are many emerging patterns for navigation and menus that keep these elements off-screen or minimised until required. Within the currently viewed page present the user with options to dive deeper or pivot elsewhere with contextual menus rather than requiring them to return to the homepage or navigate via the main menu.

(design for) Touch

images

It may be logical to assume that we need to shrink things to get them on the smaller screen, but in fact, it’s the opposite – we need to make things bigger to allow us to interact with our fingers and thumbs. Apple’s Human Interface Guidelines suggest 44×44 points for touch targets, MS, Google and Nokia have all reached similar conclusions, which I suppose they would since this is equal to the size of the average fingertip. Given the imprecision of the human finger or thumb compared to a mouse pointer we should make buttons bigger and give additional white space between multiple clickable elements to avoid miss-selection. A more extreme approach is to make the content the interface, enabling direct interaction with content and thus doing away with chrome. Natural user interfaces (NUI) are starting to appear in native apps, and the trend is one that is directly suited to touchscreen devices and gestural interactions. The main question mark around NUI is the discoverability of interactions when there are no visual clues for the user. Over time though we are seeing that gestures such as pull to refresh are being deployed more widely and are thus becoming standardised.

Optimise (the assets) 

Mobile devices have limited resources and networks can be costly, it is in the interests of our users that we provide them with lightweight, fast-loading sites. There are a number of things that we can do to trim down the fat. We can use image sprites putting multiple images into a single encoded file, bundle and minify CSS and javascript, limit or remove dependencies on JS libraries and use CSS3 to replace images on things like rounded corners and box shadows. Images are a particular challenge for responsive sites. The scaling of images is fine, but you don’t want to load a desktop sized image on a mobile. There are a few server-side techniques out there for feeding smaller images to mobile devices – another approach is to leave the image out altogether, particularly if it is superfluous to the main content or merely decorative. Instead of providing 2x images for icons on retina devices, an alternative and more efficient approach are to use icon fonts.

Related blogs

BrightLemon