Website Heatmap คืออะไร? และใช้สำหรับอะไร?

  • by

💬 What is heatmap?

อันดับแรกเราจะพาทุกคนมารู้จักกับคำว่า Heatmap มันคือวิธีการตรวจสอบที่มีประสิทธิภาพในการทำความเข้าใจว่าผู้ใช้งานทำอะไรบ้างบนเว็บไซต์ของคุณ ไม่ว่าจะคลิกในตำแหน่งไหน เลื่อนไปไกลแค่ไหน สนใจและไม่สนใจอะไร

หรือเราสามารถเรียกได้ว่า Heatmap Analytic ซึ่งเป็นเครื่องมือวิเคราะห์เว็บไซต์โดยการเก็บข้อมูลผู้ใช้งานขณะใช้งานบนหน้าเว็บ โดยข้อมูลที่ผ่านการวิเคราะห์จะถูกแสดงผลออกมาเป็นเฉดสีต่าง ๆ เพื่อให้ทราบตำแหน่งที่ผู้ใช้สนใจมากที่สุดและน้อยที่สุด นอกจากHeatmap จะเปฌนอนาคตของ Web Analytics

📍 วิธีการเก็บข้อมูล ?

การเก็บข้อมูลตำแหน่งที่ผู้ใช้สนใจนั้นจะเก็บจากการเคลื่อนที่ของเมาส์คอมพิวเตอร์ แต่ในกรณีที่ใช้เว็บไซต์ผ่านมือถือจะเก็บข้อมูลจากตำแหน่งนิ้วที่สัมผัสหน้าหน้าจอ

🔔 โดย Heatmap Analytic จะมีวิธีการเก็บข้อมูล 2 แบบ

  1. Click Heatmap (รูปซ้าย) – แสดงให้เห็นถึงตำแหน่งที่มีคนคลิกว่าส่วนไหนมีคนคลิกเยอะ(พื้นที่สีแดง)และน้อย(พื้นที่สีน้ำเงิน)
  2. Attention Heatmap (รูปขวา) – แสดงให้เห็นถึงตำแหน่งที่มีคนอ่าน สีแดงเป็นพื้นที่ที่มีจำนวนผู้อ่านเยอะ และสีน้ำเงินเป็นตำแหน่งที่ไม่ค่อยมีคนเลื่อนไปอ่านมาก

**โปรแกรมนี้จะเริ่มเก็บข้อมูลหลังจากที่เราติดตั้ง

🟠 ทำความเข้าใจกับระดับสีของ Heatmap

Heatmap ช่วยให้เข้าใจว่าผู้อ่านคลิกที่ใดบ่อยที่สุดและไม่ได้คลิกที่ไหนเลย สังเกตได้จากสีที่ปรากฏ

📎 สีที่ต่างกันแสดงถึงความถี่ที่ผู้ใช้คลิกในตำแหน่งนั้น สีร้อนใช้สำหรับจุดที่เป็นที่นิยม ส่วนเฉดสีเย็นเป็นพื้นที่ที่ต้องการการปรับปรุง

ตารางเฉดสีและจำนวนผู้ใช้งาน

👉 ประโยชน์ของ Heatmap

Website template on laptop screen Free Psd

เราใช้งาน Heatmap เพื่อรวบรวมข้อมูลเกี่ยวกับการใช้งานของผู้ใช้ นำมาวิเคราะห์ว่าเข้าสนใจอะไร ตำแหน่งใด จุดใด และคลิกตรงไหน หลังจากนั้นก็สามารถนำข้อมูลเหล่านั้นมาปรับปรุงเว็บไซต์ของเราเองทั้งในส่วนของการจัดวางส่วนประกอบต่าง ๆ ของเว็บไซต์ เช่น ตำแหน่ง Banner การจัดวางภาพและข้อความที่เหมาะสม และตรงกับตำแหน่งที่ผู้ใช้มักเห็นบ่อย

Photo Credit : freepik.com

.

