- Hoạt ảnh khi được օգտագործ đúng cách có thể giúp tăng tính dễ dự đoán, tốc độ cảm nhận và sự thú vị của giao diện
- Tuy nhiên, hoạt ảnh được dùng bừa bãi có thể gây ra tính khó dự đoán, độ trễ, thậm chí làm giảm niềm tin của người dùng
- Bước đầu tiên quan trọng là xác định mục đích rõ ràng của hoạt ảnh
- Tần suất sử dụng hoạt ảnh càng cao thì trải nghiệm không có hoạt ảnh đôi khi lại càng đáng mong muốn hơn
- Tốc độ của hoạt ảnh cũng mang tính quyết định đối với hiệu năng nhận thức và mức độ hài lòng của người dùng
Tính mục đích của hoạt ảnh
- Việc sử dụng hoạt ảnh đúng cách giúp cải thiện tính dễ dự đoán, tốc độ cảm nhận, và sự thú vị của trải nghiệm sử dụng trong giao diện
- Hoạt ảnh sai cách có thể khiến giao diện trở nên chậm chạp, rối rắm và khó chịu, đồng thời ảnh hưởng tiêu cực đến mức độ tin tưởng của người dùng với sản phẩm
Tầm quan trọng của chủ đích
- Trước khi áp dụng hoạt ảnh, cần tự hỏi: "Mục đích của hoạt ảnh này là gì?"
- Ví dụ, hoạt ảnh marketing cho Product Intelligence của Linear giúp người dùng hiểu tính năng bằng cách cho thấy cách chức năng đó hoạt động ngay lập tức thay vì dùng hình ảnh tĩnh
- Hiệu ứng scale down tinh tế khi nhấn nút khiến giao diện mang lại cảm giác sống động và phản hồi tốt hơn
- Hoạt ảnh xuất hiện của toast trong Sonner có hai mục đích sau
- Xuất hiện một cách tự nhiên thay vì bật ra đột ngột, từ đó giảm cảm giác lạc lõng
- Xuất hiện và biến mất theo cùng một hướng để duy trì tính nhất quán không gian và tăng tính trực quan cho cử chỉ swipe-down
- Đôi khi, chính "niềm vui" cũng có thể là mục đích của hoạt ảnh, và trong những tương tác hiếm gặp, nó mang lại sự mới mẻ cùng trải nghiệm đáng nhớ
- Tuy nhiên, khi tần suất sử dụng tăng lên, niềm vui ban đầu có thể nhanh chóng biến thành sự khó chịu và độ trễ
Tần suất sử dụng và hoạt ảnh
- Người dùng càng phải nhìn thấy hoạt ảnh thường xuyên thì mệt mỏi và chậm trễ trong công việc càng có thể tăng lên
- Ví dụ, trong bối cảnh sử dụng Raycast lặp đi lặp lại, hoạt ảnh không cần thiết trở thành một sự cản trở lớn
- Với các menu, danh sách và tình huống thao tác bằng bàn phím được dùng lặp lại, tốt hơn hết là loại bỏ hoàn toàn hoạt ảnh
- Bài viết cũng giới thiệu ví dụ cho thấy hoạt ảnh khi dùng bàn phím có thể làm giảm tốc độ phản hồi
- Trải nghiệm không có hoạt ảnh có thể là lựa chọn tối ưu trong một số kịch bản cụ thể như tác vụ lặp lại hoặc xử lý hàng loạt
Nhận thức về tốc độ và tính phản hồi
- Ngoại trừ các trang marketing, mọi hoạt ảnh UI đều nên chạy nhanh để tăng hiệu năng cảm nhận và tính phản hồi mà người dùng cảm thấy
- Loading spinner quay nhanh khiến người dùng cảm thấy thời gian tải ngắn hơn dù thời lượng tải thực tế giống nhau
- Hoạt ảnh dropdown 180ms cho cảm giác phản hồi vượt trội so với 400ms
- Nhìn chung, hoạt ảnh UI nên dưới 300ms
- Tooltip nên có một chút độ trễ khi xuất hiện lần đầu, nhưng một khi đã mở thì phản hồi ngay mà không cần thêm hoạt ảnh sẽ mang lại trải nghiệm tốt nhất (tham khảo Radix UI, Base UI)
- Việc chuyển đổi không độ trễ giữa các tooltip giúp cải thiện trải nghiệm người dùng mà không làm tổn hại mục đích
Xây dựng giao diện xuất sắc
- Bản thân hoạt ảnh không phải là mục tiêu; mục tiêu cuối cùng là xây dựng giao diện người dùng xuất sắc
- Điều quan trọng là tạo ra trải nghiệm mà người dùng thực sự muốn sử dụng hằng ngày
- Đôi khi cần đến hoạt ảnh, nhưng tùy tình huống, "không dùng hoạt ảnh" có thể là lựa chọn tốt nhất
- Biết khi nào và cách nào nên áp dụng hoạt ảnh là một năng lực quan trọng trong thiết kế UI/UX
Kết luận
- Để tạo ra một giao diện xuất sắc, cần có sự hiểu biết sâu sắc về cách tận dụng hoạt ảnh
- Có thể xem thêm tài liệu lý thuyết và thực hành trong "Animations on the Web"
1 bình luận
Ý kiến trên Hacker News
Mỗi khi các nhà thiết kế bàn về animation, họ thường dùng những từ như “policy” hoặc “delight” rồi cân nhắc các yếu tố này với độ trễ nhận thức; không hẳn là sai hoàn toàn, nhưng vẫn có vài điểm đáng tiếc
Về ý kiến “delight bị phóng đại”, nếu được dùng đúng chỗ và không gây cản trở thì animation có ý nghĩa trong phần mềm rõ ràng vẫn mang lại tác động tích cực cho người dùng, chỉ là tác dụng đó có thể hơi khác với điều nhiều người kỳ vọng
Animation được thiết kế tốt là yếu tố 20% cuối cùng phân biệt giữa “ổn” và “xuất sắc”; không hẳn là thứ bắt buộc, nhưng lại tạo ra điểm khác biệt khi so với đối thủ cạnh tranh
Một lý do thực tế khiến animation có giá trị là nó giống hiện tượng ở sản phẩm vật lý, nơi mọi người xem độ đầm tay hay độ bền như tiêu chí của một sản phẩm cao cấp
Tuy nhiên, trong 10 năm qua, thiết kế UI đã quá thiên về “khí chất”, “dàn dựng ấn tượng”, “branding”, còn nghiên cứu tử tế và tính thực dụng trong việc dùng animation hiệu quả thì lại bị xem nhẹ
Giờ là lúc thiết kế UI nên quay lại ưu tiên tính hữu dụng thực tế
Tôi ngạc nhiên khi việc nút bấm có hiệu ứng scale down nhẹ lúc click lại được xem là một dạng animation; đây là phản hồi thị giác rất cơ bản để báo rằng phần tử có thể click và cú click đã được ghi nhận
Trong thiết kế phần mềm, thái độ coi trọng bản thân “delight” là điều rất hay thấy ở các fan Apple kiểu cũ, ví dụ như sự tiếc nuối việc Apple kém vui nhộn hơn sau thời Jobs
Tôi không biết có bài viết nào mang tính tổng hợp đại diện cho chủ đề này hay không, nhưng bài ngắn này có nhắc đến nó
Việc yêu thích các chi tiết như vậy không chỉ là sở thích của một vài nhà thiết kế hay một hiện tượng hẹp, mà còn là một trong những đặc trưng cốt lõi của cộng đồng fan Apple
Tôi thường xuyên gặp các nhà thiết kế làm trong môi trường B2B nhưng lại thiết kế theo cảm giác B2C
Trong B2B, đặc biệt là enterprise, đó chỉ là công cụ phục vụ công việc hằng ngày của người dùng, nên những animation hào nhoáng, các gradient sặc sỡ (dạo này còn được dùng để ám chỉ AI) thực tế không giúp ích gì cho công việc mà còn gây xao nhãng
Những yếu tố trang trí như vậy chỉ cản trở người dùng điều hướng hiệu quả trong các dashboard nặng về văn bản
Nếu muốn tạo ra trải nghiệm “đẹp và dễ chịu” thì các công ty workflow kiểu CRM/ERP vốn dĩ không phải nơi phù hợp; chỉ có ý nghĩa nếu làm ở công ty nơi sự thỏa mãn cảm xúc của người dùng gắn trực tiếp với giá trị kinh doanh
Tôi không đồng ý với ý kiến cho rằng “delight” bị phóng đại
Ví dụ, nếu một người dùng Apple/iPhone chuyển sang dùng Android trong một tuần, họ sẽ nói rằng có cảm giác “gì đó không tự nhiên và hơi khó chịu”
Phần lớn là nhờ iOS có các animation được chăm chút kỹ lưỡng xuyên suốt mọi tương tác
Người dùng phổ thông có thể không diễn đạt trải nghiệm bằng từ “delight”, nhưng họ chắc chắn nhận ra khi mình đang có trải nghiệm tệ hơn trước
Tôi nghĩ Apple có nhiều điều cần học ở khía cạnh này; rất nhiều lúc người dùng bị phí thời gian chỉ để chờ những animation vô ích
Ví dụ, sau khi cuộn xuống tận cuối rồi chạm vào một nút, thường phải bấm nhiều lần cho tới khi animation bouncing kết thúc thì mới phản hồi
Vuốt giữa các app, đóng notification, mở dock hay drawer, hầu hết các thao tác dựa trên gesture đều bị xử lý chậm quá mức
Các animation chạy nối tiếp nhau; phải xong cái này rồi mới tới cái tiếp theo, xong hết mới thao tác được
Thật mỉa mai khi phải tắt các animation này trong phần cài đặt Accessibility thì mới dùng thoải mái hơn
Khi Apple Wallet kết nối với điện thoại, nó chạy một animation toàn màn hình hoàn toàn vô dụng, và trong thời gian đó tôi chẳng làm được gì nên rất bực
Chỉ cần kết nối xong rồi rung haptic nhẹ một cái là đủ
Các animation điều hướng trên iOS đều được thiết kế để có thể ngắt giữa chừng và thực hiện hành động khác; không nhất thiết phải chờ đến cuối cùng
Trên MacOS, khi chuyển desktop/space, mọi input đều tiếp tục bị áp vào space cũ cho đến khi animation kết thúc, cực kỳ bực bội
Apple hiện không còn thực sự chú ý đến UI/UX; trong một tổ chức lớn như vậy, nếu không có người ra quyết định mạnh kiểu Steve Jobs thì rất khó tạo ra trải nghiệm người dùng tốt
Và các nhà thiết kế đôi khi không nhận ra rằng “người dùng trung bình” không phải fan của họ hay fan của sản phẩm, mà chỉ muốn các chức năng cơ bản và sự nhất quán
Mỗi lần thay đổi điều gì, nên có thái độ rằng chỉ được đổi nếu đem cho bà mình xem và bà phải thốt lên “wow, cái này tốt hơn hẳn”
Tôi thậm chí còn muốn animation nhanh hơn nữa
300ms là quá chậm với tôi
Tôi thích animation ngắn đến mức gần như không nhận ra
Thực ra chỉ khi bỏ animation đi thì người ta mới cảm nhận được nó từng tồn tại
Dài hơn mức đó là tôi thấy quá chậm
Trước đây tôi cũng dùng khoảng 250ms, nhưng gần đây giảm xuống còn 200ms
200ms là tốc độ chuyển UI lý tưởng để người dùng hiểu được cái gì đang thay đổi, thay đổi thế nào và vì sao
Nếu không đáp ứng được tiêu chuẩn đó thì tốt hơn là bỏ luôn transition
200ms cũng tiện vì trong CSS có thể viết đơn giản là .2s
Dưới 150ms thì dễ giống lỗi render, nên nếu quá ngắn lại mất đi lợi ích của animation
Khi lần đầu dùng điện thoại Android, việc đầu tiên tôi làm là vào developer mode để chỉnh tốc độ animation nhanh gấp đôi
Nhìn nó chạy ở tốc độ mặc định thấy rất sốt ruột
Animation trong web design thực chất chẳng khác gì các hiệu ứng trong PowerPoint
Trong đa số trường hợp, một hoặc hai hiệu ứng cross-fade nhanh là đủ để tạo ra một UI gọn gàng, còn hơn nữa thì hiếm khi cần
Tôi cho rằng animation chỉ có ý nghĩa khi dùng để xác nhận điều mà người dùng vốn đã biết; bản thân animation không nên là phương tiện truyền tải thông tin
Tức là kể cả khi tắt animation, người dùng vẫn phải làm việc được với cùng tốc độ và hiểu flow y hệt
Mục đích của animation là nối mượt hành trình UX và đưa ra tín hiệu nhỏ rằng trạng thái đang đúng như kỳ vọng
Ví dụ, khi hover chuột mà phần tử được highlight nhanh, tôi không cần tốn thêm sự chú ý để xác nhận chuột của mình đang ở trên control đó
Như ví dụ tooltip popup, sau khi đã hiện một lần thì những lần sau xuất hiện ngay ở 0ms khiến tôi cảm thấy người thiết kế thực sự hiểu flow UX của người dùng
Đây là ví dụ tiêu biểu của animation được dùng bởi người hiểu rõ hành trình UX
Nguyên tắc của tôi là: nếu người dùng phải chờ animation kết thúc mới tiếp tục thao tác được, thì animation đó nên bị xóa
Và tôi nghĩ nhất định phải cung cấp tùy chọn Accessibility để tắt toàn bộ animation
prefers-reduced-motiontrong CSS thực sự rất hữu íchXem tài liệu liên quan
Về animation giới thiệu tính năng Product Intelligence của Linear, tôi hiểu ý đồ của nhà thiết kế nhưng khi xem thực tế thì nó hoàn toàn không giúp dễ hiểu hơn
Animation ở góc 3D kỳ lạ đó trông chẳng liên quan gì đến UI thực tế
Hiệu ứng 3D này có ngụ ý rằng chiếc hộp cụ thể trên màn hình đó, tức sản phẩm, không phải chính trang tôi đang đọc, nhưng ngoài vậy ra cũng không giúp mấy cho việc hiểu tính năng
Hiệu ứng fade-in có làm khu vực đó dễ lọt vào mắt hơn, nhưng không đóng góp nhiều cho việc truyền tải nội dung
Những animation “mang lại delight” trông ổn trên màn hình của tôi, ví dụ M1 MacBook Pro, nhưng trên màn hình khác, chẳng hạn màn IBM ThinkVision độ phân giải thấp, lại cực kỳ gượng và chậm
Video demo trên MacBook
Video demo trên màn hình chất lượng thấp
Cảm nhận có thể khác hoàn toàn tùy theo đang nhìn trên loại màn hình nào
Về ý kiến “spinner quay nhanh khiến người ta cảm giác tải nhanh hơn”, cá nhân tôi lại gặp quá nhiều thiết kế tệ lạm dụng spinner nhanh dù thực ra chẳng có gì đang diễn ra, nên spinner chậm lại khiến tôi thấy đáng tin hơn
Tôi chỉ tin các thanh loading bar thể hiện tiến trình theo kiểu phi tuyến; trong những trường hợp đó có thể nhìn rõ từng bước như một tín hiệu rằng đúng là đang có tiến triển thực sự
Spinner chậm lại tạo cảm giác đáng tin hơn vì như thể hệ thống đang khựng lại để xử lý một tác vụ nặng
Một ví dụ có thể phá hỏng cả ngày của tôi là khi trạng thái không nhất quán trong lúc animation đang chạy
Ví dụ trên Windows, khi popup notification của một app vừa hiện ra, nếu tôi bấm X để đóng trước khi animation hoàn tất thì nó lại mở chính notification đó
Trên Mac, khi chuyển desktop, có lúc một app vừa lóe lên trên màn hình rồi bị thay bằng app khác; animation chậm đến mức tôi tưởng đã xong nên thao tác gì đó rồi bị giật mình
Thậm chí hiện tượng này đôi khi còn xảy ra ngẫu nhiên
Với các nhà thiết kế, nếu đã nhất quyết thêm animation thì hãy làm nó thật chắc chắn, còn không thì người dùng sẽ mất niềm tin vào chính ứng dụng đó ngay lập tức