แนวทางปฏิบัติแนะนำสำหรับภาพสไลด์

เพิ่มประสิทธิภาพและความสามารถในการใช้งานของภาพสไลด์

Katie Hempenius

ภาพสไลด์คือคอมโพเนนต์ UX ที่แสดงเนื้อหาในลักษณะภาพสไลด์ ภาพสไลด์สามารถ "เล่นอัตโนมัติ" หรือผู้ใช้จะไปยังส่วนต่างๆ ด้วยตนเองก็ได้ แม้ว่าภาพสไลด์จะใช้ในที่อื่นๆ ได้ แต่ส่วนใหญ่จะใช้เพื่อแสดงรูปภาพ ผลิตภัณฑ์ และโปรโมชันในหน้าแรก

บทความนี้กล่าวถึงแนวทางปฏิบัติแนะนำด้านประสิทธิภาพและ UX สําหรับภาพสไลด์

ประสิทธิภาพ

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

• LCP (Largest Contentful Paint)

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

• INP (การโต้ตอบกับการวาดภาพครั้งถัดไป)

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

• CLS (Cumulative Layout Shift)

  ภาพสไลด์จํานวนมากใช้ภาพเคลื่อนไหวที่กระตุกและไม่ได้ผสม ซึ่งอาจส่งผลให้ CLS เพิ่มขึ้น ในหน้าเว็บที่มีภาพสไลด์ที่เล่นอัตโนมัติ การดำเนินการนี้อาจทําให้ CLS มีค่าไม่สิ้นสุด CLS ประเภทนี้มักจะมองไม่เห็นด้วยตาเปล่า ซึ่งทําให้มองข้ามปัญหานี้ได้ง่าย หากต้องการหลีกเลี่ยงปัญหานี้ ให้หลีกเลี่ยงการใช้ภาพเคลื่อนไหวที่ไม่ได้ทำการ Composite ในภาพสไลด์ (เช่น ระหว่างการเปลี่ยนสไลด์)

แนวทางปฏิบัติแนะนำด้านประสิทธิภาพ

โหลดเนื้อหาภาพสไลด์โดยใช้ HTML

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

ควรทำ

<div class="slides">
  <img src="https://example.com/cat1.jpg">
  <img src="https://example.com/cat2.jpg">
  <img src="https://example.com/cat3.jpg">
</div>

ไม่ควรทำ

const slides = document.querySelector(".slides");
const newSlide = document.createElement("img");
newSlide.src = "htttp://example.com/cat1.jpg";
slides.appendChild(newSlide);

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

หลีกเลี่ยงการเปลี่ยนเลย์เอาต์

หมายเหตุ: Chrome เวอร์ชัน 88-90 มีการแก้ไขข้อบกพร่องมากมายที่เกี่ยวข้องกับวิธีคำนวณการเปลี่ยนเลย์เอาต์ การแก้ไขข้อบกพร่องเหล่านี้จำนวนมากเกี่ยวข้องกับภาพสไลด์ การแก้ไขเหล่านี้จะทำให้เว็บไซต์ต่างๆ คาดว่าจะได้รับคะแนนการเปลี่ยนแปลงเลย์เอาต์ที่เกี่ยวข้องกับภาพสไลด์ต่ำลงใน Chrome เวอร์ชันที่ใหม่กว่า

การเปลี่ยนภาพสไลด์และการควบคุมการไปยังส่วนต่างๆ คือ 2 แหล่งที่มาที่พบบ่อยที่สุดของการเปลี่ยนเลย์เอาต์ในภาพสไลด์

• การเปลี่ยนสไลด์: การเปลี่ยนแปลงเลย์เอาต์ที่เกิดขึ้นระหว่างการเปลี่ยนสไลด์มักเกิดจากการอัปเดตคุณสมบัติที่ทำให้เกิดเลย์เอาต์ขององค์ประกอบ DOM ตัวอย่างพร็อพเพอร์ตี้เหล่านี้ ได้แก่ left, top, width และ marginTop หากไม่ต้องการให้เลย์เอาต์เปลี่ยนแปลง ให้ใช้พร็อพเพอร์ตี้ CSS transform แทนเพื่อเปลี่ยนองค์ประกอบเหล่านี้ การสาธิตนี้แสดงวิธีใช้ transform เพื่อสร้างภาพสไลด์พื้นฐาน

