<style type="text/css">.wpb_animate_when_almost_visible { opacity:1; }</style>


Sử dụng animation để tăng trải nghiệm người dùng (UX) trên di động

Sử dụng animation để tăng trải nghiệm người dùng (UX) trên di động

Những hình ảnh động được thiết kế tốt tạo ra trải nghiệm mới mẻ và đầy sáng tạo. Trong thiết kế lấy người dùng làm trung tâm, nơi người dùng tập trung chủ yếu, animation thực sự tạo ra cảm giác thú vị và hào hứng khi người dùng khám phá.

Lợi ích của animation 

Animation (Hoạt ảnh) trong các ứng dụng dành cho thiết bị di động có mục đích rõ ràng và hợp lý. Nó làm giảm tải nhận thức về thời gian load trang, thay đổi và thiết lập một sự hồi tưởng tốt hơn trong các mối quan hệ không gian. Nhưng có một điều nữa. Animation mang giao diện người dùng trở nên sống động hơn.
Lý tưởng nhất là hoạt ảnh trong ứng dụng nên:
Cung cấp phản hồi rõ ràng để đáp ứng các hành động của người dùng.
Cung cấp trạng thái hệ thống cho người dùng.
Hướng dẫn và dạy người sử dụng làm thế nào để tương tác với giao diện.

Phản hồi bằng hình ảnh

Phản hồi bằng mắt thường rất quan trọng trong thiết kế giao diện người dùng. Trong thực tế, các nút bấm và điều khiển đáp ứng với sự tương tác của chúng tôi, đây là cách chúng tôi mong đợi mọi thứ hoạt động. Và sự tương tác đáp ứng khuyến khích việc khám phá sâu hơn một ứng dụng bằng cách tạo ra các phản ứng hợp lý với từng tương tác mà người dùng tạo ra. Khi có sự kiện đầu vào, hệ thống phải cung cấp xác nhận trực quan.

Nút và Điều khiển

Các yếu tố giao diện người dùng như nút và điều khiển nên hiển thị dễ nhìn, mặc dù chúng có thể nằm phía sau một lớp thủy tinh. Để thu hẹp khoảng cách đó, tín hiệu hình ảnh và chuyển động thừa nhận đầu vào ngay lập tức và chuyển động theo những cách nhìn và cảm thấy giống như thao tác trực tiếp.
interaction-animation
 
Tại mỗi điểm tương tác của người dùng là những phản ứng đáp lại.
Phản hồi bằng hình ảnh động hấp dẫn người dùng. Thật tuyệt khi nhấp qua ứng dụng và luôn cảm thấy như bạn biết điều gì đang xảy ra.
Nó tạo ra sự rõ ràng trong đầu vào của người dùng thông qua các phản ứng trực quan với tương tác của người dùng. Thực hiện phản ứng trực quan các tương tác người dùng.

Animation trạng thái Hệ thống

Người dùng muốn kiểm soát và tin rằng ứng dụng hoạt động như mong đợi. Có thể nói rằng người dùng luôn không thích bất ngờ. Hoạt ảnh cung cấp thông báo thời gian thực về trạng thái các quy trình của ứng dụng, cho phép người dùng nhanh chóng hiểu được điều gì đang xảy ra.
 
 
Nguồn: Dribbble.
Một hoạt ảnh nổi tiếng cho nhóm này là "kéo xuống để làm mới", bắt đầu quá trình cập nhật nội dung trên thiết bị di động.
update-animation
 
Nguồn: Dribbble.
Animation cũng rất hữu ích khi mới bắt đầu. Việc người dùng yêu cầu một chiếc UX hoàn hảo, và những chuyển tiếp suôn sẻ và các hình ảnh động tốt trong onboarding (quá trình giúp khách hàng bắt đầu làm quen và biết cách sử dụng sản phẩm) có tác động rất lớn đến cách những người dùng lần đầu tiên sẽ tương tác với ứng dụng.
onboarding-animation
 
 
Nguồn: Dribble
Cung cấp theo dõi thời gian thực trạng thái hệ thống. Giúp người dùng có thể nhanh chóng hiểu được trạng thái hiện tại và trả lời câu hỏi "Tôi ở đâu?" trong ứng dụng.

Chuyển đổi có ý nghĩa

Bạn nên sử dụng hình ảnh động để điều hướng người dùng giữa các ngữ cảnh định hướng, giải thích sự thay đổi trong sắp xếp các phần tử trên màn hình và tăng cường cấu trúc phần tử. Thiết kế chuyển động có thể hướng dẫn một cách hiệu quả sự chú ý của người dùng bằng cả phương thức thông tin.
trasitions
 
Người dùng chọn một mục hoặc phần tử của thẻ và phóng to vào chế độ xem chi tiết.

Kết nối chuyển tiếp trực quan

Bạn nên tạo kết nối trực quan giữa các trạng thái chuyển tiếp thông qua màu sắc và các yếu tố liên tục. Quá trình chuyển đổi giữa hai trạng thái thị giác phải rõ ràng, trơn tru và dễ dàng.
ket-noi-chuyen-tiep
 
Di chuyển một phần tử nhất định làm rõ sự chuyển tiếp. Nguồn: Dribbble.

Tạo thứ tự thời gian

Animation hỗ trợ hệ thống phân cấp thông tin, truyền tải nội dung nào quan trọng nhất bằng cách tạo ra một con đường để theo dõi.
Tránh các thứ tự không liên kết như trong ví dụ dưới đây.
animation-ko-lien-ket
 
Tất cả các yếu tố xảy ra cùng một lúc không cho thấy cái nào là quan trọng. 
Thời gian của các phần tử chuyển tiếp phải trôi chảy như trong ví dụ dưới đây.
chuyen-tiep-lien-ket
 
 

Chi tiết sáng tạo

Việc sử dụng Animation cơ bản nhất là trong quá trình chuyển đổi, nhưng một ứng dụng thực sự có thể làm hài lòng người dùng khi hoạt ảnh được sử dụng theo những cách ngoài phạm vi hành động chuẩn. Nó có thể tồn tại trong tất cả các thành phần của ứng dụng và ở tất cả các quy mô, từ biểu tượng chi tiết đến các chuyển tiếp và hành động chính.
 
Các biểu tượng thay đổi từ hình này sang ảnh khác để phục vụ các chức năng kép vào các thời điểm khác nhau. Nguồn; Vật liệu thiết kế.

Animation tạo cảm giác vui vẻ

Ảnh động có sức mạnh để khuyến khích người dùng thực sự tương tác. Họ có thể mang lại sự đồng cảm trong trải nghiệm người dùng và đầy cảm xúc.
fun-animation
 
brokkoli đi bộ . Hình ảnh hoạt hình của Jason Booth

Kết luận

Thiết kế cần sự chu đáo và cẩn thận. Sự chú ý đến từng chi tiết là chìa khóa thành công của bạn, làm cho tương tác giữa người dùng và máy tính dễ dàng hơn. Và thiết kế chuyển động chu đáo có thể giúp việc tương tác và giao tiếp hiệu quả hơn nhiều. Sản phẩm của bạn càng dễ sử dụng hơn, thì càng nhiều khả năng là khách hàng sẽ sử dụng nó.