รายงานแบบสำรวจแบบเลื่อนปี 2021

ดูรายงานการสำรวจ Scroll ปี 2021 พร้อมคำกล่าวจากทีม Chrome เกี่ยวกับผลกระทบที่มีต่อลำดับความสำคัญและแผนการสำหรับ Chromium และเว็บ

Adam Argyle

Sam Dutton

ในเดือนเมษายน ทีม Chrome ได้เผยแพร่แบบสำรวจการเลื่อนและการแตะโดยอิงตามปัญหาที่ได้รับการรายงานมากที่สุดจากรายงาน MDN Web DNA ปี 2019 รายงานแบบสำรวจการเลื่อนปี 2021 พร้อมแล้ว และทีม Chrome อยากแชร์ความคิดเห็นและรายการดำเนินการบางอย่าง ที่เราได้จากผลการสำรวจ เราหวังว่าผลลัพธ์เหล่านี้จะช่วยให้ผู้ให้บริการเบราว์เซอร์และกลุ่มมาตรฐานเข้าใจวิธีปรับปรุงการเลื่อนเว็บ

ดูรายงานการสำรวจของ Scroll ปี 2021

ผลลัพธ์ที่น่าสนใจ

แบบสำรวจได้รวบรวมคำตอบ 880 รายการโดยไม่ระบุตัวตน โดยมีผู้ตอบคำถามทุกข้อ 366 คน

แม้ว่าการเริ่มต้นใช้งานการเลื่อนจะเป็น CSS เพียงบรรทัดเดียว เช่น overflow-x: scroll; แต่พื้นที่ผิวของ API และตัวเลือกการเลื่อนนั้นมีขนาดใหญ่ ครอบคลุมตั้งแต่ JavaScript ไปจนถึง CSS ผลลัพธ์ต่อไปนี้ช่วยเน้นปัญหาที่นักพัฒนาเว็บกำลังพบเจอ

ความพึงพอใจโดยรวมในการเลื่อนเว็บ

คำถามที่ 27

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

เราเชื่อว่าความรู้สึกโดยรวมเกี่ยวกับการทำงานร่วมกับ Scroll ไม่ควรต่ำขนาดนี้ คุณต้องเปลี่ยนเมตริกนี้ ซึ่งเป็นสัญญาณที่ชัดเจนว่าต้องดำเนินการ

การเลื่อนหน้าจอทำได้ยาก

คำถามที่ 2

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

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

ความสำคัญของการโต้ตอบด้วยการสัมผัส

คำถามที่ 3

ผู้ใช้เว็บในอุปกรณ์เคลื่อนที่ยังคงเพิ่มขึ้นในสถิติการเข้าชม จึงไม่น่าแปลกใจที่ผู้ตอบแบบสอบถามครึ่งหนึ่งรายงานว่าการสัมผัสมีความสำคัญอย่างยิ่งต่อการทำงานบนเว็บ ซึ่งเป็นสัญญาณว่าฟีเจอร์เว็บ เช่น CSS scroll snap และ touch-action ต้องได้รับการดูแลเป็นพิเศษเพื่อให้เว็บมอบการโต้ตอบแบบสัมผัสคุณภาพสูงได้

การไปยังส่วนต่างๆ ด้วยปุ่ม Tab หรือเกมแพดยาก

คำถามที่ 5ก

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

การเรียนรู้ touch-action

คำถามที่ 9

คำถามในแบบสำรวจบางข้อถามเกี่ยวกับการใช้ API บางอย่าง โดยมีคำตอบที่เป็นไปได้คือ "ใช่" "ไม่ใช่" หรือ "วันนี้ฉันได้เรียนรู้" ความคิดเห็นที่น่าสนใจอย่างหนึ่งคือจำนวนผู้ที่รายงานว่าได้เรียนรู้เกี่ยวกับ touch-action จากแบบสำรวจ เนื่องจากเป็นพร็อพเพอร์ตี้ที่สำคัญเมื่อสร้างท่าทางสัมผัสที่กำหนดเองซึ่งต้องโต้ตอบภายในรายการที่เลื่อนได้

