Tôn trọng sở thích chuyển động của người dùng

[theanh]

Khi làm việc với chuyển động trên web, điều quan trọng là phải cân nhắc rằng không phải ai cũng trải nghiệm theo cùng một cách. Những gì có thể tạo cảm giác mượt mà và trơn tru đối với một số người có thể gây khó chịu hoặc mất tập trung đối với những người khác — hoặc tệ hơn, gây ra cảm giác buồn nôn hoặc thậm chí gây ra co giật. Các trang web có nhiều chuyển động cũng có thể có tác động lớn hơn đến thời lượng pin của thiết bị di động hoặc khiến dữ liệu được sử dụng nhiều hơn (ví dụ: video tự động phát sẽ yêu cầu nhiều dữ liệu của người dùng hơn so với hình ảnh tĩnh). Đây chỉ là một số lý do tại sao các trang web có nhiều chuyển động có thể không được mong muốn đối với tất cả mọi người.

Hầu hết các hệ điều hành mới đều cho phép người dùng đặt tùy chọn chuyển động của họ trong cài đặt cấp hệ thống. Truy vấn phương tiện prefers-reduced-motion (một phần của đặc tả Truy vấn phương tiện cấp độ 5) cho phép chúng tôi phát hiện các tùy chọn chuyển động cấp hệ thống của người dùng và áp dụng các kiểu CSS tôn trọng tùy chọn đó.

Hai tùy chọn cho prefers-reduced-motion là reduce hoặc no-preference. Chúng ta có thể sử dụng nó theo cách sau trong CSS của mình để tắt hoạt ảnh của một phần tử nếu người dùng đã đặt rõ ràng tùy chọn cho chuyển động giảm:

.some-element { animation: bounce 1200ms;}@media (prefers-reduced-motion: reduce) { .some-element { animation: none; }}

Ngược lại, chúng ta có thể thiết lập hoạt ảnh chỉ nếu người dùng không có tùy chọn chuyển động nào. Điều này có lợi thế là giảm lượng mã chúng ta cần viết và có nghĩa là chúng ta ít có khả năng quên đáp ứng tùy chọn chuyển động của người dùng:

@media (prefers-reduced-motion: no-preference) { .some-element { hoạt ảnh: nảy 1200ms; }}

Một lợi thế bổ sung là các trình duyệt cũ không hỗ trợ prefers-reduced-motion sẽ bỏ qua quy tắc và chỉ hiển thị phần tử gốc không có chuyển động của chúng ta.

Quy tắc nào?​

Không giống như các truy vấn phương tiện min-width và max-width, trong đó sự đồng thuận ít nhiều đã được thiết lập là ưu tiên thiết bị di động (do đó ưu tiên min-width), không có cách "đúng" duy nhất để viết các kiểu chuyển động giảm của bạn. Tôi có xu hướng ưu tiên ví dụ thứ hai (chỉ áp dụng hoạt ảnh nếu prefers-reduced-motion: no-preference đánh giá là đúng), vì những lý do được liệt kê ở trên. Tatiana Mac đã viết bài viết tuyệt vời này, trong đó đề cập đến một số phương pháp mà các nhà phát triển có thể cân nhắc thực hiện, cũng như nhiều điểm tuyệt vời khác, bao gồm các câu hỏi chính cần đặt ra khi thiết kế chuyển động trên web.

Như thường lệ, giao tiếp nhóm và chiến lược nhất quán là chìa khóa để đảm bảo mọi cơ sở đều được bao phủ khi nói đến khả năng truy cập web.

Sử dụng thực tế: Áp dụng prefers-reduced-motion cho Hành vi cuộn​

prefers-reduced-motion có nhiều ứng dụng ngoài việc áp dụng (hoặc không áp dụng) hoạt ảnh hoặc chuyển tiếp khung hình chính. Một ví dụ là cuộn mượt mà. Nếu chúng ta đặt scroll-behaviour: smooth trên phần tử html của mình, khi người dùng nhấp vào liên kết neo trong trang, họ sẽ được cuộn mượt mà đến vị trí thích hợp trên trang (hiện không được hỗ trợ trong Safari):

html { scroll-behavior: smooth;}

Thật không may, trong CSS, hiện tại chúng ta không có nhiều quyền kiểm soát đối với hành vi đó. Nếu chúng ta có một trang nội dung dài, trang sẽ cuộn rất nhanh, điều này có thể là trải nghiệm khá khó chịu đối với những người nhạy cảm với chuyển động. Bằng cách gói nó trong truy vấn phương tiện, chúng ta có thể ngăn chặn hành vi đó được áp dụng trong trường hợp người dùng có tùy chọn reduced-motion:

