Context ไหนที่เหมาะกับการใช้ Carousel?

อ้างอิงจากบทความที่แล้ว “เหตุผลที่ไม่ควรใช้ Carousel ในเว็บไซต์” เว็บ eCommerce ใหญ่ ๆ อย่าง Amazon ทำไมยังใช้ Carousel อยู่ เป็นไปได้หรือที่เว็บ scale ขนาดนี้ยังใช้ UI ตัวนี้อยู่ถ้า UI มันแย่จริง ๆ รอบนี้มาดู Counter Research อีกตัวที่ใหม่กว่า มีการเก็บข้อมูล Interaction สมัยใหม่ใน mobile site ร่วมด้วย – หรือการใช้ Carousel มันไม่ได้แย่ขนาดนั้น ถึงขนาดห้ามใช้เลย ถ้าใช้ถูกวิธี อาจจะมีบาง context ที่ใช้แล้วเวิร์กเหมือนกัน

งานวิจัย Carousel ของ Mobify

Mobify แพลทฟอร์มสร้างเว็บไซต์ (Front-end as a Service) เป็นแพลทฟอร์มที่มี Carousel อยู่เยอะมาก – เจอ research เรื่อง Carousel ของ Erik Runyon เข้าไปเป็นต้องเดือดร้อน ทาง Mobify เลยทำ Counter Research ซะเลย โดยเก็บข้อมูลจาก mobile site ของ eCommerce เจ้าใหญ่ ๆ ในแพลทฟอร์มของตัวเองเกือบ 11 เดือน เพื่อพิสูจน์ว่าจริง ๆ แล้ว Carousel มันไม่ได้เป็นตัวร้ายขนาดนั้นนะ

Mobify เก็บข้อมูล Interaction 4 อย่าง คือ Swipe, Arrows, Thumbnail และ Zoom ผลการทดสอบ พบว่า 72% ของผู้เข้าชมเว็บไซต์มี Interaction บนมือถือกับ Carousel ซึ่งขัดกับงานวิจัยจาก Notre Dame อย่างชัดเจน (Notre บอกว่าแค่ 1%) โดยถ้าแยกข้อมูลของ Mobify ตามประเภทของ Interaction แล้วการเปลี่ยนหน้า slide มีสัดส่วนเยอะสุด (slide advancement) ส่วนแนวโน้ม Interaction ของ User ยังลดลงตามจำนวน slide สอดคล้องกับงานวิจัยเก่าอยู่ – แล้วสรุปว่าข้อมูล Erik จริงแค่ไหน หรือว่าข้อมูลของเขาเก่าเกินกว่าจะใช้กับปี ณ ปัจจุบันไปแล้ว?

ทำไมสถิติ Carousel ของ Mobify ดีกว่า Notre Dame เยอะมาก

รูปแบบของ Carousel ของ Mobify ที่เอามาทดสอบ ค่อนข้างต่างจาก Notre Dame อย่างสิ้นเชิง โดย Mobify จะวัดผลจาก Carousel ที่มี context เท่านั้น เช่น Gallery Carousel ที่ User สามารถเห็นทุกอย่างได้ตั้งแต่แรกโดยไม่ต้องเลื่อน และเดาได้อยู่แล้วว่า slide ต่อไปคืออะไร อีกทั้ง UI ก็ปรับปรุง Usability (Visibility/Accessibility) มาระดับหนึ่งแล้ว

ตารางเปรียบเทียบ Research ของ Notre Dame และ Mobify

	Notre Dame research (2013)	Mobify research (2015)
– Domain	University	eCommerce
– Test Resolution	เฉพาะ Desktop site	เฉพาะ Mobile site
– Collected datas	จำนวนครั้งที่คลิกปุ่ม CTA, คลิกลูกศรเปลี่ยนหน้า	Interaction ทั้งหมด (Swipe, คลิกลูกศรเปลี่ยนหน้า, Zoom รูป, คลิก thumbnail)
– Carousel type	แบบรูปเลื่อน ๆ, มีปุ่ม CTA – ไม่มี context: User เดาไม่ได้ว่ารูปถัดไปใน Carousel คืออะไร	แบบ Gallery, ไม่มีปุ่ม CTA – มี context: User พอจะเดาได้อยู่แล้วว่ารูปต่อไปใน Carousel คืออะไร
– User Goal	Navigate: Finding specific information	Explore: Finding options

ถึงแม้ว่า สถิติจาก Mobify จะดูดีขึ้นมาก (เพราะประเภท Carousel ต่างจากเดิม) แต่เหมือนว่าจะมีข้อมูลบางส่วนที่หายไป สังเกตว่าลักษณะของ Carousel ของ Mobify จะไม่มีปุ่ม Call-to-action เลยนับจำนวนคน tap ที่ slide ไม่ได้ แปลว่า Mobify ไม่ได้กะจะทดสอบ Conversion Rate ตั้งแต่แรก – เกิดคำถามว่าจะทำ Couter Research แล้วทำไมถึงไม่ยอมใช้ Object ให้ใกล้เคียงกัน?

พิจารณาดูแล้ว ข้อมูลของ Mobify ไม่ได้หักล้างกับสถิติของ Nortre Dame ได้ตรง ๆ แสดงว่า เรื่องคลิกน้อยของ Erik ก็ยังมีความจริงอยู่บ้าง ถึงผลออกมาแบบนี้ Mobify ก็ยังไม่แนะนำให้ใช้ Carousel กับทุกที่อยู่ดี – เพราะ swipe ไม่เท่ากับคลิก