• การควบคุมการนําทาง: การย้ายหรือเพิ่ม/นําการควบคุมการนําทางของภาพสไลด์ออกจาก DOM อาจทําให้เลย์เอาต์เปลี่ยนรูปแบบ ทั้งนี้ขึ้นอยู่กับวิธีนําการเปลี่ยนแปลงเหล่านี้ไปใช้ ภาพสไลด์ที่แสดงลักษณะการทำงานนี้มักจะตอบสนองต่อการวางเมาส์เหนือของผู้ใช้

ต่อไปนี้คือข้อสับสนที่พบบ่อยเกี่ยวกับการวัด CLS สําหรับภาพสไลด์

• ภาพสไลด์ที่เล่นอัตโนมัติ: การเปลี่ยนภาพสไลด์เป็นแหล่งที่มาที่พบบ่อยที่สุดของการเปลี่ยนแปลงเลย์เอาต์ที่เกี่ยวข้องกับภาพสไลด์ ในภาพสไลด์แบบไม่เล่นอัตโนมัติ การเปลี่ยนเลย์เอาต์เหล่านี้มักจะเกิดขึ้นภายใน 500 มิลลิวินาทีหลังจากการโต้ตอบของผู้ใช้ และจึงไม่นับรวมใน Cumulative Layout Shift (CLS) อย่างไรก็ตาม สำหรับภาพสไลด์แบบเล่นอัตโนมัติ การเปลี่ยนแปลงเลย์เอาต์เหล่านี้ไม่เพียงแต่จะนับรวมใน CLS ได้ แต่ยังอาจแสดงซ้ำอย่างไม่จำกัดอีกด้วย ดังนั้น จึงเป็นเรื่องสำคัญอย่างยิ่งที่จะต้องยืนยันว่าภาพสไลด์แบบเล่นอัตโนมัติไม่ใช่แหล่งที่มาของการเปลี่ยนแปลงเลย์เอาต์

• การเลื่อน: ภาพสไลด์บางรายการอนุญาตให้ผู้ใช้เลื่อนเพื่อไปยังส่วนต่างๆ ของภาพสไลด์ หากตําแหน่งเริ่มต้นขององค์ประกอบมีการเปลี่ยนแปลง แต่ค่าออฟเซตการเลื่อน (นั่นคือ scrollLeft หรือ scrollTop) เปลี่ยนแปลงในจํานวนเดียวกัน (แต่ทํางานในทิศทางตรงกันข้าม) จะไม่ถือว่าเป็นการเปลี่ยนเลย์เอาต์ ตราบใดที่การเปลี่ยนแปลงเกิดขึ้นในเฟรมเดียวกัน

ดูข้อมูลเพิ่มเติมเกี่ยวกับการเปลี่ยนแปลงเลย์เอาต์ได้ที่แก้ไขข้อบกพร่องการเปลี่ยนแปลงเลย์เอาต์

ใช้เทคโนโลยีสมัยใหม่

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

อย่างไรก็ตาม คุณอาจไม่จําเป็นต้องใช้ JavaScript เลย ทั้งนี้ขึ้นอยู่กับประเภทของภาพสไลด์ที่คุณสร้าง Scroll Snap API ใหม่ทำให้คุณใช้ทรานซิชันแบบภาพสไลด์ได้โดยใช้เพียง HTML และ CSS

แหล่งข้อมูลบางส่วนเกี่ยวกับการใช้ scroll-snap ที่อาจเป็นประโยชน์มีดังนี้

• การสร้างคอมโพเนนต์ Stories (web.dev)
• การจัดสไตล์เว็บรุ่นถัดไป: การเลื่อนแบบ Snap (web.dev)
• ภาพสไลด์ที่ใช้ CSS เท่านั้น (CSS Tricks)
• วิธีสร้างภาพสไลด์ที่ใช้ CSS เท่านั้น (CSS Tricks)

เพิ่มประสิทธิภาพเนื้อหาภาพสไลด์

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

การวัดประสิทธิภาพ

ส่วนนี้จะกล่าวถึงการวัด LCP ที่เกี่ยวข้องกับภาพสไลด์ แม้ว่าระบบจะถือว่าภาพสไลด์ไม่แตกต่างจากองค์ประกอบ UX อื่นๆ ในระหว่างการคํานวณ LCP แต่กลไกการคํานวณ LCP สําหรับภาพสไลด์ที่เล่นอัตโนมัติก็เป็นสิ่งที่ทําให้สับสนได้

