Mở đầu — vì sao bài này quan trọng
Hãy tưởng tượng bạn vừa thiết kế xong một trang danh sách sản phẩm thật đẹp: card gọn gàng, ảnh sắc nét, typography chuẩn chỉnh. Nhưng cửa hàng có 4.800 sản phẩm. Câu hỏi đầu tiên mà bất kỳ developer nào cũng sẽ hỏi bạn là: "Mỗi lần load bao nhiêu cái? Rồi đến cái thứ 21 thì sao?" Đó chính là lúc bạn phải quyết định: pagination (phân trang) hay infinite scroll (cuộn vô tận)?
Đây không phải một lựa chọn nhỏ về mặt thẩm mỹ. Nó ảnh hưởng trực tiếp đến SEO, đến cảm giác kiểm soát của người dùng, đến hiệu năng, đến tỷ lệ chuyển đổi và cả khả năng người dùng tìm lại được thứ họ đã thấy. Tôi đã thấy nhiều bạn designer trẻ mặc định chọn infinite scroll vì "nó hiện đại, giống Instagram", rồi ba tháng sau team marketing gào lên vì footer chứa nút "Liên hệ" và "Chính sách đổi trả" không ai bao giờ chạm tới được nữa.
Trong bài này, chúng ta sẽ mổ xẻ từng pattern: chúng hoạt động thế nào, hợp với loại nội dung nào, đánh đổi gì, và một pattern lai thứ ba — nút "Load more" — mà rất nhiều sản phẩm lớn đang dùng vì nó lấy được điểm tốt của cả hai. Mục tiêu là sau bài này, bạn không còn chọn theo cảm tính mà chọn dựa trên bản chất nội dung và hành vi người dùng.
Khái niệm cốt lõi
Traditional pagination — phân trang truyền thống
Đây là pattern kinh điển: nội dung được chia thành các trang đánh số, người dùng thấy "1 2 3 ... 47" và bấm để di chuyển. Mỗi trang thường tải một lượng cố định, ví dụ 20 hoặc 24 item.
Điểm mạnh cốt lõi của pagination nằm ở sự kiểm soát vị trí. Người dùng biết rõ mình đang ở đâu ("trang 3 trên 47"), biết còn bao nhiêu, và có thể nhảy thẳng tới trang cuối hoặc một trang bất kỳ. Cảm giác "có điểm dừng" này quan trọng hơn bạn nghĩ — nó cho người dùng một mục tiêu hữu hạn thay vì một vực thẳm vô tận.
Quan trọng không kém với bối cảnh Việt Nam: pagination thân thiện với SEO. Mỗi trang có một URL riêng (?page=2, ?page=3), nên Google có thể index từng trang một cách độc lập. Với một sàn thương mại điện tử, điều này nghĩa là nhiều landing page hơn, nhiều cơ hội xếp hạng từ khóa hơn. Ngoài ra URL có tham số trang còn cho phép chia sẻ và bookmark — bạn gửi cho đồng nghiệp đúng "trang 5 kết quả tìm kiếm laptop" và họ thấy chính xác cái bạn thấy.
Pagination cũng nhẹ về mặt bộ nhớ. Trình duyệt chỉ giữ DOM của một trang tại một thời điểm, nên dù danh mục có 100.000 item, thiết bị của người dùng vẫn mượt.
Điểm yếu: nó tạo ra gián đoạn. Mỗi lần bấm trang là một lần load lại, một khoảnh khắc chờ đợi, một sự ngắt mạch trong trải nghiệm khám phá. Trên mobile, các nút số trang lại nhỏ, khó chạm chính xác.
Infinite scroll — cuộn vô tận
Với infinite scroll, khi người dùng cuộn gần đến cuối danh sách, hệ thống tự động tải thêm và nối tiếp vào phía dưới. Không có nút bấm, không có trang. Cuộn là tất cả.
Điểm mạnh là trải nghiệm liền mạch và gây nghiện. Không có rào cản nào giữa người dùng và nội dung tiếp theo. Đây là lý do nó thống trị các nền tảng dạng feed: TikTok, Facebook, Instagram, Threads. Khi mục tiêu của bạn là "giữ người dùng ở lại lâu nhất có thể với dòng nội dung không có điểm cuối tự nhiên", infinite scroll là vũ khí số một. Trên mobile, nó cũng tự nhiên hơn nhiều — ngón tay cái vuốt lên là hành vi bản năng.
Nhưng cái giá phải trả khá nặng:
- Footer gần như chết. Mọi thứ bạn đặt ở footer — chính sách, liên hệ, link quan trọng — trở nên không thể với tới vì người dùng cuộn tới đâu nội dung lại mọc thêm tới đó.
- Mất vị trí. Người dùng cuộn 80 item, bấm vào một sản phẩm, bấm "Back", và... quay về đầu trang. Cảm giác mất công sức này cực kỳ ức chế.
- Không SEO-friendly tự nhiên. Nội dung nằm sau các lần gọi API thường khó được index nếu không xử lý kỹ thuật bổ sung.
- Gánh nặng bộ nhớ. Cuộn càng lâu, DOM càng phình. Trên điện thoại tầm trung phổ biến ở Việt Nam, sau vài trăm item trang có thể bắt đầu giật.
Load more — nút bấm lai giữa hai thế giới
Pattern thứ ba: hiển thị một lô item, kèm nút "Xem thêm" ở cuối. Người dùng bấm thì tải thêm. Đây là cách lai: bạn giữ được sự liền mạch tương đối (không reload cả trang) nhưng vẫn để footer thở được và trao quyền kiểm soát cho người dùng (họ chủ động quyết định tải tiếp). Đây thường là lựa chọn an toàn nhất cho thương mại điện tử.
Khung quyết định nhanh
Một nguyên tắc tôi hay dùng:
- Nội dung có mục tiêu tìm kiếm cụ thể (sản phẩm, kết quả tìm kiếm, danh sách cần so sánh) → nghiêng về pagination hoặc load more.
- Nội dung dạng khám phá giải trí, không có đích đến (feed mạng xã hội, ảnh, video ngắn) → nghiêng về infinite scroll.
- Cần SEO mạnh → ưu tiên pagination.
- Cần footer hoạt động → tránh infinite scroll thuần.
Tình huống thực tế
Tình huống 1 — Tiki và bài toán danh mục sản phẩm
Hãy lấy một sàn thương mại điện tử lớn của Việt Nam như Tiki làm ví dụ. Trang danh mục "Điện thoại - Máy tính bảng" có thể chứa hàng nghìn sản phẩm. Nếu họ dùng infinite scroll thuần, hãy nghĩ về hệ quả: người dùng thường có ý định mua cụ thể, họ lọc theo giá, theo hãng, rồi muốn so sánh. Họ bấm vào một sản phẩm, đọc review, rồi bấm Back để xem tiếp. Với infinite scroll, cú Back đó ném họ về đầu trang — và với người đang cân nhắc chi 8 triệu mua điện thoại, sự ức chế này có thể giết chết ý định mua.
Vì thế các sàn TMĐT kiểu này hầu như luôn dùng pagination hoặc load more. Pagination cho họ URL ?page=2 để Google index, để chạy quảng cáo dẫn thẳng vào một trang kết quả cụ thể, và để người dùng quay lại đúng chỗ. Con số minh họa: nếu mỗi trang 40 sản phẩm và danh mục có 4.000 sản phẩm, đó là 100 URL độc lập, mỗi cái là một cơ hội SEO.
Bài học rút ra: Khi người dùng có ý định mua hàng và cần kiểm soát, đừng lấy đi vị trí của họ. Pagination/load more bảo vệ cả trải nghiệm lẫn doanh thu lẫn SEO.
Tình huống 2 — TikTok và lý do infinite scroll là linh hồn sản phẩm
Ngược lại hoàn toàn, hãy nhìn TikTok. Toàn bộ mô hình kinh doanh dựa trên việc giữ bạn cuộn càng lâu càng tốt. Ở đây không có "đích đến" — bạn không tìm một video cụ thể, bạn để thuật toán dẫn dắt. Nếu TikTok bắt bạn bấm "Trang 2" sau mỗi 10 video, trải nghiệm sẽ vỡ vụn, sự gây nghiện biến mất.
Với feed kiểu này, các nhược điểm của infinite scroll gần như không tồn tại: không ai cần footer trong một feed video, không ai cần bookmark "video thứ 47", và SEO không phải mục tiêu vì nội dung là cá nhân hóa thời gian thực. Mọi đánh đổi đều có lợi cho infinite scroll.
Bài học rút ra: Pattern phải khớp với bản chất nội dung và mục tiêu sản phẩm. Khi nội dung là dòng chảy khám phá vô tận và mục tiêu là thời lượng xem, infinite scroll không chỉ chấp nhận được — nó là đúng đắn.
Tình huống 3 — Một blog tin tức Việt và lựa chọn "Load more"
Giả sử bạn làm cho một trang tin công nghệ tầm trung, ví dụ một chuyên trang reviews. Trang chủ liệt kê bài viết mới nhất. Nếu dùng pagination thuần kiểu cũ, cảm giác hơi "tạp chí giấy", người dùng lười bấm số trang. Nếu dùng infinite scroll thuần, footer chứa link "Về chúng tôi", "Tuyển dụng", "Liên hệ quảng cáo" sẽ không ai chạm tới — mà với một trang sống bằng hợp đồng quảng cáo, link liên hệ quảng cáo chết là vấn đề lớn.
Lựa chọn khôn ngoan ở đây là Load more: hiển thị 12 bài, nút "Xem thêm bài viết" ở dưới. Người dùng cuộn tự nhiên, bấm khi muốn, và sau lô thứ hai hoặc thứ ba họ dừng lại thì footer hiện ra bình thường. Một biến thể tốt hơn nữa: ngầm tải bằng load more nhưng vẫn cập nhật URL (?page=2) sau mỗi lần bấm, để vừa mượt vừa giữ được SEO và khả năng chia sẻ.
Bài học rút ra: Khi bạn cần cả sự liền mạch lẫn footer sống, "Load more" là điểm cân bằng vàng. Đừng nghĩ chỉ có hai lựa chọn cực đoan.
Hướng dẫn từng bước
Đây là quy trình ra quyết định và thiết kế mà bạn có thể áp dụng cho bất kỳ danh sách nào:
- Xác định bản chất nội dung. Hỏi: người dùng đang tìm kiếm có chủ đích hay khám phá thụ động? Có cần so sánh, quay lại, bookmark không? Câu trả lời này quyết định 80% lựa chọn.
- Kiểm tra ràng buộc SEO. Nếu trang này cần được Google index và xếp hạng (trang sản phẩm, bài viết), pagination hoặc load-more-có-URL là bắt buộc. Đừng để nội dung quan trọng chỉ tồn tại sau một lời gọi JavaScript.
- Đánh giá footer. Footer có chứa thứ quan trọng (liên hệ, pháp lý, link điều hướng)? Nếu có, loại bỏ infinite scroll thuần.
- Chọn pattern theo khung: tìm kiếm + SEO + footer → pagination; feed khám phá thuần mobile → infinite scroll; ở giữa → load more.
- Thiết kế trạng thái và phản hồi. Dù pattern nào, hãy thiết kế rõ: trạng thái loading khi đang tải lô tiếp theo, trạng thái "đã hết nội dung" (rất quan trọng — luôn cho người dùng biết khi nào họ đã đến cuối), và xử lý lỗi khi tải thất bại (kèm nút "Thử lại").
- Đặt kích thước lô hợp lý. Trên mobile Việt Nam với mạng và máy tầm trung, lô 10–24 item thường ổn. Quá lớn thì lần tải đầu chậm, quá nhỏ thì người dùng phải bấm/cuộn quá nhiều lần.
- Bảo toàn vị trí cuộn. Nếu chọn infinite scroll hoặc load more, đảm bảo khi người dùng bấm vào một item rồi quay lại, họ trở về đúng chỗ đã cuộn tới — đây là yếu tố quyết định trải nghiệm.
- Thiết kế cho thumb trên mobile. Nếu dùng pagination, nút số trang phải đủ lớn (tối thiểu 44×44px vùng chạm) và đặt trong tầm với ngón cái.
Lỗi thường gặp & mẹo
Lỗi: chọn infinite scroll chỉ vì "trông hiện đại". Đây là cái bẫy phổ biến nhất. Pattern phục vụ nội dung, không phải phục vụ xu hướng. Một trang danh mục giày dép với infinite scroll thuần là quyết định sai dù nó "giống Instagram".
Lỗi: giết chết footer mà không nhận ra. Trước khi chọn infinite scroll, hãy liệt kê mọi thứ trong footer và tự hỏi: người dùng sẽ tiếp cận chúng bằng cách nào? Nếu không có câu trả lời, bạn đang chôn nội dung quan trọng.
Lỗi: không xử lý nút Back. Người dùng cuộn sâu, vào chi tiết, bấm Back và bị ném về đầu. Đây là một trong những trải nghiệm gây bực nhất web. Luôn kiểm thử luồng "cuộn → vào chi tiết → quay lại".
Lỗi: không có trạng thái "đã hết". Với infinite scroll/load more, nếu người dùng không bao giờ biết mình đã đến cuối, họ sẽ cuộn mãi trong vô vọng hoặc nghi ngờ trang bị lỗi. Luôn hiển thị thông báo "Bạn đã xem hết kết quả".
Mẹo: Cân nhắc hybrid load-more-có-URL. Nó cho bạn sự mượt mà của tải bất đồng bộ nhưng vẫn giữ URL có tham số trang để SEO và chia sẻ — lấy được phần lớn ưu điểm của cả hai thế giới.
Mẹo: Với danh sách rất dài dùng infinite scroll, tìm hiểu kỹ thuật "virtualization" (chỉ render những item đang trong vùng nhìn) để DOM không phình ra và máy yếu không bị giật. Đây là cứu cánh cho hiệu năng trên thiết bị tầm trung.
Mẹo: Trên pagination, ngoài số trang hãy luôn có nút "Trước/Sau" rõ ràng và hiển thị tổng số trang. Người dùng cần biết "47 trang" để ước lượng phạm vi.
Bài tập thực hành
- Audit ba sản phẩm. Mở ba app/web bạn dùng hằng ngày (ví dụ: Shopee, Báo VnExpress, và Threads). Xác định mỗi cái dùng pattern nào, rồi viết một câu giải thích tại sao pattern đó hợp với nội dung của họ. So sánh với khung quyết định trong bài.
- Sửa một quyết định sai. Tìm (hoặc giả định) một trang dùng sai pattern — ví dụ một trang danh mục sản phẩm dùng infinite scroll thuần làm chết footer. Đề xuất pattern thay thế và liệt kê ba lợi ích cụ thể của thay đổi đó.
- Thiết kế đầy đủ trạng thái. Chọn một danh sách (ví dụ: kết quả tìm kiếm nhà hàng). Phác thảo (wireframe đơn giản trên giấy hoặc Figma) cả ba trạng thái của pattern "Load more": (a) trạng thái bình thường có nút Xem thêm, (b) trạng thái đang tải lô tiếp theo, (c) trạng thái đã hết kết quả. Đừng quên trạng thái lỗi kèm nút Thử lại.
- Viết khung quyết định của riêng bạn. Dựa trên bài học, soạn một checklist 5 câu hỏi bạn sẽ tự hỏi mỗi khi gặp một danh sách mới. Lưu lại để dùng trong dự án thực tế.
Tóm tắt
Pagination, infinite scroll và load more không có cái nào "tốt nhất" tuyệt đối — mỗi cái thắng trong một bối cảnh khác nhau. Pagination trao quyền kiểm soát vị trí, thân thiện SEO, dễ bookmark và nhẹ bộ nhớ, lý tưởng cho nội dung cần tìm kiếm và so sánh như sản phẩm hay kết quả tìm kiếm. Infinite scroll tạo trải nghiệm liền mạch gây nghiện, hoàn hảo cho feed khám phá không có điểm cuối như TikTok hay mạng xã hội, nhưng giết footer, làm mất vị trí và gây khó cho SEO. Load more là điểm cân bằng lai, giữ footer sống và trao quyền chủ động cho người dùng trong khi vẫn mượt mà.
Quy tắc cốt lõi để mang theo: hãy để bản chất nội dung và mục tiêu sản phẩm quyết định pattern, chứ không phải xu hướng hay thẩm mỹ nhất thời. Trước khi chọn, luôn hỏi ba câu: người dùng đang tìm kiếm hay khám phá? Trang này có cần SEO không? Footer có chứa gì quan trọng không? Trả lời được ba câu đó, bạn đã chọn đúng tới chín phần mười.