Research has shown some 40 per cent of the UK’s top 100 brands now have a mobile optimised web presence. Meanwhile, through the unfaltering march of smartphones and tablets, 45 per cent of internet traffic is now through mobile devices. It’s inevitable then that all brands will need to get to grips with the mobile web, but they cannot afford to be complacent when it comes to its design.
Designing for mobile is almost unrecognisable from common web design. What works on the massive screens of our desktops is unlikely to translate to a screen small enough to fit in our pockets, and a completely different approach and mentality is required.
So what should we be mindful of when designing for the mobile web? The Drum caught up with some experts to find out.
Tim Ash, creative partner, Movement
The main challenge when designing for mobile is the number of devices you have to take into consideration, compared to the desktop web. With mobile you have a vast number of different devices and capabilities – throw in tablets too and there are additional variables to consider. You end up doing multiple UX, IA and layout variants just for one web page.
There’s also the resolution to consider – in contrast to the web where the majority of desktop monitors have the same resolution, allowing more control and consistency, on mobile everything has to be a percentage of screen width, making it difficult to manage a reliable design experience. And the size of the screen in itself is a challenge – how do you fit everything into a confined space? On the flip side, this can lead to a more streamlined site as brands are forced to de-clutter and provide only the most relevant information.
Designing for mobile does hold a lot of challenges, but if you take these in your stride and get it right, you can offer consumers sites that are relevant, to the point and useful, allowing interaction in the moment for an extended experience.
Joe Robinson, lead UX designer, MadeByPi
We all know consumption of the web on mobile devices is commonplace and increasing as the penetration of smart devices grows. In recent years mobile devices have evolved to support colours, browsers and screen resolutions that come very close to desktop.
From a design and UX perspective, the following need to be considered:
Physical size: Look at where a user’s fingers rest on a device when it is held in either the left or the right hand. Ensure clickable elements are large enough for a finger to press (Apple recommends at least 44x44pts).
Input type: Users tap, pinch and swipe rather than click. Rollover behaviour won’t work, so tool tips or drop-down navigation can’t be relied upon.
Size is everything: Screen space is still at a premium. Reserve as much of it as you can for relevant content, don’t make users scroll past large navigation or adverts. Clearly communicated extra ‘clicks’ to access navigation or ‘return to the previous level’ are sensible and expected solutions for mobile sites.
Optimise content: Break up pages into smaller chunks, displaying the most common and important tasks. Allow other content to be accessed as a secondary action or a via clear link to the desktop version. Simplify the design to reduce images andw therefore loading times; a lot of users will be browsing using 3G, certainly until faster networks are more widespread.
Tim Bichara, managing partner, Nimble Mobile
Think taps and gestures, not clicks. Even with up to 45 per cent of internet traffic through mobile devices, it’s amazing how many designers are still creating mobile products with a desktop mentality. Nobody uses a mouse with a mobile device. Think creatively about how you can present your content in a non-linear, gesture orientated way.
Only ask the user to do one thing at a time. This is one of the most important rules in mobile design, particularly important with smartphones. You’re dealing with a small screen so don’t try to cram too much into it. Mobile design works best when the user is certain at every point what they should be doing and there is no conflicting information.
Frontload your copy – and keep it short! This is true on the desktop too, but it’s especially important on mobile. Users will often be using your app or mobile website while they are doing something else. It’s important that the most salient points you want to transmit are right up there above the fold in easy to read format. Grab them while you can with short punchy copy because their minds will be wandering quick enough. If they are interested they will always go on to read more.
Al Taylor, founder and creative director, Collective
There are of course differences between designing for different devices. But the most important thing is that, these days, mobile (or device) should be the start point. Of course, ‘mobile’ is far more than a phone or smartphone. Mobile can be your tablet or netbook while you’re on the
move. And if you’re going to provide value for your clients you also need to future proof where possible and consider web and media on consoles and portable consoles, web built into TV, etc. This brings the challenge of multiple interface types to manage and cater for.
So how do we cater for different interfaces and screen size? It’s about being relevant and appropriate. Everyone, regardless of device should be able to achieve the same goals. The UX must start from the smallest screen to determine what components are necessary to deliver the experience or utility required. Using adaptive design we can then progressively enhance the experience with anything from location services if GPS is available to richer/ fuller content to make most use of the available screen real estate.
The other critical factor is time. Mobile users are impatient and won’t tolerate the cost or inconvenience of long loads. So we need to be smart with technology and design to provide an experience that minimises load time.
All of this places even greater importance on technologists and designers working closely together to ensure the optimisation of experiences to meet all user needs across all user devices.
Comments
comments
There is a lot of sound advice in this article around designing specifically for mobile; specifically it is good to see advocates for designing a proper experience for mobile users, rather than just trying to re-format the experience provided on traditional web browsers. However, there is a lot to be learned and applied from the way we evolve those traditional sites.
Al Taylor hits the nail on the head when he says “it's about being relevant and appropriate”. The challenge is; How do you know that you're site is relevant and appropriate? The answer, of course, is that you don't, unless you ask your visitors to tell you. You can try and do that through traditional web analytics but without anything to benchmark your performance against, how do you know you're doing the best job you can?
Joe Robinson likewise has it spot on when talking through all the things you need to consider when designing for mobile, but how do you know that you've got the right design that works best for your visitors?
The reality is that the best way to find out what works for your mobile visitors is to ask them. Using A/B or multivariate testing to verify site design, or to decide between possible layout choices is a ‘business as usual' discipline for many companies, but one that is rarely applied to mobile. Given the huge traffic growth that we are seeing on mobile and the expectation that users have of the experience they get, if you want your site to succeed, you need to find out what works best and you need to do that by asking the people who know – your customers.
Spend some time thinking about how your customers are going to interact with you through a mobile channel – whether that's on a mobile device or using a laptop on the move and design a site that you think is appropriate.
Then, use established testing techniques to find out if you can do better and evolve the site. Use personalisation, just like you would on a feature-rich desktop site to make sure it's relevant and test that to find out what works best.
Mobile may present some challenges (and opportunities) when it comes to site design, but that doesn't mean it needs to be treated any differently to a desktop site when it comes to optimising the customer experience. Making sure you have a relevant and appropriate website ought to be something that is device independent.
Tim Burge, Director, Maxymiser www.maxymiser.com
Write Your Comment