“Above the Fold” (tạm dịch là phía trên nếp gấp) là một thuật ngữ quan trọng trong thiết kế web, marketing, và UX/UI, dùng để chỉ phần nội dung đầu tiên mà người dùng nhìn thấy ngay khi truy cập một trang web, trước khi họ cuộn (scroll) xuống.
“Above the fold refers to the portion of a web page that is visible in a browser window when the page first loads, before the user scrolls.”
– Krug, Steve (2014). Don’t Make Me Think (Revisited): A Common Sense Approach to Web Usability
“Phần trên cùng là phần của trang web hiển thị trong cửa sổ trình duyệt khi trang tải lần đầu tiên, trước khi người dùng cuộn.” (Google Dịch)
Nguồn gốc: Thuật ngữ bắt nguồn từ ngành báo in, khi báo được gấp lại và người ta chỉ nhìn thấy nửa trên trang bìa – đây là nơi các tiêu đề, hình ảnh thu hút nhất được đặt để lôi kéo người đọc mua báo.
Cách hiểu đơn giản:
Above the fold là khu vực “vàng” trên trang web – vì:
-
Nó là thứ đầu tiên người dùng thấy
-
Quyết định ấn tượng ban đầu và hành vi tiếp theo (cuộn xuống, nhấn nút, thoát trang…)
📱 Chiều cao “fold” là bao nhiêu?
Không cố định, vì còn phụ thuộc vào:
| Thiết bị | Kích thước “fold” phổ biến |
|---|---|
| Desktop | ~600–800px tính từ trên xuống |
| Mobile | ~300–500px |
💡 Tốt nhất là thiết kế tương thích thiết bị và kiểm thử trên nhiều thiết bị thực tế.
🔍 Tại sao Above the Fold quan trọng?
- Tác động đến tỷ lệ thoát (Bounce Rate): Nếu thông tin trên fold không hấp dẫn → người dùng rời trang ngay.
- Ảnh hưởng đến SEO và trải nghiệm người dùng: Google không xếp hạng cao các trang có quá nhiều quảng cáo trên phần này (theo thuật toán “Page Layout Algorithm”).
- Tối ưu chuyển đổi (CRO): Các CTA (Call To Action) hiệu quả nên được đặt gần hoặc trong vùng “above the fold” để dễ thấy và dễ hành động.
📐 Gợi ý bố cục phần Above the Fold hiệu quả:
| Thành phần nên có | Mục tiêu |
|---|---|
| Tiêu đề rõ ràng (Headline) | Cho biết ngay đây là trang gì?
Ví dụ: “Giảm 50% cho đơn hàng đầu tiên!” |
| Mô tả ngắn (Subheading) | Tóm tắt lợi ích / thông điệp?
|
| CTA (Nút hành động) | Hướng người dùng làm gì?
Ví dụ: Nút “Dùng thử miễn phí” đặt giữa màn hình, màu cam nổi bật. |
| Hình ảnh minh họa / video | Gây ấn tượng và truyền cảm hứng?
|
- Menu điều hướng đơn giản (Navigation)
-
- UX: Không nên quá nhiều mục gây rối.
- UI: Cố định (sticky header), dễ đọc, có đủ khoảng cách giữa các thành phần.
- Tốc độ tải trang
-
- UX: Người dùng sẽ thoát nếu trang trên điện thoại tải >3s. Xem thêm
- UI: Dùng ảnh nén, lazy load (tải chậm) đúng thành phần, không hiệu ứng động nặng ngay đầu trang.
- Tương thích thiết bị (Responsive)
-
- UX: Trải nghiệm mượt mà trên mobile, tablet, desktop.
- UI: Font tự điều chỉnh, dàn trang linh hoạt theo kích cỡ màn hình.
- Nội dung chính nổi bật (Visual Hierarchy)
-
- UX: Người dùng nhìn vào là hiểu ngay nội dung gì quan trọng nhất.
- UI: Dùng màu sắc, kích cỡ, bố cục để dẫn mắt người đọc đúng hướng.
- “Eye-flow” & F-pattern / Z-pattern
-
- UX: Tận dụng mô hình đọc phổ biến của người dùng (trên xuống, trái sang phải).
- UI: Thiết kế bố cục theo đường mắt, ví dụ: Z-pattern cho trang landing.
- Khoảng trắng (Whitespace)
-
- UX: Tạo cảm giác thoáng, dễ tiêu hóa thông tin.
- UI: Đừng cố nhồi nhét tất cả vào một màn hình đầu tiên.
