Pagination: So sánh giữa Load More và List of Pages

Chào các bạn,

Trong CRUD, R – Retrieve là cái mà ta sẽ đụng nhiều nhất để hiển thị data ra bên ngoài cho người dùng cuối xem và sử dụng.

Vậy khi data quá nhiều, ko thể xuất hết lên 1 page dc => Pagination/Phân trang dữ liệu là điều tất yếu.

Và về pagination views, ta lại có 2 loại mà hay sử dụng nhất là:

• Load more button – Nút load more ở cuối trang, nhấn vào sẽ load 1 số items nữa và append ngay bên trên nút đó
• List of Pages – 1 danh sách Pages kèm Page hiện tại (< 1 2 3 4 5… >)

Mình sẽ đánh giá từng phần cho cả 2 thằng này nhé, về cả các mặt là Pros, Cons và UX review nữa nhoa.

1/ Load More Button

Load more button này thực chất nó chỉ nổi khi mà Ajax nổi lên lun 😀

• Pros:
  • Dễ làm, dễ implement, rất đơn giản trong development. (Rất dễ, chỉ đơn giản nhấn nút => request ajax, hết data thì ẩn nút đi)
  • Những items tiếp tục hiển thị liền ngay tại cái scroll hiện tại của người dùng => Lướt web phê phê hơn chút.
  • Users có thể trực tiếp scroll lên trên để xem lại các bài cũ được.
  • Chỉ cần 1 query duy nhất – để lấy thêm, lấy tiếp dữ liệu chứ ko cần lấy mấy cái cũ nữa (mấy cái cũ ngay bên trên :v).
• Cons:
  • Users sẽ ko biết dc họ đang ở page nào.
  • Users sẽ ko trực tiếp vào dc page mà họ muốn và họ fải load tiếp khá nhiều lần => bad UX.
  • Cần fải biết AJAX trong Web Development (cái này giờ là basic rồi nhé các bạn :D).
  • Khi users Load More quá nhiều sẽ dẫn tới tình trạng chiếm bộ nhớ/memory => lag giật các kiểu => bad UX :D.

Ngoài ra nếu ta ko dùng button, ta cũng có thể bắt trên sự kiện scroll to bottom để load thêm (mobile app thì hay chuộng chơi như thế này).

2/ List of Pages

Đây là cái mà mọi người hay sử dụng nhất, và framework nó cũng hỗ trợ nhiều, chỉ cần base URL, total items & limit per page là nó có thể generate ra cho mình toàn bộ rồi.

• Pros:
  • Hiển thị 1 list pages cho ng` dùng họ có thể tự chọn.
  • Hiển thị page hiện tại của người dùng
  • (Maybe) Có thể hỗ trợ ng` dùng đá về trang đầu (<<) or trang cuối (>>)
  • Người dùng có thể nhảy vào trang bất kỳ mà họ muốn (bằng cách manipulate cái ?page trên url =)) )
  • Có nhiều lib/framework đã hỗ trợ generate ra list pages rất tiện dụng.
• Cons:
  • Đa phần khi làm là vẫn phụ thuộc vào dynamic page là nhiều, là click cái => reload lại page để qua trang khác.
  • Implement Ajax hơi phức tạp chút so với Load More Button. Fải lo nhiều hơn so với Load More.
  • Để xem lại các bài cũ, người dùng fải về lại trang trước đó :v
  • Cần fải tốn đến 2 queries để lo cho cái này:
    • 1 để lấy dữ liệu
    • 1 để count tất cả results (tất nhiên MySQL cũng có cái SQL_CAlc_found_rows but performance của nó khá tệ) để generate ra được cái list pages.
  • Ngoài ra khi mà generate list pages, system còn fải tính toán thêm nữa => performance =))

3/ Conclusion

Tùy vào mục đích và dữ liệu, bạn sẽ fải chọn 1 trong 2 để có trải nghiệm tốt nhất dành cho người dùng 😀

Ví dụ như:

• Dữ liệu đơn giản, xem qua có thể ko cần xem lại => Dùng Load More button, có nhiều thằng lớn rất hay xài cái này như: Facebook, Instagram, 9Gag,…
  • Nhưng lưu ý, khi xài cái này thì những cái items đã hiện lên thì fải cho ng` dùng có option là save lại hay like,… gì gì đó để mốt họ có thể xem lại những cái mà họ coi là cần thiết.
• Dữ liệu tương đối nhiều, độ phức tạp trung bình => List of Pages. Ví dụ như các trang e-commerce như Tiki, Shopee,…

Tất nhiên, tùy trường hợp mà các bạn sẽ fải chọn 1 trong 2 để đem lại trải nghiệm tốt nhất 😀

Vậy nên, từ những cái nhỏ nhắn xinh xắn này, khi mà dữ liệu phình lên thì cả 2 thằng này đều khiến ta fải khổ sở để tìm dữ liệu liên quan nhất => Search/Filter sẽ xuất hiện để giúp ta làm điều này (Bài sau nhoa :D)

Thank you for reading this article!