ข้ามไปเนื้อหาหลัก

Rule of Thirds คือ​อะไร องค์​ประกอบ​ภาพ​ตาม​งาน​วิจัย​การ​มอง​จริง

อัปเดตล่าสุด 27 กันยายน 2569
เวลาอ่านประมาณ 12 นาที
Rule of Thirds คือ​อะไร องค์​ประกอบ​ภาพ​ตาม​งาน​วิจัย​การ​มอง​จริง

KEY TAKEAWAYS

3 ประเด็น

งาน​วิจัย​ของ Amirshahi และ​คณะ (2014) พบ​ว่า​กฎ​สาม​ส่วน​แทบ​ไม่มี​บทบาท​ใน​ภาพถ่าย​คุณภาพ​สูง​และ​ภาพ​วาด​ชุด​ใหญ่

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

Nielsen Norman Group บันทึก​การ​มอง​หน้า​เว็บ​ของ​ผู้​ใช้ 232 คนใน​ปี 2006 แล้ว​พบ​รูป​แบบ​ตัว F

และ​ยืนยัน​ซ้ำ​ใน​ปี 2017 ว่า​รูป​แบบ​นี้​เกิด​เมื่อ​หน้า​เว็บ​เป็น​ข้อความ​ยาว​ที่​ไม่มี​หัวข้อ ตัว​หนา หรือ​การ​จัด​กลุ่ม

ผู้​ใช้​ตัดสิน​ความ​สวย​ของ​หน้า​เว็บ​ได้​ภายใน 17-50 มิลลิ​วินาที

ตาม​การ​ทดลอง​ของ Tuch และ​คณะ (2012) หน้า​เว็บ​ที่​ดู​ไม่​รก​และ​มี​โครง​คุ้น​ตา​ได้​คะแนน​สูงสุด

Rule of Thirds กับ Visual Hierarchy ตาม​งาน​วิจัย​ที่​วัด​การ​มอง​จริง การ​ทดลอง​กฎ​สาม​ส่วน​ปี 2014 eye tracking ของ NN/g 232 คน และ​ความ​ประทับ​ใจ​แรก​ของ​เว็บ​ใน 17-50 มิลลิ​วินาที

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

การ​จัด​องค์​ประกอบ​ภาพ​เป็น​งาน​ออกแบบ​ไม่​กี่​ส่วน​ที่​มี​งาน​วิจัย​วัด​พฤติกรรม​จริง​รองรับ นัก​วิจัย​ใช้​เครื่อง​ติดตาม​การ​เคลื่อนไหว​ของ​ตา (eye tracking) บันทึก​ว่า​ผู้​ใช้​มอง​ตรง​ไหน​ก่อน ใช้​การ​ฉาย​ภาพ​หน้า​เว็บ​สั้น​กว่า​หนึ่ง​ใน​สิบ​วินาที​เพื่อ​วัด​ความ​ประทับ​ใจ​แรก และ​ให้​ผู้​ร่วม​ทดลอง​ให้​คะแนน​ภาพ​ที่​วาง​ตาม​กฎ​สาม​ส่วน​เทียบ​กับ​ภาพ​ที่​ไม่​ได้​วาง

องค์​ประกอบ​ภาพ​กับ​ลำดับ​การ​มอง

องค์​ประกอบ​ภาพ (Composition) คือ​การ​วาง​ตำแหน่ง ขนาด และ​ความ​เข้ม​ของ​สิ่ง​ต่าง ๆ ใน​กรอบ​เดียว ส่วน​ลำดับ​ชั้น​ทาง​สายตา (Visual Hierarchy) คือ​ผล​ของ​การ​วาง​นั้น​ต่อ​ลำดับ​ที่​ผู้​ชม​มอง งาน​สอง​ส่วน​นี้​แยก​กัน​ไม่​ได้ ภาพ​สินค้า​หนึ่ง​ภาพ​กับ​หน้า​เว็บ​หนึ่ง​หน้าต่าง​ก็​ต้อง​บอก​ผู้​ชม​ว่า​ให้​มอง​อะไร​เป็น​อย่าง​แรก

Visual Hierarchy คือ​อะไร

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

