You’ll have undoubtedly heard that more web searches take place on mobile devices than desktop ones. But, the increase in search volumes isn’t the most compelling reason for creating a faultless mobile user experience. For me, there is more driving the need to offer those logging on from a smartphone or tablet a slick user experience than simply the fact that there is a large search volume. The most compelling reason to adopt a mobile first way of thinking is, to my mind, the part that mobile plays in the modern consumer journey.
While more purchases are still made on desktop devices, mobile plays a huge part in the consumer decision making cycle. Even though your analytics might show more conversions from desktops, discovery, product research and even lead generation might well take place more frequently on mobile devices given how much more consumers use their mobile device for web browsing. Therefore, not having a compelling mobile web offering for your business is going to severely hinder your online performance.
But how do you go about creating a compelling user experience for mobile visitors?
Simplicity is key – keep menus and navigation straightforward
You often get away with having slightly more complex or design-led menus and navigation on a full desktop site, but on mobile you need to consider the limited screen space. It’s also important to factor in the user’s tendency to browse in portrait dimensions. Both these points mean that anything outside of the basics when it comes to menu layout could make navigating your site and finding relevant information unnecessarily painful. As is true with all web experiences, mobile navigation should be as effortless as possible.
Using drop down menus is commonplace on desktop versions. It keeps space available for content instead of site navigation, making for a more pleasing aesthetic. With some forethought, this same principle can be carried over to your mobile site. Be sure to avoid the trap of creating multiple levels of menu via too many sub-sections if you are going to use a dropdown. There is only so much room to expand on a smaller screen and many users won’t explore more than a couple of sub levels down if they can’t clearly see what it is they’re looking for.
Reduce imagery
When it comes to mobile browsing, page load speed is hugely important. Though mobile internet as a whole is getting faster, not everyone will have the latest connection available and speeds will vary with movement. For some users, data usage is also a sensitive issue. Keep large images to a minimum and opt for actual text instead of creating an image of chunks of text to keep your mobile visitors flowing happily through your site.
Super high resolution images aren’t necessary for mobile devices given the small screen size anyway. If you are a photographer or hi res imagery is important to your business, have a separate gallery area dedicated to the heavier files instead of incorporating it throughout the site. That’s not to say you should ditch all imagery, but for mobile less is definitely more.
Keep it flowing - scrolling for narrative
It’s something I don’t hear referenced as much as I’d expect in website design and UX, but I’ve always considered page narrative to be a big deal. Granted it varies depending on the industry you’re in, but if you’re trying to tell a brand story or provide details on a complex product or service, your site needs to be able effectively to take the user through that journey.
We’ve discussed keeping navigations and menus simple for mobile but there are some on-page content considerations to make too. On desktop sites, you can afford to be creative with on page narrative and split the screen elements horizontally as well as vertically. You’ve also got free reign to be creative and use animation and other funky features. Mobile is less accommodating. As designers, we need to re-learn how to use good old fashioned vertical narrative. After all, above the fold isn’t relevant when the default user behavior on the most commonly used web browsing device is essentially endless scrolling.
Tell your brand story and take consumers through the journey you want them to take by harnessing this scrolling action. Though this may sound simple, keep in mind that unlike the wealth of space you’re given for overlays to accommodate call to actions and other features on a desktop site, no such luxury exists on the mobile web. With no space and longer pages, you don’t want to leave your call to action buttons and exciting features to sit at the bottom of a long page of scrolling either. Use gradual calls to action throughout the narrative to counteract this issue and help users complete their desired action easier and quicker.
Design for fat fingers
This tip pretty much speaks for itself but you’d be surprised how many sites haven’t quite nailed this yet. Having talked already about the importance of scrolling, it’s important to note element size. Clumsy, accidental clicks caused by poor button and element sizing are frustrating and slow the user’s journey down. If it’s impossible to click on the right thing without lots of fiddly zooming, or impossible to scroll past something without catching it and being shuttled off to another page, you’ll leave your user with a poor impression of your site and a growing sense of frustration. If the experience is really bad, they may well just give up and take their business elsewhere.
Keep forms minimal – seriously
No one likes filling in long forms or being forced to complete a long sign-up process. Web users (particularly millennials), expect slick, easy and convenient websites and check out processes. Ask for the information you need and nothing more. Keep drop down box options minimal. Shorter forms on any device help with conversion and completion rates, so keep them as lean as possible. When it comes to mobile, remember all of the little boxes and the hassle of filling them in using a tiny touch keyboard are multiplied by 100!