Logo ở góc trên bên trái, nút “Mua ngay” ở góc dưới bên phải không chỉ là cách sắp xếp cho thuận mắt.
Bạn có thể chưa từng để ý, nhưng cách sắp xếp này xuất hiện ở khắp nơi. Từ một landing page, tờ báo giấy cho đến cuốn sách, logo thương hiệu thường nằm ở góc trên bên trái, trong khi nút “Đăng ký” hay “Mua ngay” lại “đóng đô” ở góc dưới bên phải.
Mắt người đọc không quét ngẫu nhiên qua một trang thông tin, mà có xu hướng đi theo đường mòn đã quen thuộc từ lâu. Đường mòn ấy được mô tả bằng sơ đồ bố cục Gutenberg (Gutenberg Diagram) – một trong những mô hình quen thuộc trong thiết kế UX/UI, giúp lý giải cách mắt di chuyển trên giao diện tĩnh. Vậy sơ đồ này hoạt động thế nào, và người mới làm website marketing có thể vận dụng nó ra sao?
Sơ đồ Gutenberg là gì?
Sơ đồ Gutenberg mô tả xu hướng quét mắt tự nhiên và vô thức khi chúng ta nhìn vào một trang có bố cục tĩnh, đồng nhất (homogeneous layout) và nhiều chữ, trong trường hợp không có hình ảnh, màu sắc hay yếu tố đồ họa nào quá nổi bật để “chen ngang” và thay đổi thứ tự chú ý.
Mô hình chia giao diện thành 4 vùng góc phần tư bằng nhau, theo lưới 2×2. Nói cách khác, đây là tấm bản đồ dự đoán nơi mắt người dùng ghé qua đầu tiên, những khu vực vẫn nhận được sự chú ý và cả phần họ có thể lướt qua mà gần như không đọc.
Vì sao mô hình này mang tên Gutenberg?
Sơ đồ được đặt theo tên Johannes Gutenberg, người phát minh ra máy in chữ rời tại châu Âu vào thế kỷ 15. Ban đầu, nguyên lý này được các nhà thiết kế ngành in sử dụng để sắp xếp trang sách, báo giấy sao cho cân bằng về thị giác và dễ tiếp nhận hơn.
Khi thế giới chuyển sang kỷ nguyên số, các chuyên gia UX/UI và tối ưu hóa tỷ lệ chuyển đổi (CRO) tiếp tục áp dụng nó vào website tĩnh, landing page hay email marketing. Dù màn hình đã thay cho trang giấy, người đọc vẫn cần một trật tự thị giác đủ rõ để biết nên nhìn vào đâu trước.
Vì sao mắt lại “trôi” theo đường chéo?
Trọng lực đọc (reading gravity) là lực hút vô thức kéo ánh mắt từ góc trên bên trái xuống góc dưới bên phải. Với những ngôn ngữ được đọc từ trái sang phải, từ trên xuống dưới như tiếng Việt, tiếng Anh hay tiếng Pháp, não bộ đã quen với chuyển động này từ khi ta còn nhỏ. Nếu giao diện không có điểm nhấn đủ mạnh để phá vỡ thói quen, mắt sẽ tự động trượt theo đường chéo cho đến điểm kết thúc.
Ở cuối dòng đầu tiên, mắt còn thực hiện một cú nhảy nhanh trở lại lề trái, gọi là đường chéo quay lại (diagonal return). Khi đang quét lướt, thay vì đọc tuần tự từng dòng như lúc đọc sách, cú nhảy này khiến mắt đi qua góc dưới bên trái khá nhanh rồi dồn sự tập trung về phía góc dưới bên phải.
Về bản chất, quá trình trên diễn ra qua saccades – những cú nhảy mắt cực nhanh được điều khiển bởi phần tư duy nhanh và vô thức. Não luôn tìm cách quét thông tin nhanh nhất để tiết kiệm năng lượng, giảm lượng dữ liệu phải xử lý. Chỉ khi một yếu tố thị giác thật sự khác biệt xuất hiện, phần tư duy chậm và có ý thức mới bị “đánh động” để dừng lại lâu hơn.
4 vùng trong sơ đồ Gutenberg
Bốn góc phần tư không có giá trị ngang nhau. Hai vùng nhận được sự chú ý khá cao, hai vùng còn lại thì không. Vì vậy mỗi khu vực cũng phù hợp với những loại nội dung khác nhau.
Vùng 1 – Vùng quang học sơ cấp
Góc trên bên trái là điểm khởi đầu mặc định ngay khi trang web vừa tải xong, đồng thời có mức độ chú ý cao nhất. Não bộ thường bắt đầu tại đây để thiết lập bối cảnh cho toàn bộ trang.
Vị trí này phù hợp với logo thương hiệu, thông điệp giá trị cốt lõi và tiêu đề chính (headline). Bạn cũng có thể đặt từ khóa thu hút sự chú ý ở đây, nhưng nguyên tắc quan trọng nhất vẫn là đưa kết luận lên trước, rồi mới xếp những thông tin giải thích ở phía sau.
Vùng 2 – Vùng rơi rớt mạnh
Sau Vùng 1, mắt quét ngang sang góc trên bên phải trước khi bắt đầu đi xuống. Nhờ thói quen đọc từ trái sang phải, khu vực này vẫn giữ được mức độ chú ý khá cao, phù hợp với thanh điều hướng phụ, ô tìm kiếm, nút đăng nhập hoặc đăng ký. Những thông tin liên hệ nhanh như hotline và email cũng có thể được đặt ở đây, miễn là chúng không gây nhiễu cho tiêu đề chính.
Vùng 3 – Vùng rơi rớt yếu
Vùng 3 thì ngược lại. Góc dưới bên trái chịu tác động của đường chéo quay lại, nên mắt thường lướt qua rất nhanh để tiến tới điểm kết thúc. Đây được xem là một vùng mù thị giác, với mức độ chú ý cực kỳ thấp nếu không có màu sắc hay độ tương phản đủ mạnh.
Vì vậy Vùng 3 thường chỉ nên chứa nội dung phụ trợ, không ảnh hưởng trực tiếp đến hành vi chuyển đổi. Chính sách bảo mật, điều khoản sử dụng, thông tin bản quyền hay các liên kết mạng xã hội đều có thể nằm ở khu vực này.
Vùng 4 – Vùng điểm cuối
Góc dưới bên phải là điểm dừng cuối cùng trước khi người dùng quyết định cuộn tiếp hay rời trang. Lúc này não bộ đã tiếp nhận hờ những thông tin phía trên và sẵn sàng đưa ra quyết định, khiến Vùng 4 có mức độ chú ý rất cao và trở thành “khu đất vàng” cho tỷ lệ chuyển đổi.
Nút kêu gọi hành động chính (CTA) như “Mua ngay”, “Dùng thử miễn phí”, form đăng ký ngắn hoặc nút chuyển sang bước tiếp theo nên được đặt tại đây. Đây cũng là lý do CTA nằm ở góc dưới bên phải trên không ít website.
Đưa 4 vùng vào landing page thế nào?
Phần lớn quyết định rời trang của người dùng diễn ra ngay trong khu vực phía trên nếp gấp (above the fold), tức phần màn hình đầu tiên trước khi họ cuộn xuống. Đây cũng là nơi sơ đồ Gutenberg phát huy tác dụng rõ nhất. Một cách phân bổ thường gặp gồm:
- Góc trên bên trái (Vùng 1): Đặt logo thương hiệu để xây dựng độ tin cậy ngay từ 50 mili giây đầu tiên.
- Từ Vùng 1 sang Vùng 2: Đặt headline lớn, rõ ràng và dễ đọc, kèm một tiêu đề phụ giải thích ngắn gọn lợi ích cốt lõi ngay bên dưới.
- Khu vực trung tâm hoặc hơi lệch phải: Dùng hình ảnh sản phẩm chất lượng cao hoặc video giải thích ngắn. Hình ảnh truyền tải thông tin nhanh hơn nhiều so với chữ viết, đồng thời dễ chạm đến cảm xúc của người xem.
- Góc dưới bên phải (Vùng 4): Đặt CTA chính với màu tương phản mạnh so với nền, cùng phần chữ đủ sức thúc đẩy người dùng hành động.
Làm gì nếu thông tin quan trọng nằm ở Vùng 3?
Không phải lúc nào chúng ta cũng muốn người dùng lướt qua Vùng 3 một cách hờ hững. Nếu khu vực “mù” này chứa thông tin quan trọng, một số gợi ý thị giác có thể kéo mắt họ dừng lại.
Dùng mũi tên và đường dẫn
Trong một thử nghiệm A/B testing của Online Dialogue trên website chuỗi khách sạn Van Der Valk, chỉ riêng việc thêm mũi tên hướng xuống đã giúp lượng khách cuộn hết trang chủ tăng gấp 10 lần, còn tỷ lệ chuyển đổi tăng 57%. Đôi khi, một mũi tên là đủ.
Những đường kẻ mảnh hay mũi tên tinh tế, đi từ trái sang phải hoặc từ trên xuống dưới, có thể dẫn mắt qua đúng chuỗi thông tin bạn muốn. Nhờ vậy, người dùng không bỏ qua nội dung ở Vùng 3 trước khi chạm tới CTA cuối cùng.
Tận dụng hướng ánh mắt của nhân vật
Con người có xu hướng tự động nhìn theo ánh mắt hoặc cử chỉ của người khác. Theo một nghiên cứu so sánh của CXL Institute về các gợi ý thị giác trên form đăng ký, sự chênh lệch giữa các cách điều hướng khá rõ:
- Mũi tên chỉ thẳng vào form: Thời gian nhìn form trung bình cao nhất, đạt 2.38 giây, trong khi thời gian tìm thấy form nhanh nhất ở mức 1.03 giây.
- Hình người nhìn thẳng vào người xem: Khi ánh mắt nhân vật không hướng về form, người dùng có xu hướng né tránh khu vực này, khiến thời gian nhìn form giảm còn 0.99 giây, trong khi thời gian tìm thấy form chậm nhất ở mức 1.72 giây.
- Hình người hướng mắt về form: Thời gian nhìn form tăng lên 1.83 giây, cho thấy ánh mắt nhân vật vẫn mang lại hiệu quả điều hướng khá tốt.
Một chi tiết nhỏ như hướng nhìn trong ảnh cũng có thể quyết định người dùng có chú ý đến form đăng ký của bạn hay không.
Áp dụng hiệu ứng Von Restorff
Khi một nhóm đối tượng tương tự nhau xuất hiện, thứ khác biệt nhất sẽ được ghi nhớ đầu tiên. Hiện tượng này còn gọi là hiệu ứng Von Restorff.
Nếu cần làm nổi bật nội dung ở Vùng 3, bạn có thể đổi màu nền, đóng khung hoặc tăng độ tương phản cho khối thông tin. Sự khác biệt này sẽ “bẻ gãy” đường chéo quay lại tự nhiên, buộc mắt người đọc dừng lại để xử lý.
Gutenberg khác gì F-Pattern và Z-Pattern?
Trong thiết kế giao diện, sơ đồ Gutenberg thường được đặt cạnh hai mô hình quét mắt khác là F-Pattern và Z-Pattern. Việc lựa chọn mô hình nào phụ thuộc vào lượng chữ, hình ảnh và cách thông tin được phân bổ trên trang.
Gutenberg
Gutenberg phù hợp với nội dung tĩnh, nhiều chữ và được phân bổ đồng đều, chẳng hạn sách điện tử, trang báo hay văn bản pháp lý. Tải nhận thức ở mức thấp đến trung bình, bởi não chủ yếu lướt theo thói quen có sẵn để tìm điểm dừng. CTA lý tưởng thường nằm ở góc dưới bên phải.
F-Pattern
F-Pattern thường xuất hiện trên những trang cực kỳ nhiều chữ nhưng không đồng nhất, như trang kết quả tìm kiếm hoặc trang tin tức tổng hợp. Mắt quét hai dòng ngang ở phía trên, sau đó trượt dọc theo lề trái xuống dưới, tạo thành hình gần giống chữ F.
Tải nhận thức lúc này ở mức rất cao vì người dùng dễ bị ngợp thông tin. Trên thực tế, chỉ khoảng 28% lượng chữ trong một bài viết được đọc thật sự ở một lượt truy cập thông thường. Vì vậy, CTA nên nằm ở đầu trang hoặc được lặp lại dọc theo lề trái.
Z-Pattern
Z-Pattern phù hợp với giao diện ít chữ, nhiều hình ảnh và có phân cấp rõ ràng, như landing page bán hàng hay trang chủ giới thiệu sản phẩm. Mắt quét ngang, đi chéo xuống góc dưới bên trái rồi quét ngang lần nữa để tạo thành hình chữ Z, trong khi các khối hình ảnh và văn bản đan xen giúp tải nhận thức ở mức thấp. CTA được đặt ở cuối đường quét, tức góc dưới bên phải.
Lên mobile, đường chéo đi đâu?
Với mobile thì cách quét này thay đổi. Khi bố cục chuyển sang màn hình hẹp, lưới 2×2 của sơ đồ Gutenberg bị ép thành một cột duy nhất, khiến trọng lực đọc theo đường chéo chuyển thành trọng lực cuộn dọc. Nhưng nguyên tắc đưa kết luận lên đầu tiên vẫn giữ nguyên giá trị, và góc trên cùng bên trái của màn hình điện thoại vẫn là nơi logo cùng thông điệp giá trị cốt lõi cần xuất hiện.
Thay đổi lớn nhất nằm ở Vùng điểm cuối. Trên mobile, khu vực này không còn cố định ở góc dưới bên phải của màn hình đầu tiên, mà dịch xuống cuối hành trình cuộn trang. Một giải pháp tương đương là dùng nút CTA dính (sticky CTA), cố định ở đáy màn hình trong lúc người dùng cuộn.
Khi nào Gutenberg không còn hiệu quả?
Tuy nhiên Gutenberg cũng có giới hạn. Sơ đồ này không phải “công thức thần thánh” có thể áp dụng cho mọi giao diện, và người mới làm website thường gặp một số cạm bẫy sau:
Chỉ đúng với thiết kế đồng nhất: Mô hình dự đoán tốt nhất khi thông tin được phân bổ tương đối đều, không chênh lệch quá lớn về kích thước hay màu sắc. Nếu giữa trang có một hình sản phẩm khổng lồ hoặc video tự động phát, mắt sẽ bị hút vào đó trước và trật tự Gutenberg có thể bị phá vỡ hoàn toàn.
Tránh bẫy “đáy giả” (false bottom): Khi trang kéo dài xuống dưới nếp gấp, một đường kẻ ngang chắn hết chiều rộng có thể trở thành “tín hiệu dừng”, khiến não hiểu rằng trang đã hết nội dung. Người dùng vì vậy dừng ở Vùng 4 thay vì tiếp tục cuộn xuống.
Phát huy rõ nhất trong phạm vi above the fold: Với trang dài qua nhiều màn hình, bạn nên cân nhắc chuyển sang Z-Pattern lặp lại (zig-zag layout) hoặc bố cục “layer cake”. Những cách sắp xếp này giúp duy trì động lực cuộn trang tốt hơn.
Checklist trước khi lên layout theo Gutenberg
Trước khi hoàn thiện website, landing page hay banner quảng cáo, bạn có thể tự kiểm tra:
- Logo và thông điệp giá trị cốt lõi đã nằm ở góc trên bên trái (Vùng 1), nơi đón ánh nhìn đầu tiên chưa?
- Thanh điều hướng phụ hoặc ô tìm kiếm đã được xếp gọn ở góc trên bên phải (Vùng 2), tránh gây nhiễu cho tiêu đề chính chưa?
- Có nội dung quan trọng nào đang nằm ở góc dưới bên trái (Vùng 3) mà chưa có điểm nhấn để kéo sự chú ý không?
- CTA chính hoặc form đăng ký đã nằm ở góc dưới bên phải (Vùng 4), nơi mắt người dùng thường dừng lại chưa?
- Giao diện phía trên nếp gấp đã đủ tối giản, trực quan và hạn chế độ phức tạp thị giác chưa?
Nếu phần lớn câu trả lời vẫn là “chưa”, đó là lúc bạn nên sắp xếp lại bố cục.
Gutenberg hữu ích, nhưng không phải “công thức thần thánh”
Sơ đồ Gutenberg không phải quy tắc thiết kế bắt buộc, mà là mô hình mô tả thói quen quét mắt tự nhiên của con người. Nguyên lý này được đúc kết từ ngành in ấn hàng trăm năm trước, rồi tiếp tục được các nghiên cứu về UX/UI và CRO kiểm chứng trong kỷ nguyên số.
Với người mới tìm hiểu website marketing, điều quan trọng không nằm ở việc thuộc tên cả 4 vùng. Bạn cần hiểu rằng mắt người dùng luôn tìm đường đi nhanh nhất, còn nhiệm vụ của người thiết kế là đặt đúng nội dung vào nơi ánh nhìn sẽ dừng lại. Khi nắm được nguyên lý đó, bạn có thể kết hợp Gutenberg với F-Pattern hoặc Z-Pattern theo loại nội dung mình đang xây dựng, thay vì rập khuôn một mô hình cho mọi website.