Chỉ mất 0.05 giây để người dùng quyết định rời khỏi website của bạn, dù họ còn chưa kịp đọc một dòng chữ nào.
Bạn đã bao giờ mở một website, nhìn lướt qua rồi muốn thoát ra ngay dù chưa biết trang đó đang viết gì? Cảm giác này thực ra xảy đến nhanh hơn một cái chớp mắt.
Năm 2006, nhóm nghiên cứu của Gitte Lindgaard tại Đại học Carleton (Canada) cho hàng trăm người xem ảnh chụp các trang web trong đúng 50 mili giây. Điều đáng chú ý là, đánh giá “đẹp hay xấu” họ đưa ra trong khoảnh khắc đó gần như trùng khớp với đánh giá sau khi được nhìn website lâu hơn.
Nói cách khác, não bộ đã “chốt” cảm nhận về một website trước khi kịp xử lý nội dung. Thứ tác động đến ấn tượng đầu tiên lúc đó không phải nội dung, mà là cách các yếu tố trên trang được sắp xếp: cái gì to, cái gì nhỏ, cái gì đứng gần nhau và cái gì nổi lên trước mắt.
Đây là những gì thiết kế thị giác (visual design) giải quyết. Bạn không cần phải có năng khiếu bẩm sinh mới học được nó, bởi phần lớn cách mắt tiếp nhận một website đều vận hành theo 12 nguyên tắc dễ nắm bắt. Vậy mắt chúng ta nhìn website như thế nào trước khi kịp đọc nó?
Vì sao mắt người quét website theo hình chữ F?
Trước khi đi vào từng nguyên tắc, cần biết rằng mắt người không đọc website theo cách ngẫu nhiên. Chúng ta thường đi theo một khuôn mẫu tương tự nhau.
Năm 2006, Nielsen Norman Group (NNG) – tổ chức nghiên cứu trải nghiệm người dùng hàng đầu thế giới – gắn thiết bị theo dõi mắt cho 232 người và ghi lại cách họ đọc hàng nghìn trang web. Kết quả cho thấy phần lớn người dùng quét trang theo hình chữ F: đọc ngang phần trên cùng, đi xuống một đoạn rồi đọc ngang lần nữa với quãng ngắn hơn, sau đó chỉ lướt dọc theo cột bên trái.
Hơn một thập kỷ sau, NNG lặp lại thí nghiệm trên cả desktop lẫn mobile và khuôn mẫu này vẫn còn nguyên. Ngoài ra, họ cũng ghi nhận một số cách quét khác tùy loại nội dung, như nhìn vào từng điểm rời rạc hoặc quét theo từng lớp thông tin.
Người dùng không đọc website. Họ quét nó.
Vì vậy, 12 nguyên tắc dưới đây không chỉ giúp website “đẹp mắt” hơn. Chúng còn giúp bạn chủ động dẫn đường cho mắt, đặt đúng nội dung quan trọng vào những vị trí người dùng có khả năng nhìn thấy trước.
12 nguyên tắc thiết kế thị giác cơ bản
1. Kích thước và tỷ lệ (Size and Scale)
Trong cùng một khung hình, thứ gì to hơn thường được nhìn thấy trước. Nguyên tắc này đơn giản nhất, nhưng cũng dễ bị bỏ qua khi mọi yếu tố trên trang đều đang cố giành lấy sự chú ý.
Kích thước tạo ra “trọng lượng thị giác”. Chẳng hạn, tiêu đề lớn sẽ kéo mắt về trước đoạn văn nhỏ, còn nút bấm to thường nổi bật hơn một đường link nằm lẫn trong nội dung. Đây cũng là lý do hệ thống heading trên web đi từ H1 xuống H6, với kích thước giảm dần theo mức độ quan trọng.
Với website marketing, tỷ lệ nên phản ánh đúng thứ bạn muốn khách hàng ưu tiên nhìn. Tiêu đề chính cần lớn hơn tiêu đề phụ, còn nút “Đăng ký ngay” nên to và rõ hơn “Tìm hiểu thêm” nếu chuyển đổi là mục tiêu quan trọng nhất.
2. Khoảng cách (Spacing)
Khoảng cách giữa các dòng, đoạn văn và khối nội dung quyết định một website trông “dễ thở” hay “ngộp thở”. Khi mọi thứ bị dồn quá sát nhau, mắt chúng ta phải làm việc nhiều hơn để nhận ra đâu là từng nhóm thông tin riêng biệt.
Nghiên cứu của Đại học Wichita State (Mỹ) chỉ ra rằng, khoảng cách hợp lý giữa dòng và đoạn văn có thể tăng khả năng hiểu và ghi nhớ nội dung lên đến 20%. Trong khi đó, khảo sát của Adobe từng ghi nhận có tới 38% người dùng rời khỏi website khi thấy bố cục rối mắt.
Trong thiết kế, khoảng cách thường được chia làm hai loại. Macro spacing là khoảng cách lớn giữa các khối hoặc cột, còn micro spacing gồm giãn dòng và giãn chữ. Cả hai cùng quyết định nhịp đọc của trang.
3. Màu sắc và tương phản (Color and Contrast)
Màu sắc không chỉ có tác dụng trang trí mà còn dẫn đường cho mắt, và với nhiều người, độ tương phản là điều kiện để họ đọc được nội dung.
Theo tiêu chuẩn WCAG (Web Content Accessibility Guidelines), văn bản thông thường cần có tỷ lệ tương phản tối thiểu 4.5:1 so với nền. Chữ cỡ lớn từ 18pt trở lên cần tỷ lệ tối thiểu 3:1.
Đây không phải những con số tùy tiện, đặc biệt khi khả năng tiếp nhận màu sắc của mỗi người không giống nhau.
Theo Tổ chức Y tế Thế giới (WHO), khoảng 2.2 tỷ người trên toàn cầu gặp một dạng suy giảm thị lực nào đó. Bên cạnh đó, khoảng 8% nam giới bị mù màu ở nhiều mức độ khác nhau.
Với website marketing, màu tương phản thường được dùng để làm nổi bật nút CTA (call-to-action), khiến mắt khó lướt qua mà không nhận ra. Tuy nhiên, bạn không nên chỉ dùng màu để truyền tải thông tin quan trọng, bởi không phải ai cũng phân biệt màu sắc giống nhau. Hãy kết hợp thêm chữ, hình dạng hoặc icon.
4. Thứ bậc chữ (Typography Hierarchy)
Nếu kích thước áp dụng cho mọi yếu tố trên trang, thì thứ bậc chữ là phiên bản dành riêng cho văn bản. Hệ thống rõ ràng thường kết hợp kích thước, độ đậm (bold thu hút hơn regular), màu sắc và khoảng trắng xung quanh.
Khi bạn sử dụng các yếu tố này nhất quán, người đọc chỉ cần nhìn heading và những từ in đậm cũng nắm được phần lớn nội dung chính. Điều này phù hợp với khuôn mẫu chữ F, bởi người dùng vốn không đọc kỹ từng dòng ngay từ đầu.
Có một chi tiết nhỏ nhưng đáng nhớ: đoạn văn dễ đọc nhất thường có khoảng 45-75 ký tự trên mỗi dòng, bởi dòng quá dài khiến mắt dễ “lạc” khi chuyển xuống dưới, còn dòng quá ngắn lại làm nhịp đọc bị ngắt liên tục.
5. Sự gần nhau (Proximity)
Não bộ chúng ta luôn tìm cách gom những gì mắt nhìn thấy thành từng nhóm. Đây cũng là nội dung được tâm lý học Gestalt nghiên cứu từ đầu thế kỷ XX, với ba tên tuổi Max Wertheimer, Wolfgang Köhler và Kurt Koffka.
Theo nguyên tắc gần nhau, những thứ được đặt sát nhau sẽ được hiểu là có liên quan, dù chúng khác nhau về màu sắc, hình dạng hay kích thước. Ngược lại, khoảng cách xa ngầm cho người xem biết hai yếu tố không thuộc cùng nhóm.
Ứng dụng này rất trực quan trên website: nhãn “Email” cần đứng gần ô nhập email hơn ô nhập số điện thoại, còn địa chỉ, số điện thoại và email nên được gom thành khối riêng. Chỉ cần thay đổi khoảng cách, bạn đã có thể cho người xem biết thứ gì thuộc về thứ gì mà không cần thêm đường viền hay khung bao.
6. Quy tắc số lẻ (Rule of Odds)
Con người có xu hướng tự động ghép cặp những gì xuất hiện theo số chẵn, có lẽ vì cơ thể ta vốn đối xứng với hai mắt, hai tay và hai chân. Nhưng khi nhìn thấy số lẻ phần tử, não không thể ghép cặp trọn vẹn và luôn còn dư lại một thứ.
Điều này khiến mắt tiếp tục di chuyển qua lại lâu hơn. Vì vậy, số 3 xuất hiện rất nhiều trong thiết kế, từ ba thẻ tính năng (feature card), ba gói giá đến ba đánh giá khách hàng nổi bật trên trang chủ.
Dù vậy, quy tắc số lẻ mang tính gợi ý nhiều hơn là luật bất biến. Số chẵn vẫn phù hợp trong những trường hợp bạn muốn truyền tải cảm giác ổn định và cân bằng tuyệt đối, thay vì tạo thêm chuyển động cho mắt.
7. Đường dẫn thị giác và hướng nhìn (Leading Lines / Eye Gaze Patterns)
Nếu sự gần nhau giúp gom nhóm, thì đường dẫn thị giác có tác dụng điều hướng. Đường thẳng, đường cong hoặc hướng nhìn của người trong ảnh đều có thể “kéo” mắt người xem đi theo lộ trình được sắp đặt trước.
Khuôn mẫu chữ F mà Nielsen Norman Group phát hiện chính là đường dẫn tự nhiên bạn có thể tận dụng. Thông điệp quan trọng nhất thường nên nằm ở khu vực phía trên bên trái, nơi mắt có xu hướng ghé qua đầu tiên.
Bên cạnh chữ, mũi tên, đường kẻ hay ánh mắt của người mẫu trong ảnh hero cũng có sức dẫn dắt rất mạnh. Chẳng hạn nếu người trong ảnh nhìn về phía nút “Đăng ký”, nhiều khả năng người xem cũng vô thức nhìn theo hướng đó.
8. Căn chỉnh (Alignment)
Một website có thể sở hữu màu đẹp, nội dung hay và hình ảnh chất lượng, nhưng nếu các yếu tố không thẳng hàng, tổng thể vẫn trông lộn xộn và thiếu chuyên nghiệp.
Căn chỉnh thường được thực hiện bằng hệ thống lưới (grid system), trong đó trang được chia thành các cột đều nhau, phổ biến nhất là lưới 12 cột. Tiêu đề, hình ảnh và đoạn văn sẽ cùng “bám” vào những đường thẳng chung thay vì nằm ở các vị trí rời rạc.
Nielsen Norman Group xem việc căn chỉnh theo lưới là nền tảng của thiết kế thị giác tốt, cùng với thứ bậc rõ ràng, màu sắc có chủ đích và sự nhất quán xuyên suốt. Bạn cũng không cần con mắt thẩm mỹ tinh tường để kiểm tra điều này, chỉ cần thử kẻ đường dọc qua các yếu tố. Nếu chúng không cùng “bám” vào đường đó, đây là dấu hiệu cần chỉnh lại.
9. Khoảng trống (Negative Space)
Khoảng trống thường bị nhầm với khoảng cách, dù hai nguyên tắc này không hoàn toàn giống nhau. Khoảng cách trả lời câu hỏi “các phần tử cách nhau bao xa”, còn khoảng trống là việc chủ động để trống vùng lớn xung quanh yếu tố.
Khi logo, tiêu đề hoặc nút CTA được bao quanh bởi nhiều khoảng trống, mắt sẽ tự động hiểu đây là điểm quan trọng trên trang. Yếu tố đó không cần thêm màu sắc hay kích thước để “gào thét” rằng người dùng phải chú ý đến nó.
Đây cũng là lý do website của các thương hiệu cao cấp thường được thiết kế rất “thoáng”, trong khi trang tin tức cần chứa nhiều thông tin nên có ít khoảng trống hơn. Với người mới làm website marketing, bản năng thường là lấp đầy mọi chỗ trống bằng chữ, hình hoặc banner. Nhưng đôi khi, thứ khiến trang web trông đắt giá hơn lại là những gì bạn chọn không đặt lên đó.
10. Sự lặp lại (Repetition)
Vào cuối thế kỷ XIX, nhà tâm lý học Hermann Ebbinghaus đặt nền móng cho các nghiên cứu về trí nhớ và chỉ ra rằng, thông tin được tiếp xúc lặp đi lặp lại sẽ được não ghi nhớ tốt hơn hẳn những gì chỉ xuất hiện một lần.
Nguyên lý này gần như được giữ nguyên khi áp dụng vào thiết kế thương hiệu. Khi website luôn dùng cùng một bảng màu, kiểu chữ và phong cách nút bấm trên mọi trang, người dùng không chỉ thấy nó “có tổ chức” hơn, mà còn ghi nhớ và nhận diện thương hiệu nhanh hơn trong những lần gặp sau.
Khảo sát về thương hiệu của Venngage từng ghi nhận, việc duy trì bộ nhận diện nhất quán có thể giúp tăng doanh thu trung bình khoảng 23%. Với website marketing, cách lặp lại đơn giản nhất là giữ cùng màu, hình dạng và vị trí cho nút CTA trong suốt hành trình khách hàng, từ trang chủ đến trang thanh toán.
11. Chiều sâu (Perspective)
Màn hình về bản chất là phẳng, nhưng não bộ con người vốn quen với thế giới ba chiều. Vì vậy, bóng đổ và các lớp chồng lên nhau có thể tạo cảm giác một yếu tố đang nằm cao hơn hoặc gần mắt hơn những phần còn lại.
Một ví dụ điển hình là Material Design của Google. Mỗi yếu tố trên giao diện được gán “độ cao” (elevation) khác nhau thông qua độ đậm nhạt của bóng đổ. Thẻ (card) có bóng nhẹ trông như đang nổi trên nền, còn hộp thoại (modal) với bóng đậm hơn sẽ tạo cảm giác bao trùm lên giao diện phía dưới, báo hiệu đây là nội dung cần chú ý ngay.
Trên website marketing, chiều sâu thường được sử dụng đơn giản hơn. Bạn có thể dùng bóng nhẹ dưới nút bấm để gợi ý “cái này bấm được”, hoặc lớp phủ mờ phía sau popup để tách nội dung quan trọng khỏi phần còn lại của trang.
12. Quy tắc một phần ba (Rule of Thirds)
Năm 1797, họa sĩ người Anh John Thomas Smith lần đầu nhắc đến “quy tắc một phần ba” khi bàn về cách cân bằng sáng tối trong tranh. Đến giữa thế kỷ XIX, các hội nhóm nhiếp ảnh dần đưa nguyên tắc này vào bố cục ảnh, và sau đó nó trở thành một trong những quy tắc phổ biến của nhiếp ảnh, hội họa lẫn thiết kế.
Cách áp dụng: chia khung hình thành 9 phần bằng nhau bởi hai đường ngang và hai đường dọc cách đều. Thay vì đặt chủ thể ở chính giữa, bạn đưa nó vào một trong bốn giao điểm của các đường này.
Bố cục lệch tâm tạo cảm giác chuyển động và giữ mắt nhìn lâu hơn so với việc đặt mọi thứ ngay chính giữa, vốn dễ mang lại cảm giác tĩnh và đơn điệu. Với ảnh hero trên website, bạn có thể dịch gương mặt nhân vật hoặc sản phẩm về một giao điểm, còn phần không gian bên cạnh sẽ là nơi đặt tiêu đề và nút CTA.
Bắt đầu áp dụng 12 nguyên tắc này thế nào?
Đọc đến đây, có thể bạn thấy hơi ngợp vì phải nhớ 12 nguyên tắc cùng lúc. Tuy nhiên, không nhất thiết phải áp dụng hoàn hảo tất cả ngay từ bản nháp đầu tiên.
Nếu mới bắt đầu, bạn nên ưu tiên bốn yếu tố nền tảng là căn chỉnh, khoảng cách, tương phản màu và thứ bậc chữ. Chúng quyết định một website có gọn gàng, dễ đọc hay không, đồng thời cũng là những phần dễ chỉnh sửa nhất trên các công cụ thiết kế kéo-thả.
Khi trang đã đủ rõ ràng, các nguyên tắc như số lẻ, đường dẫn thị giác hay chiều sâu sẽ giúp nó từ “ổn” trở nên “cuốn hút” hơn. Bạn có thể kiểm tra từng phần trên website của mình, thay vì cố nhồi cả 12 nguyên tắc vào cùng một lần.
Về cơ bản, tất cả đều phục vụ một mục tiêu: giúp người xem hiểu website nhanh nhất có thể, ngay trong những mili giây đầu tiên họ ghé qua. Bởi như nghiên cứu của Lindgaard đã chỉ ra, ấn tượng đó gần như không thể đảo ngược và chỉ được tạo ra một lần.