The Visceral Emotional như đã đề cập trong bài Psychology principles based on Human’s Emotions, thì đây là cấp độ đầu tiên trong 3 cấp độ có thể tạo ra cảm xúc người dùng.

Cảm xúc sẽ được tạo ra thông qua thị giác và sự tương tác của người dùng lên sản phẩm. Do đó, đây chính là nơi để các bạn UI Designer thể hiện kỹ năng của mình. Ngoài năng khiếu về thẩm mỹ, và các kiến thức nền tảng của Graphic Design, chúng ta nên ghi nhớ vài quy tắc về tâm lý sau đây để làm tốt hơn.

1. Bộ luật Gestalt:

1.1 Similarity: Luật tương đồng

Mắt người có xu hướng kết nối các yếu tố tương tự thành một nhóm, và não bộ sẽ cho rằng những yếu tố này phục vụ cùng một mục đích như nhau.

Vì thế, khi thiết kế hãy xử lý các yếu tố giao diện có cùng chức năng hay nội dung giống nhau.

Ứng dụng: Navigation, Galleries, Cards, Banners, Content, Pagination.

1.2 Continuation: Luật tiếp diễn

Mắt người thường xem xét các yếu tố được sắp xếp một cách liên tục là một nhóm. Luật này khá liên quan tới tính đối xứng và tương đồng. Bằng cách tạo ra các yếu tố tương tự và lặp đi lặp lại theo một chuỗi, chúng ta có thể định hướng người dùng theo hướng chúng ta muốn. Giúp việc đọc thông tin mạch lạc và rõ ràng hơn.

Carousel là một dạng thiết kế áp dụng luật này, cung cấp người dùng dấu hiệu vẫn còn thông tin để xem.

Ứng dụng: Menu & Submenu, Lists, Product Arrangements, Carousels, Services, or progress/process.

1.3 Closure: Luật gần giống

Khi nhìn vào một hình ảnh không đầy đủ, não bộ sẽ dựa vào kinh nghiệm trước đó và lấp đầy phần còn lại của hình ảnh để hoàn thiện nó.

Đây là một luật thường xuyên được sử dụng trong thiết kế Graphic hoặc Logo. Tuy nhiên trong thiết kế ứng dụng, chúng ta có thể dùng cho các thiết kế icon, loading.

Ứng dụng: Icon, Loading, Data visualization

1.4 Proximity: Luật gần nhau

Đây là một luật quan trọng trong thiết kế UI, vì mắt người sẽ bất coi bất kỳ yếu tố liền kề là một nhóm.

Khi thiết kế, tôi cực kỳ chú ý vào việc sử dụng khoảng cách để nhóm các yếu tố lại với nhau. Thường chia các nhóm lớn bằng khoảng cách lớn, các nhóm nhỏ hơn bên trong nhóm lớn bằng khoảng cách nhỏ hơn.

Ứng dụng: Navigation, Galleries, Cards, Banners, Content, Pagination.

1.5 Symmetry and Order: Luật đối xứng

Não của chúng ta thích nhìn những thứ đối xứng và cân bằng. Đây gần như là luật được sử dụng thường xuyên và an toàn nhất trong mọi lĩnh vực thiết kế. Nó giúp chúng ta tạo ra được cảm giác vững chắc và trật tự.

Khi thiết kế các sản phẩm yêu cầu sự đơn giản, trực quan và hài hoà. Tôi thường áp dụng tính đối xứng vào đó, nó cũng giúp người xem cảm thấy thoải mái hơn khi cần tập trung vào những gì quan trọng. Mặt trái của nó là nếu quá lạm dụng, sản phẩm có thể trở nên buồn chán và đơn điệu. Thường thì tôi hay áp dụng cho phần header hoặc CTA để nhấn mạnh và kêu gọi hành động tốt hơn.

Ứng dụng: Galleries, Banners, Content-heavy, Product Displays, Listing, Navigation.

1.6 Figure/Ground: Luật chính phụ

Luật này nói về việc mắt người có xu hướng chú ý trước những thứ được tách hẳn ra khỏi nền của chúng. Hoặc những nhóm được đóng khung lại với nhau.

Thông thường, tôi sử dụng luật này để định hướng mắt người dùng, giúp họ xem trước những thông tin quan trọng, thường là thiết kế dạng card đi kèm dropshadow nhẹ để thành 1 lớp phía trên so với nền. Ngoài ra đóng khung các nhóm lại cũng là 1 cách để áp dụng quy luật này.

Ứng dụng: Cards, Content, Listing, Services, Summary

1.7 Common Fate: Luật đồng hướng

Các yếu tố di chuyển theo cùng một hướng thì sẽ được xem là có liên quan với nhau nhiều hơn so với các yếu tố đứng yên hoặc di chuyển theo một hướng khác. Ứng dụng luật này sẽ giúp chúng ta thiết lập mối quan hệ giữa các nhóm và trạng thái.

Tôi thường sử dụng luật này rõ rệt hơn khi làm animation. Tuy nhiên, chúng ta vẫn có thể áp dụng vào nhiều yếu tố khác nhau.

Ứng dụng: Navigation/Dropdown, Collapse, Accordions, tooltips, Product Sliders, Parallax Scrolling, and Indicators.

2. Focal point: Tiêu điểm

Khi nhìn vào một thứ gì đó, mắt chúng ta có xu hướng nhìn vào yếu tố nổi bật nhất đầu tiên. Hiểu được hành vi này, sẽ giúp chúng ta tạo ra “1 điểm neo” trong thiết kế, từ đó điều hướng người dung xem nội dung theo kịch bản ta muốn.