🖥 ตัวอย่างการแสดงผลของ Heatmap

Click Heatmap

ภาพขวา เป็นตัวอย่างของเว็บไซต์เขียนรีวิวอาหารที่แสดงผลผ่ายจอโทรศัพท์มือถือ และจะสังเกตได้อย่างชัดเจนว่าจะขึ้นสีแดงบริเวณที่เป็นลิงค์เข้าไดูรายละเอียดอีกที โดยเก็บข้อมูลจากการ tab (เอานิ้วแตะจอ) ของผู้เข้าชม นอกจากนี้ยังมีส่วนของภาพที่ปรากฏสีขึ้นมา แสดงให้เห็นว่าผู้ใช้งานกดเข้าไปดูภาพเพื่อขยายอ่านรายละเอียด (ทั้งจากมือและและคอมพิวเตอร์)

Attention Heatmap

ตัวอย่างการอ่านข้อมูลของผู้อ่าน โดยอ้างอิงจากข้อมูลการ Scroll หน้าจอ เราจะเห็นได้ว่าส่วนบนทุดจะเป็นสีแดงเนื่องจากเป็นส่วนแรกที่ผู็เข้าชมจะเห็นก่อน และหากเลื่อนลงมาจะสีอ่อนลง แสดงได้ว่าส่วนใหญ่ผู็ใช้กดออกก่อนจะอ่านจบ

ตัวอย่างเว็บไซต์ Heatmap ที่สามารถนำมาวิเคราะห์เว็บไซต์ของตนเอง

Hotjar - Insight Platforms

โปรแกรม hotjar

คือ Heatmap Analytics หรือเครื่องมือวิเคราะห์พฤติกรรมผู้เยี่ยมชมเว็บไซต์ (Visitor) เพื่อดูภาพรวมของหน้าเพจทั้งบน Desktop และ Mobile

Key Features ของ Hotjar
1. Click Map – ดูว่าส่วนใหญ่แล้ว Visitor คลิกตรงไหนของหน้าเพจ
2. Move Map – ดูพฤติกรรมของผู้ใช้ว่าเลื่อนเมาส์ไปตรงไหนบ้าง (ใช้ได้เฉพาะ Desktop)
3. Scroll Map – ดูว่าผู้ใช้งานเลื่อน (Scroll) ลงมาชมหน้าเพจถึงส่วนไหน แล้วส่วนละกี่เปอร์เซ็นต์

___________________________________________________

This Is the Future of Smartlook — and It's Sleek - Smartlook

โปรแกรม Smartlook 

___________________________________________________

MouseStats Website Heatmaps, Visitor Playback, Form Analytics, Visitor  Recording, Visitor Surveys: UX Analysis Suite

โปรแกรม MouseStats 

___________________________________________________

โปรแกรม Heatmap.com

___________________________________________________

ในปัจจุบันมีหลากหลายเว็บไซต์ที่เปิดบริการ Heatmap ขึ้นมา มีทั้งการใช้งานฟรีและจ่ายเงิน ซึ่งผู้ประกอบการสามารถเลือกใช้ได้ตามใจ นอกจาก Heatmap จะมีประโยชน์ในเรื่องของการทราบพฤติกรรมการใช้งานบนหน้าเว็บไซต์ของผู้ใช้แล้ว ยังมีประโยชน์ต่อนักออกแบบและ UX/UI ต่อการพัฒนาเว็บไซต์ ให้สามารถออกแบบได้ตรงกับพฤติกรรมของผู้ใช้งานและ Call to action ภายในเว็บ

**Call to action หรือ CTA คือปุ่มสุดท้ายที่จะเปลี่ยนจากผู้ใช้งานทั่วไป เข้าสู่กระบวนการคิลกเพื่อจุดประสงค์บางอย่าง เช่น การสมัครสมาชิก การลงทะเบียน การคลิกเพื่อไปยังอีกเพจหนึ่ง หรือแม้จะทั้งการติดต่อซื้อขายสินค้า

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.