เหตุผลที่ไม่ควรใช้ Carousel ในเว็บไซต์

“Carousel” (หรือที่เราเรียกว่ากันทั่วไปว่า รูปเลื่อน ๆ หรือรูปหมุน ๆ) เป็น UI ตกแต่งยอดฮิตของเว็บสำเร็จรูป ความนิยมของ Carousel นั้นมาจากส่วนผสมของฟังก์ชั่นด้านดีไซน์และการใช้งาน รวมไปถึงความง่ายในการติดตั้งในเว็บไซต์

Carousel เป็น UI element มีลูกเล่นทำให้ใส่ตัวหนังสือ/กราฟฟิกได้หลายเซ็ต แต่ละ slide อาจจะมีปุ่ม CTA (Call-to-Action) ให้คลิกไปที่ส่วนสำคัญของหน้าเว็บ เช่น หน้าขายสินค้า – เป้าหมายของการใช้ Carousel คือ อยากให้คนอ่าน message และคลิกที่ปุ่ม CTA

Carousel กับ Conversion Rate

เจ้าของเว็บไซต์จะนับจำนวนครั้งที่คนคลิกปุ่ม CTA เพื่อคำนวณหา Conversion Rate และดูว่าปุ่มนี้มีผลดีต่อยอดขายของเว็บไซต์แค่ไหน – แล้วการใช้ Carousel ทำให้ Conversion Rate ดีขึ้นหรือแย่ลง ?

Carousel เป็น UI ที่มีปัญหาด้าน Usability – มีคนประมาณ 1% เท่านั้นที่คลิก Carousel พูดอีกอย่างหนึ่งก็คือ Conversion Rate ต่ำ

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

1. Visibility of System ต่ำ
   Carousel ไม่ได้แสดง content พร้อมกันในคราวเดียว การแสดง content ทีละ slide ทำให้ลำดับความสำคัญของ content แต่ละหน้าไม่เท่ากัน บ้างเห็นก่อน บ้างเห็นทีหลัง
2. Accessibility  ต่ำ
   Carousel มีฟังก์ชั่นเปลี่ยน slide ให้อัตโนมัติ (Auto-sliding) ซึ่งบางครั้งก็เปลี่ยนเร็วเกินไปจน User อ่าน content หรือกดปุ่มในหน้าที่ต้องการคลิกไม่ทัน
3. Effort สูง
   User ใช้พลังมากขึ้นตอนคลิกเปลี่ยนหน้า Carousel กลับไปกลับมา หรือต้องรอให้ slide หมุนครบรอบเพื่ออ่าน content ทั้งหมด
4. Banner blindness
   UI มีความคล้ายโฆษณาสูง ทำให้คนไม่อยากอ่าน

งานวิจัยเกี่ยวกับ Usability ของ Carousel

งานวิจัยจากมหาวิทยาลัย Notre Dame University ได้วัดจำนวน Interaction ของผู้เข้าชมกับ Carousel จากหน้า home ของเว็บไซต์ทั้งหมด 4 แห่ง แล้วพบว่า มีเพียงแค่ 1.07% (จากจำนวนคนที่เข้าชม 3,755,297 ครั้ง) เท่านั้นที่คลิก Carousel — แล้วใน 1.07% นั้นส่วนใหญ่มาจากการคลิก slide หน้าแรก

แทบไม่มีใครคลิก slide หน้าอื่น ๆ ของ Carousel เลย

jared_w_smith ถึงกับสร้างเว็บไซต์ shouldiuseacarousel.com เพื่อย้ำเรื่องนี้

Tips: ทำยังไงหากจำเป็นต้องใช้ Carousel อยู่

ถ้าหลีกเลี่ยงไปใช้ UI อย่างอื่นที่ไม่ใช่ Carousel ได้ แนะนำให้พิจารณาทางเลือกอื่นก่อน

แต่ถ้าจำเป็นต้องใช้จริง ๆ ด้านล่างเป็นข้อแนะนำที่ช่วยให้ usability ของ Carousel ดีขึ้น

ข้อแนะนำในการใช้ Carousel

• ปิดฟังก์ชัน Auto-sliding และให้ user คลิกเพื่อเปลี่ยน slide ด้วยตัวเอง
• Carousel ไม่ควรมี slide ไม่เกิน 4 หน้า (Research-based) และ content ควรดึงดูดให้คนอยากจะคลิก slide ถัดไป
• ถ้าเป็นไปได้ ให้แสดงทุก slide พร้อมกันในคราวเดียว

• ถ้าใน 1 หน้ามีหลาย slide เวลาเลื่อนไปหน้าต่อไป ให้เลื่อนเป็น set (เพราะคลิกน้อยกว่า) อย่าเลื่อนทีละรูป

• ปุ่มกดเลื่อน slide ต้องมีขนาดพอดี คลิกง่าย
• แสดง pagination บอกว่าตอนนี้อยู่หน้าไหน และเมื่อเลื่อน slide จนถึงหน้าสุดท้ายแล้วอย่าวนกลับมา slide แรก เพราะทำให้ user สับสนหรือต้องหยุดคิดว่าหน้าไหนคือหน้าสุดท้าย

Takeaway

1. หลีกเลี่ยงการใช้ Carousel ในเว็บไซต์ เพราะ Conversion Rate ต่ำ
   Edit เพิ่มเติม 22/01/2020 – ข้อนี้ไม่ได้หมายความว่าห้ามใช้ Carousel อย่างเด็ดขาดเลย มีบาง context ที่ยังเอาไปใช้ได้อยู่ อ่านต่อได้ที่นี่
2. หากจำเป็นต้องใช้ Carousel อย่างน้อยควร custom function ให้ usability ดีขึ้น

• References
• https://medium.com/@sherpadesignco/carousels-are-killing-your-conversion-rate-heres-how-to-fix-that-b57e31f8f508
• http://torspark.com/why-carousels-destroy-your-conversion-rate/
• https://erikrunyon.com
• https://uxmovement.com/navigation/big-usability-mistakes-designers-make-on-carousels/

---

---