The UI Optimization Ultimate Combo: Touch Heatmaps and A/B Testing

Many apps achieve a set of initial downloads, but few have staying power. If an app offers a poor UX, many users will ditch this app for another that meets their UX standards. The abandonment can happen in the blink of an eye with no hesitation. Your user experience can make or break your app(s) in today’s hyper-competitive market. Apps that invest time, energy and resources into creating an amazing user experience will be rewarded with users who are engaged and loyal.

In particular, a strong, optimized UI design goes hand-in-hand with a strong app UX. Many users give up quickly on apps that exhibit user interface design deficiencies, even when the app serves a purpose or meets its users’ needs. The only way to maintain an exceptional UI (and thus a stronger UX) is to constantly monitor, test, and optimize- correctly.

We’re not gonna lie, it can be a tough game to truly understand what users like and dislike in your UI. You can pore over mountains of data, but often times you are gathering few answers if any.

To truly maintain a competitive edge and understand the strength of your UI- you need to go beyond standard analytics.

We want to make the process easier for you- that’s why we are providing this insider tip. More product managers and designers are beginning to realize that top-notch UI analysis and optimization can be achieved by leveraging a special one-two punch: touch heatmaps and A/B testing.

Touch Heatmaps

When it comes to tracking your users’ actions and more importantly what they like, dislike, or simply do not understand regarding your UI, fewer tools are more helpful than touch heatmaps. Basically, they record every pinch, swipe or tap and compile them into a visual aid on an aggregate level. This data can help you quickly recognize key UI elements such as which areas on each screen are receiving the most and least attention, and where unresponsive gestures are occurring. They can also provide insights on which visual queues or strategies drive engagement and which should be tweaked or removed as a part of a future enhancement.

Many mobile teams have reported using touch heatmaps to spot flaws in their design that are directly correlated with a poor onboarding and/or lower in-app conversion rates. A simple UI design “mistake” can cost money and users. For example, an unresponsive gesture on an “add additional payment method” button in an app’s checkout section can result in abandoned carts, user frustration, and lost sales. The better and quicker you can pinpoint errors and opportunities for optimization, the greater your app’s overall UX will be. That’s why touch heatmaps are so potent. Moreover, analyzing heatmaps is simple and intuitive thanks to their easy to decipher, visual design.

Appsee’s touch heatmaps show that barely any users on this particular app click the “Create an Account” button.

A/B Testing

A/B testing refers to the practice of maintaining two different, isolated versions of an app instance, and analyzing which one performs better. It’s kinda like a science experience for your app. For example, one version of an app may have the checkout button predominately displayed in the right corner, and another may have it in the lower left. By running both instances of this app UI design at the same time, you can determine which placement is best, based on the checkout conversion rate comparison over a length of time.

A/B testing can also be utilized for a new permissions request to see if it drives user engagement or scares users away. Another potential A/B test could be re-engagement campaigns or implementing enhancements to drive re-engagement. No doubt. the opportunities are pretty endless with A/B testing. Specifically when it comes to design, you may be surprised to see the big difference that a color change, button placement or menu style can make. Thankfully there’s actually a way you can go beyond your competitors and vet your design theories even further.

Optimizely’s visual editor as part of its A/B testing platform. Source: optimizely.com

A Happy Union of the Two

The combination of touch heatmaps and A/B testing is a powerful cornerstone to one’s UI optimization strategy. You might not know it yet, but this is the union you have been subconsciously praying for. As mentioned, A/B tests begin as ideas, but when integrated with UI data like touch heatmaps, these tests produce extremely actionable results and a clear direction for mobile teams to move forward. By leveraging touch heatmaps as a method to further analyze a series of A/B tests, you can deeply examine screens, potential errors, and unique user behaviors. Specifically when it comes to UI design, one can determine if variations in buttons, text, graphics, colors are more effective than an alternative.

Take a look at the screenshot below, this is thanks to Appsee’s touch heatmap integration with Optimizely’s A/B testing data. Let’s say you have a retail app and your traditional analytics is telling you that 1/3 of your new users are not completing the registration process. Great to know, but now what? You can presume that the “Sign Up screen” has a high correlation but how do you effectively identify the issue? This is where the combo of touch heatmaps and A/B testing comes into play. Let’s take a look at this Sign Up screen mockup to dive deeper. First, a bit background on this app mockup:

  • Before users begin shopping on the app they first encounter this Sign Up screen
  • The touch heatmaps have been filtered to just show unresponsive gestures

Take a moment to examine the image as if it’s your app. Focus first on the “original” screen from the A/B test. It looks like the original version of this Sign Up screen has A LOT of unresponsive gestures. What does that tell us? Basically, many users are trying to find a way to get out of the Sign Up screen and just shop. The Sign Up screen is restricting users and causing friction. This friction is not only the cause of the low sign up rate, but it can also lead to loss of sales and negative UX. Considering the data, let’s come up with a design hypothesis for an A/B test:

Users need the option to not have to sign up and be able to navigate directly to the shop. Let’s replace the “Log In” button with a “Shop Now!”

Nice hypothesis. You edit the button and flow, and run a thorough A/B test paired with touch heatmap data. Voila, dramatically less unresponsive gestures compared to the original screen. You still see that there are a few unresponsive gestures remaining, which may prompt you to make the “Shop Now!” button even bolder, yet the biggest takeaway is that you have gathered key, actionable insights regarding a major screen within your app. Well done.

Ultimately, there’s no beating around the bush. The union of these two unique technologies provides unparalleled insights regarding your UI design. Insights like these are what will save your team valuable time, increase your competitive edge, and in the end fortify your UX.

If you would like to learn more about Appsee’s unique integration with Optimizely, check out this webinar.

This post was originally featured on Appsee’s Product Mavens blog.

Show your support

Clapping shows how much you appreciated Appsee’s story.