The importance of brand building is now widely recognised. If you take the time to build a recognisable and well-loved brand, it will be one of the most valuable assets...
Do you want valuable insight and practical tips to help ensure that your digital presence continues to evolve and compete successfully in this fast moving industry?
It is no longer enough to merely provide a desktop responsive website for mobile devices; today’s consumers demand more.
Getting the mobile experience right is vital, with more online searches taking place on mobile and mobile-first indexing from Google, you simply cannot afford to leave it as an afterthought.
In this guide you’ll learn:
As a business, underestimating the importance of designing specifically for the user experience on mobile devices can be costly as 50% of users will abandon a mobile transaction because of a poor user experience. Designing for the mobile device offers huge opportunities for user experience and technology that means businesses literally can’t afford for mobile design to be an afterthought.
The exponential growth of mobile is undeniable. In 2017, the global annual sales value of mobile devices was 1536 million³, with 2018 seeing many smartphone markets hitting saturation point. Compare this to the worldwide shipment of PCs which was 262m, and there is no doubt which is preferred by consumers. 74% of people in the UK now use a smartphones (up from 51% in 2012) and 65% of all adults use their smartphone as the primary device to go online.
This increasing consumer demand aligns with Google’s introduction of the mobile-first indexing in 2018. This is where Google is using the mobile version of a website as the primary version of the content for indexing and ranking. If a website has no mobile site or the desktop version is poorly optimised for mobile, this will likely affect the ranking of the site and therefore affect organic traffic figures. As such, it means businesses simply can’t afford to ignore the need to provide a superior mobile user experience.
Users expectations are continuing to evolve, and with each new great mobile interaction they have, they’ll demand more from you and your digital presence. Despite this increasing pressure, businesses are still failing to deliver a great user experience on mobile, and as a result they are suffering the costs with 50% of users abandoning mobile transactions because of a poor experience. 61% say if they can’t find what they are looking for immediately on a mobile site they will quickly move to another site, and 40% will visit a competitor site according to Google.
But my website is already responsive…
In most cases, a responsive designed site is a desktop website that has been adjusted or adapted to fit the mobile screen. This approach of starting with a full, complete site and then reducing down the content or features is known as ‘graceful degradation’, i.e. you are downgrading the more enhanced version.
These days that just isn’t good enough. No longer is it true to say that people are just using their mobile device on the go and don’t want access to all of the content available from a full website. Second-screening is a regular habit, with three quarters of the British population using their smartphone while also watching TV. This rises to 93% for under-25s according to a report from Google’s Consumer Barometer.
So, whilst the approach of creating a desktop website which is responsive to a smartphone screen size can ‘tick the box’ of providing a functional mobile experience, it really is the bare minimum. If content or functionality is stripped back or squeezed to fit the smaller screen size, it will ultimately compromise the quality of the user experience and directly affect your online performance.
A mobile-first approach is when you begin a web project by planning and designing for the mobile experience first instead of the desktop version. If you begin a digital project by starting with a desktop version and then make it responsive to accommodate smartphones and tablets, it means you are potentially ignoring the unique characteristics, benefits and opportunities that make the mobile experience so unique.
Essentially, mobile-first means a content-first approach. Designers have to adapt to the medium and have to deliver the content that users want to consume in this environment. The constraints of the smaller screen mean that it’s even more vital that you consider your users’ goals, context and the user journeys at the outset. This user insight will help to ensure a more seamless and frictionless experience — the key to success for every digital project.
With UX research and insights as your starting point on mobile, you can develop your digital product based on ‘progressive enhancement’; a development approach that starts with the baseline functionality whereby the richness of the user experience is improved step-by-step with continual refinement i.e. iterative design. These foundations enable a website or web application to intelligently scale, change and employ new features rather than taking features away.
It is likely to be more of a question of ‘when’ to implement a mobile-first approach, rather than ‘if’ you should. The urgency of implementation will depend on your business goals and the wants and needs of your users. However, with the rapid growth of smartphones and the actions taken by Google to implement mobile-first indexing for search engine results, it will only be a matter of time before everyone adopts it. The question is whether you want gain competitive advantage by leading the way in your industry, or want to lag behind your competitors and potentially lose business in the process?
There are a number of techniques that can be used when specifically designing and developing a site for mobile. The following section outlines some of those techniques with examples.
As with all design for any device, knowing your users, their needs, wants, frustrations and expectations is vital when developing a great online experience. There is no substitute for combining this with the knowledge of your users’ goals, the key tasks they undertake and the context in which they interact with your site, especially on mobile devices where there are so many different scenarios in which users interact with websites.
For example, users visit the Trainline.com app for very specific reasons; to find out train times, prices and to book tickets. Users may be out and about, or on their way to the railway station when they are searching for the information and so finding the answers to their questions needs to be quick and easy. The experience needs to consider users’ short attention span and the need for instant results.
“When you have a deep understanding of your audience, this insight is used to optimise your users’ online journeys. Making your site more enjoyable to use, removing obstacles, reducing frustrations and providing relevant content will all directly impact your online conversions — whether your goals are to improve sales, increase content downloads or reduce calls to customer service.“
says Mike Craddock, UX Lead at DotLabel.
Designing with a mobile-first approach means that from the outset you are considering your users in the context of using their device.
iphone 5 (5S)
iphone 4 (4s)
More and more app developers are recognising this and adding a panel control at the bottom of the screen within the thumb’s reach like this screenshot from LinkedIn.
“If keeping the menu within easy reach makes sense, why is the burger menu often located far out of reach at the top of the screen? How many designers and developers are blindly copying others, rather than considering the use of their site or app in context?“Mike Craddock, UX Lead at DotLabel
“Cards are another thumb-friendly way of presenting information on mobile. Cards make content digestible for users, who can quickly scan and swipe. Providing variety without clutter, cards can contain anything from photos or text, to coupons or links, even videos or social media streams. Cards are ideal for teasing users or alerting them to information.“
Kevin Sharp, Creative Director at DotLabel.
Knowing how users physically interact with their device and designing for the ‘touch-user’ rather than the ‘mouse- clicker’ means that you can craft a site that is easier to use and feels more natural.
People avoid onerous tasks and as they use their mobile in short bursts of activity, it is even more important to make it easy for users to interact with your site or app without having to think too hard. It is vital to remove the ‘cognitive load’ (i.e. conscious thinking) and make your mobile site as intuitive as possible.
Using a keyboard on a small screen takes effort. When designing for mobile, look at ways to reduce the need for typing and design for the touchscreen user. Smartphones are packed full of functionality that can improve processes such as form filling. Reduce the number of input fields required and use inline validation to minimise the amount of typing and tapping required.
When the information is broken down, it is much easier to scan, understand and verify, especially on a small screen
+441256329972 VS [+44]  
Reducing input effort – some examples
EXAMPLE 1The original input form for the wifi service Boingo required 22 inputs, it was optimised to need just 8 inputs. This change resulted in 34% increase in conversion and 53% decrease in sign up time.
Stationery store Staples in the US sought to reduce its online checkout process from 22 inputs to just 5 input fields, significantly reducing the time it takes to make a purchase.
On the following Guest Checkout form a number of intelligent features have been applied to make the process easier and faster.
There have been a variety of techniques used to optimise the checkout experience here, including:
Here are two different mobile interfaces for a flight booking. The two forms collect the same information, but the version on the right has been specifically designed for the mobile user. Which would you prefer to use?
The results speak for themselves, as not only was perception improved i.e. people felt happier to use the second form compared to the first, but the interaction times for the simplified form improved by 40%.
This airline booking mobile site takes advantage of the benefits of the mobile technology to reduce typing and tapping.
Date - The date picker is a long scroll screen where users can tap their ‘from’ and ‘to’ dates on one page. This is different to the scaled down desktop version where the user needs to tap in to a calendar, tap across to select the departure month and then tap to select the date, then tap out and then tap to select the next calendar for the return month and date, and so on. This single scroll display feature is faster to use, more user-friendly and helps to prevent mistakes.
Number of passengers – using a + / - stepper is an easier way to select consistent numbers, rather than using a fiddly dropdown on a small screen.
Fluid gestures, like hold, swipe, drag and pinch are some of the gesture actions that can be used where appropriate instead of tapping and typing. Using gestures can mean less on-screen clutter and can potentially increase engagement with more intuitive and fun interactions. Using animations to mimic the reaction to the gesture provides instant feedback to the user and provide a more immersive experience.
Tap - Briefly touch surface with fingertip
Double Tap - Rapidly touch surface twice with fingertip
Drag - Move fingertip over surface without losing contact
Flick - Quickly brush surface with fingertip
Pinch - Touch surface with two fingers and bring them closer together
Spread- Touch surface with two fingers and move them apart
Press - Touch surface for extended period of time
Press and tap - Press surface with one finger and briefly touch surface with second finger
Press and drag
Rotate - Touch surface with two fingers and move them in a clockwise or counterclockwise direction
However, gestures should be used with caution. Gestures are hidden controls with no consistent standard as to how they work across apps. This means that users need to learn and remember them. If you need to provide a detailed walkthrough to explain to your users how to use lots of different gestures, the information overload and effort required might not seem worth it, and your app or site will just fail. If you want to introduce gestures, keep things simple to start with, provide visual cues and introduce more complex gestures gradually over time.
Voice search is in a strong growth phase with one in ten UK households already owning a smart speaker. A study by ComScore indicates that 50% of all searches will involve voice by 2020.
Whilst the current most popular smart speakers such as the Amazon Echo and Google Home are both primary voice interfaces, both manufacturers have developed versions with touchscreens. Amazon released the Echo Show in June 2017 and the Lenovo Google Smart Display launched in July 2018. These devices will also play videos and allow video calls.
As consumers are increasingly exposed to voice interactions, they’ll become more comfortable and confident talking to machines and using voice commands. This means they will ultimately come to expect ‘voice’ as a part of every digital interaction.
“The challenge is to ensure that the experience aligns with the users’ expectations. Voice commands have the ability to be very powerful but should only be used if the user will be in a situation where they can’t use their hands, such as when the user is driving, has full or dirty hands, when the phone is out of reach or when it is just faster to use voice commands (saying a complex sentence instead of typing it).When it takes Alexa ten seconds to receive and action a command to turn on the lights in a room, you’ve got to think it is just easier to flick the switch yourself in one second. If you have a recipe or gardening app, then voice activated functionality might add value to the user,“says Caroline Richardson, UX Architect at DotLabel.
Building in custom voice commands into your app is a far more intensive task than simply integrating native voice search functionality from the operating system. By introducing a familiar microphone icon into the UI, the user is already educated as to how they can interact with this functionality.
When thinking about the use of voice enabled features, think about the frustrations faced by users in the context that they use your site or app. This will help you to design a solution that not just meets users’ expectations, but exceeds them. The technology is still evolving in terms of accuracy and sophistication, but the potential is huge and so it is definitely worth considering if and how to integrate this as a feature of your product.
There are a number of different ‘workflows’ or ‘processes’ that you might expect users to undertake on your mobile site, from site registration to content download, completing a contact form to making a purchase.
“When you design mobile-first, you will naturally be working to create the most efficient actions, instead of trying to squeeze a desktop site process onto a smaller screen. This approach helps to reduce the effort needed by the user, thus creating a clearer, more seamless user journey,“
says Matt Oxley, Director at DotLabel.
There are certain actions that commonly frustrate users, such as ‘signing up’ and ‘logging in’. Research shows that over half of users will quit rather than doing yet another site registration and 92% will give up if they forget a username. 82% of people forget their passwords and the 75% of people who recover a password won’t complete the checkout process. Similarly, long checkouts are one of the leading causes of abandonment. Providing the option of a guest checkout can boost usage by 30-40%
Amazon took advantage of the biometrics functionality on smartphones to rethink the whole issue of remembering passwords. Simply use your thumbprint to login into your Amazon account, and with the 1-click to buy, purchasing couldn’t be easier. According to Counterpoint Research, biometric identification such as fingerprint sensors, retina scanning, and facial identification will become more prevalent, and in the next two years 1 billion smartphones will feature facial recognition. By 2020, 58% of smartphones are expected to boast facial recognition technology, up from 32% in 2017.
You might also consider linking a website registration process to a Google or iCloud account to enable cross-device synchronisation for a more seamless journey. This will enable users to continue their journey even when they switch device. For example, they may start a product search on their mobile and then can seamlessly switch to desktop to complete their purchase.
Mobile 3G Traffic Patterns
“The good news is that you can influence the users’ perception of the time it takes for a page to load by using Skeleton screens. A ‘skeleton screen’ is essentially a blank version of a page onto which information gradually appears, giving the perception that the information is loading. This sets the users’ expectations and focuses on the content that is loading, rather than the spinning loading icon.“
Ben Rymill, Front End Developer at DotLabel
An Accelerated Mobile Page (AMP) is a mobile web page that loads quickly to serve instant content to users. The AMP project was announced in 2015 and led by Google and Twitter to provide an open source website publishing technology designed to improve web performance.
Forrester Consulting Total Economic Impact™ study (commissioned by Google) found that AMP leads to a 10% increase in website traffic with a 2x increase in time spent on page. For e-commerce websites using AMP, the study also found a 20% increase in sales conversions compared to non-AMPs.
“Media sites make successful use of AMPs to quickly serve up to date news to users. The Guardian has worked proactively with Google alongside seven other European publishers as part of the Digital News Initiative since its inception. It really depends on your business and how valuable it is to serve information quickly, as to whether AMPs should be implemented as part of your site,“suggests Adam Frame, Back End Developer at DotLabel.
These nine tips should provide some useful and practical ideas as to how to improve your mobile experience. However, sometimes a mobile app is more appropriate for your users. In the next section of this paper we explore when a mobile app is appropriate and what the exciting alternative could be.
On average the web has three times more monthly users than native apps, yet users spend more time on native apps - a compelling reason for brands to consider them. However, time on apps tends to be concentrated in a few categories including entertainment, social & messaging.
Mobile applications exist in a hugely crowded market place. There are currently over 2.6 million android apps available on Google Playstore, down from 3.6 million in March 2018, with 113 billion apps downloaded in 2018.
If your app does successfully get downloaded, retention rates are extremely low. 80% of apps are deleted after just one use, with the average app losing 77% of its Daily App Users (DAU) within the first three days of install, and 90% within the first 30 days after download.
While there are many benefits of having a mobile app, including users having instant access to your service without faffing about on search engines, for it to be successful, not only must it provide value, but it must also offer a frictionless experience to the user.
As previously highlighted, users on average unlock their mobile phones 80 times a day. More than half of those interactions are less than 30 seconds and in apps it’s less than 15 seconds. This means that it’s imperative to serve relevant content to the user as quickly as possible.
To make every one of those seconds count, you might want to consider a bold approach and strip out every extraneous element that does not directly lead to product value. Pinterest took this approach by removing all additional pin data (descriptions, author, comments, likes, shares) and only showed the images, as initially seeing the pictures is the users’ main goal. Before reducing any functionality from your app, ensure you test and learn and have a thorough understanding of your users.
If you like the features that a mobile app can offer but are put off by the development costs and the additional resources needed to drive acquisition and retention, a Progressive Web App could be the answer.
Google describes Progressive Web Apps as "user experiences that have the reach of the web, and are:
A Progressive Web App (PWA) is a collection of APIs that allows mobile websites to provide much of the functionality of a native app. It is accessible through a regular mobile browser without the need to be downloaded from an App Store.
Key features of PWAs include:
This new level of quality allows Progressive Web Apps to earn a place on the user's home screen.”
Benefits of PWAs have been highlighted to include:
*A service worker is a script that your browser runs in the background, separate from a web page, opening the door to features that don't need a web page or user interaction, features include push notifications and background synchronisation.
PWAs also benefit from relatively small set up and maintenance costs compared to a native app. Research by Forrester found that the average amount spent on a typical customer [native] mobile app - $50,000 to $150,000 - turns out to be just 35% of the true two-year cost. However, one of the drawbacks of PWAs is that while iPhones have embraced the Service Worker API technology that enables PWAs to work, it doesn’t allow the push notification functionality on iOS.
Creating the ultimate UX means putting the user at the very heart of the solution. Sometimes it’s about continually iterating design based on insight and feedback; sometimes it’s about thinking completely differently to create a totally frictionless experience.
Luke Wroblewski, Product Director at Google, talks about Natural User Interaction (NUI) and User Interfaceless Design. He explains how complex technology and logistics should be hidden from the user experience.
The Amazon Dash Button — the user simply pushes the button located by their washing machine when they need to order more detergent. Behind the scenes there are numerous complex activities to ensure that the detergent is ordered, paid for, dispatched and delivered.
Amazon Go — the checkoutless store. This enables people to enter the store, select what they want and then just leave, with the bill being sent to their phone. There is extensive technology required to achieve this seamless user experience including a complex integration of scanners, sensors, facial recognition, cameras, microphones and databases.
Apple Airpods — this smart little device has revolutionised the typical earphone experience. Simply open the lid of the Airpod container to connect them to the device, place them in the ear and the music will start. Return them to the case and they will charge.
Mobile device ownership and usage continues to vastly outstrip desktop and this trend is only going to continue. Users’ expectations are constantly evolving. No longer will users accept reduced content and functionality from a mobile site. Mobile users are not just ‘on the go’, they are also using their phones at home because it’s the nearest connected device to hand.
When you design mobile-first, you cater for an experience that is vastly different to desktop. This is because the context and scenarios in which users interact with their device affects how the content is consumed and absorbed. This means that understanding user behaviour in order to maximise engagement, meet expectations and maintain (or even increase) conversion is imperative.
Through valuable user research and insights a solution can be developed that exploits all the opportunities available from mobile that is relevant to your audience. It is these considered experiences that will drive revenue and loyalty.
With Google having now implemented the mobile-first index, it isn’t just users’ needs you will be satisfying by prioritising mobile. By fulfilling the requirements of the major search engines, you will be ensuring an all-round optimised experience.
DotLabel are an experienced team of specialists who can help you to review and transform your digital presence to meet your business goals and user expectations.
Want to create a great mobile user experience?
5. The Connected Consumer Survey 2012-2016
6. The Connected Consumer Survey 2012-2016
12. Luke Wroblewski 2017 Google Conversions https/::www.youtube.com:watch%3Fv=xiyOTcVHqHw&feature=youtu.be
13. Luke Wroblewski 2017 Google Conversions https/::www.youtube.com:watch%3Fv=xiyOTcVHqHw&feature=youtu.be
15. Evaluating the role of speed in mobile experiences research, Google and Basis, June 2017
16. "Search results are officially AMP'd". Google. 2016-09-20. Retrieved 2017-08-31.
19. ComScore Media Metrix MP and Mobile Metrix, U.S., Total Audience, June 2015
23. Luke Wroblewski 2017 Google Conversions
25. Your First Progressive Web App, By Pete LePage – Google Developer Advocate
StatCounter Global Stats, Nov 2016
Office for National Statistics (ONS) 2013
Google Data, Global, n=3,700 aggregated, anonymised Google Analytics data from a sample of mWeb sites opted into sharing benchmark data, Mar. 2016
ComScore MMX Multi-Platform, Jan 2017
ComScore Mobile Metrix, Aug 2016, adults 18+, all smartphones, browsing and application combined
Evaluating the role of speed in mobile experiences research, Google and Basis, June 2017
we are social
Google Research, Webpagetest.org, 11 Google Data, Global, n=3,700 aggregated, anonymised Google
Analytics data from a sample of mWeb sites opted into sharing benchmark data, Mar. 2016
Mastering Mobile at the EMEA Performance Summit available on Think with Google.
SOASTA Case study (September 1st, 2015) https://storage.googleapis.com/think/intl/ALL_uk/docs/Google_MobileSiteSpeed_Playbook_v2.1_digital.pdf