Ngày nay animation trong thiết kế không còn khiến ai ngạc nhiên. Animation trên website là thành phần quan trọng. Micro-interactions liên kết màn hình các trang, hiệu ứng giải thích tùy chọn, đi kèm hành động người dùng. Giao diện động giúp thiết lập feedback hoặc đơn giản thu hút sự chú ý.
Sau khi đọc đủ bài viết về animation, tôi thấy nếu không xét trường hợp cụ thể, lời khuyên thường quá chung chung. Chưa có tài nguyên web nào trình bày rõ ràng nguyên tắc và quy tắc UX cho animation trên web.
Animation Loading (Tải Trang)
Internet tốc độ cao cho phép mở web/app trong vài giây, nhưng đôi khi phải chờ tải dữ liệu lớn.
Để người truy cập đỡ chán khi chờ, hãy làm animation đẹp mắt.
Navigation và Menu (Không Cuộn)
Dropdown menu nhận được "sóng thứ 2" nhờ animation web design và sống lại như lựa chọn phổ biến cho app mobile. Cách này không chỉ giải quyết tốt việc chuyển menu chính thành giao diện nhỏ, mà là cách duy nhất thực sự hợp lý và thực tế bao phủ tất cả yếu tố điều hướng.
Ý tưởng tuyệt vời cho các bước web design. Cũng là tiền đề cho xu hướng lớn khác – nút hamburger menu, dù chúng ta không thực sự thích nó.
Gallery và Slideshow
Công cụ này chủ động dùng để hiển thị ảnh ở nhiều chế độ. Không làm phân tâm người dùng.
Designer tự quyết tốc độ và số ảnh trong chu kỳ. Nhưng quan trọng là quyết định "nhẹ nhàng" nhất. Dù tốc độ hơi khác, site có thể bị "mũi tên chỉ trích" – ý tưởng xấu cho UX.
Gallery/slideshow dễ dùng. Cách tự nhiên thể hiện chức năng album ảnh thực tế. Nhưng không nên lạm dụng metaphor. Xử lý visual chất lượng cao là tốt nhất. Animation thực tế của slider/gallery nên tối thiểu, mỗi ảnh hiển thị 5-9 giây.
Thu Hút Chú Ý
Animation là công cụ mạnh thu hút sự chú ý của visitor đến landing page hoặc website. Trước khi áp dụng, marketer cần xem xét: mục tiêu chuyển đổi, tần suất animation, cơ chế tác động lên user.
Cuộn (Scrolling)
Cách animation này hoạt động: đơn giản mặt này, phức tạp mặt kia. Phần dễ: gom vài điểm kỹ thuật thành tổng thể. Phần khó: mọi thứ tương tác như thế nào để user cảm thấy trước mặt là một đối tượng đơn nhất, hoàn thiện, sẵn sàng tương tác.
Tách loại nội dung này với loại khác, giúp user tập trung giải quyết một vấn đề cụ thể: đọc mô tả, xem ảnh, bình luận...
Page Motion (Chuyển Động Trang)
Nhờ element này, user hiểu mối quan hệ phân cấp giữa các trang web động, mục đích của chúng. Ví dụ: vài đường nét của object động mang thông tin, những đường khác là nút bấm. User hiểu trực quan ngay trước khi nhận thức rõ ràng.
Background (Nền)
Nếu background animation được tạo đúng cách, website có "sự sống" đúng cách. Vấn đề chính: sự điều độ. Lúc là các section riêng lẻ. Một số trường hợp cả ảnh phải di chuyển.