@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; }}

Phục vụ tùy chọn chuyển động trong Javascript​

Đôi khi chúng ta cần áp dụng chuyển động trong JavaScript thay vì CSS. Tương tự, chúng ta có thể phát hiện tùy chọn chuyển động của người dùng bằng JS, sử dụng matchMedia. Hãy cùng xem cách chúng ta có thể triển khai hành vi cuộn mượt mà có điều kiện trong mã JS của mình:

/* Đặt truy vấn phương tiện */const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)')button.addEventListener('click', () => { /* Nếu truy vấn phương tiện khớp, hãy đặt biến hành vi cuộn thành 'auto', nếu không, hãy đặt thành 'smooth' */ const behavior = prefersReducedMotion.matches ? 'auto' : 'smooth' /* Khi nhấp vào nút, người dùng sẽ được cuộn lên trên cùng */ window.scrollTo({ x: 0, y: 0, behavior })})

Nguyên tắc tương tự có thể được sử dụng để phát hiện xem có nên triển khai giao diện người dùng giàu chuyển động với các thư viện JS hay không — hoặc thậm chí có nên tải chính các thư viện đó hay không.

Trong đoạn mã sau, hàm trả về sớm nếu người dùng thích chuyển động giảm, tránh việc nhập không cần thiết một phần phụ thuộc lớn — một chiến thắng về hiệu suất cho người dùng. Nếu họ không đặt tùy chọn chuyển động, thì chúng ta có thể nhập động thư viện hoạt ảnh Greensock và khởi tạo hoạt ảnh của chúng ta.

const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)')const loadGSAPAndInitAnimations = () => { /* Nếu người dùng thích chuyển động giảm, không làm gì cả */ if (prefersReducedMotion.matches) return /* Nếu không, hãy nhập mô-đun GSAP và khởi tạo hoạt ảnh */ import('gsap').then((object) => { const gsap = object.default /* Khởi tạo hoạt ảnh bằng GSAP tại đây */ })}loadGSAPAndInitAnimations()

reduced-motion Không có nghĩa là không có chuyển động​

Khi tạo kiểu cho các tùy chọn chuyển động giảm, điều quan trọng là chúng ta vẫn phải cung cấp cho người dùng các chỉ báo có ý nghĩa và dễ tiếp cận về thời điểm một hành động đã xảy ra. Ví dụ, khi tắt trạng thái di chuột gây mất tập trung hoặc chuyển động nhiều cho người dùng thích chuyển động ít hơn, chúng ta phải cẩn thận cung cấp một kiểu thay thế rõ ràng khi người dùng di chuột trên phần tử.

Bản demo sau đây cho thấy một quá trình chuyển đổi phức tạp khi người dùng di chuột hoặc tập trung vào một mục trong thư viện nếu họ không đặt tùy chọn chuyển động. Nếu họ thích chuyển động giảm, quá trình chuyển đổi sẽ tinh tế hơn, nhưng vẫn chỉ rõ trạng thái di chuột:

Xem Bút [Bộ sưu tập với prefers-reduced-motion](https://codepen.io/smashingmag/pen/KKvMqaL) của Michelle Barker.
Xem Bút Bộ sưu tập với prefers-reduced-motion của Michelle Barker.
Giảm chuyển động không nhất thiết có nghĩa là xóa tất cả các chuyển đổi khỏi trang web của chúng ta. Ví dụ, một nút có biểu tượng mũi tên nhỏ di chuyển một vài pixel khi di chuột qua không có khả năng gây ra vấn đề cho người thích trải nghiệm chuyển động giảm và cung cấp chỉ báo hữu ích hơn về sự thay đổi trạng thái so với chỉ màu.

Đôi khi tôi thấy các nhà phát triển áp dụng các kiểu chuyển động giảm theo cách sau, loại bỏ tất cả các chuyển tiếp và hoạt ảnh trên tất cả các thành phần:

@media screen and (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }}

Điều này có thể tốt hơn là bỏ qua các tùy chọn chuyển động của người dùng, nhưng không cho phép chúng ta dễ dàng tùy chỉnh các thành phần để cung cấp các chuyển tiếp tinh tế hơn khi cần thiết.

