Should items filtering be combined with dynamically loaded items (load more)? If so, how?

I've run into this design pattern a few times: enter image description here

  • You have a grid of items with X number of items loaded by default.
  • You have filters that will add/remove (hide/show) items from the grid
  • You have a button to "load more" items to the grid (ajax calls, not just hidden from view)

When a filter is selected, what should happen?

  1. Only filter visible items on the page?
  2. Make another ajax request to load all items matching that filter?

When the load more button is clicked, what should happen?

  1. Load more items matching the current filter?
  2. Load more of all items (no filter)?
  3. Load more of all items but hide the ones that don't match the filter? (this would cause offset issues).

I am not of fan of combining both, because either option above seems to create a confusing UI experience. You are not sure if you are filtering everything (including future calls), or just what was preloaded, or just what was visible.

In many cases "load more" button replaced items pagination. With pagination you typically applied the filter to all elements, and not just what was in view. But the pagination nav, gave you clues to how many items were there to begin with, and how many items were affected after filtering.

The "load more" button doesn't really give you clues.

So what's a good approach? Should I avoid mixing filters and dynamic loaded content?

Tags: