facebook pixel

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

7 phút đọc
Yếu tố cơ bản của UI Design: Interaction và Animation

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ỹ. 

Đọc thêm “Giao diện UI của bạn không phải là bộ phim Disney” để có thêm những thông tin hữu ích về Animation và UI interactions trong trải nghiệm web/app.

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.

JAMstack Vietnam sẽ tiếp tục cập nhật các thông tin hữu ích liên quan tới các yếu tố cơ bản của UI Design. Các bạn nhớ theo dõi chúng tôi nhé.

BẤM VÀO ĐÂY để nhận tư vấn 1-1 từ đội ngũ chuyên nghiệp của chúng tôi.

share on facebook share on twitter share on pinterest
BÀI VIẾT LIÊN QUAN
Vòng đời khách hàng - Tối ưu chuyển đổi trên từng điểm chạm
Trên con đường kinh doanh, vòng đời khách hàng là một hành trình dẫn đến sự thành công bền vững. Từ khi lần đầu khách hàng tiếp xúc với thương hiệu đến sau khi giao dịch hoàn tất, mỗi điểm chạm đều có vai trò quan trọng giúp nâng cao tỷ lệ chuyển đổi. Do đó, việc khéo léo tối ưu hóa mỗi bước trong quy trình này là chìa khóa để nâng cao hiệu quả kinh doanh.
8 phút đọc
Chân dung người dùng: Phát triển sản phẩm lấy người dùng làm trung tâm
Xây dựng chân dung người dùng là một cách tuyệt vời để đảm bảo ứng dụng tạo được một sản phẩm số phù hợp và mang tính cá nhân hoá đối với từng nhóm người dùng cụ thể. Trong bài viết này, chúng ta sẽ khám phá cách xây dựng chân dung người dùng có thể trở thành kim chỉ nam cho việc tạo ra các sản phẩm số đáp ứng nhu cầu khách hàng tốt nhất.
10 phút đọc
Design Thinking và Visual Thinking trong phát triển website - sản phẩm số
Sự khác biệt chính giữa tư duy thiết kế (Design Thinking) là một phương pháp giải quyết vấn đề trong quá trình thiết kế giao diện. Trong khi đó tư duy trực quan (Visual Thinking) là tập hợp các công cụ có thể khiến các giải pháp hoặc ý tưởng phức tạp trở nên dễ hiểu hơn bằng cách trực quan hoá chúng.
8 phút đọc
Tối ưu UX: Cái bẫy của sự “thấu hiểu người dùng” trong sản phẩm số
Việc thấu hiểu người dùng có thể nói là một yếu tố tiên quyết khi tối ưu UX và phát triển sản phẩm số. Tuy nhiên, sự quá tập trung vào người dùng cũng có thể dẫn đến một cái bẫy nguy hiểm - vòng lặp chết của sản phẩm (Product Death Cycle). Bài viết này sẽ giúp bạn tìm hiểu về nguyên nhân và cách tránh rơi vào tình thế khó khăn này.
9 phút đọc

KINDLY LEAVE YOUR INFOMATION, WE WILL RESPONSE WITHIN 24 HOURS

Representative official office
Ho Chi Minh City, Vietnam
© 2020 FLAME MEDIA JOIN STOCK COMPANY
Representative office: Unit 4-Floor 3 Block B Jamona Heights, 210 Bui Van Ba Street, Tan Thuan Dong Ward, District 7, Ho Chi Minh City. Tax identification number: 0316311107 issued by the Department of Planning and Investment of Ho Chi Minh City on June 4, 2020.
Email: hello@jamstackvietnam.com
Site map
scroll to top
message phone zalo