Trong đoạn mã sau, chúng ta có một nút tăng kích thước khi di chuột qua. Chúng tôi đang chuyển đổi màu sắc và tỷ lệ, nhưng người dùng thích chuyển động giảm sẽ không nhận được bất kỳ chuyển đổi nào:

button { background-color: hotpink; transition: color 300ms, background-color 300ms, transform 500ms cubic-bezier(.44, .23, .47, 1.27);}button:hover,button:focus { background-color: darkviolet; color: white; transform: scale(1.2);}@media screen and (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; scroll-behavior: auto !important; } button { /* Mặc dù chúng ta vẫn muốn chuyển đổi màu sắc của nút, nhưng quy tắc sau sẽ không có hiệu lực */ transition: color 200ms, background-color 200ms; } button:hover, button:focus { /* Ngăn chặn nút thay đổi tỷ lệ khi di chuột qua */ transform: scale(1); }}

Hãy xem bản demo này để xem hiệu ứng. Có lẽ đây không phải là cách lý tưởng, vì việc chuyển đổi màu đột ngột mà không có sự chuyển đổi có thể gây khó chịu hơn so với việc chuyển đổi trong vài trăm mili giây. Đây là một lý do tại sao, nhìn chung, tôi thường thích tạo kiểu cho chuyển động giảm theo từng trường hợp cụ thể.

Nếu bạn quan tâm, đây là bản demo được thiết kế lại để cho phép tùy chỉnh sự chuyển đổi khi cần thiết. Nó sử dụng một thuộc tính tùy chỉnh cho thời lượng chuyển tiếp, cho phép chúng ta bật và tắt chuyển tiếp tỷ lệ mà không cần phải viết lại toàn bộ khai báo.

Khi nào thì xóa hoạt ảnh tốt hơn​

Eric Bailey nêu ra quan điểm rằng "không phải mọi thiết bị có thể truy cập web cũng có thể hiển thị hoạt ảnh hoặc hiển thị hoạt ảnh mượt mà" trong bài viết của mình, "Xem lại prefers-reduced-motion, truy vấn phương tiện chuyển động giảm." Đối với các thiết bị có tốc độ làm mới thấp, có thể gây ra hoạt ảnh không ổn định, trên thực tế, việc xóa hoạt ảnh có thể là lựa chọn tốt hơn. Tính năng phương tiện update có thể được sử dụng để xác định điều này:

@media screen và (prefers-reduced-motion: reduce), (update: slow) { * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }}

Hãy nhớ đọc toàn bộ bài viết để biết các khuyến nghị của Eric, vì ông ấy là người hạng nhất đáng theo dõi trong lĩnh vực trợ năng.

Tổng hợp tất cả các phần​

Điều quan trọng là phải ghi nhớ thiết kế trang tổng thể khi tập trung chặt chẽ vào CSS cấp thành phần. Những gì có vẻ là một hoạt ảnh khá vô hại ở cấp độ thành phần có thể có tác động lớn hơn nhiều khi nó được lặp lại trên toàn bộ trang và là một trong nhiều phần chuyển động.

Trong bài viết của Tatiana, cô ấy đề xuất tổ chức các hoạt ảnh (với prefers-reduced-motion) trong một tệp CSS duy nhất, chỉ có thể được tải nếu (prefers-reduced-motion: no-preference) đánh giá là đúng. Việc xem tổng số tất cả các hoạt ảnh của chúng ta có thể có lợi ích bổ sung là giúp chúng ta hình dung trải nghiệm khi truy cập toàn bộ trang web và điều chỉnh các kiểu chuyển động giảm của chúng ta cho phù hợp.

Chuyển đổi chuyển động rõ ràng​

Mặc dù prefers-reduced-motion hữu ích, nhưng nó có nhược điểm là chỉ phục vụ cho những người dùng biết về tính năng này trong cài đặt hệ thống của họ. Nhiều người dùng không biết về cài đặt này, trong khi những người khác có thể đang sử dụng máy tính mượn mà không có quyền truy cập vào cài đặt cấp hệ thống. Tuy nhiên, những người khác có thể hài lòng với chuyển động của phần lớn các trang web, nhưng thấy các trang web sử dụng nhiều chuyển động rất khó chịu.

Bạn có thể thấy khó chịu khi phải điều chỉnh tùy chọn hệ thống chỉ để truy cập một trang web. Vì những lý do này, trong một số trường hợp, tốt hơn là cung cấp một điều khiển rõ ràng trên chính trang web để bật và tắt chuyển động. Chúng ta có thể triển khai điều này bằng JS.

