With Google now indexing the mobile version of your website first, your business should begin to pay closer attention to mobile user experience. This isn’t to say the desktop version of your website won’t be indexed, but if Google fail to see a mobile experience then your rankings could be negatively impacted.
More than half of the global web traffic comes from mobile devices. This number is growing year on year and doesn’t look to be changing anytime soon. So, what as designers should we be doing to improve overall mobile design and user experience?
Hierarchy
In mobile design, it’s important to consider the hierarchy of elements, each based on the importance of business goals. For example, if your primary goal is to encourage users to sign up, this should be the most striking element of your page. If your secondary goal is to get users to sign in, implement this too, but ensure both features are clearly differentiated by size, colour, shape, weight, or any other design trick you have up your sleeve.
Hierarchy can be created by white space. This helps you to group or separate elements on your page, allowing your users to focus on particular areas by drawing attention to them. It helps users cut through the clutter, compared to a design with limited whitespace which will visually overload the user.
Colour is another way of creating hierarchy. Choose bold, vibrant colours for elements you want users to notice, and muted colours for background decoration or tertiary actions. Consider the colour palette throughout your design; colour draws attention and helps create structure so use it wisely.
Proximity is also used to convey hierarchy. Grouping similar elements or placing other components beside paragraphs guides the user seamlessly from title to content. Small things like this can make a huge difference to your page, and most users won’t realise that you’re subconsciously guiding them with your design decisions.
By ranking your page’s content during the design phase, you will know which elements need to be given the highest priority, giving your page order while meeting the needs of your business. Prioritising content gives the user a sense of order, and by using size, colour, contrast and whitespace, to name a few, you can help the user to process the information more easily.
Touch targets, spacing and reach
It may seem obvious, but it’s important to consider the size of your touch targets, as doing so will increase accuracy and lessen user frustration. Without a clear standard, it can be difficult knowing how to size your elements, so, as a rule of thumb, we range between 42 and 72 pixels for lower and higher priority elements respectively.
Now you’ve nailed your button sizing, consider the spacing between interactive elements. Placing elements too close together will affect the touch accuracy, while having elements too far part will slow user interaction.
Finally, think about the placement of your buttons. A recent study found that 49% of users hold their smart phone with a single hand and their thumb, 26% use two hands and their thumb with only 15% left using two hands and two thumbs.
The takeaway: nearly 75% of users interact with one thumb, because the thumb offers the most convenient range of motion regardless of screen size. While devices are getting bigger, screen placement remains should remain constant. Primary functions need to be positioned in the centre of the screen to increase accuracy and general ease of use. Destructive functions such as delete or edit should be placed at the top and bottom screen edges.
Clear the clutter
There isn’t much worse than a cluttered interface, and there are far too many desktop pages that are simply scaled down to work on mobile – visual clutter, with too many elements crammed onto the screen, isn’t pretty. But it doesn’t have to be this way. Instead, a simple design can be used to offer an intuitive and clear direction that will help to convert the user.
As a designer, you should be thinking about how the user is going to interact with your page on a mobile device; what works for desktop might not necessarily work for mobile. Consider how easy it is to complete intended actions and whether the user is going to find it difficult to navigate. Use horizontal lines and subtle backgrounds to free elements and consider ways vertical space can define sections, using size and line height to your advantage, with a limited colour palette keeping the design visually pleasing.
A mobile experience shouldn’t be a watered-down version of the desktop site. Instead, by tackling the challenges of user experience, performance and resolution, you can create a stunning experience for mobile that only improves as you scale up on larger screens and more powerful devices.
Additionally, we’ve all heard the term ‘it needs to be above the fold’, but this doesn’t necessarily ring true. I believe that an interface is more likely to convert if it helps to guide the user, whether the content is above or below the fold. Decluttering your UI to create a natural flow, and displaying only essential elements at each stage, is of great importance on mobile because of the limited screen real estate. Essentially, always consider how the user is going to interact with the page when you’re determining whether your design meets the brief.
Visual feedback
Visual feedback, regardless of device, is crucially important, but with users always on the go, it’s likely that they’ll mostly be using their mobile devices. Perhaps in a hurry, they might not have a lot of patience for a page to load.
No matter how savvy a user is, they’ll always need visual feedback to reassure them that their action has been successful. This needn’t be limited to a loading animation, though (these can be frustrating for users, as you’re telling them to wait). Instead, the key is the perception of speed – a skeleton screen is a great way to offer this. These are the shell of the page, which gradually loads content, building anticipation and showing visual progress, demonstrating to the user that something is actually happening.
Users also need to be given visual feedback through interaction. Failing to do so will leave you user wondering if they’ve made a mistake or if there’s a technical glitch. By using simple pressed states or visual animation, combined with tactile sound or vibration, you can help to confirm to the user that your site is responding to their interaction.
Optimise
While you could suggest that optimisation is the developer’s responsibility, it’s always worth paying attention to bandwidth when designing. We all know how unpredictable a 4G connection can be at times, so your designs should be optimised for users who don’t have a super-fast connection.
To help your developer, you can create an .SVG sprite sheet, to reduce the number of server requests and improve page loading speed. SVGs are vector graphics, so you know they’ll appear crisp regardless of resolution. Drawn in the browser, they can be scaled without pixelating, can be manipulated by CSS, and don’t require a large file size.
Alternatively, you could optimise your mobile imagery separately, as they are a large factor when it comes to page ranking. It’s important to find the balance between user experience, aesthetics, and performance, but you should always avoid simply scaling down a large image to fit a mobile viewport, as this puts an unnecessary strain on the device decoding the image. It’s important to remember that the HTML can inform your browser which image to surface, depending on the width of the viewport.
Generally, question whether the image is adding value and whether it offers great user experience, visual appearance and performance.
Summary
There are many things to consider when it comes to designing for mobile, but you should always be thinking about how the user is experiencing your page – find the balance between business goals, user experience and performance. Take on board some of our tips to help enhance your website or app and uplift your conversion figures.
If you’re looking to define your user experience, discover how our media team can help, or head to our blog for more expert design insight and tips.