Khi bạn truy cập một website, dù đó là 1 trang hoàn toàn xa lạ, nhưng bạn vẫn biết đâu là menu hay nút mua hàng khi chưa kịp đọc chữ nào. Ngay cả một khối quảng cáo cũng có thể được nhận ra chỉ sau vài giây nhìn vào bố cục trang.
Điều này có liên quan đến Gestalt – trường phái tâm lý học ra đời tại Đức, lý giải cách não ghép những gì chúng ta nhìn thấy thành tổng thể có nghĩa. Vậy cơ chế này hoạt động như thế nào, và vì sao nó được vận dụng nhiều trong thiết kế web và marketing?
Gestalt là gì?
Vào đầu thế kỷ 20, 3 nhà tâm lý học người Đức Max Wertheimer, Wolfgang Köhler và Kurt Koffka đã phát triển trường phái Gestalt – từ mang nghĩa “hình dáng”, “cấu trúc” hay “thể thống nhất” trong tiếng Đức.
Nguyên lý nền tảng được Köhler tóm gọn trong câu: “Cái toàn thể khác với tổng số các phần tử cấu thành.” Nói cách khác, khi nhìn một hình ảnh, não không cộng dồn từng chi tiết nhỏ lại với nhau, mà nhận diện cả bức tranh trước rồi mới phân tích từng phần nếu cần.
Trong thiết kế web, Gestalt được ví như một dạng “ngữ pháp thị giác” mà người dùng đã quen vận dụng dù không nhận ra. Thay vì đọc riêng từng pixel hay dòng chữ, chúng ta quét qua giao diện để tìm những khuôn mẫu quen thuộc, từ đó đoán cách website hoạt động.
Một ví dụ điển hình là biểu tượng giỏ hàng ở góc trên bên phải trang thương mại điện tử. Dù mới ghé trang lần đầu, bạn vẫn biết biểu tượng này liên quan đến việc mua sắm, bởi đã gặp khuôn mẫu tương tự trên nhiều website khác mình từng dùng.
Vì sao giao diện ảnh hưởng đến cảm xúc người dùng?
Khi website lộn xộn và thiếu nhất quán, não phải tự sắp xếp thông tin, tìm hiểu cấu trúc và xác định yếu tố quan trọng. Quá trình này làm tăng tải nhận thức (cognitive load), khiến người dùng tiêu tốn nhiều năng lượng hơn để hiểu những gì đang xuất hiện trước mắt.
Việc phải liên tục “giải mã” giao diện khiến bạn mệt mỏi, nghi ngại và giảm cảm xúc tích cực – vốn là động lực chính thúc đẩy hành vi mua hàng. Ngược lại, khi thông tin được sắp xếp theo các nguyên lý Gestalt, não xử lý dễ dàng hơn, mang lại cảm giác thoải mái và tin tưởng.
Trong một thí nghiệm so sánh 2 trang web bán giày, các nhà nghiên cứu đã sử dụng phương pháp chụp cộng hưởng từ não (fMRI) để quan sát hoạt động não của người dùng khi nhìn vào Zapos phiên bản năm 2010 và Shoe Guru.
Với giao diện lộn xộn của Zapos, vùng nhân cúp (nucleus accumbens) – bộ phận liên quan đến cảm xúc tích cực gần như không “sáng lên” trong 10 giây đầu tiên. Lúc này não người dùng vẫn đang bận đọc và giải mã cấu trúc trang.
Trong khi đó ở Shoe Guru, với giao diện tối giản và phân cấp rõ ràng, cùng vùng não này xuất hiện một đỉnh hoạt động cảm xúc mạnh chỉ sau 6 giây. Như vậy, việc sắp xếp giao diện theo Gestalt còn tác động đến cảm giác an tâm và mong muốn hành động nhanh hơn của người dùng.
8 nguyên lý Gestalt thường gặp trên website
Tiệm cận (proximity)
Những yếu tố nằm gần nhau thường được não nhận diện là có liên quan hoặc thuộc cùng một nhóm. Trên giao diện cài đặt điện thoại, mục “Thông báo” và “Âm thanh” thường được đặt sát nhau trong cùng một khối. Vì vậy bạn hiểu ngay chúng thuộc cùng nhóm chức năng, dù chưa đọc tiêu đề nhóm.
Đồng dạng (similarity)
Trên website của đại lý du lịch Beaches of Normandy, các thẻ gói tour đều có cấu trúc giống nhau. Mỗi thẻ có ảnh ở trên cùng, tiêu đề in đậm và nút “Get a Quote” cùng màu ở góc dưới. Cách sắp xếp này vận dụng nguyên lý đồng dạng: những đối tượng có chung màu sắc, hình dạng hay kích thước được não coi là cùng chức năng. Nhờ đó, bạn có thể quét qua các thẻ và so sánh gói tour nhanh hơn mà không bị phân tâm.
Khép kín (closure)
Não bộ có khả năng tự “vẽ” thêm phần còn thiếu khi nhìn vào hình ảnh chưa hoàn chỉnh. Chẳng hạn logo HP chỉ có 4 đường kẻ chéo đặt trong một vòng tròn, không có nét nào tạo thành chữ “h” và “p” hoàn chỉnh. Nhưng chúng ta vẫn đọc ra được 2 chữ cái, bởi não đã tự lấp những khoảng trống để nhận diện hình quen thuộc.
Liên tục (continuity)
Mắt chúng ta có xu hướng dõi theo đường thẳng hay đường cong mượt mà, thay vì các đường đứt gãy, ngoặt gấp. Công cụ theo dõi thương hiệu Mention vận dụng nguyên lý này trong carousel đánh giá khách hàng, với các nút điều hướng và dấu chấm tiến trình được xếp thẳng hàng, tạo dòng thị giác liên tục khiến bạn muốn vuốt hoặc bấm xem tiếp.
Hình – nền (figure-ground)
Não luôn tách những gì ta nhìn thấy thành đối tượng chính ở tiền cảnh (figure) và phần nền phía sau (ground), rồi ưu tiên xử lý tiền cảnh trước.
Giao diện Apple Music luôn đặt chữ trắng, đậm và kích thước lớn trên nền ảnh nghệ sĩ được làm mờ nhẹ. Điều này khiến tên bài hát và nút Play trở thành những thứ bạn nhìn thấy đầu tiên, dù hình ảnh phía sau có phức tạp đến đâu.
Đơn giản và đối xứng (Prägnanz)
Prägnanz trong tiếng Đức mang nghĩa “ngắn gọn nhưng chứa đủ ý nghĩa”, mô tả xu hướng não đơn giản hóa các bố cục phức tạp thành hình khối cơ bản, cân bằng. Trang chủ Google Search là ví dụ với logo, thanh tìm kiếm và 2 nút bấm. Khi không có những yếu tố gây nhiễu, bạn có thể thực hiện việc tìm kiếm gần như ngay lập tức.
Số phận chung (common fate)
Khi bạn bấm biểu tượng menu hamburger và toàn bộ danh mục cùng trượt ra theo một nhịp độ, não sẽ nhận diện chúng như một khối thống nhất, dù bạn chưa đọc chữ nào trong đó. Điều này xảy ra do những phần tử di chuyển cùng hướng, cùng tốc độ được não mặc định là thuộc về nhau.
Tiêu điểm (focal point)
Yếu tố nổi bật sẽ thu hút sự chú ý đầu tiên. Nguyên lý này gắn liền với hiệu ứng Von Restorff, được thể hiện trong thí nghiệm cho người tham gia xem danh sách các hãng xe hơi, trong đó riêng Alfa Romeo được viết bằng phông chữ đỏ và lớn hơn hẳn những tên còn lại.
Bạn có thể tìm hiểu chi tiết tại bài viết về hiệu ứng Von Restorff
Sau 3 ngày, gần như toàn bộ người tham gia vẫn nhớ chính xác Alfa Romeo đầu tiên. Cách tạo tiêu điểm này cũng xuất hiện trên các bảng giá dịch vụ: gói “phổ biến nhất” thường được làm to hơn, kèm ruy-băng nổi bật để mắt người dùng dừng lại ở đó trước.
Cần chú ý gì khi vận dụng Gestalt vào website?
Việc dẫn mắt từ tiêu đề đến nút kêu gọi hành động (CTA) có thể tạo ra khác biệt đo lường được. Trong một thử nghiệm của CXL Institute, trang có thêm một mũi tên vẽ tay tinh tế hướng về biểu mẫu đăng ký được so sánh với trang không có mũi tên.
Kết quả cho thấy, thời gian người dùng chú ý vào biểu mẫu tăng từ 1.77 giây lên 2.38 giây. Một thay đổi nhỏ trong cách dẫn mắt cũng có thể tác động đến hành vi của người dùng.
Tuy nhiên, một số chi tiết trên giao diện có thể khiến quá trình này bị ngắt quãng. Điển hình là “điểm dừng giả”, khi một khối hình ảnh lớn khớp khít với cạnh dưới màn hình. Não hiểu nhầm đây là điểm kết thúc trang, khiến người dùng dừng cuộn và thoát ra dù bên dưới vẫn còn nội dung.
Bên cạnh đó, việc đặt 2 yếu tố nổi bật ngang nhau cạnh nhau cũng khiến người dùng bối rối. Chẳng hạn nút “Đăng ký ngay” màu đỏ khổng lồ nằm sát banner nhấp nháy sẽ khiến họ không biết nên nhìn vào đâu trước. Họ có thể… không làm gì cả.
Về cơ bản, Gestalt tác động đến cách người dùng tiếp nhận giao diện và đưa ra quyết định gần như trong vô thức, trước khi kịp suy nghĩ bằng lý trí. Vì vậy việc vận dụng các nguyên lý này cần được nhìn xa hơn một công thức làm website đẹp mắt.
Để kiểm tra nhanh website của mình, bạn có thể chụp màn hình rồi cho một người lạ xem trong đúng 5 giây. Sau khi tắt ảnh, họ có nhớ được tiêu đề chính và nút quan trọng nhất nằm ở đâu không? Một cách khác là nheo mắt đến khi chữ mờ đi, rồi quan sát xem các khối nội dung có còn tách bạch và nút CTA có nổi bật nhất hay không.
Nếu câu trả lời là có, thì nhiều khả năng website của bạn đã “nói đúng ngôn ngữ” mà não người dùng hiểu.