Khi thiết kế một giao diện, nhiều người thường tập trung vào những thành phần có thể nhìn thấy như màu sắc, hình ảnh, typography, button hay icon. Trong khi đó, phần không chứa nội dung lại dễ bị xem nhẹ.
Phần không gian nằm giữa các thành phần được gọi là khoảng trắng, hay white space. Khoảng trắng không nhất thiết phải có màu trắng. Nó có thể mang màu nền bất kỳ, miễn là khu vực đó không bị lấp đầy bởi nội dung hoặc thành phần giao diện.
Khoảng trắng không phải là phần còn thừa sau khi thiết kế. Nó là một yếu tố cần được thiết kế có chủ đích.
Khoảng trắng giúp giao diện dễ hiểu hơn
Hãy tưởng tượng một màn hình chứa tiêu đề, đoạn mô tả, hình ảnh, nút bấm và nhiều thông tin phụ. Nếu tất cả thành phần được đặt sát nhau, người dùng sẽ khó xác định nội dung nào quan trọng và những phần nào có liên quan với nhau.
Khoảng trắng giúp phân tách các nhóm nội dung và tạo ra cấu trúc trực quan cho màn hình.
Theo nguyên tắc proximity trong tâm lý học Gestalt, những thành phần nằm gần nhau thường được người dùng nhìn nhận là có liên quan. Ngược lại, khoảng cách lớn hơn cho thấy các thành phần thuộc những nhóm khác nhau. Vì vậy, chỉ cần điều chỉnh khoảng cách, designer đã có thể giúp người dùng hiểu cấu trúc giao diện mà không cần thêm đường kẻ hoặc màu nền (Harley, 2020).
Ví dụ, khoảng cách giữa label và ô nhập liệu nên nhỏ hơn khoảng cách giữa hai nhóm thông tin. Khoảng cách giữa tiêu đề và đoạn nội dung của nó cũng nên nhỏ hơn khoảng cách giữa hai section.
Nếu mọi khoảng cách đều giống nhau, người dùng sẽ khó nhận ra đâu là một nhóm hoàn chỉnh.
Khoảng trắng tạo ra phân cấp thị giác
Một giao diện tốt cần cho người dùng biết nên nhìn vào đâu trước.
Designer thường tạo phân cấp bằng kích thước chữ, màu sắc, độ đậm và độ tương phản. Tuy nhiên, khoảng trắng cũng đóng vai trò rất lớn trong việc làm nổi bật nội dung.
Một CTA được đặt giữa nhiều thành phần sẽ phải cạnh tranh sự chú ý với những nội dung xung quanh. Nhưng khi có đủ không gian bao quanh, nút bấm đó có thể trở nên nổi bật ngay cả khi không sử dụng màu sắc quá mạnh.
Điều tương tự cũng xảy ra với tiêu đề, số liệu quan trọng hoặc hình ảnh chính. Khoảng trắng tạo ra một vùng tập trung, giúp mắt người dùng có thời gian nhận biết và xử lý nội dung.
Nhiều designer mới thường cố gắng làm nổi bật một thành phần bằng cách tăng kích thước hoặc thêm màu. Trong một số trường hợp, giải pháp đơn giản hơn chỉ là tạo thêm không gian xung quanh nó.
Khoảng trắng giúp nội dung dễ đọc hơn
Một đoạn văn có kích thước chữ phù hợp nhưng khoảng cách dòng quá nhỏ vẫn có thể gây khó đọc. Một danh sách có nội dung rõ ràng nhưng các mục đặt quá sát nhau cũng khiến người dùng khó quét thông tin.
Khoảng trắng trong thiết kế không chỉ nằm giữa các section lớn. Nó còn xuất hiện ở khoảng cách dòng, khoảng cách giữa các đoạn, padding bên trong card và khoảng cách giữa icon với nội dung.
Những khoảng cách nhỏ này tạo ra nhịp điệu cho giao diện.
Khi nhịp điệu được duy trì nhất quán, người dùng có thể đọc và quét nội dung tự nhiên hơn. Ngược lại, khoảng cách thiếu nhất quán khiến giao diện trở nên rời rạc, ngay cả khi màu sắc và typography đã được lựa chọn tốt.
Nhiều nội dung không có nghĩa là phải thiết kế chật chội
Một vấn đề mình thường gặp khi thiết kế dashboard hoặc hệ thống quản lý là khách hàng muốn hiển thị rất nhiều thông tin trên cùng một màn hình.
Trong trường hợp đó, giải pháp không phải lúc nào cũng là giảm padding và thu nhỏ mọi thứ để nội dung vừa với màn hình.
Designer cần xác định thông tin nào cần được nhìn thấy ngay, nội dung nào có thể đặt ở tab khác và thành phần nào chỉ cần xuất hiện khi người dùng tương tác. Những nội dung liên quan nên được nhóm lại, trong khi các nhóm khác nhau cần có khoảng cách đủ rõ.
Một màn hình có nhiều dữ liệu vẫn có thể dễ sử dụng nếu cấu trúc thông tin rõ ràng. Ngược lại, một màn hình chỉ có vài thành phần vẫn có thể tạo cảm giác lộn xộn nếu khoảng cách không hợp lý.
Nhiều khoảng trắng chưa chắc đã tạo ra UX tốt
Khoảng trắng có giá trị nhưng không có nghĩa là càng nhiều càng tốt.
Nếu khoảng cách giữa các thành phần liên quan quá lớn, người dùng có thể không nhận ra mối liên hệ giữa chúng. Một nút hành động đặt quá xa nội dung chính có thể bị bỏ qua. Một màn hình có quá nhiều khoảng trống cũng có thể khiến người dùng phải cuộn nhiều hơn hoặc khó tìm thấy công cụ cần thiết.
Nielsen Norman Group chỉ ra rằng việc loại bỏ thành phần thị giác có thể giảm sự xao nhãng, nhưng nếu những công cụ cần thiết bị ẩn đi, chi phí tương tác và tải nhận thức của người dùng có thể tăng lên. Nói cách khác, “ít hơn” không phải lúc nào cũng tốt hơn nếu sự tối giản làm mất đi những tín hiệu quan trọng (Fessenden, 2016).
Mục tiêu của khoảng trắng không phải là làm cho màn hình trống hơn. Mục tiêu là giúp nội dung dễ hiểu hơn.
Làm thế nào để sử dụng khoảng trắng hợp lý?
Thay vì thêm khoảng cách theo cảm tính, designer nên xây dựng một hệ thống spacing nhất quán. Các giá trị khoảng cách cần thể hiện được mức độ liên quan giữa các thành phần.
Khoảng cách nhỏ có thể dùng cho những thành phần thuộc cùng một nhóm, chẳng hạn như icon và label. Khoảng cách trung bình phù hợp để phân tách các nội dung trong một card. Khoảng cách lớn hơn nên được sử dụng giữa các section hoặc nhóm chức năng khác nhau.
Khi kiểm tra một màn hình, mình thường tự hỏi: Người dùng có nhận ra các nhóm nội dung mà không cần đọc chữ không? Hành động chính đã có đủ không gian để nổi bật chưa? Có thành phần nào đang bị tách quá xa khỏi nội dung liên quan không?
Chỉ cần trả lời ba câu hỏi này, designer có thể phát hiện khá nhiều vấn đề về bố cục.
Kết luận
Khoảng trắng là một phần của nội dung, không phải phần nằm ngoài nội dung.
Nó giúp tạo phân cấp, thể hiện mối quan hệ, cải thiện khả năng đọc và hướng sự chú ý của người dùng. Nhưng giống như màu sắc hay typography, khoảng trắng chỉ hiệu quả khi được sử dụng đúng mục đích.
Một giao diện tốt không phải là giao diện lấp đầy mọi vị trí có thể đặt nội dung. Nó cũng không phải là giao diện có nhiều khoảng trống nhất.
Đó là giao diện có đủ không gian để từng thành phần thực hiện đúng vai trò của mình.
Tài liệu tham khảo
Fessenden, T. (2016, December 18). Why zen mode isn’t the answer to everything. Nielsen Norman Group. https://www.nngroup.com/articles/zen-mode/
Harley, A. (2020, August 2). Proximity principle in visual design. Nielsen Norman Group. https://www.nngroup.com/articles/gestalt-proximity/