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:

Introduction

Having a responsive website is not enough to satisfy the ever-increasing demands of today’s sophisticated mobile user. Mobile users can no longer be considered as “in a rush” and ‘on the go’; they use their smartphones all the time. Beyond just being the nearest device to hand, the smartphone provides an instant and accessible connection to each and every type of media that users want to consume. In fact, people are so attached to their phones that being out of reach of them can actually bring on an anxiety disorder known as ‘Nomophobia’*.
 

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.

*Nomophobia describes the fear of being without a device, or beyond mobile contact. The term was coined in 2010 during a YouGov study on behalf of the UK Post Office. The study found in the UK, 58% of men and 47% of women suffer from the phobia. In the US 66% of adults suffer from ‘nomophobia’.

How to create a great mobile user experience in 2019

A recent report by comScore (UK Digital Market Overview — December 2018) stated that smartphones now account for 60% of all UK adult online minutes, with mobile apps commanding 61% of all digital media time, and 83% of mobile time. However, whilst these statistics are showing a consistently high usage of smartphones, the user experience is still lagging behind.

Why is mobile so important?

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.

What is a Mobile-first Approach?

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.  

Progressive enhancement

progressive enhancement

 

Graceful Degradation 

Graceful Degradation2

Is a mobile-first approach right for my business?

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?

9 ways to create a great mobile user experience 

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.

1. Understand your users

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. 

2. Design for the one-thumb user

Designing with a mobile-first approach means that from the outset you are considering your users in the context of using their device.

People hold their mobile device in different ways, however the majority (85%) use their smartphone with one hand. For the 75% of thumb-only users the size of larger mobile screens means that the amount of content within easy reach is reducing. This is important to note when designing key actions on the interface. It is vital to ensure that menus and other important controls are within thumb reach.

Screen Shot 2019 03 14 at 13.08.59Screen Shot 2019 03 14 at 13.09.09

Source

 

Thumb reach on screen:

As phone size increases getting to controls on top is harder. 

iphone 6 Plus thumb stretch4

iphone 6 plus

iphone 6 thumb stretch2

iphone 6

iphone5 to iphone5s

iphone 5 (5S)

iphone to iphone4s

iphone 4 (4s)

Source

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
Here is an example of the cards from Google News:
google cards

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.
 

3. Design for inaccuracy

People aren’t very accurate when it comes to tapping their device screen; especially so the further from the centre of the screen their thumb reaches. With this in mind, ensure that the placement of unrecoverable items, such as ‘delete’, ‘undo’ or ‘empty basket’, is away from regularly used actions to avoid accidental taps – which will inevitably frustrate your user.
scrren taps3
Provide ample space between the elements on the screen to prevent users from accidentally tapping the wrong thing. Apple recommends a minimum 44 pixels by 44 pixels hit area for interactive controls
4.Think ‘centre screen’
When looking at their mobile device, most people prefer to view and tap information that is displayed at the centre of the screen. This is useful to know when considering the placement of key content and actions. During the design process remember to leave enough space at the end of a page so the information can be scrolled to the middle.

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.

5. Make it easy

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.

Breaking down large tasks, such as form-filling, into manageable chunks, reusing previously input form data or setting smart defaults can help a process feel more achievable for the user. Designing for interruptions by enabling a save state and focusing on one key action per page are also important elements to help create a more enjoyable user experience.
Simply compare the difference between these two phone number fields:

When the information is broken down, it is much easier to scan, understand and verify, especially on a small screen

+441256329972     VS   [+44] [01256] [329972]

Reducing input effort – some examples

EXAMPLE 1

The 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.

section 5 example 1

Source: Luke Wroblewski Google Conversions

EXAMPLE 2

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.

section 5 example 3

Source: Luke Wroblewski Google Conversions

EXAMPLE 3

On the following Guest Checkout form a number of intelligent features have been applied to make the process easier and faster.

9100178188275b3929e652104b7f2bce ux

Source:Luke Wroblewski Google Conversions

There have been a variety of techniques used to optimise the checkout experience here, including:

  • The native UI controls which are familiar and easy to use.
  • Name field – It doesn’t split first name and last name as separate fields, instead it lets the technology do the work and not the user. Although, whilst this is a nice idea, how well this would work in cultures that put surname first?
  • Address field – It uses inline validation with geo-locators and Google maps to suggest address.
  • Email field - Using inline validation it suggests the most common email addresses and also avoids the need for the user to input the email address in a second time for verification. Best practice is to present the user with what they typed in the email field and ask them to confirm it is correct.
  • Card payment field - It provides an option to scan the credit card. In addition, it auto selects the card-type based on card number. However, arguably the card type is extra information the user shouldn’t be concerned with. It provides the correct input masks e.g. shows a numerical keypad for credit card number and provides a single input field (rather than separate fields) for expiry date and CVV code. This reduces tapping and makes it easier than selecting smaller digits from an alphanumeric keypad.

