My situation is this: I have an administrative app for a school. A teacher can see a list of her classes, and their students, and you can drag a player from one class to another:

enter image description here

This works really well as long as the number of classes is less than about 12, after which it scrolls off the screen . But in my data set, I've got a small number of situations where I'd need to handle 20 or even 30.

What would be a good way to preserve the usefulness of this interface but handle the occasional large number of columns?

3 Answers 3


If the classes carry certain attributes, you could filter or sort a more extensive class list by attributes.

Filtering reduces the information load and helps keep relevant columns in frame without excessive lateral scrolling, which in turn limits the distances among columns across which you would otherwise drag items.

Sorting does not lower the information load but might put columns among which you may move items into closer proximity, again reducing drag distances.

A search function is always useful to access off-frame content quickly. A maximum of 30 columns, only 12 of which can be in-frame at any one time (unless filtered) is not unmanageable. 40% of editable content is always visible to users, so finding items isn't an insurmountable problem so long as you offer provisions to make the rearranging task smooth.

Besides the classic search-sort-filter triad (or even only one of those), think about introducing differentiated drag behaviour between individual cards you reassign among columns on one hand, and the ability to drag-move entire columns together with all cards assigned to them on the other. That again serves the purpose of moving the columns you're likely to make edits to into closer proximity to one another.

Lastly, consider a redundant alternate to the drag motion, such as a secondary right-click > move to... command. Drag-motion is very learnable and an apt metaphor for moving slot labels or post-its across a sorting board. A move-to action in that representation resembles taking a label out of its original slot, searching for its intended destination (which might be far away from its origin), and re-slotting it once found.

  • This was very helpful, thanks! Oct 10, 2019 at 12:39

Seems like Trello app interface can be good example for you. There are boards with long list of cards in it... You can scroll horizontally (left - right) for how many boards you have..
If you hover specific board you can scroll vertically (up - down) and see all cards...


You can make the column customizable along with the filter/sort/right-click options mentioned by @Andreas.

If the list goes big (Eg: class with so many sections) then you can't scroll all the way to the right and left to make the selection and drag the list. This column customization will also help you to compare the sections and so on.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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