Gây ấn tượng và tạo ngạc nhiên cho người dùng bằng giao diện animation (giao diện động) không hề dễ dàng.
Interface Animation (IA) là hiệu ứng tạo ra tương tác khi chuyển đổi giữa các màn hình với nhau nhằm thu hút sự chú ý của người dùng và giúp họ sử dụng app một cách dễ dàng hơn.
Để có một giao diện animation thân thiện với người dùng, bài viết này sẽ tổng hợp lại những nguyên tắc và quy luật để designer có thể dễ dàng thực hiện thiết kế hơn.
Mục Lục
Thời gian và tốc độ của animation
Khi các giao diện thay đổi trạng thái và vị trí, animation phải đủ chậm để người dùng có thể thấy được sự thay đổi của hiệu ứng, nhưng cũng phải đủ nhanh để họ không phải chờ đợi.Thời gian tối ưu nhất cho một animation nên dao động từ 200 – 500 ms. Bất cứ animation nào ngắn hơn 100 ms đều trở thành “hiệu ứng tức thời” và sẽ không đọng lại gì trong tâm trí người dùng. Bên cạnh đó, những animation dài hơn 1 giây sẽ mang lại cảm giác chậm chạp và giảm đi trải nghiệm khách hàng.
Ví dụ:
Trên thiết bị di động, Material Design Guidelines cũng chỉ ra rằng khoảng thời gian giới hạn cho mỗi animation nên dao động từ 200-300 ms.
Đối với máy tính bảng, khoảng thời gian này dài hơn tầm 30% tức là rơi vào khoảng 400-500 ms. Lý do đơn giản là màn hình lớn hơn thì đối tượng phải đi một đoạn dài hơn. Còn đối với các thiết bị đeo trên người như Smart watch có màn hình nhỏ hơn, quãng đường di chuyển ngắn lại nên thời gian cũng ngắn đi 30%, rơi vào tầm 150-200 ms.
Animation trên Web được xử lý theo một cách khác hoàn toàn bởi chúng ta đã quá quen với việc trang web xuất hiện ngay lập tức khi mở ra, vì vậy hiệu ứng chuyển đổi cũng phải thật nhanh chóng.
Thời gian chuyển đổi diễn ra trên web phải nhanh gấp đôi trên di động, dao động khoảng từ 150-200 ms. Nếu chậm hơn tốc độ này, người dùng chắc chắn sẽ nghĩ rằng máy tính bị treo hoặc gặp sự cố kết nối internet. Ngày nay, những website lớn đều được tối ưu để nội dung xuất hiện gần như lập tức để tạo nên trải nhiệm cho khách hàng tốt hơn.
Trong trường hợp bạn sử dụng animation tạo điểm nhấn, thu hút sự chú ý từ khách hàng hoặc để trang trí cho đẹp thì những quy tắc đã nêu ở trên không cần thiết. Bạn có thể tạo ra animation với khoảng thời gian dài hơn.
Lưu ý:
- Ở mỗi nền tảng khác nhau, thời lượng chuyển động của đối tượng không chỉ phụ thuộc vào khoảng cách mà còn vào kích thước của đối tượng đó.
- Các đối tượng có kích thước nhỏ hoặc có sự thay đổi không đều sẽ chuyển động nhanh hơn. Và chuyển động của các đối tượng có kích thước lớn và phức tạp sẽ mượt mà hơn nếu kéo giãn thời lượng một chút.
- Giữa hai đối tượng chuyển động có cùng kích thước thì cái nào dừng trước sẽ là cái đi quãng đường ngắn hơn.
Khi các vật thể va chạm vào nhau thì theo vật lý học, hiện tượng tán đều năng lượng sẽ xảy ra. Vì vậy, chúng ta nên hạn chế sử dụng các hiệu ứng tung nảy (bounce effect) mà chỉ dùng chúng trong các trường hợp đặc biệt.
Chuyển động của đối tượng nên rõ ràng, sắc nét. Không nên sử dụng hiệu ứng Làm mờ (motion blur). Nó rất khó để mô phỏng trên các thiết bị, kể cả các smartphone xịn xò, nên ít được sử dụng trong IA.
Các đối tượng dạng List item (new card, email list,…) nên xuất hiện lần lượt với độ trễ của chuyển động cực kì ngắn. Thời lượng xuất hiện của mỗi thông tin chỉ nên kéo dài trong khoảng từ 20- 25 ms, nếu chậm hơn sẽ gây khó chịu cho người dùng.
Easing
Easing giúp hiệu ứng chuyển động trở nên chân thật và tự nhiên hơn. Đây là một trong những nguyên tắc animation cực kì căn bản. Quy tắc này đã được nhắc đến trong cuốn The Illusion of Life: Disney Animation được viết bởi hai nhân vật chủ chốt của Disney Animation là Ollie Johnston và Frank Thomas.
Để các animation trở nên đỡ khô khan và máy móc, vật thể nên được điều chỉnh tốc độ linh hoạt tức là có sự gia, giảm tốc độ dựa trên những di chuyển trong thế giới thực.
Linear motion
Linear motion (chuyển động tuyến tính) là loại chuyển động không bị tác động bởi bất kỳ định luật vật lý nào, hay chúng ta còn hay gọi là chuyển động đều. Điều này tạo nên sự cứng nhắc và không tự nhiên trong mắt người dùng.
Vậy nên hiện nay, hầu hết các app đều sử dụng Animation curve (tạm gọi là chuyển động theo đường cong). Để hiểu rõ hơn, bạn có thể quan sát trên biểu đồ. Chuyển động theo đường cong là sự thay đổi chuyển động dựa trên tương quan giữa vị trí vật thể (trục y) và thời gian chuyển động (trục x). Còn chuyển động tuyến tính chỉ di chuyển cùng một quãng đường và trên một khoảng thời gian.
Nếu bạn thực sự muốn sử dụng chuyển động tuyến tính, bạn nên dùng khi vật thể có vị trí cố định (ví dụ như vật thể thay đổi màu sắc, thay đổi độ đậm nhạt)
Ease – in (chuyển động gia tốc)
Quan sát trên biểu đồ, ta có thể thấy ban đầu vật thể chuyển động chậm chạp sau đó dần tăng tốc lên. Đây được gọi là chuyển động gia tốc.
Dạng chuyển động này chỉ nên dùng cho các hiệu ứng fly out (hiệu ứng khi đối tượng thoát hoàn toàn ra với tốc độ nhanh chóng). Chúng thường được dùng trong các hệ thống notification hoặc thẻ hiển thị thông tin.
Đáng lưu ý nữa là chuyển động này chỉ nên áp dụng cho các đối tượng thoát hoàn toàn ra khỏi màn hình và không hoàn tác lại.
Animation curve giúp chuyển động của vật thể trở nên mượt mà và chân thật hơn. Bạn có thể nhìn vào biểu đồ bên dưới, tất cả các vật thể đều xuất phát từ một điểm và kết thúc ở cùng một vị trí. Nhưng chỉ một thay đổi nhỏ từ animation curve, chuyển động đã trở nên sống động hơn hẳn.
Ease – out (chuyển động giảm tốc)
Quy tắc này ngược lại với Ease-in ở trên, vật thể ban đầu di chuyển với một tốc độ rất nhanh, sau đấy lại từ từ hạ tốc độ cho đến khi dừng hẳn.
Loại animation curve này được dùng khi một vật thể bất ngờ xuất hiện trên màn hình, di chuyển thật nhanh lúc ban đầu, nhưng về sau chậm lại để người xem có thể nắm bắt được. Ví dụ như vật thể dạng card hoặc đối tượng xuất hiện từ bên ngoài vào màn hình app.
Ease-in-out ( standard curve)
Standard curve – chuyển động tiêu chuẩn là dạng chuyển động giúp đối tượng di chuyển nhanh lúc ban đầu rồi chậm dần cho đến khi vận tốc về 0. Đây được coi là dạng chuyển động phổ biến nhất trong animation curve. Nếu đang phân vân giữa vô vàn dạng chuyển động thì Ease-in-out là lựa chọn đáng cân nhắc.
Theo Material Design Guidelines, chúng ta nên sử dụng asymmetric curve (chuyển động bất đối xứng) hơn standard curve vì chuyển động của chúng sẽ chân thật và mượt mà hơn. Phần cuối của chuyển động phải gây được sự chú ý với người dùng vậy nên khoảng thời gian chuyển động nhanh phải ngắn hơn so với lúc giảm tốc. Khi đó, người dùng sẽ chú ý nhiều hơn đến các chuyển động cuối và chuyển sang giai đoạn mới mượt mà hơn.
Ease-in-out được sử dụng khi chủ thể di chuyển từ vị trí này qua vị trí khác trên cùng một màn hình. Nó tránh việc các vật thể nhảy loạn xạ gây mất tập trung, xao nhãng đến người dùng.
Dạng chuyển động này còn được sử dụng trong trường hợp đối tượng thoát ra và có thể khôi phục lại trên màn hình khi cần. Ví dụ như navigation drawer (bảng điều hướng) dưới đây.
Đọc đến đây bạn cũng thể nhận thấy rằng, có một nguyên tắc rất nhiều beginner bỏ quên là animation mở màn không nhất thiết phải giống animation kết thúc.
Ví dụ với navigation drawer, nó mở đầu với deceleration curve và kết thúc với standard curve. Ngoài ra, theo Google Material Design, thời gian mở màn của đối tượng nên lâu một chút để tạo được sự chú ý.
Một công cụ nữa được sử dụng để định hình chuyển động của animation là cubic-bezier. Được gọi là cubic vì nó dựa trên 4 điểm tọa độ. Điểm đầu có toạ độ là (0,0) – góc dưới bên trái, và điểm cuối là góc trên bên phải (1,1), cũng là hai toạ độ cố định của biểu đồ.
Hai điểm tọa độ tiếp theo sẽ được tùy biến theo ý mình thông qua 4 tham số, 2 tham số đầu sẽ khai báo tọa độ x,y của điểm đầu tiên, và tương tự cho cặp tham số còn lại.
Để thuận tiện hơn cho công việc xây dựng animation curves, chúng tôi gợi ý 2 website là easings.net và cubic-bezier.com. Trang đầu tiên có sẵn nhiều dạng biểu đồ thông dụng đi kèm với các tham số của nó nên dễ dàng có thể copy về sử dụng. Trang thứ 2 cho phép mình tùy chỉnh các tham số của biểu đồ và xem thử chuyển động của đối tượng theo biểu đồ.
Choreography trong thiết kế giao diện
Choreography thường được biết đến là việc biên đạo, kết hợp các động tác thành các điệu múa để biểu diễn. Choreography trong thiết kế cũng giống như Choreography trong múa ba-lê. Mục đích chính của công việc này đều là dẫn dắt sự tập trung của người dùng vào một dòng chảy để người xem cảm nhận được sự uyển chuyển, mềm mại và tự nhiên trong từng chuyển động.
Có 2 dạng của choreography là equal interaction (tương tác ngang hàng) và subordinate interaction (tương tác phân cấp)
Equal interaction
Equal interaction (tương tác ngang hàng) là chuyển động của các vật thể phải tuân theo một quy tắc nhất định.
Có thể thấy trong ví dụ dưới đây, các thẻ bên trái xuất hiện theo đúng một trật tự từ trên xuống dưới, khiến người xem cảm thấy dễ chịu và tập trung hơn hẳn. Còn theo hình bên phải, các thẻ xuất hiện lộn xộn gây cảm giác mất tập trung đến người dùng. Các thẻ xuất hiện cùng một lúc cũng không phải là một phương án hiển thị hiệu quả.
Nếu các thẻ thông tin dạng bảng, chúng ta sẽ phải lưu tâm hơn một chút. Với thẻ bên phải, các vật thể xuất hiện lần lượt từng thành phần một, animation bị kéo dài ra, hướng nhìn của người dùng cũng đi theo đường zigzag, tạo ra hiệu ứng cực kì tệ. Tốt nhất, chúng ta nên tạo chuyển động đơn giản theo đường chéo như hình bên trái.
Subordinate interaction
Subordinate interaction (tương tác phân cấp) là loại chuyển động mà một đối tượng giữ vai trò trung tâm để thu hút sự tập trung của người dùng. Các thành phần còn lại chỉ là yếu tố phụ. Chuyển động như vậy sẽ cho ta cảm giác tuần tự và biết được phần thông tin nào đáng được quan tâm nhất.
Nếu có quá nhiều thứ di chuyển, người dùng sẽ không biết phải chú ý vào đâu. Nếu thực sự muốn có nhiều vật thể cùng di chuyển, hãy định hình rõ ràng trình tự chuyển động và hạn chế tối tối thiểu số lượng các thành phần càng ít càng tốt.
Theo Material Design, khi đối tượng di chuyển, thay đổi kích thước nhưng không giữ tỷ lệ ban đầu (như từ hình vuông thành hình chữ nhật), chúng nên được chuyển động theo quỹ đạo hình vòng cung. Điều này khiến animation trở nên tự nhiên hơn là di chuyển theo đường thẳng.
Còn nếu đối tượng di chuyển và giữ nguyên tỷ lệ ban đầu, quỹ đạo theo đường thẳng là ưu tiên hàng đầu vì nó đơn giản và dễ thực hiện. Nếu để ý trong thực tế, bạn có thể thấy dạng chuyển động này được sử dụng rất phổ biến.
Chuyển động theo quỹ đạo cong cũng chia thành 2 loại là:
- Vertical out: vật thể sẽ bắt đầu đi theo phương ngang và kết thúc chuyển động theo chiều thẳng đứng
- Horizontal out thì ngược lại.
Quỹ đạo chuyển động của vật thể nên khớp với chiều cuộn của trang. Quan sát ví dụ bên dưới để dễ hình dung. Giao diện của chúng ta cuộn lên xuống theo chiều dọc, và khung ảnh sẽ mở rộng theo dạng vertical out, đầu tiên nó sẽ đi sang phải rồi trượt xuống đến giữa màn hình. Thao tác thu gọn sẽ đi theo trình tự ngược lại.
Các đối tượng không nên chồng đè lên nhau khi di chuyển, và cũng cần chừa đủ không gian cho các đối tượng khác. Ví dụ, chúng ta có thể tăng, giảm tốc của vật thể hoặc di chuyển tuần tự như khi xếp hàng lên máy bay vậy.
Một trường hợp khác nữa là, nếu một vật thể di chuyển ngang qua các vật thể khác thì quỹ đạo chuyển động của nó phải tuần tự theo một quy luật nhất định để đảm bảo không làm xáo trộn các đối tượng còn lại.
Kết luận
Sau khi tổng hợp lại hết các nguyên tắc, chúng ta có thể rút ra một kết luận là: chuyển động trong giao diện chẳng qua cũng chỉ là tái hiện lại các chuyển động ta thấy thường ngày trong thế giới thực thôi – cũng có ma sát, có tăng giảm tốc độ, vân vân….Cố gắng mô phỏng chuyển động trong tác phẩm sao cho càng giống trong thực tế thì càng dẫn dắt được sự chú ý, tập trung của người dùng trên giao diện.
Một animation chuyên nghiệp sẽ không làm người dùng bị phân tâm bởi những chuyển động không hợp lý và rối mắt. Trái lại, animation phải giúp người dùng giải quyết được nhu cầu một cách nhanh chóng và hiệu quả nhất. Nếu không làm được điều đó, chúng ta phải chỉnh lại thậm chí bỏ luôn animation đó nếu nó không thực sự cần thiết.
Một điều đáng lưu tâm nữa là, animation nên theo thiên hướng art( nghệ thuật) hơn là science (nghiên cứu khoa học khô cứng), bởi vậy khi một animation được tạo ra, hãy trải nghiệm và test chúng thật kỹ càng trước khi ra mắt cho người dùng.
Nguồn
- The ultimate guide to proper use of animation in UX
- Discover the expanded Material Design motion guidelines
- Школа мобильного дизайна — Анимация в интерфейсах
- Designing Interface Animation: Meaningful Motion for User Experience
- Creating Usability with Motion: The UX in Motion Manifesto
- Jedi Principles of UI Animation
- Getting started with UI motion design