Bản demo sau có một số vòng tròn trôi xung quanh nền. Các kiểu hoạt ảnh ban đầu được xác định bởi tùy chọn hệ thống của người dùng (với prefers-reduced-motion), tuy nhiên, người dùng có thể bật hoặc tắt chuyển động thông qua một nút. Thao tác này sẽ thêm một lớp vào body, mà chúng ta có thể sử dụng để đặt các kiểu tùy thuộc vào tùy chọn đã chọn. Như một phần thưởng, lựa chọn ưu tiên chuyển động cũng được lưu trong bộ nhớ cục bộ — do đó, nó được "ghi nhớ" khi người dùng truy cập lần sau.

Xem Bút [Chuyển đổi chuyển động giảm](https://codepen.io/smashingmag/pen/porEQLB) của Michelle Barker.
Xem Bút Chuyển đổi chuyển động giảm của Michelle Barker.

Thuộc tính tùy chỉnh​

Một tính năng trong bản demo là nút chuyển đổi đặt thuộc tính tùy chỉnh, --playState, mà chúng ta có thể sử dụng để phát hoặc tạm dừng hoạt ảnh. Điều này có thể đặc biệt hữu ích nếu bạn cần tạm dừng hoặc phát nhiều hoạt ảnh cùng một lúc. Trước hết, chúng ta đặt trạng thái phát thành tạm dừng:

.circle { animation-play-state: var(--playState, suspended);}

Nếu người dùng đã đặt tùy chọn chuyển động giảm trong cài đặt hệ thống của họ, chúng ta có thể đặt trạng thái phát thành đang chạy:

@media (prefers-reduced-motion: no-preference) { body { --playState: đang chạy; }}

Lưu ý: Đặt thuộc tính này trên body, trái ngược với từng phần tử riêng lẻ, có nghĩa là thuộc tính tùy chỉnh có thể được kế thừa.

Khi người dùng nhấp vào nút chuyển đổi, thuộc tính tùy chỉnh sẽ được cập nhật trên body, thuộc tính này sẽ chuyển đổi mọi trường hợp sử dụng thuộc tính này:

// Thuộc tính này sẽ tạm dừng tất cả các hoạt ảnh sử dụng thuộc tính tùy chỉnh `--playState`document.body.style.setProperty('--playState', 'paused')

Đây có thể không phải là giải pháp lý tưởng trong mọi trường hợp, nhưng một lợi thế là hoạt ảnh chỉ tạm dừng khi người dùng nhấp vào nút chuyển đổi, thay vì quay lại trạng thái ban đầu, điều này có thể khá khó chịu.

Xin gửi lời cảm ơn đặc biệt đến Scott O’Hara vì những đề xuất của anh ấy nhằm cải thiện khả năng truy cập của nút chuyển đổi. Anh ấy cho tôi biết rằng một số trình đọc màn hình không thông báo văn bản nút được cập nhật, văn bản này sẽ thay đổi khi người dùng nhấp vào nút và thay vào đó đề xuất role="switch" trên nút, với aria-checked được chuyển thành on hoặc off khi nhấp.

Thành phần video​

Trong một số trường hợp, chuyển đổi chuyển động ở cấp thành phần có thể là tùy chọn tốt hơn. Lấy một trang web có nền video tự động phát. Chúng ta nên đảm bảo video không tự động phát đối với những người dùng thích chuyển động giảm, nhưng chúng ta vẫn nên cung cấp một cách để họ chỉ phát video nếu họ chọn. (Một số người có thể cho rằng chúng ta nên tránh phát video tự động hoàn toàn, nhưng chúng ta không phải lúc nào cũng thắng trong cuộc chiến đó!) Tương tự như vậy, nếu video được đặt thành tự động phát cho người dùng mà không có sở thích đã nêu, chúng ta cũng nên cung cấp cho họ cách tạm dừng video.

Bản demo này cho thấy cách chúng ta có thể đặt thuộc tính tự động phát khi người dùng không có sở thích chuyển động đã nêu, triển khai nút phát/tạm dừng tùy chỉnh để cho phép họ cũng chuyển đổi phát lại, bất kể sở thích là gì:

Xem Bút [Video có sở thích chuyển động](https://codepen.io/smashingmag/pen/qBXNjqR) của Michelle Barker.
Xem Bút Video có tùy chọn chuyển động của Michelle Barker.
(Sau đó, tôi tình cờ thấy bài đăng này của Scott O‘Hara, nêu chi tiết trường hợp sử dụng chính xác này.)

Sử dụng phần tử ​

Chris Coyier đã viết một bài viết thú vị kết hợp một số kỹ thuật để tải các nguồn phương tiện khác nhau tùy thuộc vào tùy chọn chuyển động của người dùng. Điều này khá thú vị, vì nó có nghĩa là đối với người dùng thích chuyển động giảm, tệp GIF lớn hơn nhiều thậm chí sẽ không được tải xuống. Theo như tôi thấy, nhược điểm là sau khi tệp được tải xuống, người dùng không có cách nào để chuyển lại sang tùy chọn không chuyển động.

Tôi tạo một phiên bản đã sửa đổi của bản demo có thêm tùy chọn này. (Bật reduced-motion trong tùy chọn hệ thống của bạn để xem nó hoạt động.) Thật không may, khi chuyển đổi giữa các tùy chọn hoạt hình và không chuyển động trong Chrome, có vẻ như tệp GIF được tải xuống mới mỗi lần, điều này không xảy ra trong các trình duyệt khác:

Xem Bút [Ưu tiên Kỹ thuật Giảm chuyển động CỘNG VỚI! [forked]](https://codepen.io/smashingmag/pen/porbPXG) của Michelle Barker.
Xem Bút Ưa thích Kỹ thuật Giảm Chuyển động THÊM VÀO ĐÓ! [forked] của Michelle Barker.
Tuy nhiên, kỹ thuật này có vẻ như là một cách tôn trọng hơn để hiển thị GIF, điều này có thể gây khó chịu cho người dùng.

Hỗ trợ trình duyệt và suy nghĩ cuối cùng​

prefers-reduced-motion có hỗ trợ tuyệt vời trên tất cả các trình duyệt hiện đại trong vài năm trở lại đây. Như chúng ta đã thấy, bằng cách áp dụng phương pháp tiếp cận giảm chuyển động trước, các trình duyệt không hỗ trợ sẽ chỉ nhận được giảm chuyển động dự phòng. Không có lý do gì để không sử dụng phương pháp này ngay hôm nay để giúp các trang web của bạn dễ truy cập hơn.

Các nút chuyển đổi tùy chỉnh chắc chắn có một vị trí nhất định và có thể cải thiện đáng kể trải nghiệm cho những người dùng không biết về cài đặt này hoặc chức năng của nó. Nhược điểm đối với người dùng là tính không nhất quán — nếu mọi nhà phát triển buộc phải đưa ra giải pháp riêng của họ, người dùng cần phải tìm nút chuyển đổi chuyển động ở một vị trí khác nhau trên mọi trang web.

Có vẻ như lớp bị thiếu ở đây là trình duyệt. Tôi rất muốn thấy trình duyệt triển khai nút chuyển đổi giảm chuyển động, ở một nơi mà người dùng có thể dễ dàng truy cập, để mọi người biết tìm nút chuyển đổi ở đâu bất kể họ đang duyệt trang web nào. Nó cũng có thể khuyến khích các nhà phát triển dành nhiều thời gian hơn để đảm bảo khả năng truy cập chuyển động.

Tài nguyên liên quan​

• Đặc tả truy vấn phương tiện cấp độ 5, World Wide Web Consortium (W3C)
• prefers-reduced-motion, MDN Web Docs, Mozilla
• Thiết kế với chuyển động giảm cho độ nhạy chuyển động, Val Head, Tạp chí Smashing
• Áp dụng phương pháp tiếp cận không chuyển động trước cho hoạt ảnh, Tatiana Mac
• Kỹ thuật hình ảnh chuyển động giảm, Take 2, Chris Coyier, CSS-Tricks
• Xem lại prefers-reduced-motion, Truy vấn phương tiện chuyển động giảm, Eric Bailey, CSS-Tricks
• Giảm chuyển động để cải thiện khả năng truy cập, Lindsey Kopacz

Đọc thêm​

• Ca ngợi những điều cơ bản
• Tạo ra một Biểu mẫu nhiều bước để có trải nghiệm người dùng tốt hơn
• Cách thiết kế cho các sự kiện có lưu lượng truy cập cao và ngăn trang web của bạn bị sập
• Giới thiệu về hoạt ảnh cuộn CSS: Cuộn và xem dòng thời gian tiến trình