งาน​วิจัย​ที่​อ้าง​ใน​บท​นี้​วัด​ลำดับ​การ​มอง​สอง​แบบ แบบ​แรก​วัด​ตำแหน่ง​ที่​ตา​หยุด​นิ่ง (fixation) ด้วย​เครื่อง eye tracking แบบ​ที่​สอง​วัด​คะแนน​ความ​รู้สึก​หลัง​เห็น​ภาพ​ช่วง​สั้น​มาก ทั้ง​สอง​แบบ​ให้​ข้อมูล​คนละ​ชั้น การ​รู้​ว่า​ผู้​ใช้​มอง​ตรง​ไหน​ไม่​ได้​บอก​ว่า​ผู้​ใช้​ชอบ​หรือ​ไม่

กฎ​สาม​ส่วน​ใน​การ​ทดลอง​ของ Amirshahi

กฎ​สาม​ส่วน​เป็น​กฎ​การ​จัด​วาง​ที่​รู้จัก​กัน​มาก​ที่สุด​ใน​งาน​ภาพ แต่​งาน​วิจัย​ที่​วัด​กฎ​นี้​โดยตรง​พบ​ว่า​ภาพ​คุณภาพ​สูง​ส่วน​ใหญ่​ไม่​ได้​วาง​ตาม​กฎ

Rule of Thirds คือ​อะไร

Rule of Thirds หรือ​กฎ​สาม​ส่วน คือ​การ​แบ่ง​ภาพ​ด้วย​เส้น​แนว​ตั้ง​สอง​เส้น​และ​แนว​นอน​สอง​เส้น​เป็น​ตาราง 3×3 แล้ว​วาง​จุด​สนใจ​หลัก​บน​เส้น​ใด​เส้น​หนึ่ง​หรือ​บน​จุด​ตัด​สี่​จุด แทน​การ​วาง​ไว้​กลาง​ภาพ แอป​กล้อง​ใน​โทรศัพท์​หลาย​รุ่น​เปิด​เส้น​ตาราง​นี้​ได้​จาก​หน้า​ตั้ง​ค่า ผู้​ที่​เพิ่ง​เริ่ม​ถ่าย​ภาพ​สินค้า​จึง​ใช้​กฎ​นี้​ได้​ทันที​โดย​ไม่​ต้อง​มี​อุปกรณ์​เพิ่ม กฎ​นี้​ช่วย​ให้​ภาพ​มี​พื้นที่​ว่าง​ด้าน​ใด​ด้าน​หนึ่ง​สำหรับ​วางข้อ​ความ​หรือ​ให้​สายตา​เคลื่อน​ต่อ ซึ่ง​เป็น​ประโยชน์​กับ​แบนเนอร์​ที่​ต้อง​มี​ทั้ง​สินค้า​และ​ข้อความ​ใน​กรอบ​เดียว

ภาพ​ที่​ดี​ต้อง​วาง​ตาม​กฎ​สาม​ส่วน​เสมอ​ไหม

ไม่​จำเป็น งาน​วิจัย Evaluating the Rule of Thirds in Photographs and Paintings ของ Amirshahi, Hayn-Leichsenring, Denzler และ Redies ใน​วารสาร Art & Perception ปี 2014 เล่ม 2 หน้า 163-182 เทียบ​ค่า​กฎ​สาม​ส่วน​ที่​คอมพิวเตอร์​คำนวณ​จาก​แผนที่​จุด​เด่น​ของ​ภาพ กับ​คะแนน​ที่​ผู้​ร่วม​ทดลอง 30 คน​ให้ ผล​คือ​คะแนน​ความ​งาม​สัมพันธ์​กับ​คะแนน​กฎ​สาม​ส่วน​ที่​คน​ให้​เพียง​อ่อน ๆ และ​ไม่​สัมพันธ์​เลย​กับ​ค่าที่​คอมพิวเตอร์​คำนวณ ภาพถ่าย​ที่​ได้​คะแนน​ความ​งาม​สูง​และ​ภาพ​วาด​ชุด​ใหญ่​มี​ค่า​กฎ​สาม​ส่วน​ต่ำ​พอ ๆ กับ​ภาพ​ที่​ไม่​ได้​วาง​ตาม​กฎ

