The mobile-first age is upon us. We’ve already covered the broad details of what that means for designers and developers in a previous article.
This time we’re going to be looking at UX best practice in a mobile-first age and what you’ll need to do to ensure the sites you create for your clients are simple to use.
Understand why mobile users visit
In most cases, mobile users and desktop users are going to have different reasons for visiting a site. That means you need to understand why people are visiting (or will visit) a site on mobile and base your design decisions around that.
It’s also vital not to jump to any conclusions about a potential visitor’s behaviour. For example, it’s popularly thought that most mobile visitors are out and about while using their device. But research by Google shows that 60 per cent of smartphone usage takes place at home.
So take the time to understand why people will be visiting the mobile version of the site rather than the desktop version. Find out as much as you can about users motivations and design the site based on this knowledge.
Use focused content
Clear content that’s focused on meeting a user’s needs has always been important. But now it’s more vital than ever.
Small screen sizes and the fact that people may be using their mobile device on the go means it’s harder for them to wade through large sections of content to find what they’re looking for.
So make sure that’s something they don’t have to do.
Avoid clutter and ensure each page has just one focus point. Try to avoid forcing users to perform unfamiliar actions such as swiping horizontally to see more content. If you can’t avoid this, make sure you tell site visitors how to use these features.
Mobile users appreciate anything that makes their browsing experience easier, so help them out as much as you can.
You also need to ensure that the most important content is the easiest to reach. To identify the most important content, you’ll need to ensure you understand how user intent matches up with your client’s offering as a business.
Use simple navigation
Clearly desktop navigation doesn’t translate well to mobile sites. On mobile you can’t have sub menus that appear when someone hovers the cursor over them. And multi-level menus on mobile tend to annoy visitors.
Then there’s the issue of space. Menus on desktop sites can take up a large chunk of screen space. On mobile, you can’t really afford to fill up so much space with menus.
You’ll probably want to use drop down accordion menus or an icon in one of the top corners of the screen.
Using familiarity can help you create a user experience that feels instinctive. But on mobile you’ll need to perform something of a balancing act to get things right.
Firstly, most people’s experience of the web started with desktop sites and that means they have certain expectations about how a website will behave when they interact with it, even if they’re on a mobile device.
Secondly, most people will be familiar with using their mobile device in a certain way.
Finally, gone are the days when you can just take what works on desktop and scale it down for mobile.
Your aim must be to provide a mobile-first solution that doesn’t present people with unfamiliar navigational choices, or require people to use their phone in an unfamiliar manner.
Consider progressive web apps
If the need to infuse your mobile designs with familiarity sometimes feels too restrictive, then you may want to use progressive web apps to inject some extra functionality into your mobile sites.
Progressive web apps allow you to introduce some of the functionality of an app into your mobile site. This allows you to include features such as: push notifications, home screen icon, full screen loading or cached to work offline/if a user has a bad connection.
Progressive web apps can help you provide a user with the information they need in a manner with which they are familiar.
You can find out more about progressive web apps in this video of a presentation by Ani Mohan and Malte Will, Product Managers for Google’s Progressive Web Apps Team.
One of the biggest practical differences between desktop and mobile browsing is the form of interaction.
The keyboard and mouse combination used for desktop sites allows very precise interactions – especially when it came to clicking links, buttons and so on.
That’s not the case for mobile browsing, where touch is the main form of input. The imprecise nature of touch means that you need to ensure that anything a user can “click” is large enough to avoid overlapping with other nearby elements.
Mobile-first is all about reducing size and load time. And sadly, that means images are not as welcome as they once were.
This means achieving effects through CSS instead of images. It also means keeping text as text – don’t use fancy images to achieve an impressive text effect, go for fancy fonts instead.
Of course, it won’t be possible to strip all images from your mobile-first designs, but only include an image if there’s a good reason for it to be there.
If you can’t justify including an image, then leave it out.
Prototype and test
It’s crucial that you don’t invest resources into building a site until you’re certain it’s going to do the job it’s supposed to. That means you need to prototype and test. And whenever possible, those tests should be carried out with potential users.
Although it is possible to use an emulator to test a mobile site, they’re nowhere near as good as the real thing. Make sure you test the site on real devices, and focus on either the most popular devices in general or, if you’re redesigning an existing site and have access to the data, the devices that are most commonly used to visit that site.
Further reading and resources
We’ve only just skimmed the surface of UX in a mobile-first world, so if you need to dig deeper here are some useful resources.
Brad Frost has a huge selection of responsive design resources on his This is Responsive site – from tutorials for beginners to handy bits of code.
Joe Salowitz’s guide to prototyping tools is a great way to work out which tool you need to use and when.
If you’re struggling to find users to test your sites on, then Peek by UserTesting is the site for you.
It’s also worth keeping track of the following blogs:
Nothing in this post should have come as a surprise to an experienced designer or developer. Mobile sites have been important for a good few years now.
However, the biggest difference in the mobile-first world is a change of attitude. The days of starting off big and then scaling down for mobile are coming to an end.
From now on, it’ll be a case of working on mobile and then scaling up. That means you’ll have to turn your approach to UX on its head.