I'm working on an existing web app that presents information in tiles, like:

There are no categories (Watchlist, Market Movers) and instead of stocks, each tile represents an event and has a time associated to it.

I would like to let users sort the tiles by time and also re-order them using drag-and-drop (only one sort is active at any time).

Additionally, the number of tiles may be quite large and need to be paginated.

  • Can you elaborate on "re-order them manually"? You want the user to be able to drag and drop them or what?
    – Mike
    Commented Jan 17, 2014 at 5:41
  • Yes, drag and drop. I've updated the question.
    – nibs
    Commented Jan 17, 2014 at 5:49

2 Answers 2


enter image description here

Here's a quick mock-up of what your structure could look like. You can obviously expand this and make it more than 3 wide, or more than 2 high if you have a lot.

Some things to keep in mind for this kind of user interface:

  • If you're using a pagination, be sure to put one at the top and bottom of the list if it's long (I only put 1 in the mock-up). You should have one at the top just in case users already know which page they want to go to when they visit the site, so they don't have to scroll down. You should have one at the bottom so that when they finish scrolling, looking over your boxes, they can quickly go to the next page.
  • Put a small hash icon at the bottom right corner of boxes to indicate that they can be dragged, then use jQuery to allow them to be dragged and dropped, hopefully saving the users preferred settings (so they don't have to do it everytime they visit).
  • Any "Sort by" options should have an ascending and a descending version, just in case the user wants it in reverse order.

Refer to this question when designing your drag-and-drop system: Warn desktop user of draggable website. Although it's a slightly different question, it relates in that you'll need a way to show the user it's drag-able as well.

Here's an idea for how "custom" looks. If the user drags any element, the "Sort by" should automatically change to "custom", and it saves that users preferences.


download bmml source – Wireframes created with Balsamiq Mockups

Note the tool-tip. You should have some kind of notification to tell the user what custom does, although it doesn't need to be a tool-tip.

  • What would the "Sort by" select box show after users have dragged around tiles? How would users drag tiles from another page?
    – nibs
    Commented Jan 17, 2014 at 6:26
  • Sort by "custom" maybe? Have it save by profile or cookies so that it stays the same until they change it.
    – Mike
    Commented Jan 17, 2014 at 16:11

I would try a carousel-like pagination, where you slide pages left and right as shown below. To drag across pages, the user can drag the tile over to the far right or far left to move to the next or previous page (note that the red areas is just to indicate the active region, I wouldn't necessarily show it to the user). Once a tile is placed on a different page, the last tile in that page is pushed to the next page.

Think of iOS app-icon dragging paradigm.


download bmml source – Wireframes created with Balsamiq Mockups

Your Answer

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

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