Thực hành thiết kế với quy luật thị giác Gestalt #1 | UX/UI
14 nguyên tắc tâm lý của Gestalt cần lưu ý khi thiết kế UX/UI (Phần 1)
Bài viết đề cập đầy đủ 14 nguyên tắc tâm lý học của Gestalt có thể ứng dụng cho lĩnh vực thiết kế UX/UI. Kỹ thuật này tập trung vào hiệu quả sáng tạo khi bố trí sắp đặt các thành phần của giao diện đồ họa người dùng (GUI - graphic user interface), và đảm bảo trải nghiệm tốt.
Lance cũng tìm thêm các ví dụ trong đời thực và các case study về thiết kế UI để bạn có thể dễ hình dung và tự áp dụng.
Nhiều quy luật tự nhiên được hình thành và “thao túng” hệ thống thị giác (bao gồm mắt và một phần của hệ thần kinh) tiếp nhận thông tin. Theo lý thuyết của Gestalt, tâm trí con người có khuynh hướng tìm kiếm sự trật tự bên trong hỗn loạn dựa trên những nét tương đồng, khuôn mẫu chung. Chúng ta luôn cố gắng đơn giản hóa hình tượng phức tạp và “biên dịch” mọi yếu tố đơn lẻ như một nhóm tổng thể (grouping).
Gestalt (tiếng Đức nghĩa là hình dạng) là một bộ gồm nhiều nguyên tắc tâm lý học nhận thức về thị giác. Nó lý giải mô thức quan sát của con người lên một cấu trúc tổ hợp nào đó.
Nguyên tắc thuộc Gestalt lần đầu được khám phá bởi một nhóm ba nhà tâm lý học ở Áo và Đức vào những năm 1920. Thành quả của Gestalt vẫn tiếp tục được hoàn thiện mở rộng hơn bởi các nhà nghiên cứu thế hệ sau.
Hệ thống Gestalt được xây trên 4 đặc tính nền tảng:
SỰ NỔI LÊN/HIỆN RA (Emergence)
Đối tượng: Một thực thể nhưng thuộc tính hay hành vi của nó không tồn tại rõ ràng.
Điều kiện: Thuộc tính hay hành vi bắt đầu tương tác trong tầm nhìn.
Ví dụ: Chiếc bóng lăn trên sân sẽ dễ được nhận ra hơn khi nó đứng yên.
Tâm trí của chúng ta có xu hướng nhìn thấy những sự vật đơn giản, rõ rệt nhanh hơn những sự vật chi tiết. Dạng tổng quát được ưu tiên thấy trước.
SỰ CỤ THỂ HÓA (Reification)
Đối tượng: Một thực thể bị khiếm khuyết một phần nhưng không làm mất đi bản chất của nó.
Điều kiện: Thông tin về không gian của thực thể đã được nhận thức trong trải nghiệm ở quá khứ của người xem.
Ví dụ: Tiếng sủa vọng ra từ phía sau cửa là của một chú chó cưng đang đứng chờ khi biết chủ gần về đến nhà (dù người chủ chưa thực sự nhìn thấy nó).
Chúng ta nhìn thấy có khả năng suy ra toàn bộ hình thức của sự vật ngay cả khi phần tử bị thiếu hoặc không đầy đủ.
SỰ ĐA TRẠNG THÁI (Multi-stability)
Đối tượng: Một thực thể với tiềm năng có nhiều hơn một trạng thái.
Điều kiện: Thông tin mà thực thể hiện diện tạo nhận thức mơ hồ, lẫn lộn với các thực thể khác trong trải nghiệm ở quá khứ của người xem.
Ví dụ: Nhìn từ bên ngoài cửa sổ, căn phòng tối nghĩa là không có người ở trong hoặc họ đang ngủ hoặc đèn đã bị hư.
Luôn có nhiều cách để chúng ta nhận thức được một sự vật. Tuy nhiên, tâm trí của chúng ta sẽ quyết định một quan điểm nào đó chiếm ưu thế hơn.
SỰ BẤT BIẾN (Invariance)
Đối tượng: Một thực thể có hình dáng hữu hình nhất định.
Điều kiện: Trạng thái thực thể thay đổi nhưng bảo toàn bản chất và sự tồn tại.
Ví dụ: Chữ nhìn ngược vẫn đọc được.
Não bộ con người tạo ra một hình chiếu đơn giản về vật thể và lưu trữ lâu dài trong tâm trí. Sự vật được nhìn nhận một cách độc lập với việc thay đổi kích thước, góc nhìn hoặc các biến đổi khác của nó.
Điều quan trọng:
Nhận thức của người dùng về các yếu tố trực quan có liên quan nhau, có xu hướng nhóm các yếu tố hình ảnh lại. Nhà thiết kế UX vận dụng những nguyên tắc tâm lý học để tổ chức nội dung hiển thị trên UI với thẩm mỹ hài hòa và dễ tiếp nhận.
Mục lục
1. Nguyên tắc Đồng Dạng - Similarity
2. Nguyên tắc Kết Nối Hợp Nhất - Uniform Connectedness
3. Nguyên tắc Cận Kề - Proximity (Invisible region border)
4. Nguyên tắc Liên Tục - Continuity
5. Nguyên tắc Vùng Bên Trong - Common Region
6. Nguyên tắc Đồng Bộ - Common Fate (Synchrony)
1. Nguyên tắc Đồng Dạng - Similarity
Các đối tượng có sự tương đồng thì có khả năng liên quan đến nhau, được xem như một nhóm và chia sẻ ý nghĩa hay chức năng chung nào đó.
Các đối tượng có thể thậm chí khác nhau về hình dạng, màu sắc hoặc kích thước nhưng vẫn sở hữu nét tương đồng nhất định để tổ hợp lại với nhau.
↪️Case study: Cụm ‘fixed tab’ hay ‘segmented control’ thường được thiết kế tuân theo nguyên tắc đồng dạng tuyệt đối về kích thước cho tác vụ nhanh hoặc trường hợp giao diện bị giới hạn hiển thị. Trái ngược là ‘scrollable tab’, kích thước bề ngang có thể linh hoạt theo độ dài text và vượt khỏi màn hình.
2. Nguyên tắc Kết Nối Hợp Nhất - Uniform Connectedness
Những yếu tố được kết nối nhau thông qua màu, các đường nét, các khung hiền hay các hình khối nào khác thì được nhìn nhận như một đối tượng thống nhất.
Trong ngữ cảnh, khi nhiều yếu tố "có vẻ" kết nối nhau đang hiển thị chung với các yếu tố khác mà không có liên kết rõ ràng nào với nhau, thì mối quan hệ kết nối đó càng được nhấn mạnh hơn như kiểu chúng thực sự hiển nhiên là vậy.
Các đối tượng có nét tương đồng sẽ được nhấn mạnh khi được gán thêm mối liên kết. (Nguyên tắc kết nối hợp nhất + Nguyên tắc đồng dạng)
↪️Case study: Thiết kế ‘menu dropdown’ theo kiểu sử dụng ‘leading visual’ là đường kẻ nối để làm rõ mối quan hệ phụ thuộc. Đồng thời các ‘leading icon’ cũng đóng vai trò duy trì sự nhất quán của cả menu.
3. Nguyên tắc Cận Kề - Proximity (Invisible region border)
Các yếu tố nằm gần nhau được coi là một đối tượng duy nhất và tách biệt khỏi các yếu tố xa hơn.
Trên bàn cân về độ thiết yếu khi đặt cạnh các yếu tố đồng dạng, thì sự cận kề được chiếm ưu thế nhận thức mạnh hơn. (Nguyên tắc cận kề > Nguyên tắc đồng dạng)
↪️Case study: Ngoài sử dụng hình khối tương đồng, việc điều chỉnh độ lệch khoảng cách giữa các đối tượng và tập hợp của chúng giúp gia tăng nhận biết về các nhóm phân biệt.
4. Nguyên tắc Liên Tục - Continuity
Hệ thống thị giác có xu hướng tránh những thay đổi đột ngột về hướng hoặc sự gián đoạn. Vì vậy, các đối tượng dù bị cắt ra hoặc bị một đối tượng khác xen vào thì chúng ta vẫn cảm nhận được sự liên tục của các đối tượng đó.
Các đối tượng xếp thành một hàng liên tục, bất kể thẳng hay cong, được nhìn nhận liên quan nhau hơn khi nằm ở vị trí ngẫu nhiên.
↪️Case study: Có thể nhận thấy ở thiết kế cho ‘carousel’ này, tỷ lệ chiếm không gian được căn chỉnh để những đối tượng bị viền màn hình cắt mất được vẫn vừa đủ hiển thị phần còn lại. Dựa trên đó, user cảm nhận được nội dung còn tiếp khi họ kéo qua phải hoặc trái. Chúng ta không cần phải bố trí thêm ‘navigation button’ dạng mũi tên. (5 chấm nhỏ ở giữa là ‘page indicator’ để thông báo trạng thái điểm dừng trang.)
5. Nguyên tắc Vùng Bên Trong - Common Region
Các đối tượng nằm trong một ranh giới rõ ràng (như vùng màu, đường viền, khung hoặc nền) được nhìn nhận là một nhóm.
Các đối tượng thường được hiểu là "có vẻ" sở hữu cùng đặc điểm hoặc chức năng.
↪️Case study: Với lượng lớn nội dung và hệ thống ‘link’ và ‘action button’ cần kiểm soát, giao diện để được sử dụng hiểu quả cần phân bố khu vực theo chủ đề. Với màn hình desktop, designer thường dùng ‘column grid’ có 8 đến 12 cột chia dọc, áp dụng bố cục ‘flex box’ hoặc ‘CSS grid’ tùy vào yêu cầu chức năng từng trang.
6. Nguyên tắc Đồng Bộ - Common Fate (Synchrony)
Các đối tượng chuyển động cùng một hướng được nhìn nhận là một nhóm.
↪️Case study: Các ‘popover’ nội dung được thiết kế thông minh với ‘micro-interaction’, vận dụng kết hợp cả 4 Nguyên tắc đồng bộ, cận kề, liên tục và đồng dạng. Dường như tất cả đối tượng đều được xem là thuộc cùng một chủ đề nào đó hay có tính tăng giống nhau.
Xem thêm:
Ref: interaction-design foundation, graybox, uxmisfit, wikipedia Image: dribbble