How to use Heatmaps and SESSION Recordings. Find UX blind spots on the e-commerce web.

Beautiful web, good traffic ... but why not sales come? The problem that the owner of the E-Commerce encountered but didn't know how to fix.

Have you ever felt like this? You have enormous marketing budget. Shooting until the traffic has entered your E-Commerce website every day. There are so many people ... but why is the order so quiet? Customers add products to the basket and then disappear. Leaving the basket, it is like playing like "invisible walls". Something between customers and the "payment button".

You check everything. The product is beautiful. The description is complete. There are also promotions. But still can't solve You feel like driving with all the blind. Just know that the car is running forward But do not see that the route ahead has "holes" or "obstacles". This is the most classic problem for E-Commerce people. You know that there is a problem, but you can't see "what it is.

(Prompt for illustrations: E-Commerce business owner sitting in front of the computer screen showing high traffic But the basket is empty Conveys confusion and uncomfortable)

Why do we "blind"? The reason that we do not see the problem on the webpage.

The main reason that we do not see the real problem. It's because we rely on "Quantitative data) from tools like Google Analytics too much. These information can tell us that "What's going on" (What), such as "someone left the 80%payment page" or "people spend very little time on the product page", but it has never told us that "why" is like that.

Why do people leave the basket? Is it too small? The shipping cost is shocking? Or form, filling in the address is difficult to use? We can only "guess". The guess in the business world is no different from playing lottery. We are making business decisions without the most important in -depth information, that is "customer experience and experience when he uses our website. So we stuck in the circuit of "Solving the problem" that may not be at the point and waste time in vain

(Prompt for illustrations: The comparison of 2 sides of the left side is a graph from Google Analytics, which looks complicated with a question mark (?) The right side is a view through the eyes of customers who are confused. Frustrated with the webpage)

If letting the "sick" website continue, what will happen?

Allowing the "blind spots" that we can't see these will continue. It is like allowing the water to leak out of the tank continuously. The consequences are more serious than expected:

• Bound on the advertisement day day by day But they found the invisible wall and then passed away Like you pay money to stand and watch the store and walk home
• Conversion Rate Dropped: The rate of change to your customers will never improve. Because the obstacles in ordering are still the same
• Customers lose feelings and never come back: bad experiences One time is more than enough to make your "pour" customers and turn to competitors that are easier to use. Solving the Slow Web Problem UX is an important thing that should not be overlooked.
• Losing the competitive opportunities: while you can't find the problem Your competitors may be using the right tool to leak and develop customers' experience until overtaking you.

In short, you are "both money. Lost both customers And lose the whole future "of the business at the same time, just because you can't see what your customers are facing

(Prompt for illustrations: The graph of the bar shows sales and Conversion Rate is plummeted with the money that is blown away. Conveying financial loss)

Turn on the light! The solution to the problem directly as well. "CCTV" for the website

The good news is ... We don't have to "blind" anymore! Today we have technology that is like "CCTV" for the website That will help us see all the behavior of the customers This tool is Heatmaps and SESSIONSINSSS .

What are these tools?

• Heatmaps: Is to display images of data, behavior, user (Aggregate) using colors as an indicator, such as red, which is the area where people click, move the mouse, or look the most. Makes us know immediately which part of the "Hot" website and which part "ignores" more information from experts can be read at Hotjar: What is a heatmap?
• Session Recordings: is a video recording of each customer in full. We will see the movement of the mouse, clicking, printing, and changing his webpage. Like sitting and watching him to use it beside!

Powerful and widely commonly used tools are Microsoft Clarity (100%free!) And Hotjar (with a free version and money). Simply starting is "Choose one and installed on your website".

(Prompt for illustrations: normal webpage comparison With the webpage that has a heatmap overlapping in the red yellow and green zone clearly And there is an icon for the Session Recording video beside)

Real case: Online clothing store increases 30% of sales from "watching videos" just a few clips.

To clearly see the image I would like to give an example of the case of "Styleme" online fashion clothing store that has encountered a very high customer problem in the payment page.

Problems: From Google Analytics, they only know that 75% of the customers who reach the checkout disappear, but do not know why "the team guessed that it may be because the Payment Gateway logo looks unreliable or not.

Method: They install Microsoft Clarity and start watching the customer's session records that leave the checkout. What they find is shocking! Many videos show the same behavior: customers fill out the name-the address, press the next button, and then find the "shipping cost" that has just appeared as the final step. Customers will stop. Move the mouse back and forth And ... Close the web page! They also opened a heatmap and found that no one clicked on the link. "Delivery policy" hidden below