สิ่ง​ที่​ผู้​วิจัย​วัด ผล​ที่​พบ
ค่า​กฎ​สาม​ส่วน​จาก​คอมพิวเตอร์ เทียบ​กับ​คะแนน​ที่​คน​ให้ ใน​ภาพ​ที่​ไม่​ได้​วาง​ตาม​กฎ สอดคล้อง​กัน​พอ​สมควร
ค่า​เดียวกัน​ใน​ภาพ​ที่​วาง​ตาม​กฎ สัมพันธ์​ปาน​กลาง
คะแนน​ความ​งาม เทียบ​กับ​คะแนน​กฎ​สาม​ส่วน​ที่​คน​ให้ สัมพันธ์​อ่อน
คะแนน​ความ​งาม เทียบ​กับ​ค่า​กฎ​สาม​ส่วน​จาก​คอมพิวเตอร์ ไม่​สัมพันธ์
ภาพถ่าย​คะแนน​ความ​งาม​สูง​และ​ภาพ​วาด​ชุด​ใหญ่ ค่า​กฎ​สาม​ส่วน​ต่ำ​พอ ๆ กับ​ภาพ​ที่​ไม่​ได้​วาง​ตาม​กฎ

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

ผู้​ใช้​กวาด​สายตา​บน​หน้า​เว็บ​แบบ​ตัว F

หน้า​เว็บ​ต่าง​จาก​ภาพถ่าย​ตรง​ที่​ผู้​ใช้​อ่าน​ข้อความ​และ​เลื่อน​หน้า​ไป​พร้อม​กัน งาน​วิจัย​ที่​ถูก​อ้าง​ถึง​มาก​ที่สุด​เรื่อง​นี้​คือ​รูป​แบบ​ตัว F ของ Nielsen Norman Group

F-pattern คือ​อะไร

F-pattern คือ​รูป​แบบ​การก​วาด​สายตา​ที่ Nielsen Norman Group พบ​จาก​การ​บันทึก​การ​มอง​หน้า​เว็บ​ของ​ผู้​ใช้ 232 คนใน​ปี 2006 ผู้​ใช้​อ่าน​แนว​นอน​ตาม​ส่วน​บน​ของ​เนื้อหา​ก่อน จาก​นั้น​เลื่อน​ลง​มา​อ่าน​แนว​นอน​อีก​ครั้ง​ใน​ช่วง​ที่​สั้น​กว่า แล้วก​วาด​ลง​ตาม​ขอบ​ซ้าย​ใน​แนว​ตั้ง ภาพ​ความ​ร้อน​ของ​การ​มอง​จึง​คล้าย​ตัว F ผล​ที่​ตาม​มา​คือ​บรรทัด​แรก ๆ ของ​หน้า​ได้​รับ​การ​มอง​มากกว่า​บรรทัด​ถัด​ไป และ​คำ​แรก ๆ ทาง​ซ้าย​ของ​แต่ละ​บรรทัด​ได้​รับ​การ​มอง​มากกว่า​คำ​ที่​อยู่​ท้าย​บรรทัด

ในบทความ​ทบทวน​ปี 2017 Kara Pernice ของ Nielsen Norman Group ยืนยัน​ว่า​รูป​แบบ​นี้​ยัง​เกิด​ขึ้น​ทั้ง​บน​คอมพิวเตอร์​และ​โทรศัพท์ และ​ระบุ​ว่าการ​กวาด​สายตา​บน​เว็บ​ไม่​ได้​เป็น​ตัว F เสมอ​ไป

รูป​แบบ​การก​วาด​สายตา (NN/g 2017) ลักษณะ
ตัว F อ่าน​แนว​นอน​สอง​ช่วง​บน​สุด แล้วก​วาด​ลง​ตาม​ขอบ​ซ้าย
Layer-cake มอง​เฉพาะ​หัวข้อ​และ​หัวข้อ​ย่อย ข้าม​เนื้อ​ความ​ด้าน​ล่าง
Spotted ข้าม​ข้อความ​เป็น​ก้อน มอง​หา​สิ่ง​เฉพาะ เช่น ลิงก์ ตัวเลข หรือ​ที่​อยู่
Marking จ้อง​จุด​เดิม​ขณะ​เลื่อน​หน้า เกิด​บน​โทรศัพท์​บ่อย​กว่า​บน​คอมพิวเตอร์
Bypassing ข้าม​คำ​แรก​ของ​บรรทัด​เมื่อ​หลาย​บรรทัด​ใน​รายการ​ขึ้น​ต้น​ด้วย​คำ​เดียวกัน
Commitment อ่าน​เกือบ​ทุก​คำ เกิด​เมื่อ​ผู้​ใช้​สนใจ​เนื้อหา​นั้น​มาก

