0

On a website I'm designing, users have access to a search function that lists items with potentially much content inside (they're meant to be grammar exercises, and so multiple grammar problems can be listed in each item). The current view uses pagination (6 items per page) and looks like this:

enter image description here

Users should be able to enter a special mode in which they select the items to export to a file. While there could potentially be hundreds of items and multiple results pages, I want the design to be usable at no more than 40-50 items, suggesting to narrow down the search query if the result set is larger.

This leaves me with a problem: allowing users to select items for exporting from a list that doesn't fit on a single page, because the items are so large. While there are many questions (1, 2, 3) and solutions about selecting items from a long list, those items are typically just small, simple text labels one-two words long, in which case list builders or a grid-based layout with checkboxes can be used; here, this is impractical.

The solution I thought of was to switch from using pagination to infinite scroll, and, when the user clicks the 'export' button, load all items from the server if the user hasn't scrolled to the bottom yet, and then simply allow individual item selection via checkboxes (that is, a checkbox appears next to each item; if the item is to be exported, the checkbox should be checked).

  • Are there any significant downsides to this approach? One problem I can see is that beyond around 10 items, there will likely be a lot of scrolling involved, because of the height of each item. How much of an issue is this?
  • Is there another solution I could consider?
  • I believe my solution should be usable on mobile devices as well, since it doesn't require anything more refined than checkboxes. Are there any difficulties I'm missing?
2

Infinite scroll can essentially slow browser down. This would be a bad user experience.

I'd suggest you you use normal paging.

Provide a check box so that users can mark what they are interested in. Also provide a separate list displaying the items that they have selected for export. Think of it like kind of "shopping cart". Then even in case of scrolling and paging users will always have a possibility to quickly see what have they selected.

  • This sounds like a good approach. I would like to add on point - It would be good to make sure, this "Shopping cart" kind of bucket should be 'always visible' with all the contents in it (may be a small portion of text for each item) unlike Online marketing site where if you click on Cart, you see details. You might consider right hand side column for this. – Omkar Chogale Aug 26 at 9:39
  • Sure, you can keep it permanently visible. – mentallurg Aug 28 at 0:05
  • After some consideration I realized that, as you've pointed out here, the infinite scroll approach doesn't actually have that many advantages, and can potentially overwhelm the browser with too many DOM elements. Thanks for the suggestion, I'll go with pagination and an 'export preview'. I'll accept within a few days, to give others a chance to participate as well. – user4520 Sep 1 at 9:27

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.