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