การวัด LCP สําหรับภาพสไลด์

ต่อไปนี้คือประเด็นสําคัญที่จะช่วยให้เข้าใจวิธีการทำงานของการคํานวณ LCP สําหรับภาพสไลด์

• LCP จะพิจารณาองค์ประกอบของหน้าเว็บเมื่อมีการวาดองค์ประกอบนั้นลงในเฟรม ระบบจะไม่พิจารณาองค์ประกอบ LCP รายการใหม่อีกต่อไปเมื่อผู้ใช้โต้ตอบ (แตะ เลื่อน หรือกดแป้นพิมพ์) กับหน้าเว็บ ดังนั้น สไลด์ใดๆ ในภาพสไลด์ที่เล่นอัตโนมัติจึงมีแนวโน้มที่จะเป็นองค์ประกอบ LCP สุดท้าย ขณะที่ในภาพสไลด์แบบคงที่ มีเพียงสไลด์แรกเท่านั้นที่อาจเป็น LCP
• หากแสดงผลรูปภาพ 2 รูปที่มีขนาดเท่ากัน ระบบจะถือว่ารูปภาพแรกเป็นองค์ประกอบ LCP องค์ประกอบ LCP จะอัปเดตก็ต่อเมื่อองค์ประกอบ LCP ที่เป็นไปได้มีขนาดใหญ่กว่าองค์ประกอบ LCP ปัจจุบันเท่านั้น ดังนั้น หากองค์ประกอบภาพสไลด์ทั้งหมดมีขนาดเท่ากัน องค์ประกอบ LCP ควรเป็นรูปภาพแรกที่แสดง
• เมื่อประเมิน LCP ที่เป็นไปได้ LCP จะพิจารณา "ขนาดที่มองเห็นได้หรือขนาดที่แท้จริง แล้วแต่ว่าขนาดใดจะเล็กกว่า" ดังนั้น หากภาพสไลด์ที่เล่นอัตโนมัติแสดงรูปภาพในขนาดที่สอดคล้องกัน แต่มีรูปภาพขนาดตามจริงที่ต่างกันซึ่งเล็กกว่าขนาดการแสดงผล องค์ประกอบ LCP อาจเปลี่ยนแปลงเมื่อสไลด์ใหม่แสดงขึ้น ในกรณีนี้ หากรูปภาพทั้งหมดแสดงในขนาดเดียวกัน ระบบจะถือว่ารูปภาพที่มีขนาดตามจริงใหญ่ที่สุดเป็นองค์ประกอบ LCP คุณควรตรวจสอบว่ารายการทั้งหมดในภาพสไลด์ที่เล่นอัตโนมัติมีขนาดตามจริงเท่ากันเพื่อให้ LCP ต่ำ

การเปลี่ยนแปลงการคำนวณ LCP สําหรับภาพสไลด์ใน Chrome 88

ตั้งแต่ Chrome 88 เป็นต้นไป ระบบจะถือว่ารูปภาพที่นําออกจาก DOM ในภายหลังเป็น Largest Contentful Paint ที่เป็นไปได้ ก่อน Chrome 88 ระบบจะไม่พิจารณารูปภาพเหล่านี้ สําหรับเว็บไซต์ที่ใช้ภาพสไลด์ที่เล่นอัตโนมัติ การเปลี่ยนแปลงคําจํากัดความนี้จะไม่มีผลต่อคะแนน LCP หรืออาจส่งผลในเชิงบวก

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

การเปลี่ยนแปลงเกณฑ์ใน Chrome 121

Chrome 121 เปลี่ยนลักษณะการทํางานของรูปภาพที่เลื่อนในแนวนอน เช่น ภาพสไลด์ ตอนนี้เหตุการณ์เหล่านี้ใช้เกณฑ์เดียวกับการเลื่อนแนวตั้ง ซึ่งหมายความว่าสําหรับ Use Case ของภาพสไลด์ ระบบจะโหลดรูปภาพก่อนที่จะแสดงในวิวพอร์ต ซึ่งหมายความว่าผู้ใช้จะสังเกตเห็นการโหลดรูปภาพได้น้อยลง แต่จะต้องเสียค่าดาวน์โหลดมากขึ้น ใช้การสาธิตการโหลดแบบเลื่อนในแนวนอนแบบเลื่อนช้าเพื่อเปรียบเทียบลักษณะการทำงานใน Chrome กับ Safari และ Firefox

