Mobile UX Best Practices From Google I/O

Mobify had the honor of attending this year’s Google I/O – the annual developer conference held by – you guessed it – Google in San Francisco. I/O had sessions focused on web, mobile, and native apps, so we thought it only suitable to share the mobile UX innovations that are dramatically improving the mobile shopping experience.

The latest innovations come in the form of Progressive Web Apps (PWAs). Mobify has adopted this Google-led technology into our platform to bring the high-converting features of a native app to your larger audience on the mobile web – and it’s much more affordable to maintain than an app.

PWAs are making the mobile web an incredibly powerful tool for retailers by increasing mobile conversions and customer engagement, and reducing page load times and early bounce rates. As technology evolves, you’ll be able to take your mobile offering a step further by using artificial intelligence (AI) to detect your customers’ wants and needs.

Make Mobile Web UX Feel Native

The mobile web has come a long way in the last few years, to the benefit of both retailers and customers. To make sure your mobile web experience really feels like a native app, use these 3 Feel Good Principles from Google I/O:

mobile UX image1. Reactive

Your mobile website should respond to a user’s touch and gestures without friction. Navigating between pages should be lightening fast, and long loading times need to be reduced. You should also dig deeper into designing for the appearance of speed. There are many tactics that make users feel like something is happening faster than it is.

Human perception of time is fluid, and can be manipulated in purposeful and productive ways. – Chris Harrison, Zhiquan Yeo, Scott Hudson, Brian Amento, ‘Cognitively Informed Intelligent Interfaces’

2. Predictable

Use predictable gestures. The interface should respond to touch and swiping. For example, in a fly-out menu, allow users to swipe the menu closed – moving your thumb to the top of the screen to hit that close icon is hard! Another example is to make tabs swipeable.

3. In Control

Avoid annoying page jumps as your content loads. Specifying the height of elements before load creates a smooth experience, and leaves users feeling in control.

Push notifications are a really valuable part of PWAs. However, it’s key to ask for permission in the right context. Avoid immediately asking for permission when customers first land on your PWA. Instead, choose a less aggressive time to ask, and tell them the value giving permission will provide. That way, your customers will be excited to receive a notification from you.

Watch: Creating UX that ‘just feels right’ with Progressive Web Apps

Improve Mobile UX with AMP and PWA

A revealing report by Ericsson Consumer Lab showed that delays in loading on mobile are more stressful than watching a horror movie. That’s where Accelerated Mobile Pages (AMP) and Progressive Web Apps can rescue users.

Mobile UX chart image
Source: Ericsson Consumer Lab report, 2016

Adding AMP to your site means your content will load almost instantly from a search engine by using a cached version of the AMP’d landing page. After landing on an AMP page, your Progressive Web App can load in the background, giving a seamless and instant transition to convert users to the full, rich experience.

By combining AMP and PWAs, you can drastically improve your mobile shopping experience by removing barriers to checkout. Users will love a fast and performant site that provides a rich, native app-like experience, without the cumbersome barriers to checkout that riddle responsive sites.

Improve Your Mobile UX With Writing

Writing and content are often an afterthought, but they are the core of UX and your shoppers’ experiences. Whether you’re writing error messages, tooltips, or product descriptions, follow these 3 key mobile UX writing principles:

  1. Be clear. Be jargon-free, and offer context. Don’t assume that users know the terms your company uses internally. Always give the simplest possible explanation of what is happening and be ruthless in removing industry lingo. Customers will find it much easier to understand your message, and what’s required of them.
  2. Be concise. Every word should have a distinct job. If it doesn’t, be ruthless in cutting it. Don’t force users to read long messages to understand what is happening.
  3. Be useful. Let users know the action they need to take next. This will provide a clear path for conversion.

Watch: How words can make your product stand out

Future-Proof Against the AI Movement

Google’s CEO, Sundar Pichai, says they’re rethinking all of their products to be AI-first instead of mobile-first. AI can be used to recognize customers’ habits, location, and language, among other things. You can leverage this new approach on your mobile experience to create something truly frictionless and increase conversions.

Mobile UX AI image

Your user’s experience extends beyond your website. It is every way that someone interacts with your brand or product. As things like Chatbots and AI become more popular, designers should design experiences that may not have a traditional screen interface, like Google Home or Amazon’s Alexa.

AI can also be used to reduce friction like form fields during checkout. Detecting context is another opportunity for AI. If a shopper is in-store, you can use AI to serve them relevant content like reviews, or alert about the the ability to scan a product barcode for more information.

Watch: Google I/O Keynote

There were many great UX best practices to take away from Google I/O this year. We’re truly seeing the next generation of the mobile web with Progressive Web Apps, Accelerated Mobile Pages, and Artificial Intelligence. It’s exciting to see how retailers can use the new technology to transform customer shopping experiences on the mobile web, and we’re excited to be a part of this new wave of mobile shopping.

Leave a Reply

Notify of