Bộ luật GESTALT – Mô tả cách thức con người tiếp nhận một hình ảnh bất kỳ

Những nguyên tắc này giúp chúng ta hiểu cách mà mắt và não bộ phối hợp với nhau để biến các hình khối phức tạp thành những hình khối đơn giản và dễ nhận biết hơn.

1. Luật tương đồng (Similarity)

Mọi người có xu hướng cảm nhận các yếu tố có sự tương đồng về màu sắc, kích thước, hình dáng, không gian và định hướng. Thứ tự ưu tiên: màu sắc -> hình dáng -> không gian là có liên quan đến nhau.

Chi tiết về nguyên lý này

• Màu Sắc: Màu sắc là yếu tố đầu tiên và quan trọng nhất trong việc xác định sự tương đồng giữa các yếu tố. Khi các đối tượng có cùng màu sắc, mắt chúng ta tự động nhóm chúng lại với nhau vì chúng dễ dàng nhận diện hơn. Ví dụ, trong một bảng dữ liệu, các ô có cùng màu nền sẽ được coi là thuộc cùng một nhóm hoặc có cùng một loại thông tin.
• Hình Dạng: Sau màu sắc, hình dạng là yếu tố tiếp theo giúp tạo ra sự tương đồng. Các đối tượng có cùng hình dạng sẽ được nhận diện là liên quan đến nhau, ngay cả khi chúng có kích thước khác nhau. Chẳng hạn, trong một giao diện người dùng, các biểu tượng có cùng hình dạng sẽ được nhóm lại thành một bộ chức năng cụ thể.
• Không Gian: Yếu tố không gian, hay khoảng cách giữa các đối tượng, cũng đóng vai trò quan trọng trong việc xác định sự tương đồng. Các đối tượng được đặt gần nhau có xu hướng được nhóm lại thành một nhóm. Ví dụ, trong một danh sách, các mục được sắp xếp gần nhau sẽ được coi là liên quan đến nhau.
• Kích Thước và Định Hướng: Kích thước và định hướng của các đối tượng cũng ảnh hưởng đến cách chúng ta nhận diện sự tương đồng. Các đối tượng có cùng kích thước hoặc hướng đi giống nhau sẽ được nhìn nhận là có liên quan. Ví dụ, trong một thiết kế đồ họa, các đối tượng cùng kích thước hoặc cùng hướng sẽ tạo ra một cảm giác thống nhất và đồng bộ.

Trong thiết kế UI, việc sử dụng các yếu tố tương đồng giúp tạo ra trải nghiệm người dùng mượt mà và trực quan. Các nút có cùng màu sắc, hình dạng và kích thước sẽ giúp người dùng dễ dàng nhận ra chức năng của chúng và sử dụng một cách hiệu quả. Điều này giúp giảm thiểu sự nhầm lẫn và tăng cường sự nhất quán trong giao diện.

Ví dụ trên thể hiện sự tương đồng các menu chức năng, được thiết kế với sự kết hợp của icon và text phía sau, hay ở chức năng Search cũng thể hiện rõ sự tương đồng trong thiết kế.

2. Luật Liên tục (Continuation)

Mắt chúng ta có xu hướng nhìn những đối tượng được sắp xếp theo các đường thẳng hoặc đường cong, vì nó được xem là một nhóm liên quan tới nhau.

Trong thiết kế UI, việc sắp xếp các yếu tố giao diện theo các đường thẳng hoặc đường cong giúp tạo ra một bố cục rõ ràng và dễ sử dụng. Ví dụ, các biểu tượng trên một thanh công cụ được sắp xếp theo một hàng ngang hoặc các bước trong một quy trình được sắp xếp theo một đường dẫn liên tục, giúp người dùng dễ dàng hiểu và sử dụng.

Việc áp dụng nguyên lý này trong thiết kế không chỉ giúp tạo ra các bố cục hấp dẫn và dễ hiểu mà còn cải thiện trải nghiệm người dùng tổng thể. Các thông tin được đặt trên một đường liền mạch, hướng mắt người dùng đi xuyên suốt thiết kế. Điều này cũng báo hiệu cho người dùng kết thúc một phần và hướng người dùng đến một phần nội dung mới

3. Luật gần giống (Closure)