เงื่อนไข​ที่​ทำให้​เกิด​ตัว F และ​วิธี​แก้

บทความ​ทบทวน​ของ Nielsen Norman Group ระบุ​ว่า​รูป​แบบ​ตัว F ไม่​ดี​ต่อ​ทั้ง​ผู้​ใช้​และ​ธุรกิจ เพราะ​ผู้​ใช้​พลาด​เนื้อหา​เป็น​ก้อน​ใหญ่​ตาม​ตำแหน่ง​ของ​ข้อความ​ใน​คอลัมน์ ไม่​ได้​พลาด​เพราะ​เนื้อหา​ไม่​สำคัญ

หน้า​เว็บ​แบบ​ไหน​ทำให้​ผู้​ใช้​อ่าน​เป็น​ตัว F

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

วิธี​แก้​ที่​บทความ​ทบทวน​แนะนำ​เป็น​เรื่อง​การ​จัด​วาง​ทั้งหมด

  1. วาง​ประเด็น​สำคัญ​ที่สุด​ไว้​ใน​สอง​ย่อหน้า​แรก​ของ​หน้า
  2. ใช้​หัวข้อ​และ​หัวข้อ​ย่อย​ที่​ดู​สำคัญ​กว่า​ข้อความ​ปกติ และ​ขึ้น​ต้น​หัวข้อ​ด้วย​คำ​ที่​มี​ข้อมูล​มาก​ที่สุด ผู้​ใช้​ที่​เห็น​แค่​สอง​คำ​แรก​ควร​รู้​ว่า​ส่วน​นั้น​พูด​เรื่อง​อะไร
  3. จัด​กลุ่ม​เนื้อหา​สั้น ๆ ที่​เกี่ยวข้อง​กัน ด้วย​กรอบ​หรือ​พื้น​หลัง​ต่าง​สี
  4. ทำตัว​หนา​เฉพาะ​คำ​และ​วลี​สำคัญ
  5. เขียน​ข้อความ​ลิงก์​ให้​มี​คำ​ที่​บอก​ข้อมูล แทน​คำ​กว้าง ๆ อย่าง "คลิก​ที่​นี่"

ข้อ 2 มี​ผล​กับ​การ​ตั้ง​ชื่อ​หัวข้อ​บน​หน้า​ขาย​สินค้า​โดยตรง หัวข้อ "ราย​ละเอียด" บอก​ผู้​ใช้ได้​น้อย​กว่า​หัวข้อ "ขนาด 30×40 ซม. น้ำ​หนัก 1.2 กก." ซึ่ง​ผู้​ใช้​ที่​อ่าน​แบบ Spotted มอง​หา​อยู่​แล้ว

ความ​ประทับ​ใจ​แรก​ภายใน 50 มิลลิ​วินาที

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

ผู้​ใช้​ตัดสิน​หน้า​เว็บ​ได้​เร็ว​แค่​ไหน

ภายใน 50 มิลลิ​วินาที บทความ​ของ Tuch และ​คณะ (2012) ใน​วารสาร International Journal of Human-Computer Studies สรุป​งาน​ของ Lindgaard และ​คณะ (2006) ว่า​คะแนน​ความ​น่า​ดึงดูด​ของ​หน้า​เว็บ​ที่​ผู้​ร่วม​ทดลอง​ให้​หลัง​เห็น 50 มิลลิ​วินาที สัมพันธ์​กับ​คะแนน​หลัง​เห็น 500 มิลลิ​วินาที​สูง​มาก (r = .97) งาน​ของ Tuch เอง​ทดลอง​สอง​ชุด ชุด​แรก​ใช้​ภาพ​หน้า​จอ​เว็บไซต์​จริง 119 ภาพ​กับ​ผู้​ร่วม​ทดลอง 59 คน ที่​เวลา 50, 500 และ 1,000 มิลลิ​วินาที ชุด​ที่​สอง​มี​ผู้​ร่วม​ทดลอง 82 คน ลด​เวลา​เหลือ 17, 33 และ 50 มิลลิ​วินาที

