Nhận Báo cáo khảo sát cuộn năm 2021 cùng với các lời chia sẻ của nhóm Chrome về tác động của vấn đề này đến các ưu tiên và kế hoạch của Chromium và web.
Vào tháng 4, nhóm Chrome đã phát hành một bản khảo sát thao tác chạm và cuộn dựa trên các vấn đề được báo cáo hàng đầu trong Báo cáo MDN Web DNA năm 2019. Báo cáo khảo sát cuộn năm 2021 đã sẵn sàng. Nhóm Chrome muốn chia sẻ một số ý kiến và hành động mà chúng tôi thu thập được từ kết quả khảo sát. Chúng tôi hy vọng những kết quả này sẽ giúp các nhà cung cấp trình duyệt và nhóm tiêu chuẩn nắm được cách cải thiện tính năng cuộn web.
Xem Báo cáo khảo sát về hoạt động cuộn năm 2021.
Kết quả đáng chú ý
Bản khảo sát này đã thu thập ẩn danh 880 lượt gửi, trong đó 366 câu trả lời mỗi câu hỏi.
Mặc dù bắt đầu với tính năng cuộn một dòng của CSS, chẳng hạn như overflow-x:
scroll;, nhưng diện tích bề mặt của các API và tuỳ chọn cuộn rất lớn, từ JavaScript đến CSS. Các kết quả sau đây giúp nêu bật những vấn đề mà nhà phát triển web đang gặp phải.
Mức độ hài lòng chung với thao tác cuộn trên web
Câu hỏi 27
45%
về tổng thể là không hài lòng hoặc cực kỳ không hài lòng
với tính năng cuộn web.
Câu hỏi này được đặt ở gần cuối bài khảo sát, sau những câu hỏi về 26 trường hợp và tính năng sử dụng tính năng cuộn. Từ câu trả lời, rõ ràng cộng đồng web đang gặp khó khăn với việc cuộn. Gần một nửa số người trả lời báo cáo mức độ không hài lòng nói chung.
Chúng tôi tin rằng cảm nhận chung về việc sử dụng tính năng cuộn không nên thấp đến mức này. Chỉ số này cần phải thay đổi; đây là một tín hiệu rõ ràng rằng bạn cần phải cải thiện.
Khó khăn khi thao tác bằng tính năng cuộn
Câu hỏi 2
43%
cho biết rằng khiến gặp vấn đề hoặc
cực kỳ khó khăn khi
cuộn.
Theo nghiên cứu của chúng tôi, những khó khăn này đến từ vô số trường hợp sử dụng thao tác cuộn. Khi chúng tôi nói về tính năng cuộn, nội dung này có thể bao gồm: – Vị trí các phần tử trong các khu vực có thể cuộn – Cuộn vô hạn – Ảnh động liên kết cuộn – Băng chuyền – Khoảng đệm cuộn xem – Cuộn theo chu kỳ – Cuộn ảo
Việc thiếu các tính năng của trình duyệt, JavaScript phức tạp cũng như nhu cầu hỗ trợ các chế độ nhập, bao gồm thao tác chạm, bàn phím và tay điều khiển trò chơi khiến tất cả những việc này trở nên khó khăn hơn.
Tầm quan trọng của hoạt động tương tác chạm
Câu hỏi 3
51%
báo cáo tương tác với thao tác chạm là
rất hoặc cực kỳ quan trọng
đối với công việc.
Khi số liệu thống kê về lượt truy cập cho thiết bị di động vẫn đang tăng lên, không có gì đáng ngạc nhiên khi một nửa số người trả lời cho biết rằng thao tác chạm là rất quan trọng đối với công việc của họ trên web. Điều này cho thấy rằng các tính năng web như chụp nhanh cuộn CSS và touch-action cần được chú ý thêm để web có thể mang lại trải nghiệm tương tác chạm chất lượng cao.
Độ khó của phím tab hoặc thao tác trên tay điều khiển trò chơi
Câu hỏi 5a
44%
báo cáo một chút hoặc cực kỳ khó
khi thực hiện gamepad và điều hướng bằng thẻ.
Thao tác cuộn bao gồm các phương thức điều hướng như mũi tên trên bàn phím, phím thẻ, thao tác nhấn phím cách và tay điều khiển trò chơi, đồng thời có thể khó đưa những phương thức này vào khi thực hiện thao tác cuộn tuỳ chỉnh. Gần một nửa số người trả lời cho biết có các thông tin đầu vào này hơi hoặc cực kỳ khó khăn.
Đang tìm hiểu touch-action
Câu hỏi 9
50%
báo cáo học về
`Chạm-hành động: thao tác`
trong bài khảo sát.
Một số câu hỏi trong bản khảo sát về việc sử dụng một số API nhất định với câu trả lời có thể là Có, Không hoặc "tôi đã học được hôm nay". Một ý kiến phản hồi đáng chú ý là số người báo cáo biết được về touch-action qua cuộc khảo sát, vì đây là một thuộc tính quan trọng khi xây dựng các cử chỉ chạm tuỳ chỉnh cần tương tác khi cuộn.
Cuộn theo chu kỳ
Câu hỏi 27
58%
báo cáo đôi khi, thường xuyên hoặc trên mọi dự án
bằng cách sử dụng thao tác cuộn theo chu kỳ.
sau 60 giây thì video này sẽ bắt đầu lại từ 0.
Những con số đó quá cao đối với tính năng cuộn có ít hoặc không có sự hỗ trợ của nền tảng web. Tính năng này thường phải chịu một khoản nợ kỹ thuật lớn vì vậy, dẫn đến việc trùng lặp hoặc chèn JavaScript để buộc hiệu ứng. Thuộc tính này phổ biến cho băng chuyền sản phẩm và khi chọn thời gian tính bằng giây hoặc phút để cung cấp tính năng cuộn theo chu kỳ.
Các khu vực có thể cuộn có quan trọng không
Câu hỏi 2
55%
rất hay
cực kỳ quan trọng
16%
báo cáo không hề
hoặc không quan trọng
Người trả lời cảm thấy rõ ràng về tầm quan trọng của các khu vực có thể cuộn, đưa ra một tín hiệu khác về những khó khăn cần thiết để mang đến chức năng cuộn chất lượng cao.
Các quảng cáo dạng băng chuyền
Câu hỏi 20
87%
đã sử dụng băng chuyền.
24%
cho biết họ
dễ quản lý.
Gần như mọi người trả lời đều cung cấp băng chuyền khi làm việc trên web, trong khi chỉ 25% thấy rằng họ dễ quản lý. Băng chuyền có sẵn rất phổ biến trong quá trình nghiên cứu của chúng tôi, nhưng số liệu thống kê này khiến chúng tôi ngạc nhiên vì có vẻ chưa giải quyết được vấn đề.
Cuộn vô hạn
Câu hỏi 22
65%
đôi khi
cho mọi dự án
60%
phần nào hoặc
cực kỳ khó.
2/3 số người trả lời sử dụng chức năng cuộn vô hạn trong tác phẩm trên web của họ và số lượng tương đương cho thấy việc này rất khó thực hiện. Một ví dụ khác về việc mức sử dụng cao đi kèm với độ khó cao, cho chúng ta thấy có khía cạnh cần chú ý.
Mặc dù bạn có thể kết hợp content-visibility và contain-intrinsic-size để giảm chi phí hiển thị trong các khu vực có thể cuộn dài, nhưng có vẻ như tính năng này không giúp ích cho trải nghiệm cuộn vô hạn "tải thêm".
Ảnh động được liên kết cuộn hoặc được kích hoạt khi cuộn
Câu hỏi 24
47%
đôi khi
cho mọi dự án
56%
báo cáo cái gì hoặc
cực kỳ khó
Gần một nửa số người trả lời sử dụng ảnh động được sắp xếp cuộn và một nửa số người trả lời cảm thấy khó khăn, một lần nữa liên kết mức độ sử dụng cao với độ khó.
Cạnh tranh với tính năng cuộn tích hợp
Câu hỏi 26
32%
luôn luôn hoặc
trong phần lớn thời gian
50%
thỉnh thoảng
Các hoạt động tương tác cuộn và chạm tích hợp sẵn trong ứng dụng dành cho điện thoại và máy tính bảng thường được coi là một nơi rõ ràng mà web có thể theo kịp. Các tính năng này bao gồm ảnh động liên kết khi cuộn, giao diện có lập trình, tích hợp giọng nói, gợi ý cuộn và API kéo để làm mới.
Chỉ một nửa số người trả lời cho rằng điều này đôi khi có thể phù hợp với trải nghiệm cuộn tích hợp sẵn.
Mức độ hài lòng tổng thể trong việc xây dựng các hoạt động tương tác cuộn trên web
Câu hỏi 27
Những điểm cần ghi nhớ trong bản khảo sát
Kết quả khảo sát được chia thành 4 danh mục: khả năng tương thích, giáo dục, API và tính năng.
Khả năng tương thích
Nhóm Chrome đã khai báo một mục tiêu là giảm số lượng vấn đề về khả năng tương thích với web, bao gồm cả khả năng tương thích cuộn.
Ba vấn đề đầu tiên về khả năng tương thích cần chú trọng: 1. Khả năng tương thích với tính năng cuộn theo chiều ngang.
1. overscroll-behavior trên nhiều trình duyệt.
1. Xoá tiền tố khỏi -webkit-scrollbar và tuân theo tiêu chuẩn.
Giáo dục
Kết quả khảo sát cho thấy cần được đào tạo thêm về touch-action và các thuộc tính logic. Trình duyệt đi đầu trong bố cục quốc tế và có vẻ như trình duyệt chưa được sử dụng đúng mức hoặc bị hiểu lầm.
Các khía cạnh cần chú trọng:
1. touch-action
1. Thuộc tính logic
API
Ngày càng có nhiều nhà phát triển sử dụng tính năng chụp nhanh khi cuộn và cho biết họ muốn sử dụng các tính năng có khả năng tương tác với các thư viện và trình bổ trợ phổ biến. Việc thu hẹp khoảng cách này giữa CSS và thư viện trình bổ trợ sẽ giúp đáp ứng nhu cầu của nhà phát triển tính năng chụp nhanh cuộn và trải nghiệm người dùng.
Chúng ta sẽ tập trung vào API scroll-snap:
1. Khả năng sử dụng và khả năng tương thích của API trên nhiều trình duyệt.
1. Bắt đầu công việc trên các API CSS mới như scroll-start.
1. Bắt đầu công việc trên các sự kiện JS mới như snapChanged().
Tính năng
Kết quả khảo sát cho thấy người dùng gặp khó khăn với một số loại thành phần cụ thể liên quan đến thao tác cuộn trên web, vì nền tảng này không cung cấp những dữ liệu nguyên gốc mà họ cần để tạo các thành phần mà không cần trình bổ trợ hoặc mất nhiều công sức. Đây là lĩnh vực mà chúng tôi hy vọng sẽ khám phá sâu hơn nữa.
Sau đây là những tính năng mà nhà phát triển gặp khó khăn khi xây dựng: 1. Băng chuyền 1. Cuộn ảo 1. Cuộn vô hạn
Tài nguyên
- Báo cáo khảo sát cuộn
- Thông báo về bản khảo sát
- Báo cáo DNA của Mozilla
- Compat2021: Loại bỏ 5 vấn đề hàng đầu về khả năng tương thích trên web
Hình thu nhỏ: ảnh của Taylor Wilcox trên Unsplash.