How to provide ordering and sorting functionality in a table for creating reports

Question

My purpose is to create a report which shows the size of set/s.

For this, I am taking in minimum size & maximum size for each set.

Along with it, I am supposed to capture the order type and the sequence so that it translates to something like ORDER BY SET1 ASC, SET2_TO_3 ASC, SET1_TO_2 DESC, SET3 DESC, SET2 DESC

I have come up with the below prototype - which is undoubtedly "ugly" - especially the ordering pieces.

Though I can live with the text-box/es for setting size range - I am more than sure there must be a better way to implement the ordering functionality.

Any pointer would be a great help. Thanks.

Answer 1

For reordering the Sequence, try allowing direct manipulation in addition to text input.

You can take a page from Netflix, in which they have a queue order function.

Netflix users can order their queue as needed, with emphasis here on quickly arranging the most desired movies at the top.

There's a couple of methods you can offer:

• Numerical input (Just type in the sequence number)
• Drag and drop rows
• a 'Top' button to shoot it into the first position

You have a lot of room in your sequence inputs. You can save space by giving them a width that suggests the maximum digits encountered (i.e. if there's maybe 50 max you only need an input for 2 digits).

^{download bmml source – Wireframes created with Balsamiq Mockups}

You can show the other options on hover, similar to the Grab handles on Gmail, combined w/ netflix 'Top' indicator.

Sorting

For the sorting, (unless I'm misunderstanding), it looks like you have text inputs.

Since there's only two values, you could do a dropdown to save space (and prevent input errors), and hint at the sort order implications in a lighter text to avoid confusion.

Answer 2

This (a bit bloated) example is from one of the Zope/Plone management views. You will have less options per row, but if drag-n-drop possibilities are limited in the UI toolkit, this approach may be quite usable.

Of course, "to the top" (⤒) and "to the bottom" (⤓) buttons can be added or even "go to Nth position" input.

Instead of ASC/DESC, visual markers can be used as well, eg, like those from Twitter Bootstrap 3:

Just make sure they are not confused with move up/down actions by placing them inside. Can be doubled by asc/desc text if it is appropriate.

For sizes, rangeslider (if available in the UI toolkit), if not - single sliders, if not even that - numeric inputs.

There maybe Select/Unselect all rows, if that is common operation.

This answer assumes limited UI toolkit functionality.