การเลื่อนแบบวนซ้ำ

คำถามที่ 27

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

พื้นที่ที่เลื่อนได้มีความสำคัญไหม

คำถามที่ 2

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

ภาพสไลด์

คำถามที่ 20

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

การเลื่อนได้ไม่รู้จบ

คำถามที่ 22

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

แม้ว่า content-visibility และ contain-intrinsic-size จะใช้ร่วมกันเพื่อลดต้นทุนการแสดงผลสำหรับพื้นที่ที่เลื่อนได้ยาว แต่ดูเหมือนว่าจะไม่ช่วยในเรื่อง UX ของการเลื่อนแบบไม่มีที่สิ้นสุด "โหลดเพิ่มเติม"

ภาพเคลื่อนไหวที่ลิงก์กับการเลื่อนหรือทริกเกอร์ด้วยการเลื่อน

คำถามที่ 24

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

แข่งขันด้วยการเลื่อนในตัว

คำถามที่ 26

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

มีผู้ตอบแบบสอบถามเพียงครึ่งเดียวที่รู้สึกว่าบางครั้งก็สามารถจับคู่ ประสบการณ์การเลื่อนในตัวได้

ความพึงพอใจโดยรวมในการสร้างการโต้ตอบแบบเลื่อนบนเว็บ

คำถามที่ 27

ประเด็นสำคัญจากแบบสำรวจ

ผลสำรวจแบ่งออกเป็น 4 หมวดหมู่ ได้แก่ ความเข้ากันได้ การศึกษา API และฟีเจอร์

ความเข้ากันได้

ทีม Chrome ได้ประกาศเป้าหมายในการลด จำนวนปัญหาความเข้ากันได้ของเว็บ ซึ่งรวมถึงความเข้ากันได้ของการเลื่อน

ปัญหาความเข้ากันได้ 3 อย่างแรกที่ควรให้ความสำคัญมีดังนี้ 1. ความเข้ากันได้กับการเลื่อนในแนวนอน 1. overscroll-behavior ข้ามเบราว์เซอร์ 1. การนำคำนำหน้าออกจาก -webkit-scrollbar และการปฏิบัติตามมาตรฐาน

การศึกษา

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

ด้านที่ควรให้ความสำคัญ 1. touch-action 1. พร็อพเพอร์ตี้เชิงตรรกะ

API

การใช้การเลื่อนแบบสแนปเพิ่มขึ้นเรื่อยๆ และนักพัฒนาแอปได้ตอบกลับว่าต้องการใช้ฟีเจอร์ร่วมกับไลบรารีและปลั๊กอินยอดนิยม การลดช่องว่างระหว่างไลบรารี CSS และปลั๊กอินจะช่วยเพิ่มความพึงพอใจของนักพัฒนาซอฟต์แวร์ Scroll Snap และประสบการณ์ของผู้ใช้

เราจะมุ่งเน้นการทำงานของ API ไปที่scroll-snap 1. ความพร้อมใช้งานและความเข้ากันได้ของ API ในเบราว์เซอร์ต่างๆ 1. เริ่มดำเนินการกับ API ของ CSS ใหม่ เช่น scroll-start 1. เริ่มทำงานกับเหตุการณ์ JS ใหม่ เช่น snapChanged()

ฟีเจอร์

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

ฟีเจอร์ที่นักพัฒนาสร้างได้ยากมีดังนี้ 1. ภาพสไลด์ 1. การเลื่อนเสมือน 1. การเลื่อนได้ไม่รู้จบ

แหล่งข้อมูล

• รายงาน Scroll Survey
• ประกาศเกี่ยวกับแบบสำรวจ
• รายงาน DNA ของ Mozilla
• Compat2021: การขจัดปัญหาความเข้ากันได้ 5 อันดับแรกบน เว็บ

ภาพขนาดย่อ: ภาพถ่ายโดย Taylor Wilcox ใน Unsplash