Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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.

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

2 Answers 2

up vote 2 down vote accepted

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.

mockup

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.

share|improve this answer
    
What would the "Sort by" select box show after users have dragged around tiles? How would users drag tiles from another page? –  Cirn Jan 17 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 Mersereau Jan 17 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.


mockup

download bmml source – Wireframes created with Balsamiq Mockups

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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