Mở đầu — vì sao bài này quan trọng
Hãy thử một thí nghiệm nhỏ. Mở bất kỳ trang web nào bạn truy cập hàng ngày — Shopee, Tiki, VnExpress hay trang chủ ngân hàng của bạn — rồi nhìn nó trong đúng nửa giây, sau đó nhắm mắt lại. Bạn nhớ được gì? Gần như chắc chắn bạn nhớ một hai thứ nổi bật: cái banner to ở giữa, nút "Mua ngay" màu cam, hay con số giảm giá "-50%" đỏ chót. Bạn không nhớ dòng chữ điều khoản nhỏ xíu ở chân trang, cũng không nhớ menu phụ bên góc.
Đó chính là visual hierarchy (hệ thống phân cấp thị giác) đang làm việc. Và đây là sự thật mà nhiều người mới học thiết kế chưa thấm: người dùng không đọc trang web của bạn theo cách bạn tưởng. Họ không bắt đầu từ trên cùng bên trái rồi đọc tuần tự từng dòng như đọc một cuốn tiểu thuyết. Họ quét (scan). Mắt họ nhảy từ điểm nổi bật này sang điểm nổi bật khác, và nhiệm vụ của bạn — người designer — là sắp đặt những điểm nổi bật đó theo đúng thứ tự bạn muốn họ chú ý.
Nếu HTML (Bài 1) là bộ xương và CSS (Bài 2) là lớp da, thì visual hierarchy là hệ thần kinh quyết định trang web của bạn có "hoạt động" được không. Một trang đẹp mà không có thứ bậc rõ ràng sẽ khiến người dùng bối rối, không biết nhìn vào đâu, không biết phải làm gì tiếp theo — và rồi họ thoát ra. Bài học này sẽ dạy bạn cách điều khiển mắt người xem một cách có chủ đích, để mỗi trang bạn thiết kế đều dẫn dắt người dùng đến đúng hành động bạn mong muốn.
Khái niệm cốt lõi
Visual hierarchy là cách designer sắp xếp và nhấn mạnh các phần tử trên giao diện để hướng dẫn mắt người dùng đi qua nội dung theo đúng thứ tự ưu tiên. Nói cách khác: bạn đang quyết định giúp người dùng "nhìn cái gì trước, cái gì sau" thay vì để họ tự mò.
Mọi yếu tố trên trang đều cạnh tranh nhau để giành lấy sự chú ý. Visual hierarchy là cách bạn phân xử cuộc cạnh tranh đó — quyết định ai thắng, ai về nhì, ai chỉ làm nền.
Mắt người quét trang web thế nào
Các nghiên cứu theo dõi chuyển động mắt (eye-tracking) của Nielsen Norman Group đã chỉ ra hai mô hình quét phổ biến:
Mô hình chữ F — thường gặp ở các trang nhiều chữ như blog, báo điện tử, kết quả tìm kiếm. Mắt người đọc theo chiều ngang ở phần trên (gạch ngang trên của chữ F), rồi lướt xuống một đoạn, lại đọc ngang một lần nữa (gạch ngang giữa), sau đó quét dọc xuống phía bên trái. Hệ quả: thông tin quan trọng nhất phải nằm ở góc trên bên trái và đầu mỗi đoạn.
Mô hình chữ Z — thường gặp ở các trang ít chữ, nhiều khoảng trống như landing page. Mắt đi từ trái sang phải ở trên (logo → menu), chéo xuống dưới bên trái, rồi lại sang phải (thường là nút CTA). Đây là lý do nút "Đăng ký ngay" hay được đặt ở góc dưới phải của khu vực hero.
Hiểu hai mô hình này, bạn đã có "bản đồ" để biết đặt thứ gì ở đâu.
Năm công cụ tạo phân cấp
Để nâng một phần tử "lên cao" trong hệ thống phân cấp, designer dùng những đòn bẩy sau:
1. Kích thước (Size). Vật to thu hút mắt trước vật nhỏ. Đây là công cụ mạnh và trực giác nhất. Một tiêu đề 48px sẽ luôn được nhìn trước đoạn văn 16px.
2. Màu sắc & độ tương phản (Color & Contrast). Một nút màu cam rực giữa nền trắng xám sẽ "nhảy" vào mắt. Màu nóng và độ tương phản cao tạo điểm nhấn; màu nhạt, xám đẩy phần tử ra phía sau.
3. Khoảng trống (Whitespace). Một phần tử được bao quanh bởi nhiều khoảng trống tự động trở nên quan trọng hơn. Khoảng trống không phải chỗ "lãng phí" — nó là khung làm nổi bật nội dung. (Chúng ta sẽ đào sâu ở Bài 12.)
4. Vị trí & sự sắp đặt (Position). Phần tử ở trên cùng, ở trung tâm, hoặc đứng tách biệt sẽ được ưu tiên. Cái gì người dùng nhìn thấy đầu tiên (above the fold — phần hiển thị không cần cuộn) có quyền lực lớn.
5. Độ đậm & kiểu chữ (Weight & Style). Chữ in đậm, chữ nghiêng, chữ viết hoa — tất cả tạo ra sự khác biệt khiến mắt dừng lại.
Bí quyết của designer giỏi không phải dùng cả năm công cụ cùng lúc cho một phần tử, mà biết phối hợp vừa đủ để tạo ra ba cấp độ rõ ràng: chính (primary) — phụ (secondary) — nền (tertiary).
Quy tắc "một ngôi sao"
Mỗi màn hình chỉ nên có một phần tử quan trọng nhất. Nếu mọi thứ đều to, đều đậm, đều màu nổi — thì chẳng có gì nổi cả. Khi mọi thứ hét lên cùng lúc, người dùng chỉ nghe thấy tiếng ồn. Hãy chọn một "ngôi sao" cho mỗi màn hình, và để những thứ còn lại làm dàn bè đệm.
Tình huống thực tế
Ví dụ 1: Trang sản phẩm Shopee và cuộc chiến giành con mắt
Hãy mở một trang chi tiết sản phẩm trên Shopee. Bạn sẽ thấy visual hierarchy được dàn xếp cực kỳ tinh vi. Giá bán hiện tại được in to, màu cam (#EE4D2D — màu thương hiệu Shopee), đặt ngay dưới tên sản phẩm. Bên cạnh nó, giá gốc bị gạch ngang, màu xám nhỏ — cố tình bị đẩy xuống cấp dưới để giá khuyến mãi trông hời hơn. Nút "Mua ngay" có nền cam đặc, còn "Thêm vào giỏ" chỉ có viền cam, nền trắng.
Diễn giải: Shopee dùng kích thước (giá to), màu (cam thương hiệu), và độ tương phản (cam đặc vs viền cam) để tạo ba cấp độ. Mắt người mua bị kéo theo đúng thứ tự: tên sản phẩm → giá rẻ → nút mua. Hai nút khác biệt về độ "đặc" là cố ý: Shopee muốn bạn bấm "Mua ngay" hơn là "Thêm vào giỏ", nên nút đó được làm nổi bật hơn.
Bài học: Khi hai hành động cùng tồn tại, hãy quyết định hành động nào quan trọng hơn và làm nó nổi bật hơn. Đừng để hai nút "cãi nhau". Phân cấp thị giác chính là phân cấp ưu tiên kinh doanh.
Ví dụ 2: Landing page của một startup fintech và lỗi "không có ngôi sao"
Một startup ví điện tử giả định ở TP.HCM — gọi là "PayViet" — thuê một bạn designer junior làm landing page ra mắt. Bạn ấy nhiệt tình đến mức: tiêu đề to đùng, ba nút CTA màu khác nhau ("Tải app", "Xem demo", "Liên hệ") đặt cạnh nhau cùng kích thước, thêm một banner nhấp nháy, và một dòng "Ưu đãi 200.000đ" cũng to không kém. Kết quả sau hai tuần: tỷ lệ click vào nút tải app chỉ đạt khoảng 1,2%.
Đội ngũ đem trang đi test với 5 người dùng thật. Khi được hỏi "bạn sẽ bấm vào đâu", mỗi người chỉ một chỗ khác nhau — không ai chắc đâu là hành động chính. Designer mới chỉnh lại: chỉ giữ một nút chính "Tải app miễn phí" màu nổi, hai hành động kia chuyển thành link chữ nhỏ; bỏ banner nhấp nháy; đẩy dòng ưu đãi xuống làm phụ đề dưới nút. Tỷ lệ click tăng lên khoảng 3,5% — gấp gần ba lần.
Diễn giải: Trang đầu vi phạm quy tắc "một ngôi sao". Khi ba nút cùng to cùng nổi, chúng triệt tiêu lẫn nhau, và người dùng tê liệt vì không biết chọn gì (hiện tượng "paralysis of choice").
Bài học: Nhiều điểm nhấn = không có điểm nhấn nào. Mỗi màn hình chỉ một hành động chính. Sự dũng cảm "hạ cấp" những thứ khác chính là dấu hiệu của designer trưởng thành.
Ví dụ 3: Trang chủ VnExpress và mô hình chữ F
VnExpress là một ví dụ kinh điển về phân cấp cho nội dung tin tức dày đặc. Tin nóng nhất (tin chủ) luôn nằm ở góc trên bên trái vùng nội dung, với ảnh lớn và tiêu đề cỡ chữ lớn nhất trang. Các tin phụ xếp bên phải và phía dưới với ảnh nhỏ hơn, tiêu đề nhỏ hơn. Mục chuyên trang (Thời sự, Kinh doanh, Thể thao...) dùng cỡ chữ trung bình làm "mốc" cho mắt nhảy qua.
Diễn giải: Cách bố trí này khớp hoàn hảo với mô hình quét chữ F. Tòa soạn biết rõ mắt độc giả Việt sẽ lia ngang phần trên trước, nên họ "đặt cược" tin quan trọng nhất vào đúng điểm nóng đó. Kích thước ảnh và cỡ tiêu đề chính là tín hiệu phân cấp: tin càng quan trọng, ảnh càng to, chữ càng lớn.
Bài học: Với trang nhiều nội dung, đừng cố làm mọi tin "công bằng". Hãy chọn lọc và phân cấp rõ ràng — độc giả sẽ cảm ơn bạn vì giúp họ tìm thấy thứ quan trọng nhanh hơn.
Hướng dẫn từng bước
Đây là quy trình thực tế bạn có thể áp dụng cho mọi trang/màn hình:
Bước 1 — Liệt kê và xếp hạng nội dung. Trước khi mở Figma hay viết một dòng CSS, hãy viết ra giấy mọi phần tử sẽ có trên màn hình. Sau đó đánh số ưu tiên 1, 2, 3: Cái gì người dùng phải thấy đầu tiên? Cái gì là hành động chính? Cái gì chỉ cần "có cho đủ"? Đây là bước tư duy, chưa động đến hình ảnh — nhưng là bước quan trọng nhất.
Bước 2 — Gom thành ba tầng. Đừng tạo mười cấp độ. Gom toàn bộ nội dung vào ba tầng: Primary (1 phần tử ngôi sao), Secondary (vài phần tử hỗ trợ), Tertiary (phần nền, thông tin phụ). Ba tầng là đủ để não người xử lý nhanh.
Bước 3 — Gán công cụ cho từng tầng. Tầng primary nhận kích thước lớn nhất + màu nổi nhất + nhiều khoảng trống nhất. Tầng tertiary nhận màu xám nhạt, cỡ nhỏ. Hãy dùng chênh lệch rõ ràng: nếu tiêu đề 32px thì phụ đề nên 18px chứ đừng 30px — chênh quá ít sẽ trông như lỗi chứ không phải chủ đích.
Bước 4 — Kiểm tra bằng "squint test". Nheo mắt lại nhìn màn hình (hoặc làm mờ ảnh chụp màn hình). Khi mọi chi tiết nhòe đi, phần tử nào vẫn còn nổi bật? Nếu đó đúng là phần tử bạn muốn ưu tiên — bạn đã thành công. Nếu mọi thứ nhòe thành một khối xám đều — hệ thống phân cấp của bạn quá yếu.
Bước 5 — Test đường đi của mắt. Tự hỏi: nếu là người lạ, tôi sẽ nhìn vào đâu trước, thứ hai, thứ ba? Vẽ đường đi đó. Nó có dẫn người dùng đến hành động bạn mong muốn không? Tốt nhất là cho 2–3 người chưa từng thấy trang nhìn nửa giây rồi hỏi họ nhớ gì.
Lỗi thường gặp & mẹo
Lỗi 1 — Mọi thứ đều quan trọng. Khi cái gì cũng to, cũng đậm, cũng màu nổi, kết quả là không có gì nổi. Mẹo: tự ép mình chỉ được dùng một màu nhấn (accent color) cho hành động chính trên mỗi màn hình.
Lỗi 2 — Chênh lệch quá nhỏ. Tiêu đề 17px, phụ đề 16px — mắt không phân biệt được, trông như lỗi. Mẹo: dùng chênh lệch rõ rệt (sẽ học bài bản hơn ở Bài 8 về type scale). Nguyên tắc: thà chênh nhiều còn hơn chênh mơ hồ.
Lỗi 3 — Nhầm "đẹp" với "rõ thứ bậc". Một trang có thể rất nghệ thuật nhưng người dùng vẫn lạc lối. Đẹp và rõ ràng là hai mục tiêu khác nhau. Mẹo: luôn ưu tiên rõ ràng trước, trang trí sau.
Lỗi 4 — Quên phần above the fold. Đặt thông điệp quan trọng nhất phía dưới, bắt người dùng cuộn mới thấy. Nhiều người sẽ không cuộn. Mẹo: thông điệp và hành động chính phải xuất hiện ngay trong màn hình đầu tiên.
Lỗi 5 — Lạm dụng màu đỏ/cảnh báo. Dùng màu đỏ cho mọi thứ "cho nổi" khiến người dùng tê liệt và lo lắng. Mẹo: để dành màu mạnh cho thứ thực sự cần ưu tiên.
Mẹo vàng: Hệ thống phân cấp tốt nhất là cái mà người dùng không nhận ra — họ chỉ thấy "trang này dễ dùng quá". Khi bạn làm tốt, không ai khen visual hierarchy, vì nó vô hình. Đó mới là thành công.
Bài tập thực hành
Bài 1 — Phân tích (30 phút). Chọn 3 trang web bạn hay dùng (ví dụ: Tiki, Báo Tuổi Trẻ, trang chủ một ngân hàng). Với mỗi trang, chụp màn hình rồi đánh số 1-2-3 lên ba phần tử bạn nhìn thấy trước nhất theo đúng thứ tự. Sau đó tự hỏi: designer đã dùng công cụ nào (kích thước/màu/khoảng trống/vị trí/độ đậm) để tạo ra thứ tự đó?
Bài 2 — Squint test (15 phút). Lấy ảnh chụp 3 trang trên, dùng bất kỳ app nào làm mờ chúng (hoặc đơn giản là nheo mắt nhìn). Ghi lại: phần tử nào vẫn nổi bật khi đã mờ? Nó có trùng với phần tử số 1 bạn đoán ở Bài 1 không?
Bài 3 — Tự thiết kế (45 phút). Phác thảo (vẽ tay trên giấy cũng được) một màn hình landing page cho một quán cà phê giả định ở Đà Nẵng. Yêu cầu: chỉ được có một hành động chính ("Đặt bàn"). Xác định rõ 3 tầng primary/secondary/tertiary và ghi chú bên cạnh mỗi phần tử thuộc tầng nào, dùng công cụ gì để phân cấp.
Bài 4 — Sửa lỗi (20 phút). Tìm một landing page mà bạn thấy "rối", khó biết bấm vào đâu. Viết ra 3 thay đổi cụ thể bạn sẽ làm để cải thiện hệ thống phân cấp của nó.
Tóm tắt
Visual hierarchy là nghệ thuật điều khiển con mắt người dùng một cách có chủ đích. Hãy nhớ những điều cốt lõi sau:
- Người dùng quét chứ không đọc tuần tự. Họ đi theo mô hình chữ F (trang nhiều chữ) hoặc chữ Z (trang ít chữ). Đặt thông tin quan trọng vào đúng điểm nóng.
- Năm công cụ tạo phân cấp: kích thước, màu sắc & tương phản, khoảng trống, vị trí, độ đậm & kiểu chữ. Phối hợp vừa đủ để tạo ba tầng primary – secondary – tertiary.
- Quy tắc một ngôi sao: mỗi màn hình chỉ một phần tử quan trọng nhất. Nhiều điểm nhấn = không có điểm nhấn.
- Quy trình: liệt kê & xếp hạng → gom ba tầng → gán công cụ với chênh lệch rõ ràng → squint test → test đường đi của mắt.
- Hệ thống phân cấp tốt là vô hình: người dùng chỉ thấy trang "dễ dùng".