Ứng dụng: Content, LandingPage, Pricing, Product Page, Banner.

3. Von Restorff Effect:

Hay còn gọi là hiệu ứng cách ly, mô tả về hành vi của con người có xu hướng chú ý và ghi nhớ những yếu tố tách biệt hẳn với phần còn lại xung quanh. Quy luật này dễ bị nhầm lẫn với luật Focal point (Tiêu điểm). Điều khác biệt chính là các yếu tố ứng dụng quy luật này thường đứng tách biệt 1 mình, và không có chức năng phụ là điều hướng thông tin tiếp theo cho người dùng.

Ứng dụng: Pricing Table, Promotion Banner, Premium Upgrades.

4. Visceral Reactions:

Hãy tạo ra một trải nghiệm hấp dẫn về mặt thị giác, giữa trên những kinh nghiệm của người dùng trong thế giới thực. Nó giống như việc chúng ta dễ cười hơn khi xem một video có lồng tiếng cười ở mỗi đoạn đùa giỡn cao trào. Người dùng sẽ thích thiết kế của chúng ta nếu như nó khiến họ cảm thấy thoải mái và tốt đẹp.

Ứng dụng: Product image, Illustration, Photography.

5. Psychology of Color: Tâm lý của màu sắc

Đã có nhiều nghiên cứu được thực hiện chỉ ra màu sắc có tác động nhất định tới tiềm thức của chúng ta. Quan điểm về màu sắc cũng có sự khác nhau giữa giới tính, tôn giáo và nền văn hoá.

Ngoài ra, chúng ta cũng không được quên các màu sắc quy định phản hồi của hệ thống đã được sử dụng rộng rãi từ sớm:

• Đỏ: Báo lỗi
• Xanh lá: TThành công
• Xanh dương: Đang tiến hành
• Vàng: Cảnh báo

6. Psychology of Shapes: Tâm lý của hình dạng

Giống với màu sắc, tiềm thức của con người cũng có những phản ứng khác nhau với các dạng hình dáng khác nhau. Ví dụ:

• Hình tròn, bầu dục và elip: Gửi gắm một thông điệp tích cực, thường liên quan tới cộng đồng hoặc các mối quan hệ
• Hình vuông và tam giác: Mang một thông điệp mạnh mẽ, thường liên quan tới sức mạnh và sự ổn định.
• Các đường thẳng đứng: đại diện cho cường độ, sức mạnh hoặc sự gây hấn
• Các đường thẳng ngang: đại diện cho sự bình tĩnh, bình đẳng hoặc yên tĩnh

Xem thêm về Moodlines: https://zevendesign.com/mood-lines-giving-designs-attitude/

7. Dual-Coding Theory:

Lý thuyết này giải thích rằng, con người đòi hỏi thông tin bằng hình ảnh và ngôn ngữ để xử lý thông tin một cách nhanh nhất. Như tôi có nói trong bài phát biểu “How the animation delights user experience” rằng con người là loài động vật thị giác, não bộ của chúng ta xử lý hình ảnh nhanh gấp 60 ngàn lần so với chữ viết, và vì thế để có hiệu quả cao nhất. Trong thiết kế chúng ta không nên xoá bỏ cả phần chữ viết giải thích.

Dễ thấy rõ ràng nhất là Navigation Bar của ứng dụng, hầu hết các dụng mới hoặc có các chức năng phức tạp đều được thiết kế đủ cả icon và label.

Trước đây, tôi có post 1 giải pháp cho việc này ở link dribbble. Và may mắn được chọn là một design tiêu biểu 2019: https://uxdesign.cc/2019-design-in-review-aac34446edb1

8. Parallel Design: Thiết kế song song

Mắt người có xu hướng thấy rằng các yếu tố song song có liên quan với nhau nhiều hơn các yếu tố khác. Tôi thường xử dụng nguyên lý này để phân 2 nhóm nội dung khác nhau trong cùng một màn hình. Dễ thấy nhất có lẽ là màn hình Facebook messenger, khi story được xếp song song dọc và tin nhắn xếp song song ngang.

9. Common Region: Vùng chung

Đây là một nguyên tắc khá giống với luật Similarity trong bộ luật Gestalt, tuy nhiên nó không dừng lại ở việc giống nhau. Các vùng chung được tạo ra thông qua cách chúng ta sử dụng Divider bằng line, shape hoặc màu sắc.

Nếu là một screen đòi hỏi user phải scroll nhiều để xem nội dung, chúng ta nên có những cách để phân chia rõ rệt hơn là chỉ dùng spacing.

Ứng dụng: Listing, New feeds.

10. Scanning Patterns:

Dịch ra tiếng việt nghe có vẻ không được hay lắm là “Các Mẫu quét”. Theo các nghiên cứu khác nhau từ các tổ chức hoặc nhóm như NNGroup, UXPin,… thì có 2 mẫu quét được sử dụng phổ biến nhất là “F” và “Z”.

• Mẫu F được sử dụng một cách rộng rãi nhất, đặc biệt là đối với các trang web có lượng nội dung lớn.
• Mẫu Z được dùng cho các trang web không tập trung quá nhiều vào chữ, thường nhấn mạnh Call-to-Action vào cuối cùng.

Hiểu được các mẫu này, chúng ta có thể chọn layout và xếp đặt các yếu tố một cách hiệu quả để đạt được mục đích thiết kế.

Xem tiếp cấp độ 2 – The Behavioral Emotional