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