EXAMPLE 4

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?

section 5 example 6

 

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%.

Source: Luke Wroblewski Google Conversions

EXAMPLE 5

This airline booking mobile site takes advantage of the benefits of the mobile technology to reduce typing and tapping.

section 5 example 5

Source:Luke Wroblewski Google Conversions
Location - smart defaults are presented to the user by showing the nearest airport to the user based on geo-locations – whilst offering the option to select other airports prioritised by distance. The destinations suggested are based on the most popular routes from the selected airport. Other destinations can be easily selected from a map.

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. 

Times / prices – items which can be set along a scale can be controlled by a slider.

Segmented controls – showing users a choice of (limited) options can increase engagement. This is now used on the Facebook app with the ‘Tab bar’ which makes the critical parts of the app more visible rather than being hidden behind a hamburger menu. When users can see their options, they are more likely to interact with the different controls.
Source:Luke Wroblewski Google Conversions

6. Gesture control

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.

Tinder used the swipe gesture as a simple and easy to use core feature to using its app – teaching the world what swiping right means.

 

tap

Tap - Briefly touch surface with fingertip

Double tap

Double Tap - Rapidly touch surface twice with fingertip

drag2

Drag - Move fingertip over surface without losing contact

Flick

Flick - Quickly brush surface with fingertip

pinch

Pinch - Touch surface with two fingers and bring them closer together

spread

SpreadTouch surface with two fingers and move them apart

press

Press - Touch surface for extended period of time

pressandtap

Press and tap - Press surface with one finger and briefly touch surface with second finger 

Press and drag twoOR Press and drag One

Press and drag

Press surface with one finger and move second finger over surface without losing contact

rotate one  ORrotate two ORrotate three

Rotate - Touch surface with two fingers and move them in a clockwise or counterclockwise direction

Source: Touch Gesture Reference Guide By Craig Villamor, Dan Willis and Luke Wroblewski

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.

7.Using Voice

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.

8. Streamline processes

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%

Have you noticed how some sites now send you a temporary pin code when you forget your password to bypass the whole resetting process?

 

amazon fingerprint
Source: Luke Wroblewski Google Conversions

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.

When you are designing for mobile, you need to scrutinise all user processes in order to refine them as much as possible.

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.

9. Prioritise page load time
Users interact with their mobile in frequent short bursts of time, with the average Android user interacting with their phone on an average of 80 sessions per day for an average of 38 seconds per interaction. Therefore when it comes to page load time, speed is key. 75% of people in the UK say that the speed it takes to load a page has the greatest impact on their overall experience. 53% of people have stated that they will leave a mobile site if it takes more than three seconds to load, with users now regarding a satisfactory load time as just two seconds or less.

 

Mobile 3G Traffic Patterns

Screen Shot 2019 03 14 at 12.04.35

Source: Luke Wroblewski Google Conversions

linkedin skeleton screen

Source: blog.prototypr.io
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

Accelerated Mobile Pages (AMPs)

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.

AMP content is hosted and cached by Google and uses stripped down html files, streamlined CSS and an off-the-shelf JavaScript library to enable fast loading web pages. Google reports that AMP pages served in Google search typically load in less than one second and use 10 times less data than the equivalent non-AMP pages .In February 2018, Google reported 31 million web domains were publishing AMPs with more than 1.5 billion AMPs published globally.

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.

Do I need a mobile app?

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 the stats sound bleak, there are circumstances in which having an app would be beneficial for your business. This very much revolves around the needs of your users.

Do your users;

  • want to visit your website daily or weekly e.g. to see what’s new,
  • want to access certain information quickly e.g. account details,
  • want to undertake a particular process regularly e.g. make a purchase or payment,
  • want to access your site when there is no internet connection?

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. 

What is a Progressive Web App?

