Mở đầu — vì sao bài này quan trọng
Bạn có bao giờ mở một giao diện lên và ngay lập tức "cảm thấy" nó gọn gàng, dễ nhìn — dù chưa đọc một chữ nào chưa? Ngược lại, có những màn hình khiến bạn thấy rối, mệt mắt, dù nó dùng font đẹp và màu sắc chuẩn. Sự khác biệt đó thường không nằm ở chỗ designer chọn màu gì hay font gì, mà nằm ở cách các phần tử được sắp xếp trong mối quan hệ với nhau. Đây chính là lãnh địa của Gestalt Principles.
Gestalt là một trường phái tâm lý học ra đời ở Đức đầu thế kỷ 20. Từ "Gestalt" trong tiếng Đức có nghĩa gần với "hình thái tổng thể". Ý tưởng trung tâm chỉ gói trong một câu: "Tổng thể lớn hơn tổng các thành phần" (the whole is greater than the sum of its parts). Bộ não con người không nhìn thế giới như một tập hợp rời rạc các điểm, đường, hình khối. Nó tự động nhóm, tự động tìm quy luật, tự động điền vào chỗ trống để tạo ra một bức tranh có ý nghĩa. Với tư cách là UI designer, bạn không thiết kế cho màn hình — bạn thiết kế cho bộ não đang cố gắng hiểu màn hình đó.
Ở Bài 4, chúng ta đã nói về Visual Hierarchy — dùng kích thước, độ đậm, màu sắc và khoảng cách để nói cho mắt biết "nhìn cái gì trước". Bài 5 này bổ sung một lớp nền tảng nữa: khi mắt đã nhìn tới, làm sao để nó hiểu cấu trúc — cái gì thuộc về cái gì, cái gì là một nhóm, cái gì tách biệt. Nắm được Gestalt, bạn sẽ giải thích được rất nhiều quyết định thiết kế mà trước đây bạn chỉ làm theo bản năng. Và quan trọng hơn: bạn sẽ tự tin bảo vệ quyết định của mình khi làm việc với client, PM hay engineer.
Khái niệm cốt lõi
Có nhiều nguyên lý Gestalt, nhưng trong UI hằng ngày, sáu nguyên lý sau là thứ bạn dùng đến 90% thời gian. Hãy đi qua từng cái với ví dụ giao diện cụ thể.
1. Proximity — Sự gần nhau
Đây là nguyên lý mạnh nhất và dễ áp dụng nhất. Quy tắc: những phần tử ở gần nhau được não hiểu là thuộc cùng một nhóm; những phần tử cách xa nhau được hiểu là khác nhóm. Khoảng cách nói lên mối quan hệ — mạnh hơn cả đường kẻ hay khung viền.
Ví dụ kinh điển là form. Một form đăng ký thường có cặp label + input. Nếu khoảng cách giữa label "Email" và ô nhập email của nó bằng đúng khoảng cách giữa nhóm email và nhóm mật khẩu, mắt người dùng sẽ không biết label nào thuộc field nào. Giải pháp: cho label dính sát input của nó (ví dụ 8px), còn giữa các nhóm field thì để khoảng cách lớn hơn hẳn (ví dụ 24–32px). Chỉ bằng cách điều chỉnh khoảng trắng, form bỗng trở nên rõ ràng — không cần thêm một pixel viền nào.
Proximity chính là lý do tại sao spacing system quan trọng đến vậy (chúng ta sẽ đào sâu ở Bài 9). Ở đây bạn chỉ cần nhớ nguyên tắc: khoảng cách trong-nhóm luôn phải nhỏ hơn khoảng cách giữa-các-nhóm.
2. Similarity — Sự tương đồng
Những phần tử trông giống nhau (cùng màu, cùng hình dạng, cùng kích thước) được não gom vào một loại, dù chúng nằm cách xa nhau. Đây là cách người dùng học được "ngôn ngữ" của giao diện.
Trong UI, điều này có nghĩa: mọi thứ trông giống nhau thì phải hành xử giống nhau. Nếu tất cả nút bấm được được của bạn đều là hình chữ nhật bo góc màu cam, thì người dùng sẽ ngầm hiểu "cứ thấy hình chữ nhật cam là bấm được". Nhưng nếu bạn đặt một đoạn text màu cam không bấm được, họ sẽ cố bấm vào và thất vọng. Similarity là một lời hứa — và bạn phải giữ lời hứa đó nhất quán trong toàn bộ sản phẩm.
3. Common Region — Vùng chung
Những phần tử nằm chung trong một ranh giới rõ ràng (một card, một khung nền màu, một đường bao) được hiểu là một nhóm — kể cả khi chúng cách xa nhau hoặc trông không giống nhau. Common Region mạnh hơn cả Proximity: một khung nền có thể "kéo" hai phần tử ở xa vào cùng một nhóm.
Đây là lý do card design lên ngôi. Một sản phẩm trên Shopee gồm ảnh, tên, giá, số sao, nút "Thêm vào giỏ" — năm thứ trông rất khác nhau, nhưng vì cùng nằm trong một card nền trắng, mắt lập tức hiểu "đây là một sản phẩm". Khi bạn muốn nói rõ ràng "những thứ này thuộc về nhau", một common region (card hoặc nền màu nhạt) là công cụ mạnh nhất.
4. Continuity — Sự tiếp nối
Mắt người thích đi theo đường thẳng và đường cong mượt. Những phần tử được xếp thành một đường (dọc, ngang, hoặc cong) được hiểu là liên quan và mắt sẽ "trôi" dọc theo đường đó. Đây chính là nền tảng tâm lý của grid và alignment (căn lề).
Khi bạn căn lề trái tất cả các dòng text trong một danh sách, bạn đang tạo ra một đường thẳng vô hình bên trái. Mắt trôi mượt xuống dưới. Nhưng nếu một dòng bị lệch lề vài pixel, đường thẳng đó gãy, và ngay lập tức người xem cảm thấy "có gì đó sai". Continuity giải thích tại sao căn lề cẩu thả lại khiến cả giao diện trông thiếu chuyên nghiệp — dù từng phần tử riêng lẻ đều đẹp.
5. Closure — Sự khép kín
Não có xu hướng tự điền vào chỗ trống để nhìn ra một hình hoàn chỉnh, ngay cả khi hình đó không được vẽ đầy đủ. Logo IBM với những đường kẻ ngang đứt quãng, hay logo WWF hình con gấu trúc chỉ gồm các mảng đen mà não tự "khép" thành hình con gấu — đó là Closure.
Trong UI, Closure cho phép bạn thiết kế tối giản hơn. Một icon giỏ hàng vẽ bằng vài nét vẫn được nhận ra là cái giỏ. Một carousel chỉ hiện một nửa ảnh cuối cùng ở mép phải màn hình — người dùng tự hiểu "còn nội dung nữa, vuốt sang đi". Bạn không cần vẽ đủ mọi thứ; bạn chỉ cần gợi đủ để não hoàn thành phần còn lại.
6. Figure/Ground — Hình và nền
Não luôn tự động tách một cảnh thành "hình" (đối tượng ta chú ý) và "nền" (phần phía sau). Trong UI, nguyên lý này là nền tảng của mọi lớp phủ (overlay). Khi bạn mở một modal, phần nền phía sau được làm tối đi (dim) — đó là cách bạn nói với não: "modal là figure, hãy tập trung; phần còn lại là ground, tạm quên đi". Nếu bạn quên làm tối nền, modal sẽ "trôi" lẫn vào nội dung phía sau và người dùng bối rối không biết nên tương tác với cái gì.
Sáu nguyên lý này không hoạt động độc lập — chúng chồng lên nhau và đôi khi mâu thuẫn. Kỹ năng của designer giỏi là biết nguyên lý nào đang "thắng" trong một bố cục cụ thể.
Tình huống thực tế
Tình huống 1: Form thanh toán của một ví điện tử Việt Nam
Một startup fintech ở TP.HCM (tạm gọi là PayViet) ra mắt màn hình nạp tiền. Bản đầu tiên, tỷ lệ người dùng bỏ dở ở bước nhập thông tin thẻ lên tới 38%. Đội design ngồi lại và soi bằng lăng kính Gestalt.
Vấn đề nằm ở Proximity. Form có sáu field: Số thẻ, Tên chủ thẻ, Ngày hết hạn, CVV, Số tiền, Ghi chú. Nhưng khoảng cách giữa mọi thứ đều bằng nhau — label cách input 16px, và các field cũng cách nhau 16px. Não người dùng không phân được đâu là label của đâu, phải đọc lại nhiều lần. Tệ hơn, ba field liên quan đến thẻ (số thẻ, hết hạn, CVV) không được gom nhóm về mặt thị giác, nên người dùng cảm thấy như phải điền một danh sách bất tận.
Đội design áp dụng hai thay đổi: (1) kéo label dính sát input của nó xuống còn 6px, tăng khoảng cách giữa các field lên 24px; (2) dùng Common Region — bọc ba field thông tin thẻ trong một card nền xám nhạt có tiêu đề "Thông tin thẻ", tách khỏi phần "Thông tin giao dịch". Sau khi ship bản mới, tỷ lệ bỏ dở giảm xuống còn 21%.
Bài học: Cùng một nội dung, cùng một số lượng field — chỉ thay đổi khoảng cách và nhóm gộp bằng Common Region — đã cải thiện đáng kể trải nghiệm. Người dùng không thấy ít việc hơn, họ chỉ thấy công việc được tổ chức rõ ràng hơn.
Tình huống 2: Bảng giá của một SaaS
Một công ty SaaS phục vụ doanh nghiệp SME đăng bảng giá ba gói: Cơ bản, Chuyên nghiệp, Doanh nghiệp. Bản đầu, mỗi gói là một cột với danh sách tính năng. Nhưng khách hàng phản hồi qua khảo sát rằng họ "không hiểu gói nào có gì" và tổng đài nhận rất nhiều câu hỏi trùng lặp.
Soi kỹ thì thấy hai lỗi Gestalt. Thứ nhất, các dòng tính năng trong mỗi cột được căn giữa (center-aligned), nên không có đường thẳng nào để mắt trôi theo — vi phạm Continuity, khiến việc so sánh gói này với gói kia cực kỳ mệt. Thứ hai, tên tính năng và giá trị (ví dụ "Số người dùng" và "10") nằm quá gần với dòng tính năng bên dưới, khiến người ta không biết con số thuộc dòng nào — vi phạm Proximity.
Đội thiết kế lại: chuyển toàn bộ danh sách sang căn lề trái để tạo đường thẳng dọc rõ ràng (Continuity), và dùng các đường phân cách ngang mờ giữa từng dòng để mỗi hàng tính năng thành một common region trải ngang cả ba cột. Giờ người dùng chỉ cần quét mắt theo một hàng ngang là so được cả ba gói. Số câu hỏi gửi về tổng đài về bảng giá giảm rõ rệt trong tháng kế tiếp.
Bài học: Continuity biến một bảng rối thành một bảng "quét được". Khi nội dung cần so sánh, hãy tạo ra những đường thẳng để mắt bám theo — cả dọc lẫn ngang.
Tình huống 3: Điều hướng bottom bar của một app đặt đồ ăn
Một app giao đồ ăn khu vực Đông Nam Á có thanh điều hướng dưới cùng gồm năm icon: Trang chủ, Tìm kiếm, Đơn hàng, Khuyến mãi, Tài khoản. Nhóm QA phát hiện người dùng hay bấm nhầm giữa "Khuyến mãi" và "Tài khoản".
Nguyên nhân là vi phạm Similarity kết hợp với Proximity. Bốn icon đầu dùng style outline (nét viền), riêng icon "Tài khoản" lại là ảnh avatar tròn đầy màu. Về mặt Similarity, avatar trông "khác loại" nên người dùng vô thức xem nó như một nhóm riêng — điều này thực ra tốt. Nhưng vấn đề là khoảng cách giữa năm icon bằng nhau tuyệt đối, trong khi hai icon "Khuyến mãi" (có badge đỏ nhấp nháy) và "Tài khoản" lại thu hút sự chú ý ngang nhau, khiến ngón tay do dự.
Giải pháp cuối cùng: giữ nguyên năm icon nhưng thống nhất toàn bộ về style outline để tạo Similarity đồng đều, chỉ đổi màu khi active; đồng thời tăng nhẹ vùng chạm (touch target) mỗi icon lên tối thiểu 48x48px để hai mục cạnh nhau không "lẫn" vùng bấm. Tỷ lệ bấm nhầm giảm hẳn.
Bài học: Similarity tạo cảm giác nhất quán và dễ đoán. Khi các phần tử cùng cấp bậc (như các tab điều hướng) trông đồng nhất về style, người dùng học cách dùng chúng nhanh hơn và ít sai hơn.
Hướng dẫn từng bước
Đây là quy trình để "soi Gestalt" cho bất kỳ màn hình nào bạn đang thiết kế hoặc review.
Bước 1 — Nheo mắt (squint test). Mẹo cổ điển: nheo mắt lại nhìn màn hình cho tới khi mọi thứ mờ đi. Lúc này bạn không đọc được chữ, chỉ thấy các mảng khối. Hãy tự hỏi: các mảng có tự nhóm lại thành những cụm hợp lý không? Nếu bạn thấy các cụm mờ trùng khớp với các nhóm nội dung logic, Proximity của bạn đang tốt.
Bước 2 — Kiểm tra Proximity theo cặp. Với mỗi nhóm nội dung, đo khoảng cách trong-nhóm và khoảng cách giữa-các-nhóm. Đảm bảo khoảng cách giữa-các-nhóm luôn lớn hơn rõ rệt (thường ít nhất gấp đôi) khoảng cách trong-nhóm.
Bước 3 — Kiểm tra alignment (Continuity). Bật đường lưới hoặc dùng lệnh hiển thị ranh giới trong Figma. Mọi phần tử có nằm trên một số ít đường thẳng dọc/ngang không? Nếu có nhiều điểm lề khác nhau lộn xộn, hãy gom về một hệ căn lề nhất quán.
Bước 4 — Kiểm tra Similarity. Liệt kê các phần tử "cùng loại" (tất cả nút chính, tất cả link, tất cả tiêu đề mục). Chúng có trông thật sự giống nhau không? Và ngược lại: có phần tử nào trông giống nút bấm nhưng thực ra không bấm được không? Xóa mọi mâu thuẫn.
Bước 5 — Xác định nhóm cần Common Region. Có cụm nội dung nào cần được nhấn mạnh là "thuộc về nhau" mà Proximity chưa đủ mạnh không? Nếu có, cân nhắc bọc chúng trong card hoặc nền màu. Nhưng dùng tiết chế — quá nhiều card lồng nhau sẽ tạo cảm giác đóng hộp ngột ngạt.
Bước 6 — Kiểm tra Figure/Ground cho các lớp phủ. Mọi modal, dropdown, tooltip có tách rõ khỏi nền không (bằng bóng đổ, dim, hoặc màu nền tương phản)? Người dùng phải luôn biết đâu là lớp đang tương tác.
Lỗi thường gặp & mẹo
Lỗi 1 — Khoảng cách đồng đều cho tất cả. Đây là lỗi phổ biến nhất của người mới. Đặt mọi thứ cách nhau cùng một khoảng (ví dụ mọi thứ đều 16px) nghe có vẻ "nhất quán", nhưng thực ra phá hủy Proximity. Nhất quán không có nghĩa là mọi khoảng cách bằng nhau — mà là mọi khoảng cách đều tuân theo một hệ thống có ý nghĩa.
Lỗi 2 — Lạm dụng đường kẻ và viền. Nhiều designer thấy hai thứ chưa tách bạch liền vẽ ngay một đường kẻ ngăn cách. Thường thì chỉ cần tăng khoảng trắng (Proximity) là đủ và trông sạch hơn nhiều. Đường kẻ nên là lựa chọn cuối cùng, không phải đầu tiên.
Lỗi 3 — Similarity giả. Cho một phần tử không click được mang màu và hình dạng giống hệt nút bấm. Người dùng sẽ bấm và thất vọng. Quy tắc: trông giống nhau thì phải hành xử giống nhau.
Lỗi 4 — Quá nhiều common region lồng nhau. Card trong card trong card. Mỗi lớp bao thêm đều làm giao diện nặng nề. Hãy tự hỏi: bỏ lớp bao này đi thì Proximity một mình có đủ truyền đạt nhóm không?
Mẹo: Khi bí ý về việc "cái này thuộc nhóm nào", đừng vội thêm màu hay viền. Thử điều chỉnh khoảng trắng trước. 80% vấn đề nhóm gộp trong UI được giải quyết chỉ bằng spacing.
Mẹo: Luôn dùng squint test trước khi ship. Nó phát hiện lỗi cấu trúc nhanh hơn bất kỳ công cụ nào.
Bài tập thực hành
- Squint test trên sản phẩm thật. Mở ba app bạn hay dùng (ví dụ Shopee, Grab, một app ngân hàng). Chụp màn hình chính, làm mờ ảnh, rồi khoanh vùng các cụm mà mắt tự nhóm. So sánh xem các cụm đó có khớp với nhóm nội dung logic không. Ghi lại một chỗ mà Proximity làm tốt và một chỗ làm chưa tốt.
- Sửa một form. Tìm (hoặc tự vẽ) một form có ít nhất sáu field mà mọi khoảng cách đều bằng nhau. Áp dụng nguyên tắc "khoảng cách trong-nhóm nhỏ hơn giữa-các-nhóm" và gom các field liên quan bằng một common region. Đặt hai phiên bản cạnh nhau.
- Phân tích một bảng giá. Chọn một bảng giá SaaS bất kỳ trên mạng và chỉ ra ba nguyên lý Gestalt mà nó đang dùng (hoặc vi phạm). Viết một đoạn ngắn giải thích bạn sẽ cải thiện thế nào.
- Thiết kế một empty state. Vẽ một màn hình "chưa có dữ liệu" chỉ dùng khoảng trắng và alignment (không viền, không card) để tạo ra một cụm nội dung rõ ràng gồm icon + tiêu đề + mô tả + nút. Kiểm tra bằng squint test.
Tóm tắt
Gestalt Principles là bộ quy tắc về cách bộ não tự động nhóm và diễn giải những gì nó nhìn thấy. Trong UI, sáu nguyên lý quan trọng nhất là: Proximity (gần nhau = cùng nhóm), Similarity (giống nhau = cùng loại, và phải hành xử giống nhau), Common Region (chung một vùng bao = cùng nhóm, mạnh hơn cả proximity), Continuity (mắt trôi theo đường thẳng — nền tảng của alignment), Closure (não tự điền chỗ trống, cho phép thiết kế tối giản) và Figure/Ground (tách lớp tương tác khỏi nền — nền tảng của mọi overlay).
Điều cần ghi nhớ nhất: bạn không cần thêm màu, viền hay đường kẻ để làm giao diện rõ ràng. Trong phần lớn trường hợp, chỉ cần điều chỉnh khoảng trắng và căn lề là đủ, vì đó chính là hai công cụ trực tiếp nhất để kích hoạt Proximity và Continuity. Lần tới khi một màn hình trông "rối" mà bạn không biết vì sao, hãy nheo mắt, tìm xem nguyên lý Gestalt nào đang bị vi phạm — câu trả lời gần như luôn nằm ở đó.