Đừng đụng vào cuộn trang
(dontfuckwithscroll.com)- Scrolljacking ghi đè tốc độ, hướng và hiệu ứng cuộn mặc định của trình duyệt, làm xáo trộn trải nghiệm duyệt web có thể dự đoán mà người dùng mong đợi
- Trong nghiên cứu khả dụng của Nielsen Norman Group, nhiều người tham gia bị mất phương hướng, và một số còn xem hành vi cuộn bị thay đổi là lỗi
- Các plugin cuộn momentum, cuộn mượt, cuộn quán tính phá vỡ trí nhớ cơ bắp và chức năng mặc định của trình duyệt, khiến khó xác định vị trí hiện tại trên các trang dài
- Hiệu ứng chuyển cảnh màn hình và sự phụ thuộc vào JavaScript làm tăng gánh nặng về khả năng truy cập và hiệu năng trong các trường hợp say chuyển động, chóng mặt, công nghệ hỗ trợ, thiết bị cấu hình thấp và môi trường di động
- Người dùng đến để xem nội dung chứ không phải các màn trình diễn cuộn, vì vậy tốt hơn là website nên giữ nguyên cuộn gốc và nhanh
Scrolljacking phá hỏng việc duyệt web như thế nào
- Scrolljacking là cách định nghĩa lại hành vi cuộn mặc định của trình duyệt để thay đổi tốc độ, hướng và hiệu ứng cuộn của trang web
- Các plugin cuộn momentum, cuộn mượt và cuộn quán tính là những dạng scrolljacking phổ biến
- Dù có thể trông như một cải tiến, nó lại cản trở trải nghiệm duyệt web tự nhiên, hiệu quả và có thể dự đoán
- Tác hại chủ yếu rơi vào khả dụng, khả năng truy cập và hiệu năng
Sự hỗn loạn được xác nhận trong nghiên cứu khả dụng
- Nghiên cứu khả dụng của Nielsen Norman Group cho thấy scrolljacking có thể khiến người dùng mất phương hướng
- Nhiều người tham gia trải qua cảm giác mất phương hướng, dù chỉ ở mức tối thiểu
- Một số người dùng diễn giải hành vi cuộn bị thay đổi là lỗi
- Người dùng định hướng tác vụ có mức dung thứ với scrolljacking thấp hơn nhiều so với người dùng định hướng khám phá
- Một người tham gia phản ứng theo ý rằng “Tôi đã vuốt hết cỡ mà chẳng đi đến đâu cả”, và nói rằng nếu ở vị trí khách hàng tiềm năng thì họ sẽ cực kỳ bực bội
- Trên di động, vấn đề còn nghiêm trọng hơn do thời gian cuộn kéo dài và màn hình nhỏ
Xâm phạm kỳ vọng và quyền kiểm soát của người dùng
- Người dùng kỳ vọng rằng khi cuộn thì nội dung sẽ di chuyển ngay lập tức
- Các plugin cuộn momentum cung cấp hành vi pha trộn hoạt ảnh thay vì chuyển động tức thì và có thể dự đoán
- Những thay đổi này cản trở trí nhớ cơ bắp và các thói quen sẵn có mà người dùng dựa vào để điều hướng hiệu quả
- Khi ghi đè cuộn mặc định, phần dàn dựng của website được đặt lên trước sở thích hay nhu cầu của người dùng
- Người dùng truy cập website để xem nội dung, không phải để trải nghiệm các hiệu ứng cuộn bị dàn dựng quá mức
Say chuyển động và gánh nặng về khả năng truy cập
- Các plugin cuộn momentum thêm những hoạt ảnh lơ lửng hoặc lắc lư, có thể gây khó chịu cho người dùng dễ bị say chuyển động hoặc chóng mặt
- Nhiều website không cung cấp tùy chọn tắt tính năng này, khiến người dùng khó tránh khỏi sự khó chịu trong quá trình đọc
- Công nghệ hỗ trợ như trình đọc màn hình và điều hướng bằng bàn phím có thể bị cản trở vì độ trễ thời gian
- Người dùng có khuyết tật vận động hoặc hạn chế thị lực có thể thấy website khó sử dụng hơn vì những độ trễ này
- Khả năng truy cập không phải là tính năng tùy chọn mà phải được xem là yêu cầu cơ bản của việc dùng web
Hiệu năng và sự nhất quán trên các thiết bị suy giảm
- Các plugin cuộn momentum tải JavaScript và có thể gây trễ, giật hoặc lỗi trên thiết bị cũ hay cấu hình thấp
- Thay vì mang lại cảm giác “Smooth”, trên thiết bị yếu trang có thể trông như bị lỗi
- Việc dựng hoạt ảnh đòi hỏi thư viện JavaScript phình to, thêm phụ thuộc và nhiều chu kỳ CPU hơn
- Kết quả là thời gian tải trang có thể chậm hơn
- Trên mạng di động hoặc ở khu vực có kết nối kém, các hiệu ứng cuộn hào nhoáng khiến trang chậm hơn và kém dễ tiếp cận hơn
Vấn đề với tính năng mặc định của trình duyệt và nhận biết vị trí
- Trình duyệt hiện đại đã có sẵn cài đặt cuộn momentum cho những người dùng muốn dùng
- Plugin bên thứ ba có thể ghi đè hoặc xung đột với các tính năng mặc định này, làm hỏng các cử chỉ cuộn tùy chỉnh hoặc cuộn momentum
- Các tùy chọn ưu tiên của người dùng như cài đặt giảm chuyển động trên toàn hệ thống có thể không hoạt động như mong đợi
- Hoạt ảnh cuộn momentum thêm độ trễ giữa thao tác nhập của người dùng và kết quả hiển thị
- Trên các trang dài, điều này khiến khó xác định chính xác vị trí hiện tại và cũng làm việc điều hướng nhanh trở nên phiền toái
Power user và chi phí bảo trì
- Với power user muốn lướt nhanh tài liệu hoặc di chuyển chính xác trên trang, cuộn momentum làm chậm luồng công việc
- Họ phải chờ hoạt ảnh chậm kết thúc, điều này mâu thuẫn với kỳ vọng của những người muốn hoàn thành công việc nhanh chóng
- Plugin cuộn momentum không phải là tính năng cài một lần rồi thôi
- Nó cần được cập nhật định kỳ để tương thích với các trình duyệt, hệ điều hành và thiết bị mới nhất
- Mỗi lần cập nhật đều có nguy cơ phát sinh lỗi mới, đồng thời tạo thêm việc cho đội ngũ phát triển thay vì dành thời gian và chi phí để làm website nhanh hơn, an toàn hơn hoặc tối ưu hơn
Kết luận: hãy để việc cuộn là hành vi mặc định
- Scrolljacking và các plugin cuộn momentum thêm vào sự phức tạp không cần thiết, làm giảm khả dụng và khiến người dùng thất vọng
- Như Nielsen Norman Group diễn đạt, “khả dụng là nền tảng của niềm vui”
- Thay vì tái phát minh việc cuộn, nên giữ hành vi cuộn gốc, có thể dự đoán và nhanh
- Đừng biến việc cuộn thành một sự kiện đặc biệt; hãy để người dùng просто cuộn
1 bình luận
Ý kiến trên Hacker News
Đừng đụng vào URL, điều hướng của trình duyệt, hay cả nút quay lại nữa
Có vẻ đây là trận chiến đã thua từ lâu rồi, và SPA đã phá hỏng web, khiến mọi thứ tệ hơn nhiều
History API vẫn hoàn toàn ổn, nên có thể khiến SPA và bộ điều hướng riêng của nó hoạt động phù hợp với trình duyệt và người dùng
Nhưng nhiều lập trình viên không quan tâm đến những nền tảng cơ bản của web như khả năng đánh dấu trang hay điều hướng, nên đã làm hỏng chúng
Một SPA tốt phải hoạt động như một website bình thường, và ngoài việc nhanh, phản hồi tốt ra thì bạn không nên nhận ra nó là SPA
Đúng là nên có khả năng đánh dấu trang hoặc chia sẻ một trạng thái cụ thể, nhưng để làm vậy thì tốt hơn nhiều là chỉ đổi URL tại chỗ thay vì tạo ra một bước điều hướng mới
Web bị phá không phải vì bản thân SPA, mà vì những người không quan tâm đến các mặc định của web, URL, nút quay lại, hay trải nghiệm cuộn của người dùng
Trình duyệt nên sửa chuyện này, nhưng quán tính quá lớn nên chắc sẽ chẳng xảy ra
Tôi nghĩ thái độ “chúng tôi biết rõ hơn người dùng” không chỉ áp dụng cho cuộn quán tính mà còn cho rất nhiều trào lưu thiết kế UX hiện nay
Tôi muốn biết bằng cách nào mà người ta lại rơi vào kiểu sùng bái thẩm mỹ đến mức hy sinh mọi thứ khác
Bên dưới là một thái độ cực kỳ coi thường người dùng, ngăn họ tự chịu bất kỳ trách nhiệm nào
Hôm nay tôi lại đi tìm cách tắt hành vi phiền phức trên macOS là “cần mật khẩu để kích hoạt Touch ID”; tôi hiểu việc yêu cầu sau khi khởi động lại, nhưng cái yêu cầu có vẻ dựa trên thời gian thì có vẻ không tắt được
Cách gần nhất tôi tìm thấy là giảm giới hạn thời gian bằng lệnh
bioutil, chứ không thể tăng nó lênTôi còn định thử đảo ngược vị trí kiểm tra giá trị tối đa để xem có thể gọi trực tiếp API cấp thấp hơn mà lách qua được không
Đúng hơn là sự thiếu vắng của UX design
Có một bài blog hay tên kiểu như “Button presses You” nhưng tôi không tìm lại được
Ý chính là mục đích của ứng dụng không còn là để người dùng quyết định họ muốn làm gì với chương trình, mà đang chuyển thành việc ứng dụng ra lệnh cho người dùng phải làm gì và làm như thế nào
Cũng đừng đụng vào thanh cuộn
Dạo này có vẻ ở đâu cũng có mốt làm nó chỉ rộng khoảng 1px
Nếu thực sự muốn ứng dụng có tính công thái học, thì các cử chỉ một hoặc hai ngón tay, như kéo bằng ngón tay để cuộn, phải hoạt động tử tế
Lúc đó cách duy nhất để cuộn trên desktop là kéo chọn văn bản vượt quá mép khung
Tôi cố tránh nội dung bị tràn, nhưng khi bắt buộc phải tràn thì thanh cuộn làm hỏng thiết kế, còn thanh cuộn mặc định thì quá xấu nên tôi ẩn đi
Chỉ cần di chuột là nó hiện ra, dừng lại thì nó biến mất
Nếu muốn xem đang ở vị trí nào thì chỉ cần nhúc nhích chuột một chút
Tôi đã dùng Internet từ thời Gopher và rất thích sự tối giản của thẩm mỹ HTML thuần túy
Tôi cũng rất thích liên kết dưới bài viết dẫn đến website đã truyền cảm hứng cho bài này
Khi xem mã nguồn của những trang như vậy, cảm giác ấm áp đó không chỉ là hoài niệm mà còn là kiểu “những người này thật sự hiểu chuyện”
Nó giống cảnh trong phim tài liệu Helvetica khi các nhà thiết kế mô tả cảm giác cuối cùng cũng có thể chọn Helvetica mới mẻ thay vì những kiểu chữ script dở tệ kiểu thập niên 1950
Tôi nghĩ cả những trang đích màu mè nơi nội dung hiển thị trong nền thay đổi theo cuộn hoặc bản thân các phần của trang bị chia nhỏ cũng thuộc nhóm này
Ví dụ: https://webflow.com/made-in-webflow/website/Translate-Webflo...
Cuộn theo độ nghiêng trên iPad giúp cả người lớn tuổi đọc và cuộn nhanh hơn, còn tự động cuộn cũng khá tốt
Việc đặt các nút < > vào hàng mục của những nơi vốn là trang chỉ cuộn lên xuống cũng là thứ tôi ghét y như lần đầu nhìn thấy
Các nền tảng media streaming nổi tiếng là tai tiếng nhất ở khoản này, nhưng không phải thủ phạm duy nhất
Điều tôi ghét nhất dạo này là chặn Ctrl+F hay Ctrl+K
Chắc chắn phía trình duyệt phải viết thêm mã thì mới cho phép làm vậy được, và Google, Apple hay Mozilla hẳn đã không phải tốn gì nếu không viết đoạn mã đó
Trình duyệt nên cung cấp một phím tắt thay thế như Shift+Ctrl+F cho các trường hợp như vậy
Tôi vừa mới biết là Shift+Cmd+F trong Firefox có làm gì đó
Không nên đụng vào các tổ hợp phím chuẩn
Đừng cướp chức năng của ứng dụng khác rồi làm người dùng bất ngờ
Gần đây trên Google Sheets cho Mac, Cmd-F không còn tìm trong bảng tính nữa; đúng là cách đó có chặn phím tắt hệ thống, nhưng thực tế cũng không có chức năng thay thế
Thành ra để tìm kiếm, tôi phải lên thanh menu của Sheets rồi tìm trong menu ở đó
Cũng đừng đụng vào kiểu khi cuộn xuống thì hoạt ảnh chạy, phần tử trượt ngang, và phải đi qua cổng cuộn rồi mới xuống tiếp được
Đó là thiết kế kinh khủng, khó chịu, cản trở và thù địch với người dùng
Điều buồn cười nhất là liên kết “Back to the normal version” chỉ có thể bấm sau khi quay về đầu trang bằng cuộn mượt
Bị chơi một vố ra trò
Không biết trên Firefox có thể tắt cái này trong
about:settingskhôngHay là như vậy sẽ làm hỏng việc bắt sự kiện?
Hoặc có lẽ tiện ích mở rộng trình duyệt sẽ giúp được
Việc triển khai chắc tùy từng trường hợp, và ví dụ trên trang [1] dùng thư viện luxy.js [2]
Với chính trang này [1], tôi đã có thể tắt hành vi cuộn mượt bằng cách chạy lệnh sau trong console của developer tools
luxy.init({ wrapperSpeed: 1.0});