ตัวแปร​ใน​งาน​ของ Tuch และ​คณะ ผล​ต่อ​คะแนน​ความ​สวย
ความ​รก​ทาง​สายตา (Visual Complexity) มี​ผล​ตั้งแต่ 17 มิลลิ​วินาที หน้าที่​รก​น้อย​ได้​คะแนน​สูง​กว่า
ความ​คุ้น​ตา​ของ​โครง​หน้า (Prototypicality) มี​ผล​น้อย​กว่า​ใน​ช่วง​แรก และ​มี​ผล​เท่า​ความ​รก​เมื่อ​เวลา​นาน​ขึ้น
สอง​ตัวแปร​ร่วม​กัน หน้าที่​รก​น้อย​และ​มี​โครง​คุ้น​ตา​ได้​คะแนน​สูงสุด

ผู้​วิจัย​นิยาม​ความ​คุ้น​ตา (Prototypicality) ตาม Leder และ​คณะ (2004) ว่า​เป็น​ระดับ​ที่​สิ่ง​หนึ่ง​เป็น​ตัวแทน​ของ​สิ่ง​ประเภท​เดียวกัน สำหรับ​หน้า​เว็บ ผู้​ใช้​สะสม​ภาพ​จำ​ว่า​เว็บ​ร้าน​ค้า​หรือ​เว็บ​บริษัท​ควร​หน้าตา​เป็น​อย่างไร หน้าที่​วาง​เมนู ช่อง​ค้นหา และ​ตะกร้า​สินค้า​ไว้​ตำแหน่ง​ที่​ผู้​ใช้​คาด​ไว้​จึง​ได้​เปรียบ​ตั้งแต่​เสี้ยว​วินาที​แรก

หน้า​เว็บ​ที่​ดู​เรียบ​กับ​หน้า​เว็บ​ที่​ดู​คุ้น​ตา อย่าง​ไหน​สำคัญ​กว่า

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

ตรวจ​เลย์​เอา​ต์​หก​ข้อ​ก่อน​อนุมัติ

งาน​วิจัย​สาม​ชุด​ใน​บท​นี้​แปลง​เป็น​คำถาม​ตรวจ​งาน​ได้​หก​ข้อ ใช้​กับ​หน้า​เว็บ แบนเนอร์ และ​ภาพ​สินค้า​ที่​ทีม​ออกแบบ​ส่ง​มา​ให้​อนุมัติ โดย​ไม่​ต้อง​มี​เครื่อง eye tracking

  1. เปิด​ดู​งาน​ไม่​เกิน​หนึ่ง​วินาที​แล้ว​ปิด ถ้า​บอก​ไม่​ได้​ว่า​เห็น​อะไร​เป็น​อย่าง​แรก ให้​ลด​จำนวน​องค์​ประกอบ​ที่​มี​ขนาด​หรือ​สี​แข่ง​กัน
  2. อ่าน​เฉพาะ​สอง​ย่อหน้า​แรก​กับ​หัวข้อ​ทั้งหมด ถ้า​ยัง​ไม่รู้​ว่า​หน้า​ขาย​อะไร​และ​ราคา​เท่าไร แปล​ว่า​ข้อมูล​สำคัญ​อยู่​ใน​ตำแหน่ง​ที่​ผู้​ใช้​แบบ​ตัว F และ​แบบ Layer-cake มอง​ข้าม
  3. ตรวจ​สอง​คำ​แรก​ของ​ทุก​หัวข้อ ต้อง​มี​คำ​ที่​บอก​ข้อมูล ไม่ใช่​คำ​กว้าง​อย่าง "เกี่ยว​กับ​เรา" หรือ "ราย​ละเอียด"
  4. เทียบ​โครง​หน้า​กับ​เว็บ​ใน​หมวด​เดียวกัน​สาม​ถึง​ห้า​เว็บ ตำแหน่ง​เมนู ช่อง​ค้นหา และ​ปุ่ม​หลัก​ควร​อยู่​ใน​ที่​ที่​ผู้​ใช้​คาด​ไว้ เว้น​แต่​มี​เหตุผล​ทาง​ธุรกิจ​ที่​ชัดเจน
  5. ดู​ภาพ​สินค้า​ตาม​หน้าที่ ไม่ใช่​ตาม​กฎ​สาม​ส่วน ภาพ​ที่​ต้อง​วางข้อ​ความ​ทับ​ต้อง​เว้น​พื้นที่​ว่าง ภาพ​ที่​ต้อง​ให้​เห็น​ราย​ละเอียด​วาง​สินค้า​กลาง​กรอบ​ได้
  6. ตรวจ​งาน​บน​จอ​โทรศัพท์​แยก​จาก​จอ​คอมพิวเตอร์ ผู้​ใช้บน​โทรศัพท์​กวาด​สายตา​แบบ Marking มากกว่า และ​เห็น​เนื้อหา​น้อย​กว่า​ใน​หนึ่ง​หน้า​จอ

