Một bức ảnh hơn nghìn lời nói. Một video, một hoạt hình (animation) chuyển động sẽ trực quan hơn một bức ảnh tĩnh.
Không phải những câu chuyện dài và phức tạp, nhưng những câu chuyện đơn giản, như “này, bạn cần phải xem xét điều này ngay bây giờ” hoặc “Yêu cầu của bạn đã xong rồi đó” Tuy nhiên, mục tiêu của sử dụng animation không phải là giải trí cho người dùng, mà là đang giúp người dùng hiểu cách sử dụng ứng dụng của bạn hiệu quả nhất. Ý tưởng này được thể hiện rõ ràng trong câu trích dẫn của framework Zurb:
Animation được sử dụng trong nhiều trường hợp vừa làm đẹp vừa thực hiện một nhiệm vụ nào đó: nó có thể ảnh hưởng đến hành vi, trạng thái giao tiếp, thu hút sự chú ý người dùng và giúp người dùng nắm bắt trực quan kết quả hành động của họ. Dưới đây chỉ là một vài ví dụ để minh họa những nơi bạn có thể thêm một số animation trong giao diện người dùng của mình để cải thiện trải nghiệm:
Giúp người dùng thư giãn khi ứng dụng đang loading
Không gì buồn chán hơn là phải đợi máy tính thực hiện tác vụ tải file lên hay xuống. Animation có thể được sử dụng thay thế cho các chỉ báo tải xuống gây phiền nhiễu (mà về cơ bản chỉ nhắc nhở người dùng rằng họ đang trong trạng thái chờ đợi). Hầu như mọi trang web hoặc ứng dụng đều có thể sử dụng bộ khung màn hình cùng với animaton tinh tế khi tải nội dung hoặc ứng dụng để giữ chân người dùng.
Thay đổi trạng thái uyển chuyển mà không "giật cục"
Animation có thể được sử dụng để làm cho quá trình chuyển đổi rõ ràng hơn, do đó, rõ ràng điều gì đã xảy ra giữa nơi người dùng bắt đầu và kết thúc. Một quá trình chuyển đổi được thiết kế tốt cho phép người dùng hiểu rõ nơi tập trung sự chú ý của họ.
Adrian Zumbrunnen có một ví dụ tuyệt vời về cách scrolling animation có thể giúp người dùng duy trì maintain context khi họ nhấp vào liên kết. Chỉ cần so sánh sự thay đổi tức thời tĩnh này mà cảm thấy giống như một vết cắt cứng
Với animation
Và như bạn thấy, quá trình chuyển đổi giúp người dùng hiểu được tốc độ và luồng của giao diện. Nó cũng giúp hướng dẫn người dùng đến bước tiếp theo của một tương tác.
Kết nối liền lạc giữa các phần tử giao diện
Animation có thể tăng cường cảm giác thao tác trực tiếp.
Ví dụ: một menu icon có thể chuyển đổi mượt mà sang điều khiển phát lại và quay lại. Hiệu ứng này vừa thông báo cho người dùng về chức năng của nút trong khi thêm yếu tố tự hỏi vào tương tác. Việc chuyển biểu tượng phát thành tạm dừng cũng biểu thị rằng hai hành động được kết nối và một hành động không thể tồn tại trong khi biểu tượng kia có mặt.
Một ví dụ khác - khi nhấn nút button, dấu cộng sẽ biến thành bút chì. Điều này chỉ ra rằng bút chì là phương pháp tạo chính. Một chi tiết nhỏ như vậy có nghĩa là sự khác biệt giữa việc phải đoán điều gì sẽ xảy ra tiếp theo và biết ý nghĩa của biểu tượng ở trạng thái nào.
Làm nổi bật lỗi khi phản hồi cho người dùng
Animation có thể củng cố các hành động mà người dùng đang thực hiện
Ví dụ: mục nhập biểu mẫu có thể được tăng cường đáng kể với một số animation. Nếu đã nhập dữ liệu chính xác, animation 'gật đầu' đơn giản có thể được giới thiệu sau khi hoàn thành. Trong khi đó, 'lắc ngang' có thể được sử dụng khi từ chối đầu vào. Khi người dùng nhận thấy hình động như vậy họ ngay lập tức hiểu được hành động.
Phản hồi khi tác vụ hoàn thành
Animation có thể được sử dụng để giúp mọi người hình dung kết quả hành động của họ. Bằng cách làm theo nguyên tắc " hiển thị, đừng nói" , bạn có thể sử dụng phản hồi động để hiển thị những gì đã được thực hiện.
Trong ví dụ của Stripe bên dưới, khi người dùng nhấp vào "Thanh toán", một spinner sẽ xuất hiện trước khi ứng dụng hiển thị trạng thái thành công. Animation dấu kiểm làm cho người dùng cảm thấy như họ dễ dàng thực hiện thanh toán và người dùng đánh giá cao các chi tiết quan trọng như vậy.
Kết
Animation mạnh mẽ khi được sử dụng theo cách tinh vi. Nó thực sự quan trọng để mất thời gian và xem xét khi một hình ảnh động là và không thích hợp. Chúng ta cần nắm lấy chuyển động ngay từ đầu và nghĩ về nó như là một thành phần tự nhiên của thiết kế của chúng ta, bởi vì thiết kế không chỉ là sự trình bày trực quan. Như Steve Jobs đã nói về thiết kế:
Cảm ơn bạn!
Bài dịch được dịch và tham khảo từ: https://uxplanet.org/
Bình luận