นิยาม
Heatmap หรือ ฮีตแมป คือเครื่องมือวิเคราะห์พฤติกรรมผู้ใช้ที่แสดงผลเป็นภาพสีทับบนหน้าเว็บจริง โดยใช้สีแทน "ความเข้มข้น" ของการกระทำ ไม่ว่าจะเป็นการคลิก การเลื่อนดู หรือการหยุดอ่าน สีแดงหมายถึงจุดที่คนสนใจหรือมีปฏิสัมพันธ์หนาแน่น สีน้ำเงินหมายถึงบริเวณที่แทบไม่มีใครแตะ
สำหรับคนทำ DTC ในไทย ฮีตแมปคือเครื่องมือที่ตอบคำถามที่ Google Analytics ตอบไม่ได้ เช่น "ทำไมลูกค้าเติมของใส่ตะกร้าแล้วไม่กดจ่าย" หรือ "ทำไมยอดขายจากหน้าโปรโมชั่นต่ำทั้งที่คนเข้าเยอะ" เพราะมันบอก ตำแหน่งบนหน้า ไม่ใช่แค่ตัวเลขรวม
เปรียบเทียบให้เห็นภาพ
ลองนึกภาพร้านค้าในห้างไทยที่มีกล้องวงจรปิดติดเพดาน ฮีตแมปก็เหมือนการเอากล้องหลายสิบตัวมาซ้อนทับกันแล้วระบายสีว่า
- ลูกค้ายืนจ้อง Shelf ไหนนานที่สุด (Attention Heatmap)
- ลูกค้าเอื้อมมือหยิบสินค้าจุดไหนบ่อยสุด (Click Heatmap)
- ลูกค้าเดินดูของถึงชั้นไหนแล้วเลี้ยวกลับ (Scroll Heatmap)
ถ้าชั้นวางสินค้าชั้นล่างไม่มีใครก้มดูเลย คุณก็รู้ว่าต้องย้ายของขึ้นมา — นั่นแหละคือสิ่งที่ฮีตแมปทำกับหน้า Landing Page ของคุณ
สูตรการอ่านค่าฮีตแมป
การอ่านฮีตแมปไม่ได้ดูแค่ "สีแดง = ดี" แต่ต้องคำนวณอัตราส่วนเทียบกับปริมาณคนเข้าหน้า
Click-Through Rate (CTR) ต่อองค์ประกอบ = (จำนวนคลิกที่องค์ประกอบ ÷ จำนวนผู้เข้าชมหน้า) × 100 Scroll Depth = (ตำแหน่งที่ผู้ใช้เลื่อนถึง ÷ ความสูงทั้งหมดของหน้า) × 100 Attention Ratio = (เวลาที่สายตาหยุดที่บริเวณหนึ่ง ÷ เวลาทั้งหมดบนหน้า) × 100
ตัวอย่างจริงจากร้าน DTC ไทย (ข้อมูลสมมติแต่สมจริง):
| ตัวชี้วัด | ค่าที่วัดได้ | เกณฑ์ที่ควรเป็น |
|---|---|---|
| CTR ปุ่ม "เพิ่มลงตะกร้า" | 2.4% | ≥ 5% |
| Scroll Depth ถึงส่วนรีวิว | 31% | ≥ 60% |
| Attention Ratio ที่ Hero Banner | 48% | 25–35% |
จากตารางนี้จะเห็นทันทีว่า ปุ่ม Add to Cart CTR ต่ำกว่ามาตรฐานครึ่งหนึ่ง และคนเลื่อนไม่ถึงรีวิว — ปัญหาน่าจะอยู่ที่ Hero Banner กินพื้นที่เกินไป ทำให้ปุ่มสำคัญถูกดันตกจอ
ตารางเปรียบเทียบฮีตแมปแต่ละประเภท
| ประเภท | วัดอะไร | ตอบคำถามอะไร | เหมาะกับสถานการณ์ |
|---|---|---|---|
| **Click Heatmap** | จุดที่ถูกคลิก/แตะ | ปุ่มไหนคนกดจริง ปุ่มไหนคนเข้าใจผิดว่ากดได้ | หน้า Product Detail, หน้า Checkout |
| **Scroll Heatmap** | ระยะการเลื่อนหน้าจอ | เนื้อหาส่วนไหนไม่มีใครเห็น | หน้า Landing Page, หน้าบทความ |
| **Move Heatmap** | การขยับเมาส์/นิ้ว | จุดที่คนลังเลหรือ hover นานผิดปกติ | หน้าเปรียบเทียบราคา |
| **Attention Heatmap** | จุดที่สายตาหยุด (ใช้ AI) | สิ่งที่คน "มอง" ตรงกับสิ่งที่เราอยากให้มองหรือไม่ | หน้าโปรโมชั่น, แบนเนอร์ |
| **Rage Click Heatmap** | จุดที่ถูกคลิกรัวๆ | จุดที่สร้างความหงุดหงิด | หน้าเว็บที่โหลดช้า หรือปุ่มเสีย |
สำหรับร้าน DTC ที่เพิ่งเริ่ม แนะนำเริ่มจาก Click + Scroll ก่อน เพราะติดตั้งง่าย (ใช้ Heatmap tool อย่าง Hotjar, Microsoft Clarity, หรือ Smartlook) และให้ insight คุ้มค่าที่สุด
(ใช้จริงยังไงในธุรกิจ DTC ไทย)
1. หน้า Checkout ที่ยอดตก
สมมติลูกค้าเข้า checkout 1,000 คน แต่จ่ายจริงแค่ 180 คน (Conversion 18%) เปิดฮีตแมปดูพบว่า 62% ของผู้ใช้คลิกที่ "ช่องกรอกโค้ดส่วนลด" ซ้ำๆ หลายครั้ง แต่ไม่มีโค้ดให้ใช้ → แปลว่าควรมีปุ่ม "สมัครรับโค้ด" ตรงนั้น หรือแสดงโค้ดตัวอย่างทันที
2. หน้า Landing Page โปรโมชั่น 11.11
พบว่า Scroll Depth เฉลี่ยแค่ 38% แต่ปุ่มซื้ออยู่ที่ 75% ของความสูงหน้า → ต้องย้ายปุ่มขึ้นมาเหนือ fold หรือทำ Sticky CTA
3. หน้า Product Detail สินค้าหลายตัวเลือก
Click Heatmap เผยว่าลูกค้าคลิกที่ "รูปสินค้า" มากกว่าปุ่ม "เลือกไซซ์" 3 เท่า → อาจต้องย้ายตัวเลือกไซซ์ให้เด่นขึ้น หรือใส่ Badge "เหลือไซซ์ M แค่ 2 ชิ้น"
4. โฆษณา Facebook ที่ยอดไม่คุ้ม
ใช้ Attention Heatmap เทียบว่าแบนเนอร์ที่โฆษณาสื่อสารตรงกับจุดที่คนมองบนหน้าเว็บหรือไม่ ถ้าไม่ตรง = ต้องปรับ Creative หรือ Landing Page ให้สอดคล้อง
(ข้อเข้าใจผิดที่เจอบ่อย)
❌ คิดว่าสีแดง = ดีเสมอ
จริงๆ สีแดงแค่บอกว่า "มีปฏิสัมพันธ์เยอะ" ถ้าคนคลิกรัวๆ ที่ปุ่มที่เสีย (Rage Click) สีแดงนั้นคือสัญญาณแย่
❌ ใช้ข้อมูลจากคนน้อยเกินไป
ควรมีอย่างน้อย 1,000 sessions ต่อหน้า ไม่งั้นสีที่เห็นอาจเป็น noise จากคนไม่กี่คน
❌ ดูฮีตแมปอย่างเดียวโดยไม่ดู Funnel
ฮีตแมปบอก "ที่ไหน" แต่ไม่บอก "ทำไม" ต้องจับคู่กับ Funnel Analysis, Session Recording และแบบสอบถามลูกค้า
❌ ลืมดู Mobile vs Desktop แยกกัน
พฤติกรรมคนไทยกว่า 75% เข้าซื้อของผ่านมือถือ ฮีตแมปบนมือถือกับคอมพิวเตอร์ให้ภาพต่างกันคนละเรื่อง ต้องแยกดูเสมอ
❌ เปลี่ยนหน้าเว็บทุกสัปดาห์
ฮีตแมปต้องใช้เวลาสะสมข้อมูล ควรปล่อยหน้าเดิมไว้อย่างน้อย 2–4 สัปดาห์ ก่อนสรุปผล
##
- Session Recording — วิดีโออัดพฤติกรรมผู้ใช้จริง ดูคู่กับฮีตแมปจะเห็นภาพชัด
- Funnel Analysis — วิเคราะห์ขั้นตอนที่ลูกค้าหลุดออก
- A/B Testing — ทดสอบสองเวอร์ชันเพื่อดูว่าอันไหนคอนเวิร์ตดีกว่า
- Scroll Depth — ตัวชี้วัดว่าผู้ใช้เลื่อนดูหน้าเว็บลึกแค่ไหน
- Rage Click — การคลิกรัวๆ ด้วยความหงุดหงิด
- Above the Fold — บริเวณที่เห็นได้ทันทีโดยไม่ต้องเลื่อน
- CTA (Call to Action) — ปุ่มหรือข้อความที่กระตุ้นให้ลูกค้าทำ acción เช่น "ซื้อเลย"
สรุปสั้นๆ: ฮีตแมปคือ "แผนที่ความสนใจ" ของลูกค้าบนหน้าเว็บคุณ ใช้มันเพื่อหาว่าจุดไหนควรปรับ จุดไหนควรเก็บ และจุดไหนที่กำลังทำเงินหายไป โดยไม่ต้องเดา