ข้อ 6 ต้อง​ใช้​คู่​กับ​ขนาด​ภาพ​ของ​แต่ละ​แพลตฟอร์ม ซึ่ง​อธิบาย​ไว้​ใน​บท ขนาด​กราฟิก​โซ​เชีย​ลมี​เดีย วางข้อ​ความ​ให้​รอด​ทั้ง 4:5 และ 9:16 ส่วน​การ​เลือก​สี​ให้​ลำดับ​ชั้น​ทาง​สายตา​ทำงาน​บน​ทั้ง​จอ​และ​ป้าย​ร้าน อ่าน​ได้​ใน​บท ทฤษฎี​สี (Color Theory) และ​จิตวิทยา​สี บน​ป้าย​ร้าน​และ​บน​จอ และ​บท ถ่าย​ภาพ​สินค้า ภาพ​อาหาร พอร์ต​เทรต และ​วัน​หมด​อายุ​ของ​ภาพ อธิบาย​การ​วางแผน​ภาพ​สินค้า​ตาม​อายุ​การ​ใช้​งาน​ของ​แต่ละ​ภาพ

สรุป

การ​จัด​องค์​ประกอบ​ภาพ​มี​งาน​วิจัย​รองรับ​บาง​ส่วน​และ​หัก​ล้าง​บาง​ส่วน การ​ทดลอง​ปี 2014 พบ​ว่า​กฎ​สาม​ส่วน​แทบ​ไม่มี​บทบาท​ใน​ภาพ​คุณภาพ​สูง​ชุด​ใหญ่ Nielsen Norman Group พบ​รูป​แบบ​ตัว F จาก​ผู้​ใช้ 232 คน และ​อธิบาย​ใน​ปี 2017 ว่า​รูป​แบบ​นี้​เกิด​กับ​ข้อความ​ยาว​ที่​ไม่มี​หัวข้อ​หรือ​การ​จัด​กลุ่ม งาน​ของ Tuch และ​คณะ​พบ​ว่า​ผู้​ใช้​ตัดสิน​ความ​สวย​ของ​หน้า​เว็บ​ภายใน 17-50 มิลลิ​วินาที โดย​หน้าที่​รก​น้อย​และ​คุ้น​ตา​ได้​คะแนน​สูงสุด เกณฑ์​อนุมัติ​เลย์​เอา​ต์​จึง​ควร​มา​จาก​หน้าที่​ของ​ภาพ​และ​พฤติกรรม​การ​มอง​ที่​วัด​ได้

คำถามที่พบบ่อย (FAQ)

บทความ​ของ Nielsen Norman Group ที่​อ้าง​ใน​บท​นี้​ไม่​ได้​ทดลอง​รูป​แบบ​ตัว Z รูป​แบบ​ที่​บทความ​ทบทวน​บันทึก​ไว้​มี​หก​แบบ ได้แก่ ตัว F, Layer-cake, Spotted, Marking, Bypassing และ Commitment ถ้า​จะ​อ้าง Z-pattern ใน​การ​ตรวจ​งาน ควร​หา​แหล่ง​ที่​ทดลอง​รูป​แบบ​นั้น​โดยตรง

