Trong thiết kế giao diện, không phải mọi thành phần đều quan trọng như nhau. Một giao diện tốt không chỉ giúp người dùng nhìn thấy thông tin, mà còn giúp họ biết nên nhìn vào đâu trước.
Bạn đã bao giờ truy cập một website và ngay lập tức biết mình cần làm gì, dù chưa đọc hết nội dung trên trang? Ngược lại, có những giao diện chứa đầy đủ thông tin, màu sắc hài hòa và các thành phần được thiết kế chỉn chu, nhưng bạn vẫn không biết nên bắt đầu từ đâu. Sự khác biệt đôi khi không nằm ở lượng thông tin được hiển thị, mà ở cách chúng được tổ chức và nhấn mạnh.
Trong UI Design, chúng ta gọi đó là Visual Hierarchy (Thứ bậc thị giác).
Đây là một trong những nguyên tắc quan trọng giúp Designer định hướng sự chú ý của người dùng, làm rõ mức độ ưu tiên giữa các thành phần và khiến giao diện trở nên dễ hiểu hơn. Nhưng Visual Hierarchy không đơn giản là làm tiêu đề thật lớn hay tô màu nổi bật cho một Button. Để sử dụng hiệu quả, chúng ta cần hiểu cách các yếu tố thị giác phối hợp với nhau.
Visual Hierarchy là gì?
Theo Gordon (2021), Visual Hierarchy là cách tổ chức các thành phần trên một giao diện nhằm hướng sự chú ý của người dùng theo thứ tự quan trọng mà Designer mong muốn.
Nói một cách đơn giản, Visual Hierarchy giúp trả lời ba câu hỏi:
- Người dùng sẽ chú ý đến điều gì đầu tiên?
- Sau đó, họ nên tiếp nhận thông tin nào?
- Cuối cùng, hành động nào cần được thực hiện?
Hãy tưởng tượng một trang giới thiệu sản phẩm gồm tiêu đề, mô tả, hình ảnh minh họa và Button đăng ký. Nếu tất cả thành phần có cùng kích thước, màu sắc và mức độ nhấn mạnh, người dùng sẽ phải tự xác định đâu là thông tin quan trọng nhất. Nhưng nếu tiêu đề được làm nổi bật, phần mô tả có độ ưu tiên thấp hơn và Button hành động được phân biệt rõ ràng, giao diện sẽ dễ quan sát hơn.
Ở ví dụ bên phải, người dùng có thể dễ dàng phân biệt tiêu đề chính, nội dung hỗ trợ và hành động cần thực hiện. Đó chính là vai trò của Visual Hierarchy: Không chỉ trình bày thông tin, mà còn thể hiện mức độ quan trọng của từng thông tin.
Size & Scale: Kích thước tạo ra sự ưu tiên
Một trong những cách đơn giản nhất để tạo Visual Hierarchy là sử dụng sự khác biệt về kích thước. Những thành phần lớn thường dễ thu hút sự chú ý hơn các thành phần nhỏ khi những điều kiện khác tương đương. Đây là lý do tiêu đề thường lớn hơn nội dung mô tả, chỉ số quan trọng trên Dashboard thường nổi bật hơn nhãn thông tin, hoặc hình ảnh sản phẩm chính thường chiếm diện tích lớn hơn hình ảnh phụ.
Theo Gordon (2020), Scale là một trong năm nguyên tắc Visual Design quan trọng đối với trải nghiệm người dùng. Việc thay đổi kích thước tương đối của các thành phần có thể giúp truyền đạt thứ tự ưu tiên trong giao diện. Tuy nhiên, kích thước lớn chỉ có ý nghĩa khi tồn tại sự khác biệt. Nếu mọi thành phần đều lớn, sẽ không còn thành phần nào thực sự nổi bật.
Ví dụ, khi thiết kế một Dashboard, chúng ta có thể xây dựng thứ bậc Typography như sau:
Ở đây, giá trị doanh thu được ưu tiên vì đó là thông tin chính mà người dùng cần theo dõi. Những nội dung khác đóng vai trò bổ sung ngữ cảnh. Điều quan trọng không phải là sử dụng bao nhiêu kích thước font chữ, mà là mỗi cấp độ phải có vai trò rõ ràng trong cấu trúc thông tin.
Color & Contrast: Không phải màu nào nổi bật cũng quan trọng
Màu sắc và độ tương phản là những công cụ mạnh mẽ để điều hướng sự chú ý. Một Button có độ tương phản cao với nền thường dễ được nhận biết hơn một Button hòa lẫn vào những thành phần xung quanh. Nhưng có một điểm cần lưu ý: Visual Hierarchy không phụ thuộc vào việc sử dụng màu sắc thật rực rỡ.
Theo Gordon (2021), sự khác biệt về độ sáng, độ bão hòa và tương phản với những thành phần xung quanh mới là yếu tố quan trọng quyết định mức độ nổi bật của một đối tượng. Điều này có nghĩa là một Button màu đen trên nền trắng hoàn toàn có thể nổi bật hơn một Button màu xanh trên nền có nhiều yếu tố cạnh tranh thị giác.
Hãy xem ví dụ:
Ở ví dụ bên phải, hành động Save Changes được nhấn mạnh hơn, trong khi Cancel vẫn hiện diện nhưng không cạnh tranh cùng mức độ chú ý. Nguyên tắc này rất hữu ích khi thiết kế Form, Modal, trang Pricing hoặc những màn hình có nhiều lựa chọn. Tuy nhiên, Designer không nên chỉ dựa vào màu sắc để truyền đạt trạng thái hoặc ý nghĩa quan trọng. Những dấu hiệu bổ sung như nhãn chữ, icon và trạng thái tương tác sẽ giúp giao diện rõ ràng hơn, đặc biệt đối với người dùng có hạn chế về khả năng phân biệt màu.
Spacing & Grouping: Khoảng cách cũng có thể dẫn dắt ánh nhìn
Trong một bài viết trước về Spacing, tôi đã đề cập đến vai trò của khoảng cách trong việc tổ chức thông tin. Visual Hierarchy là một ví dụ rất rõ ràng cho nguyên tắc đó. Theo Gestalt Principle of Proximity, những thành phần được đặt gần nhau thường được nhận thức là có liên quan. Trong thiết kế giao diện, điều này có nghĩa là chúng ta có thể tạo ra các nhóm thông tin chỉ bằng cách điều chỉnh khoảng cách, mà không nhất thiết phải bổ sung quá nhiều đường kẻ hoặc khung viền. Gordon (2021) cũng chỉ ra rằng việc sử dụng Proximity và Common Regions giúp người dùng nhận biết cấu trúc của giao diện và xác định những khu vực thông tin có liên quan.
Ví dụ, trong một Card sản phẩm, tên sản phẩm và giá bán thường được đặt gần nhau hơn so với khoảng cách giữa Card này và Card khác. Tương tự, trên một Landing Page, khoảng cách giữa Heading và Description nên thể hiện rằng chúng thuộc cùng một nhóm nội dung, trong khi khoảng cách giữa hai Section cần đủ rõ để người dùng nhận biết sự chuyển tiếp. Điều tôi thường quan tâm khi điều chỉnh Spacing không chỉ là tổng thể có cân đối hay không, mà còn là: Khoảng cách này đang kết nối những thành phần nào và đang phân tách những nhóm thông tin nào?
Nếu trả lời được câu hỏi đó, spacing sẽ trở thành một công cụ tổ chức trải nghiệm thay vì chỉ mang tính trang trí.
Position & Alignment: Vị trí ảnh hưởng đến cách thông tin được tiếp nhận
Vị trí của một thành phần trong layout cũng ảnh hưởng đến khả năng được chú ý. Trong nhiều giao diện có hướng đọc từ trái sang phải, các thành phần được đặt ở phía trên hoặc gần điểm bắt đầu của nội dung thường có cơ hội được nhìn thấy sớm hơn.
Tuy nhiên, đây không phải quy luật cố định cho mọi người dùng hay mọi sản phẩm. Thứ tự quan sát còn phụ thuộc vào mục tiêu của người dùng, ngôn ngữ, bố cục, kích thước màn hình và những thành phần có độ nổi bật cao. Vì vậy, thay vì áp dụng máy móc một mô hình đọc, tôi thường tập trung vào việc đảm bảo những thông tin quan trọng xuất hiện tại vị trí dễ nhận biết trong ngữ cảnh sử dụng thực tế.
Ví dụ, với một trang E-commerce, những thông tin như hình ảnh sản phẩm, tên, giá bán và hành động mua hàng cần được tổ chức thành một cấu trúc dễ quan sát. Trong khi đó, những thông tin ít được ưu tiên hơn như chính sách đổi trả chi tiết hoặc mô tả kỹ thuật có thể được đặt ở những khu vực bổ sung, miễn là người dùng vẫn dễ dàng tìm thấy khi cần. Alignment cũng giúp các thành phần tạo ra một trật tự thị giác nhất quán. Một giao diện có các khối nội dung được căn chỉnh hợp lý thường dễ quét hơn so với giao diện có quá nhiều điểm bắt đầu không thống nhất.
Visual Weight: Khi mọi thứ đều nổi bật, không có gì thực sự nổi bật
Một khái niệm quan trọng khác là Visual Weight (Trọng lượng thị giác). Visual Weight mô tả mức độ một thành phần thu hút sự chú ý dựa trên những yếu tố như kích thước, màu sắc, độ tương phản và vị trí. Một hình ảnh lớn, một tiêu đề đậm hoặc một Button có màu sắc tương phản đều có thể sở hữu Visual Weight cao. Nhưng vấn đề xuất hiện khi chúng ta cố gắng làm nổi bật quá nhiều thành phần cùng lúc.
Hãy tưởng tượng một Landing Page có tiêu đề rất lớn, nhiều dòng chữ in đậm, ba Button cùng màu nổi bật, một Banner quảng cáo và nhiều Icon được nhấn mạnh. Mỗi thành phần đều cố gắng thu hút sự chú ý, khiến tổng thể trở nên thiếu điểm tập trung. Trong bài viết về Signal-to-Noise Ratio, Nielsen Norman Group (2018) khuyến nghị chỉ nên nhấn mạnh những thông tin thực sự quan trọng, tránh khiến giao diện trở nên quá tải bởi quá nhiều yếu tố cạnh tranh.
Với tôi, đây là một nguyên tắc rất đáng ghi nhớ: Muốn một thành phần nổi bật, đôi khi chúng ta không cần làm nó mạnh hơn mà cần giảm mức độ nhấn mạnh của những thành phần xung quanh. Ví dụ, thay vì tăng kích thước của Primary Button, chúng ta có thể giảm độ tương phản của Secondary Button. Thay vì làm tiêu đề lớn hơn nữa, chúng ta có thể giảm kích thước và độ đậm của những đoạn văn bổ trợ. Visual Hierarchy không chỉ được tạo ra bằng cách nhấn mạnh, mà còn bằng việc chủ động giảm sự chú ý dành cho những thành phần ít quan trọng hơn.
Làm thế nào để kiểm tra Visual Hierarchy của một giao diện?
Sau khi hoàn thành thiết kế, tôi thường muốn kiểm tra liệu người dùng có thực sự chú ý đến những thành phần mà mình đã ưu tiên hay không. Một cách kiểm tra nhanh là Squint Test. Theo Wang (2023), Squint Test là phương pháp nheo mắt khi quan sát giao diện nhằm nhận diện những thành phần có độ nổi bật cao và đánh giá nhanh thứ bậc thị giác. Khi nheo mắt hoặc nhìn giao diện ở kích thước thu nhỏ, những chi tiết nhỏ sẽ trở nên khó nhận biết hơn, trong khi các khối có Visual Weight lớn vẫn nổi bật.
Ngoài Squint Test, tôi cũng thường tự kiểm tra bằng những câu hỏi:
- Trong ba giây đầu tiên, thành phần nào có khả năng thu hút sự chú ý nhất?
- Thành phần đó có thực sự là thông tin quan trọng nhất không?
- Người dùng có phân biệt được Primary Action và Secondary Action không?
- Các nhóm thông tin có mối quan hệ rõ ràng không?
- Có thành phần nào đang nổi bật nhưng không mang lại nhiều giá trị không?
Dù hữu ích, Squint Test chỉ là một bước đánh giá nhanh từ góc nhìn thị giác. Để xác định thứ tự quan sát và mức độ hiệu quả thực tế, chúng ta vẫn cần kiểm tra thiết kế với người dùng mục tiêu khi có điều kiện.
Visual Hierarchy không có nghĩa là kiểm soát hoàn toàn ánh nhìn
Một điều quan trọng tôi muốn nhấn mạnh là Designer có thể định hướng sự chú ý, nhưng không thể quyết định tuyệt đối người dùng sẽ nhìn vào đâu. Người dùng không phải lúc nào cũng đọc giao diện theo đúng thứ tự mà chúng ta mong muốn. Một người truy cập trang sản phẩm có thể quan tâm đến giá bán trước khi đọc tên sản phẩm. Người khác lại muốn xem đánh giá hoặc thông số kỹ thuật. Tương tự, trên Dashboard, một người quản lý có thể ưu tiên doanh thu, trong khi một nhân viên vận hành lại tập trung vào các cảnh báo và trạng thái hệ thống.
Do đó, Visual Hierarchy không nên chỉ phản ánh điều Designer cảm thấy quan trọng. Nó cần được xây dựng dựa trên mục tiêu, nhu cầu và bối cảnh thực tế của người dùng. Một giao diện có Visual Hierarchy tốt không nhất thiết khiến mọi người quan sát theo cùng một thứ tự. Thay vào đó, nó giúp những thông tin cần thiết trở nên dễ nhận biết, dễ tìm kiếm và dễ sử dụng.
Thiết kế tốt là biết điều gì cần được ưu tiên
Visual Hierarchy không đơn thuần là một kỹ thuật để làm giao diện đẹp hơn. Nó là cách chúng ta tổ chức sự chú ý, truyền đạt mức độ quan trọng của thông tin và hỗ trợ người dùng thực hiện các tác vụ. Kích thước, màu sắc, độ tương phản, spacing, vị trí hay typography đều có thể trở thành công cụ để xây dựng thứ bậc thị giác. Nhưng điều quan trọng nhất không nằm ở việc sử dụng bao nhiêu kỹ thuật, mà là hiểu được mục tiêu phía sau mỗi quyết định.Trước khi làm một tiêu đề lớn hơn, hãy tự hỏi tại sao nó cần được ưu tiên. Trước khi tô một Button nổi bật, hãy xác định liệu đó có phải hành động quan trọng nhất. Và trước khi thêm một thành phần mới, hãy cân nhắc nó có thực sự giúp người dùng hiểu giao diện tốt hơn hay không.
Với tôi, một giao diện có Visual Hierarchy tốt không phải là giao diện mà mọi thành phần đều được chú ý. Đó là giao diện biết cách làm nổi bật những gì quan trọng và để những gì ít quan trọng hơn lùi lại đúng lúc. Bởi cuối cùng, chúng ta không chỉ thiết kế những gì người dùng nhìn thấy, mà còn thiết kế cách họ tiếp nhận và hiểu thông tin.
Tài liệu tham khảo (APA 7th Edition)
Gordon, K. (2020, March 1). 5 principles of visual design in UX. Nielsen Norman Group. https://www.nngroup.com/articles/principles-visual-design/
Gordon, K. (2021, January 17). Visual hierarchy in UX: Definition. Nielsen Norman Group. https://www.nngroup.com/articles/visual-hierarchy-ux-definition/
Nielsen Norman Group. (2018). Signal-to-noise ratio. https://www.nngroup.com/articles/signal-noise-ratio/
Wang, H.-H. (2023, December 11). Squint test [Video]. Nielsen Norman Group. https://www.nngroup.com/videos/squint-test/