Menu
Hi and welcome to the Mobile UX Marathon, a series of weekly webinars by Google on how to improve user experience and conversion rates on mobile web. Today's webinar focuses on mobile UX best practices, specifically discussing the best approaches for designing product detail pages, optimising your checkout process, and building excellent forms.
Please ask your questions on the Mobile UX Marathon website. We will be collecting them, and they will help shape the content of our livestream on May 14th, 2019, where we will try to address them all. You will also be able to ask questions in the chat during the livestream, so please join us.
Before I begin, I'd like to introduce myself. Hi, my name is Anna. I’m a User Experience and Design Specialist at Google, and I work as a UX consultant with different companies around the globe. My team and I help companies optimise experiences on their websites to increase conversion rates. We strive to understand which best practices work well on mobile web by testing them across various verticals and industries.
Today, we have collected some insights that should be relevant across all industries, especially for those that have product detail pages, checkout processes, or forms on their sites. So please watch the video and ask your questions on the Mobile UX Marathon website.
Let's start with product detail pages. This is where the checkout process begins and where the entire conversion path starts. It's the point at which people decide whether they want to purchase a product or if they still need help making that decision.
Take, for example, CoolBlue's product detail pages, which are designed in a highly effective manner. They provide all the necessary information clearly and concisely. The images are high-quality and easy to swipe through, the call-to-action (CTA) is present throughout the page, and items can be added to the wishlist without needing to create an account.
This example reflects some fundamental principles of designing landing pages. Firstly, the key CTA should be prominently displayed above the fold. Consider fixing the CTA at the bottom of the page so that it remains easily accessible to the user. It's also important to test different CTA copies. While being clear and descriptive is key, for some businesses, it's better not to rush users into commitment—phrases like "Add to Cart" may work better than "Buy Now," depending on your audience.
Showing your value proposition near the CTA can also help users make a decision. CoolBlue does this effectively by presenting a list of bullet points in a clear, structured way. This approach aligns with Steve Krug's principle from Don't Make Me Think, which emphasises that users scan websites for relevant information rather than reading them thoroughly. CoolBlue's team highlights the relevant information next to the CTA, making it easy for users to understand the benefits at a glance.
In addition, CoolBlue consistently displays its value proposition throughout the user journey—from the homepage to the product listing page to the product detail page—reminding users why they should continue exploring the site and proceed to checkout.
CoolBlue also provides a secondary CTA to add items to a wishlist without requiring account creation, which enhances the experience for returning users. You might consider adding secondary CTAs such as "Check in Store" to enable offline conversions or "Email Me This Item" to facilitate cross-device conversions. Many users explore products on mobile but prefer to complete their purchase on a desktop, so offering this option can help capture those conversions.
If you have multiple visuals for a product, consider implementing arrows, dots, or thumbnail images to indicate that more pictures are available. If you offer a zoom functionality, make sure to communicate this clearly with an icon or text label like "Tap to Zoom." Allowing users to swipe between images while in zoom mode, rather than closing each image before opening the next, improves the user experience significantly.
Once a user has decided to buy a product, it's crucial to keep them within the context of their shopping experience rather than redirecting them directly to the cart. Allow them to choose whether to proceed to checkout or continue browsing by using a pop-up window that confirms the product was added to the cart. This approach not only provides feedback on their actions but also keeps them in control of their shopping experience. Additionally, this pop-up is a great opportunity for upselling by displaying popular related items or how much more the user needs to spend to qualify for free delivery.
They upgraded their cart process. Previously, users were redirected directly to the cart after adding an item to the shopping bag. Now, they have added a pop-up window at the cart, which gives users the option to either keep shopping, view their cart, or proceed directly to checkout. Additionally, they display popular items that other users often buy alongside the item just added to the cart.
As a result, they have increased the average order value, confirming that this pop-up not only enhances user experience by keeping users in context and in control but also positively impacts business metrics. We encourage you to conduct a similar A/B test.
Next, let's talk about designing great forms and checkouts. It’s crucial to make these experiences painless, simple, and easy to complete. At this stage, users have already decided to purchase a product or apply for a service, so it’s essential to ensure the functionality is excellent.
When designing checkouts and forms, remember that people are ready to buy your product or service, so you must make the experience as simple and painless as possible. Forms should be short, concise, and clearly manage users' expectations about the process.
One of the basics of designing checkouts or forms is managing user expectations about the steps they need to complete, what information is required, and how many steps there are. This is why displaying a progress bar at the top of every form is important. As discussed before, combining text with icons works best. Each step should be named clearly so users understand what information will be required. Additionally, using icons to illustrate or hint at what each step involves is helpful.
When it comes to checkouts or forms, it’s important to help users concentrate on the task at hand. To achieve this, consider removing distractions and unnecessary navigation elements, such as the hamburger menu or top navigation panel, as these can lead users away from the purchase or form. However, it’s okay to leave options like "back to cart" or "back to the previous step." You still need to provide some navigation options, such as contacting support, asking a question, or including a company logo that can take users back to the homepage.
When designing these forms, you can either divide them into a few steps across different pages or opt for a one-page checkout. In either case, a progress bar is a must-have. It helps users understand the process and where they are within it.
I cannot emphasise enough the importance of having fully descriptive call-to-action buttons. For example, instead of just labelling a button as "Next," consider using text that clearly describes the next step, such as "Proceed to Payment," "Proceed to Shipping Information," or "Proceed to Final Step." This is something you should test, but best practice suggests being as descriptive as possible.
Another aspect to consider testing in your checkout process is a psychological trick. And here it is. Users and people, in general, are more motivated to complete a task when they aren't starting from zero. This has actually been proven in the offline world, even before the digital era and all its advancements. It's called the "goal-gradient effect." For example, a 10-space coffee card with two pre-stamped spaces gets filled up faster than an 8-space coffee card with no pre-stamps.
That's why, in your checkout process, if you have three steps, you can introduce a fourth step that is already completed. For example, in the case of Booking.com, the first step is your selection, where you simply choose the hotel. In a retail example, the first step could be the basket review, which is marked as already complete. You can start the progress bar right in the basket, indicating that the first step is done. We highly encourage you to test these concepts.
At the beginning of every form, it’s important to remind users of the benefits of completing the form or registering, especially if it’s an account creation form. Clearly communicate how easy it is to complete right now, motivating them to proceed. Always display a value proposition at the top of every form. Also, consider testing guest checkouts—various studies show that, on average, about a third of users abandon their checkout because they're asked to create an account. While it’s understandable that you need this information for your CRM systems, consider the potential revenue loss due to mandatory registration.
In some of my recent webinars, I’ve mentioned that dropdowns are not ideal for mobile web design, and now let's explore why. First, the implementation you see on the left versus the one on the right is much more visual. The user can see all the available choices and make an informed decision. On the left, it requires just one tap, whereas on the right, it takes at least two taps—one to open the dropdown, then potentially scrolling through options, selecting one, and sometimes needing to close the dropdown. This can lead to many taps instead of just one. Additionally, dropdowns render differently depending on the operating system, whether Android or iOS, which means you lose control over how they appear in the UI.
The general rule is, if you have fewer than five items to choose from, display them directly in the form. If there are more than five, consider implementing a pop-up window where users can scroll through options visually, tap to choose, and then close the window.
Avoid dropdowns, especially on mobile. When it comes to entering dates, consider using a mobile-first calendar for dates close to the current one, such as booking upcoming travel. For dates of birth, it's best to allow users to manually input the date rather than swiping through years and months.
Next, let's discuss inline validation. Inline validation helps users understand in real-time if there are any errors, avoiding the frustration of filling out an entire form only to see mistakes highlighted after submission. This is especially important for one-page checkouts. If a user makes a mistake, they should be informed immediately with clear instructions on how to correct it. Be careful with the language used—don’t blame the user, as they likely didn’t intend to make an error. Instead, use friendly, conversational language to guide them.
In general, try to be forgiving with the input users provide. Don’t be overly strict with every single form field. For example, when asking for a phone number, allow for various formats, such as brackets, starting with zero, or including a plus sign, extensions, area codes, etc. While this may require more effort in building the code for your website, it will save users time and improve their experience.
Use different scripts and APIs that can assist with input validation, such as suggesting popular domains for email addresses once the user types “@”. A mail check script can recognize typos in common domains and suggest corrections directly in the form. To ensure users enter the correct email address, leverage the information stored in their browser and enable autofill for fields they’ve previously completed on the web.
Another basic but often overlooked suggestion is to bring up the most appropriate keyboard type according to the field. Use a numeric keypad for phone numbers, an alphanumeric keyboard with the “@” sign for email addresses, and an alphanumeric one for mixed inputs like postal codes or licence plates.
After users have entered all their information and are ready to pay, they’ll be redirected to the payment page. It’s crucial to design this page well, as a poorly designed payment page can significantly harm your sales. Make sure to display different payment method icons or security badges to reassure users that their payment details are safe. Prominently display the payment amount at the top of the page. Test different CTA (Call to Action) copy, ensuring it’s crystal clear that payment will happen immediately after clicking. You may also want to test different CTA colours to find the one that works best and instils trust in users.
If your payment process involves redirecting users to a third-party provider, ensure that the payment page looks native to your website. This is crucial because a different-looking page can cause confusion or fear that they are on the wrong site, leading to abandoned carts. This happens more often than you might think.
That’s it for now on checkout design, creating excellent forms, and optimising the payment process. I encourage you to check out the resources on the Mobile UX Marathon website, including the "Win on Mobile" series by my colleague Lina. It’s really insightful and covers a lot about designing excellent forms and helping users make decisions on product detail pages, and more.
As mentioned before, we will have a live-stream session where we hope to answer your questions on mobile UX best practices. Please bring your questions or submit them in advance. While we hope to answer them all, we’re happy to run these live streams regularly.
That’s it for now! Use the hashtag #MUX to post about us on social media. That’s how we collect feedback from you. My name is Anna, and I hope you enjoyed the session on UX perspectives on mobile. I’ll see you in the third week of May. Please bring your questions to the email live stream. I’ll be there, along with other colleagues. We look forward to seeing you there!
Thank you.
%2B(1).png)