อนุมานจาก Research ของ Mobify “ประเภทของ Carousel เหมือนจะมีผลกับสถิติของ Interaction” － โดย Carousel ที่มี context ทำหน้าที่ของตัวเองได้ดีกว่า

*Admin ยังไม่มีข้อมูลสถิติเปรียบเทียบ Carousel แต่ละประเภทว่าต่างกันแค่ไหน หรือเทียบกันระหว่าง mobile site กับ desktop site ว่าต่างกันยังไง

Carousel แบบมี context คืออะไร?

• User เห็นแล้วรู้ทันทีว่าอะไรคืออะไร ไม่ต้องเดา เช่น Gallery Carousel
• Layout มี Visual Cue ที่ชัดเจน เช่น มี thumbnail ของ slide ทั้งหมด หรือมีติ่งของ UI ให้เห็นเหลือบ ๆ ในหน้าจอ ทำให้ User เห็นว่ามีอะไรต่อ
• Item แต่ละ slide เป็นชุดข้อมูลมีความคล้ายคลึงกัน

Context ไหนที่เหมาะกับการใช้ Carousel?

• ใช้เพื่อสื่อสาร Branding/Marketing Message โดยไม่คาดหวังให้ User คลิกทุก slide หรือคาดหวังว่า User จะต้องเห็น Content ทั้งหมด
• ใช้กับ UI ที่ User เห็นชัดเจน/พอจะเดาได้ว่า slide ที่เหลือคืออะไร
• ใช้กับ User ที่อยู่ในโหมดค้นหาข้อมูลใหม่ ๆ (Exploring) เช่น Recommendation และไม่ควรใช้กับ User ที่อยู่ในโหมดหาของ (Finding) เช่น หาเมนู A

ถึงแม้ Research ใหม่จะบอกว่า ใน moblie มีคนเลื่อน slide มากกว่าเดิม แต่ยังไงก็ต้องคิดเผื่อด้วยว่า slide หน้าท้าย ๆ ยังมีโอกาสที่คนเห็นน้อยอยู่ดี

จะไม่ให้ใช้ Carousel ใน mobile มันยากนะ

การไม่ใช้ Carousel ใน Mobile site เป็นเรื่องยาก เพราะการออกแบบสำหรับมือถือจำเป็นต้องคำนึงถึงข้อจำกัดของพื้นที่หน้าจอ และความหนาแน่นของข้อมูล (information density) Interaction ของมือถือดูแล้วน่าจะช่วยให้ใช้งาน Carousel ง่ายกว่าใน Desktop ถ้างั้นก็มีโอกาสที่ Usability จะดีกว่าด้วยสิ? แต่ด้วยความที่มือถือทำงานได้เยอะ มันดันสร้างปัญหาใหม่ให้นี่สิ

อุปสรรคของ Carousel ในมือถือ

ไม่มีอะไรง่ายอย่างที่คิด – ลูกเล่นของมือถือมีส่วนให้ Usability ของ Carousel แย่ลง การใส่ Carousel ในมือถือ มีโอกาสเกิด Interaction ซ้ำซ้อน (Swipe ambiguity) เพราะในมือถืออาจจะมีฟังก์ชันอื่น ๆ ของ swipe build-in อยู่แล้ว ตอนที่ user พลาด swipe เพื่อเปลี่ยนหน้า Carousel ผิดตำแหน่ง ทำให้ไป trigger event อื่น ๆ โดยไม่ตั้งใจ เช่น

• Safari (iOS): swipe left แปลว่า Back
• iPhone X: swipe บน home indicator (ตรงขอบล่างของหน้าจอ) แปลว่า สลับ App

ต่อไป ถ้าจะเอา Carousel ใส่ใน moblie อย่าลืมคิดถึงข้อจำกัดนี้ด้วยล่ะ!

Takeaway

1. Interaction ของ user กับ Carousel บางประเภท มีแนวโน้มสูงขึ้นในมือถือ แต่ยังไม่มีข้อมูลว่า Conversion Rate สูงขึ้นด้วยรึเปล่า
2. ประเภทของ Carousel มีผลกับสถิติของ Interaction เพื่อข้อมูลที่ชัดเจนควร Test กับ User แยกเป็นเคส ๆ ไป
3. ประเภทของ Carousel ในมือถือ ที่มีข้อมูลรองรับแล้วว่าดี คือ Carousel แบบมี context
4. Carousel ไม่ควรใช้กับ User ที่อยู่ในโหมดหาของ แต่สามารถใช้ได้ในหรือบริบทที่ต้องการสื่อสาร Brand message โดยไม่คาดหวังให้ User คลิกทุก slide หรือจะต้องเห็น Content ทั้งหมด
5. ลำดับของ Slide ใน Carousel ในมือถือยังเป็นปัญหาอยู่ ถึงแม้ว่าจำนวน Interaction ในมือถือจะเพิ่มขึ้นก็ตาม ก็ไม่ควรให้จำนวนหน้าใน Carousel เยอะเกินไป

• References
• https://www.smashingmagazine.com/2015/02/carousel-usage-exploration-on-mobile-e-commerce-websites/#unique-interaction-rates
• https://getstat.com/blog/video-carousels-nearly-doubled/
• https://www.nngroup.com/articles/ipad-usability-year-one/
• https://www.nngroup.com/articles/mobile-carousels/
• https://mattish.com/blog/post/why-you-should-use-a-carousel
• http://www.mattish.com/blog/post/why-you-should-use-a-carousel

---

---