Khi nhìn vào một hình ảnh, mọi người thường có xu hướng tự động ghép nối các phần tử lại với nhau để xem toàn bộ bức tranh một cách hoàn chỉnh. Đây là một phần của quá trình nhận thức mà não bộ thực hiện để đơn giản hóa và hiểu rõ hơn về hình ảnh mà chúng ta đang nhìn thấy. Nếu có những khoảng trống hoặc phần thiếu hụt trong một hình, não sẽ cố gắng lấp đầy các khoảng trống này bằng cách sử dụng trí nhớ và kinh nghiệm trước đây để tạo ra một hình ảnh hoàn chỉnh.

Ví dụ, nếu chúng ta nhìn thấy một vòng tròn bị thiếu một đoạn nhỏ, não bộ sẽ tự động điền vào phần còn thiếu để chúng ta có thể nhận ra đó là một vòng tròn hoàn chỉnh. Điều này giúp chúng ta dễ dàng nhận biết và hiểu rõ hơn về các đối tượng xung quanh, ngay cả khi chúng không hoàn toàn đầy đủ hoặc rõ ràng.

Lợi ích của việc này

• Giảm độ phức tạp và làm cho các thiết kế trở nên hấp dẫn hơn
• Có thể truyền đạt đúng thông điệp trong một không gian nhỏ

4. Luật gần nhau (Proximity)

Chúng ta nhận thấy các đối tượng trong cùng một nhóm nếu chúng được đặt gần nhau. Ví dụ như một danh sách các lựa chọn.

Khi các yếu tố được sắp xếp gần nhau trong không gian, não bộ sẽ tự động nhóm chúng lại và nhận diện chúng như một đơn vị thống nhất hoặc có liên quan đến nhau.

Ví dụ cụ thể:

• Danh Sách Tùy Chọn: Trong một danh sách các tùy chọn, việc sắp xếp các mục gần nhau giúp người dùng dễ dàng nhận thấy rằng các mục này thuộc về cùng một nhóm hoặc cùng một chủ đề. Điều này không chỉ làm cho việc lựa chọn trở nên dễ dàng hơn mà còn giúp tăng cường trải nghiệm người dùng.
• Form Nhập Liệu: Trong một form nhập liệu, các trường thông tin như tên, địa chỉ, và số điện thoại thường được đặt gần nhau để người dùng dễ dàng nhận ra rằng chúng là các thông tin cần thiết để hoàn thành một tác vụ cụ thể.

Lợi ích của việc này

• Giúp người dùng nhận biết các đối tượng liên quan đến nhau
• Giúp người dùng dễ quét thông tin hơn, từ đó dẫn mắt người dùng đi theo một hướng có chủ đích

Bằng cách sắp xếp các yếu tố gần nhau, chúng ta có thể tạo ra các thiết kế trực quan, dễ hiểu và hiệu quả hơn. Điều này không chỉ cải thiện khả năng tìm kiếm và xử lý thông tin mà còn làm tăng trải nghiệm người dùng tổng thể.

5. Luật chính phụ (Figure – Ground)

Mắt người có khả năng nhận biết các đối tượng chính trong một hình ảnh nhờ vào các yếu tố tập trung thị giác. Khi quan sát, chúng ta có thể phân biệt các yếu tố nào được đặt ở phía trước và yếu tố nào nằm ở phía sau, tạo nên sự phân tầng giữa tiền cảnh và hậu cảnh. Quá trình này được gọi là phân biệt hình và nền (figure-ground perception).

Quá trình nhận biết dựa trên các yếu tố như sau

• Sự Tương Phản: Yếu tố quan trọng giúp mắt người xác định các đối tượng chính là sự tương phản giữa đối tượng và nền. Đối tượng có màu sắc, độ sáng, hoặc kiểu dáng khác biệt so với nền sẽ dễ dàng thu hút sự chú ý và được nhận diện là yếu tố chính. Ví dụ, một văn bản màu đen trên nền trắng sẽ nổi bật hơn và dễ đọc hơn so với văn bản màu xám trên nền xám.
• Độ Sắc Nét: Các đối tượng chính thường có đường viền rõ ràng và sắc nét, trong khi các yếu tố ở nền có xu hướng mờ hơn hoặc ít chi tiết hơn. Sự khác biệt về độ sắc nét giúp mắt người dễ dàng phân biệt giữa yếu tố tiền cảnh và hậu cảnh.
• Kích Thước và Tỷ Lệ: Các đối tượng lớn hơn và có tỷ lệ nổi bật hơn thường được mắt người nhận biết là yếu tố chính. Ngược lại, các yếu tố nhỏ hơn và ít nổi bật sẽ được xem như là một phần của nền.
• Vị Trí và Bố Cục: Đối tượng được đặt ở vị trí trung tâm hoặc các điểm nhấn trong bố cục thường được nhận diện là yếu tố chính. Vị trí và bố cục của các yếu tố trong một hình ảnh có thể dẫn dắt mắt người tập trung vào các đối tượng quan trọng.
• Sự Chuyển Động: Các yếu tố có chuyển động hoặc thay đổi về hình dạng, màu sắc sẽ thu hút sự chú ý của mắt người và được nhận diện là yếu tố chính. Trong khi đó, các yếu tố tĩnh hoặc không thay đổi sẽ được xem như là một phần của nền.

