Nielsen Norman Group พบว่าผู้ใช้งานใช้เวลา 57% ของการดูหน้าเว็บไปกับส่วนบนของหน้า (Above the Fold) โดยความสนใจจะลดลงอย่างรวดเร็วหลังจากพ้นหน้าจอแรก สำหรับหน้า Landing Page ตัวเลขนี้ยิ่งชัดเจนกว่าเดิม เพราะผู้เข้าชมจะตัดสินใจว่าจะอยู่ต่อหรือกดออกภายในเวลาเพียง 2-3 วินาทีเท่านั้น
นั่นหมายความว่าการออกแบบส่วน Above-the-fold คือโอกาสเดียวที่คุณจะได้ดึงดูดให้ผู้เข้าชมอยู่กับคุณต่อ
สิ่งที่การศึกษาด้วย Eye-Tracking เผยให้เห็น
งานวิจัย Eye-tracking โดย Djamasbi et al. (2010) ได้ระบุองค์ประกอบที่ดึงดูดความสนใจในส่วน Above the fold ไว้ดังนี้:
| องค์ประกอบ | เวลาจ้องมองเฉลี่ย | จุดที่มองเป็นอันดับแรก |
|---|---|---|
| รูปภาพหลัก (Hero image) / ภาพประกอบ | 1.2 วินาที | 67% มองที่นี่เป็นอันดับแรก |
| หัวข้อหลัก (Main headline) | 0.8 วินาที | 22% มองที่นี่เป็นอันดับแรก |
| ปุ่ม CTA | 0.4 วินาที | 3% มองที่นี่เป็นอันดับแรก |
| เมนูนำทาง (Navigation) | 0.3 วินาที | 8% มองที่นี่เป็นอันดับแรก |
ภาพ Hero visual เป็นส่วนที่ดึงดูดความสนใจได้มากที่สุด แต่การเปลี่ยนใจ (Conversion) นั้นเกิดขึ้นที่ปุ่ม CTA ความท้าทายคือการออกแบบเส้นทางการมองเห็น (Visual path) จาก Hero → Headline → CTA
5 องค์ประกอบของส่วนพับ (Fold) ที่สร้าง Conversion สูง
1. Hero Visual ที่สร้างความปรารถนา
รูปภาพหลักควรแสดงให้เห็นถึง ผลลัพธ์ (Outcome) ไม่ใช่แค่ตัวผลิตภัณฑ์ Adaval & Wyer (1998) แสดงให้เห็นว่าภาพที่สื่อถึงผลลัพธ์สุดท้าย (เช่น ลูกค้าที่มีความสุขขณะใช้งานผลิตภัณฑ์) สร้างความตั้งใจในการซื้อได้มากกว่าภาพถ่ายเฉพาะตัวสินค้าถึง 2 เท่า
2. Headline ที่เป็นคำมั่นสัญญาด้านคุณค่าเพียงหนึ่งเดียว
จาก งานวิจัยด้านการเขียนคำโฆษณาเพื่อสร้าง Conversion ของ Copyhackers พบว่าหัวข้อที่ตรงกับความคิดในใจของผู้เข้าชมให้ผลลัพธ์ดีกว่าคำเสนอคุณค่าแบบทั่วไปถึง 3-5 เท่า หัวข้อควรทำให้ประโยคนี้สมบูรณ์: "ฉันต้องการบางอย่างที่จะ..."
3. ลำดับความสำคัญทางสายตา (Visual Hierarchy) ที่ช่วยนำสายตา
งานวิจัยโดย Faraday (2000) เกี่ยวกับลำดับความสำคัญทางสายตาในการออกแบบเว็บ แสดงให้เห็นว่าขนาด ความต่างของสี (Contrast) และตำแหน่ง สร้าง "ลำดับการอ่าน" ที่สามารถวัดผลและปรับปรุงได้ ลำดับควรเป็น: จุดยึดสายตา (Visual anchor) → ปัญหา/ทางแก้ → CTA
4. CTA ที่มีความต่างของสีสูงสุด
Ling & van Schaik (2006) พบว่าปุ่ม CTA ที่มีความต่างของสีกับพื้นหลังมากที่สุดจะได้รับการคลิกเพิ่มขึ้น 21% ไม่ว่าจะใช้สีอะไรก็ตาม หัวใจสำคัญคือความเปรียบต่าง (Contrast) ไม่ใช่แค่เรื่องของสี
5. Social Proof ในส่วน Above the Fold
การวางสัญญาณความน่าเชื่อถือ (จำนวนลูกค้า, คะแนนรีวิว, แถบโลโก้) ไว้ในส่วน Above the fold ช่วยลดการประเมินความเสี่ยงในสมองส่วน Prefrontal Cortex ดังที่แสดงใน Klucharev et al. (2009) เพียงประโยคเดียวอย่าง "ได้รับความไว้วางใจจากนักการตลาดกว่า 10,000 คน" ก็สามารถเพิ่ม Conversion ได้ 15-20%
ทดสอบ Landing Page ของคุณ
วาง URL ของ Landing Page ของคุณลงใน FlowDx เพื่อดูว่าสายตาของผู้เข้าชมไปหยุดอยู่ที่ตรงไหน แผนภูมิความร้อนของความสนใจ (Attention heatmap) จะเผยให้เห็นว่า CTA ของคุณอยู่ใน "โซนร้อน" หรือจมหายไปกับส่วนอื่นๆ
อ้างอิง
- Nielsen Norman Group. Scrolling and Attention.
- Djamasbi, S. et al. (2010). Generation Y, web design, and eye tracking. Int. Journal of Human-Computer Studies.
- Klucharev, V. et al. (2009). Reinforcement learning signal predicts social conformity. Neuron.