Google describes Progressive Web Apps as "user experiences that have the reach of the web, and are:

  • Reliable - Load instantly and never down even in uncertain network conditions.
  • Fast - Respond quickly to user interactions with silky smooth animations and no janky scrolling.
  • Engaging - Feel like a natural app on the device, with an immersive user experience.

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:

  • Offline access The PWA will cache (download) selected content to be consumed by the user at a later date, even when offline. The content can be automatically updated when the user is back online meaning a manual refresh isn’t required. This feature works well for news apps where articles can be cached and then read later, perhaps when there is no internet connection.
  • Push notifications Regular communication with app users is important to maintain retention, but cutting through email noise is tough. Push notifications send users a message straight to their device, providing updates on new features or content and can prompt instant engagement.
  • Home screen shortcutsJust like a regular app, a visual icon on the consumers mobile device keeps your brand front of mind and instantly accessible

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:

  • Progressive - Work for every user, regardless of browser choice because they’re built with progressive enhancement as a core tenet.
  • Responsive - Fit any form factor: desktop, mobile, tablet, or forms yet to emerge.
  • Connectivity independent - Service Workers* enable the 'work offline' feature.
  • App-like - Feels like an app to the user with app-style interactions and navigation.
  • Fresh - Always up-to-date thanks to the service worker update process
  • Safe - Served via HTTPS to prevent snooping and ensure content hasn’t been tampered with.
  • Discoverable - Are identifiable as “applications” thanks to W3C manifests and service worker registration scope allowing search engines to find them.
  • Re-engageable - Make re-engagement easy through features like push notifications.
  • Installable - Allow users to “keep” apps they find most useful on their home screen without the hassle of an app store.
  • Linkable - Easily shared via a URL and do not require installation.

*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.

So, depending on your objectives and your users needs, this exciting solution could be the ideal compromise between a website and app.

Creating the ultimate user experience – beyond screens

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.

Spotify — The in-app voice search has been integrated for iPhones iOS 11.2.5 and above, as well as for the top smart speakers. This is a handy additional feature especially when people are driving.

 

In summary

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.

Our experts provide digital strategy, user experience research, analysis and design, creative and UI design as well as open-source web development. For more information, contact us at www.dotlabel.co.uk

 

Want to create a great mobile user experience?

Contact us today on 01256 329972 or Email us at hello@dotlabel.co.uk to discuss your goals and ambitions.

 

 

Sources

1. https://www.thinkwithgoogle.com/intl/en-154/insights-inspiration/industry-perspectives/consumer-behaviours-shaping-next-generation-mobile-experiences/

2. https://www.psychologytoday.com/us/blog/artificial-maturity/201409/nomophobia-rising-trend-in-students

3. https://www.gartner.com/newsroom/id/3859963

4. https://www.gartner.com/newsroom/id/3844572

5. The Connected Consumer Survey 2012-2016

6. The Connected Consumer Survey 2012-2016

7. https://searchengineland.com/googles-mobile-first-index-likely-not-coming-2018-earliest-277074

8. thedrum.com/news/2017/02/27/three-quarters-british-population-use-second-screen-while-watching-tv-study-finds

9. https://www.uxmatters.com/mt/archives/2017/03/design-for-fingers-touch-and-people-part-1.php

10. https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/adaptivity-and-layout/

11. https://www.campaignlive.co.uk/article/just-say-it-future-search-voice-personal-digital-assistants/1392459

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

14. https://www.counterpointresearch.com/one-billion-smartphones-feature-face-recognition-2020/

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.

17. https://www.ampproject.org/latest/blog/

18. https://www.ampproject.org/static/extra/The_Total_Economic_Impact_Of_AMP.pdf

19. ComScore Media Metrix MP and Mobile Metrix, U.S., Total Audience, June 2015

20. https://www.statista.com/statistics/276623/number-of-available-applications-in-the-google-play-store/

21. https://www.digitalinformationworld.com/2018/12/games-apps-downloading-growth-to-113-billion.html

22. http://andrewchen.co/new-data-shows-why-losing-80-of-your-mobile-users-is-normal-and-that-the-best-apps-do-much-better/

23. Luke Wroblewski 2017 Google Conversions

24. https://developers.google.com/web/progressive-web-apps/

25. Your First Progressive Web App, By Pete LePage – Google Developer Advocate

26. https://www.w3.org/TR/appmanifest/

27. https://www.computerworld.com/article/2501477/mobile-apps/chief-mobile-officer--a-job-title-now-timely-.html

28. https://www.occstrategy.com/en/News%20and%20Media/2018/02/Talking%20shop%20infographic

 

Other sources

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

https://www.uxmatters.com/mt/archives/2017/03/design-for-fingers-touch-and-people-part-1.php

Blog Index