Results: The team immediately reaches Bang Aor! The problem is not a credibility, but is a "shipping cost that is surprised by customers." They therefore adjust the new checkout design by showing delivery to customers. "From the first step" clearly. The result is ** The rate of baskets decreased by more than 40% and the total sales increased by 30% within one month! ** This is the power of "seeing" the real problem. Which is the heart of Shopify Cro (Conversion Rate Optimization)

(Prompt for illustrations: The Before & After of the Checkout page on the first side shows the hidden shipping cost and the customer is confusing. The After -side shows the shipping fee clearly and the customer is smiling and clicking to order.)

Want to follow, how to start? Simple checklist to use Heatmaps and session records.

Read here You probably want to try this wonderful tool with your E-Commerce website, right? Not difficult at all! Follow this checklist immediately:

1. Choose and install tools: For beginners I recommend starting with Microsoft Clarity because 100% free and powerful. Just apply, copy the tracking code, and place it in your website. (Whether Shopify, Webflow, or WordPress is easy)
2. Let it collect data: After installing Give time to storage tools for user behavior for at least 1-2 weeks to get enough information for analysis.
3. Analyze Heatmaps:
   • Click Maps: See what people click? Does he click the button that we want? Or click the image that can't be clicked (Show that he expects it to click)?
   • Scroll Maps: How deep do you scroll down? Is your CTA's important information high enough for people to see?
   • Move Maps: Where is the customer's mouse? This may be an area where he is interested or confused.
4. Watch the target session records: Don't watch every video! Give "filters" to see only interesting sessions, such as "people who enter the checkout but do not buy" or "people who spend a long time on the web but not conversion" and observe the "Friction Point" or "traffic jams" such as scrolling up and down . It must start by understanding these behaviors.
5. Create a hypothesis and amend: when found a problem that should be a problem To make a hypothesis (such as "I think the customers leave this page because the product is not found to add products to the basket") and then fix the design or content. Then go back to measured the results to see if it really improved or not.

Doing this continuously Is the heart of sustainable conversion rate, which will definitely affect The speed of Shopify stores as a whole, because of good user experience, everything

(Prompt for illustrations: 5 simple infections with icons (1. Install, 2. 2. Collect data, 3. Analyze Heatmap, 4. Watch Recordings, 5. Test & Improve)).

Questions that people tend to wonder (Clear every question)

I compile the questions that business owners tend to wonder about Heatmaps and Session Recordings to answer clearly.

Q1: Will these tools make my website slower?
A: Modern tools such as Clarity or Hotjar are designed to have the least impact on the web speed. (Asynchronous Loading). The benefits you will get from understanding the customers are much worth more than the speed impact. But should always check the Pagespeed regularly

Q2: How is it different from Google Analytics?
A: Google Analytics tells the "quantitative" information that "What happened", such as 1,000 people entering the first 50% of the first page, but Heatmaps & Session Recordings said "Qualitative" (Qualitative) "Why does that happen" by showing actual behavior and video? We have to use both of them together.

Q3: What about the privacy of the customer (PDPA/GDPR)?
A: Don't worry. These tools are created by taking into account the law to protect personal information. It is important to "conceal" or "Anonymize". Automatic delicate information such as name, address, phone number, and credit card information. There will be no customer personal information.

Q4: What is good between Microsoft Clarity and Hotjar?
A: If you just start and want a powerful and 100% free tool, choose "Microsoft Clarity". But if your business is bigger and wants more advanced features such as surveys (survey) or feedback polls on the "Hotjar" page (in a waste of money) is a great option.

(Prompt for illustrations: Image icon, large question mark And there are 4 small icons surrounding (Speed, Privacy, Analytics, Tools) with a cheap tick mark).

Summary: Stop guessing and start "watch" today!

At this point, I hope you can see that letting your e-commerce website work without Heatmaps and SESSIONSSINSS. It is no different from walking in the dark. Dependence on only numbers from Analytics is not enough in the era. "User experience" is the heart of the competition.

Investment (which may not even require money if using Clarity) to install these tools. Is one of the "worthwhile" investment and "maximum return" that you can do immediately. It is a change from "guessing" that has risks to "decisions from real data". You will understand customers like never before. And able to successfully leak that has been successfully holding your sales

Don't wait for the competitors to overtake you again. Time to install "CCTV" for your online store and change "visitors" that are frustrating to become a "happy customer" today!

Want our experts to help "CCTV" and analyze the blind spot to unlock the sales to soar, right? Let Vision X Brain help you! We have health check-up services for E-Commerce in-depth and efficiency service. Conversion Rate (Cro) that will change your website into a true money making machine. Consult us for free today!

(Prompt for illustrations: The final image that inspired Is a graph of sales that are rising in the sky With the backdrop of the Heatmap and SESSION CORORDING images that reflect success after doing)

‍