Lợi ích của việc này giúp người dùng nhận biết và tập trung thị giác vào nội dung chính muốn truyền tải

6. Luật đối xứng và trật tự (Symmetry và Order)

Mắt người có thói quen thích nhìn những thứ đối xứng và trật tự, bởi vì chúng tạo ra một ấn tượng về sự ổn định và cân bằng.

Trong thiết kế giao diện người dùng (UI), sự đối xứng và trật tự giúp tạo ra các bố cục dễ nhìn và dễ sử dụng. Các yếu tố được sắp xếp đối xứng như các nút, biểu tượng và văn bản sẽ giúp người dùng dễ dàng tìm kiếm và tương tác với các chức năng của ứng dụng hoặc trang web.

Ví dụ thường thấy trong thực tế

• Kiến Trúc Cổ Điển: Các công trình kiến trúc cổ điển thường sử dụng sự đối xứng để tạo ra cảm giác trang trọng và uy nghiêm. Ví dụ, các tòa nhà với mặt tiền đối xứng và cột trụ đều đặn sẽ mang lại cảm giác mạnh mẽ và ổn định.
• Thiết Kế Logo: Nhiều logo của các thương hiệu nổi tiếng sử dụng sự đối xứng để tạo ra hình ảnh dễ nhận biết và đáng nhớ. Ví dụ, logo của các hãng xe hơi thường có sự đối xứng để tạo cảm giác bền vững và đáng tin cậy.

Mắt người bị thu hút bởi sự đối xứng và trật tự vì chúng mang lại cảm giác ổn định, cân bằng, và thẩm mỹ. Sự đối xứng giúp bộ não dễ dàng nhận diện và xử lý thông tin, tạo ra các cảm giác tích cực và tăng cường trải nghiệm thị giác. Việc áp dụng nguyên lý đối xứng trong thiết kế không chỉ làm cho các đối tượng trở nên hấp dẫn hơn mà còn giúp cải thiện tính tiện dụng và hiệu quả của sản phẩm.

Như ví dụ trên, các địa điểm du lịch được sắp xếp theo dạng slide và có trật tự nhất định

7. Luật điều hướng (Common Fate)

Mắt của chúng ta có xu hướng bị thu hút bởi các hình dạng di chuyển theo cùng một hướng, và não bộ sẽ tự động nhóm các hình dạng này lại thành một nhóm. Đây là một phần của nguyên lý nhận thức gọi là quy luật điều hướng trong tâm lý học Gestalt.

Lợi ích của việc này giúp người dùng tạo liên kết những phần liên quan với nhau.

Ví dụ minh hoạ:

• Trình Chiếu Ảnh (Slideshows): Trên một trang web, các hình ảnh trong trình chiếu thường di chuyển cùng một hướng để người dùng có thể dễ dàng theo dõi và hiểu rằng tất cả các hình ảnh này là một phần của một nhóm hoặc một chủ đề cụ thể.
• Giao Diện Ứng Dụng: Trong các ứng dụng di động, các yếu tố điều hướng hoặc menu có thể di chuyển đồng bộ để tạo ra một trải nghiệm người dùng trực quan và mạch lạc.

Khả năng nhận biết và nhóm các hình dạng di chuyển cùng một hướng là một phần quan trọng của quá trình nhận thức thị giác. Bằng cách áp dụng nguyên lý này trong thiết kế, các nhà thiết kế có thể tạo ra các giao diện không chỉ hấp dẫn về mặt thị giác mà còn dễ hiểu và dễ sử dụng. Sự chuyển động đồng bộ giúp tạo ra một kết nối thị giác mạnh mẽ, thu hút sự chú ý và cải thiện trải nghiệm người dùng.