ใช้ได้​บาง​ส่วน Heatmap ส่วน​ใหญ่​บันทึก​การ​คลิก การ​เลื่อน​หน้า หรือ​ตำแหน่ง​เมาส์ ไม่​ได้​บันทึก​ตำแหน่ง​ที่​ตาม​อง​จริง ข้อมูล​นี้​บอก​ได้​ว่า​ผู้​ใช้​เลื่อน​ลง​ไป​ถึง​ส่วน​ใด​และ​กด​ตรง​ไหน แต่​บอก​ไม่​ได้​ว่า​ผู้​ใช้​อ่าน​ข้อความ​ส่วน​ใด​ก่อน​ตัดสิน​ใจ

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

ภาพ​ความ​ร้อน​ตัว F ที่ Nielsen Norman Group ยก​ตัวอย่าง​ใน​บทความ​ทบทวน​รวม​การ​มอง​ของ​ผู้​ใช้​มากกว่า 45 คน การ​ทดสอบ​ภายใน​ที่​ให้​คน​ไม่​กี่​คน​ลอง​ใช้​หน้า​เว็บ​ยัง​ช่วย​หา​จุด​ที่​ผู้​ใช้​หา​ข้อมูล​ไม่​เจอ​ได้ แต่​ไม่​ควร​นำ​ไป​สรุป​เป็น​รูป​แบบ​การ​มอง​ของ​ผู้​ใช้​ทั้งหมด

งาน​ของ Tuch และ​คณะ​แบ่ง​ความ​รก​เป็น​สาม​ระดับ​จาก​คะแนน​ที่​คน​ให้ ไม่​ได้​กำหนด​จำนวน​ชิ้น เกณฑ์​ที่​ใช้ได้​จริง​คือ​เปรียบ​เทียบ​สอง​แบบ​ร่าง​ของ​หน้า​เดียวกัน แล้ว​ให้​คน​ที่​ไม่​เคย​เห็น​หน้า​นั้น​เลือก​แบบ​ที่​ดู​รก​น้อย​กว่า​หลัง​เห็น​ไม่​ถึง​หนึ่ง​วินาที

PHYGITAL INSIGHT

ฟิจิ⁠ทัล​ใช้​ผล​การ​ทดลอง​ของ Amirshahi และ​คณะ​ที่​พบ​ว่า​ภาพถ่าย​คุณภาพ​สูง​ส่วน​ใหญ่​ไม่​ได้​วาง​ตาม​กฎ​สาม​ส่วน เป็น​เหตุผล​ให้​กำหนด​ตำแหน่ง​สินค้า​ใน​ภาพ​จาก​หน้าที่​ของ​ภาพ​แทน​กฎ​ตายตัว บริการ​ถ่าย​ภาพ​ของ​ฟิจิ⁠ทัล​วางแผน​มุม​กล้อง​ตาม​ตำแหน่ง​ที่​ภาพ​จะ​ไป​อยู่​จริง เช่น ภาพ​บน​สุด​ของ​หน้า​เว็บ​ที่​ต้อง​เว้น​พื้นที่​ว่าง​สำหรับ​ข้อความ หรือ​ภาพ​หน้า​ร้าน​ออนไลน์​ที่​ต้อง​วาง​สินค้า​กลาง​กรอบ​ให้​เห็น​ราย​ละเอียด แล้ว​ส่ง​มอบ​ภาพ​แต่ละ​ชุด​พร้อม​ระบุ​ตำแหน่ง​ใช้​งาน

ให้ PHYGITAL AGENCY ช่วยต่อยอดเรื่องนี้สู่ผลลัพธ์จริง

ภาพ​สินค้า​ที่​วาง​ตาม​กฎ​สวยงาม​อาจ​ไม่มี​พื้นที่​ให้​ข้อความ​บน​แบนเนอร์ หรือ​ไม่​เห็น​ราย​ละเอียด​บน​หน้า​ร้าน​ออนไลน์

ให้ PHYGITAL AGENCY วางแผน​ภาพถ่าย​สินค้า​ตาม​ตำแหน่ง​ที่​ภาพ​จะ​ถูก​ใช้​งาน​จริง​ตั้งแต่​ก่อน​วัน​ถ่าย

PARANATH PANARATANA

WRITTEN BY

PARANATH PANARATANA

CHAIRMAN OF PHYGITAL AGENCY

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