I've met this motif many times:
- You have an element grid with X number of elements loaded by default.
- You have filters that will add / remove (hide / show) elements from the grid
- You have a button to "load more" items in the grid (ajax calls, not just hidden from view)
When a filter is selected, what should happen?
- Only filter the visible elements on the page?
- Make another ajax request to load all items matching this filter?
When the Load More button is clicked, what should happen?
- Load more items matching the current filter?
- Load more of all items (no filter)?
- Load more items, but hide those that do not match the filter? (This would cause compensation problems).
I am not a fan of both, because one or the other of the above options seems to create a confusing user interface experience. You do not know if you are filtering everything (including future calls), or just what has been preloaded or what was visible.
In many cases, the "Load more" button has replaced the pagination of items. With pagination, you typically apply the filter to all items, not just what was in view. But navigating the paging gave you clues about the number of items at the start and the number of items affected after filtering.
The "charge more" button does not really give you clues.
So, what is the right approach? Should I avoid mixing filters and loaded dynamic content?