Yếu tố cơ bản của UI Design: Interaction và Animation | JAMstack Vietnam

Công việc của UX/UI Designer không chỉ đơn thuần là thiết kế giao diện đẹp mắt mà họ cần tạo ra những trải nghiệm mượt mà, hữu ích và ấn tượng để thu hút người dùng. Những trải nghiệm này có thể được cải thiện thông qua ngôn ngữ, hình ảnh, cách sắp xếp bố cục, nhưng phần quan trọng nhất là UI interaction và Animation.

Mặc dù hai yếu tố này liên quan nhiều đến quá trình phát triển website, nhưng điều này không đồng nghĩa là UX/UI Designer phải học code. Họ cần nắm được những kiến thức cơ bản, tham khảo thật nhiều web/app và tích lũy kinh nghiệm từ những phản hồi từ người dùng. Từ đó, UX/UI Designer có thể lên ý tưởng hoặc trực tiếp tham gia vào quá trình tạo lập Interaction và Animation hợp lý, gia tăng trải nghiệm người dùng.

Bài viết dưới đây sẽ giải thích sơ lược cơ bản về Interaction, Animation và một số lưu ý nhỏ khi thực hiện dự án.

Khái niệm UI Interaction và Animation

UI Interaction là gì?

UI Interaction là tất cả những phản hồi của web/app đáp trả lại những tương tác của người dùng nhằm tạo ra một sản phẩm số có tính “con người” hơn. Đây là mục tiêu mà bất kỳ nhà phát triển web/app nào đều hướng tới nhằm tạo ra những trải nghiệm tốt hơn, từ đó, phát triển về thương hiệu, doanh số và các lợi ích thực tế khác.

UI Interaction bao gồm Macro-interactions (các tương tác tính theo đơn vị trang web) và Micro-interactions (các tương tác tính theo các vật thể trong trang). Trong đó, Macro-interactions đã được chú ý từ lâu với các hiệu ứng chuyển trang mượt mà, còn Micro-interactions đang dần trở thành xu hướng hiện nay và nhận được nhiều ý kiến tích cực từ người dùng.

Animation là gì?

Animation là những hiệu ứng chuyển động của phần tử trên web/app nhằm tạo ra sự sinh động cho sản phẩm số. Những yếu tố động này đã trở thành một phần không thể thiếu cho web/app hiện nay và được áp dụng vô cùng đa dạng, phong phú.

Những hiệu ứng này có thể được cài đặt kích hoạt tự động mà không cần sự tác động của người dùng, ví dụ như slide ảnh tự động. Ngược lại, một số animation cần có sự tác động từ người dùng khi hover (trỏ chuột), scroll (lăn chuột), click (bấm chọn),... Lúc này, Animation có chức năng tương tự UI Interaction, phản hồi tương tác của người dùng.

UX/UI Designer là người lên ý tưởng và chịu trách nhiệm về việc áp dụng UI Interaction và Animation trên web/app. Do đó, việc truyền tải đầy đủ các ý tưởng cho developer và kiểm tra kết quả cuối cùng là một phần trong phạm vi công việc của chức danh này.

Lưu ý khi áp dụng UI Interaction và Animation

Chuyển tiếp giữa các trang

Trước khi lên kế hoạch về UI Interaction và Animation, UX/UI Designer nên kết hợp với UX Writer để lên user flow, nhằm thống nhất được nội dung và thiết kế, tạo sự liền mạch cũng như là gia tăng trải nghiệm người dùng. Sau đó, Designer có thể tạo ra UI Interaction và Animation phù hợp khi di chuyển từ trang A đến trang B và C.

Trong quá khứ, Animation không được áp dụng khi chuyển trang hoặc bị giới hạn bởi đặc thù thiết bị. Tuy nhiên, sự phát triển công nghệ với hàng loạt các thiết bị mới ra đời đã tăng cơ hội để tạo ra những hiệu ứng chuyển động thú vị hơn. Mặc dù điều này mang lại nhiều không gian sáng tạo cho UX/UI Designer, nhưng chúng cũng có thể gây ra khó khăn, bất cập khi thực hiện responsive mobile.

Để lựa chọn hiệu ứng phù hợp, UX/UI Designer cần lưu tâm một số vấn đề sau:

• Người dùng dễ cuốn hút bởi việc chuyển trang thông qua hoạt động click (bấm chọn nút) hay scroll/swipe (lăn chuột hoặc vuốt màn hình) hơn.

• Loại chuyển động nào nên được sử dụng - dissolve (biến mất), swipe (vuốt màn hình), scale (tăng/ giảm dần tỉ lệ),...

• Hiệu ứng nên kéo dài bao lâu (nhanh hay chậm, bao nhiêu giây là phù hợp?).

Loại nội dung trên web/app cũng ảnh hưởng đến quyết định lựa chọn hiệu ứng. Một số đặc thù nội dung phù hợp với sự chuyển động chậm, trong khi đó, một số nội dung thích hợp với chuyển động nhanh. iBook - ứng dụng đọc sách của Apple là một ví dụ tiêu biểu về sự chuyển động giữa các trang giao diện.

Khi hiệu ứng “page curl” - cuộn trang được áp dụng, người dùng vô cùng thích thú với sự mới mẻ này. Tuy nhiên, hiệu ứng lặp lại nhiều lần, làm thời gian chuyển trang tốn khá nhiều thời gian và tạo cảm giác khó chịu cho người dùng. Trong khi đó, nhu cầu của người dùng chỉ là đọc sách, thu thập thông tin nhanh nhất và thoải mái nhất.

Đây là một bài học quý giá mà bất kỳ UX/UI Designer nào cũng cần biết và suy ngẫm: luôn đề cao tính khả dụng và hữu dụng lên trước tính thẩm mỹ.

Sự tương tác giữa các phần tử trên trang

Macro-interactions thường xuất hiện khá rõ rệt và gây chú ý mạnh, ngược lại, micro-interactions lại khá nhỏ và đôi khi người dùng không hề để tâm. Tuy nhiên, chính những thiết kế “nhỏ xinh” giữa các phần tử trên trang lại tạo ra những trải nghiệm thực sự tuyệt vời cho người dùng.

Những tương tác này là sự phản hồi của web/app tới người dùng nhằm thông báo hành động của họ đã được ghi nhận. Điều này vô cùng quen thuộc trong cuộc sống hàng ngày.

Chẳng hạn, khi bật công tắc đèn, ánh sáng không hiện lên. Tuy nhiên, ta vẫn nghe âm thanh của chiếc công tắc, chứng tỏ hành động của chúng ta đã được thực hiện. Như vậy, vấn đề đèn không sáng có thể do chiếc bóng đèn bị hỏng hoặc do nguồn điện bị ngắt.

Tương tự như ví dụ trên, sự phản hồi của web/app là vô cùng quan trọng dù kết quả của hành động đó ra sao. Dưới đây là một số ví dụ về phản hồi cơ bản mà bất kỳ website nào cũng cần có:

Các biểu mẫu có các hướng dẫn nhập thông tin thông qua ký hiệu * cho các trường bắt buộc, chú thích chữ cho các trường cần giải nghĩa (ví dụ như trường mật khẩu),... Khi người dùng điền thiếu thông tin hoặc thông tin chưa phù hợp, website cần xuất hiện các thông báo cụ thể như “Tên người dùng này đã được sử dụng, mật khẩu không đúng, email không tồn tại, mật khẩu cần phải đủ 6 ký tự,...”. Việc tô đỏ các thông báo này giúp người dùng nhận biết nhanh chóng, dễ dàng hơn về lỗi xảy ra.

Khi người dùng tương tác với nút bấm, hiệu ứng hover (đổi màu, đổ bóng,...) giúp người dùng nhận biết hành động của họ đã được ghi nhận.

Những ví dụ trên chỉ là phần nổi của tảng băng chìm. Bất cứ khi nào người dùng tương tác với các yếu tố trên trang, họ đều cần có tín hiệu hữu ích từ web/app. Tuy nhiên, UX designer không được lạm dụng UI interaction và Animation. Đối với người bị rối loạn tiền đình, sự chuyển động quá nhiều có thể sẽ làm họ hoa mắt hoặc có cảm giác say sóng.

Kết

Để tạo ra những trải nghiệm web/app ấn tượng, Designer cũng nên dành thời gian tìm hiểu về các nguyên tắc chuyển động. Khi tìm ý tưởng khi thiết kế các yếu tố tương tác UI Movement , là nguồn cảm hứng chất lượng để UX/UI Designer tham khảo các Animation và Interaction khác nhau.

Nguồn: JAMstack Vietnam