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

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

Adam Argyle
Sam Dutton

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

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

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

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

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

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

คำถามที่ 27

45%

ค่อนข้างไม่พอใจหรือไม่พอใจมาก
กับการเลื่อนเว็บ

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

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

ปัญหาในการใช้งานการเลื่อน

คำถามที่ 2

43%

รายงานว่าการเลื่อนหน้าจอมีหรือค่อนข้างยากสำหรับ

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

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

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

คำถามที่ 3

51%

รายงานการโต้ตอบด้วยการสัมผัสว่า
มีความสำคัญมากหรือมีความสำคัญมากใน
งาน

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

ความยากในการนำทางแป้น Tab หรือเกมแพด

คำถาม 5ก

44%

รายงานบางครั้งหรือยากมาก
ในการทำเกมแพดและการไปยังส่วนต่างๆ ของแท็บ

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

กำลังเรียนรู้ touch-action

คำถามที่ 9

50%

รายงานการเรียนรู้เกี่ยวกับ
"touch-action: manipulation"
จากแบบสำรวจ

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

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

คำถามที่ 27

58%

รายงานบางครั้ง บ่อย หรือในทุกโปรเจ็กต์
โดยใช้การเลื่อนแบบวนซ้ำ

วิดีโอจะแสดงการเลื่อนแบบวนซ้ำหลายวินาที
หลังผ่านไป 60 วินาที วิดีโอจะเริ่มที่ 0 อีกครั้ง

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

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

คำถามที่ 2

55%

มากหรือ
สำคัญมาก

16%

รายงาน ไม่เลย
หรือสำคัญเล็กน้อย

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

ภาพสไลด์

คำถาม 20

87%

ใช้ภาพสไลด์

24%

รายงานว่าจัดการได้ง่าย

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

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

คำถาม 22

65%

ให้ใช้บางครั้ง
กับทุกโปรเจ็กต์

60%

somewhat หรือ
ยากมาก

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

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

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

คำถาม 24

47%

ให้ใช้บางครั้ง
กับทุกโปรเจ็กต์

56%

รายงาน somewhat หรือ
ยากมาก

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

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

คำถามที่ 26

32%

alwaysหรือ
ส่วนใหญ่

50%

บางครั้ง

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

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

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

คำถามที่ 27

แผนภูมิวงกลมแสดง 5 ส่วน ได้แก่ 6.3% ไม่พอใจมาก, 2.7% พอใจมาก, 23.4% ค่อนข้างพอใจ, 28.8% เฉยๆ 38.7% ค่อนข้างไม่พอใจ

สรุปประเด็นสำคัญ

ผลการสำรวจจะแบ่งออกเป็น 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. เริ่มงานบน CSS API ใหม่ เช่น scroll-start 1. เริ่มงานในเหตุการณ์ JS ใหม่ เช่น snapChanged()

ฟีเจอร์

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

ฟีเจอร์ที่นักพัฒนาแอปประสบปัญหาในการสร้างมีดังนี้ 1. ภาพสไลด์ 1. การเลื่อนเสมือนจริง 1. การเลื่อนได้ไม่รู้จบ

แหล่งข้อมูล

ภาพขนาดย่อ: รูปภาพโดย Taylor Wilcox ใน Unsplash