ข้อควรพิจารณาอื่นๆ

ส่วนนี้จะกล่าวถึงแนวทางปฏิบัติแนะนำด้าน UX และผลิตภัณฑ์ที่คุณควรคำนึงถึงเมื่อใช้ภาพสไลด์ ภาพสไลด์ควรช่วยส่งเสริมเป้าหมายทางธุรกิจและนำเสนอเนื้อหาในลักษณะที่ไปยังส่วนต่างๆ และอ่านได้ง่าย

แนวทางปฏิบัติแนะนำในการนําทาง

มีตัวควบคุมการนําทางที่เห็นได้ชัดเจน

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

ระบุความคืบหน้าในการนําทาง

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

รองรับท่าทางสัมผัสบนอุปกรณ์เคลื่อนที่

บนอุปกรณ์เคลื่อนที่ ควรรองรับท่าทางสัมผัสด้วยการปัดควบคู่ไปกับการควบคุมการนําทางแบบดั้งเดิม (เช่น ปุ่มบนหน้าจอ)

ระบุเส้นทางการนําทางอื่น

เนื่องจากผู้ใช้ส่วนใหญ่อาจไม่มีส่วนร่วมกับเนื้อหาภาพสไลด์ทั้งหมด เนื้อหาที่ลิงก์กับภาพสไลด์จึงควรเข้าถึงได้จากเส้นทางการนําทางอื่นๆ

แนวทางปฏิบัติแนะนำเกี่ยวกับการอ่านง่าย

ไม่ใช้การเล่นอัตโนมัติ

การใช้การเล่นอัตโนมัติก่อให้เกิดปัญหา 2 อย่างซึ่งแทบจะขัดแย้งกัน ภาพเคลื่อนไหวบนหน้าจอมีแนวโน้มที่จะรบกวนผู้ใช้และดึงดูดความสนใจของผู้ใช้ให้ออกจากเนื้อหาที่สําคัญกว่า ในขณะเดียวกัน ผู้ใช้มักจะเชื่อมโยงภาพเคลื่อนไหวกับโฆษณา ดังนั้นผู้ใช้จึงจะไม่สนใจภาพสไลด์ที่เล่นอัตโนมัติ

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

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

แยกข้อความและรูปภาพออกจากกัน

เนื้อหาข้อความของภาพสไลด์มักจะ "ฝังอยู่ใน" ไฟล์รูปภาพที่เกี่ยวข้อง แทนที่จะแสดงแยกกันโดยใช้มาร์กอัป HTML แนวทางนี้ส่งผลเสียต่ออัตราการเข้าถึง การแปล และอัตราการบีบอัด และยังส่งเสริมแนวทางแบบ "ใช้กับทุกสถานการณ์" ในการสร้างชิ้นงานด้วย อย่างไรก็ตาม การจัดรูปแบบรูปภาพและข้อความเดียวกันนั้นแทบจะอ่านได้ยากเท่าๆ กันในเดสก์ท็อปและอุปกรณ์เคลื่อนที่

ใช้ชื่อที่กระชับ

คุณมีเวลาเพียงไม่กี่วินาทีในการดึงดูดความสนใจของผู้ใช้ ข้อความสั้นกระชับจะช่วยให้ข้อความของคุณเข้าถึงผู้ใช้ได้มากขึ้น

แนวทางปฏิบัติแนะนำสำหรับผลิตภัณฑ์

ภาพสไลด์เหมาะสําหรับสถานการณ์ที่การใช้พื้นที่แนวตั้งเพิ่มเติมเพื่อแสดงเนื้อหาเพิ่มเติมไม่ใช่ตัวเลือก ภาพสไลด์ในหน้าผลิตภัณฑ์มักเป็นตัวอย่างที่ดีของกรณีการใช้งานนี้

อย่างไรก็ตาม การใช้ภาพสไลด์ก็ไม่ได้มีประสิทธิภาพเสมอไป

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

ทดสอบสมมติฐาน

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

มีความเกี่ยวข้อง

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