Sorting and pagination for tiles - Examples/ideas?

Question

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.

Answer 1

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.

Answer 2

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}