1

I'm making a music player app and I have their list of songs with various properties like the title, track number, artist name, album name, etc. I need to let the user sort their library by these properties in both ascending and descending order with varying levels of precedence. For example, first sort by artist name from bottom to top, then sort those by album name from top to bottom, then those by track number from top to bottom.

This answer says how to visually display how things are sorted by showing a number beside the up/down arrow like this:

My question is how the user can interact with the app to easily tell it how things should be ordered. They need to be able to set the sort key order and the ascending/descending direction. They also need to be able to specify any number of columns to sort by, anywhere from one to all the columns.

Improve this question
2
  • Usually it is not that important to know the sort order. It is probably enough to show during changes being made to it.
    – Crissov
    Commented Feb 23, 2015 at 7:38
  • I kinda expect applications to treat the latest clicked column as the primary key, reversing direction with each subsequent click, hence I click through from least to most important, possibly multiple times. There is actually no need to mark a column as no-key, because one could always place it last. However, often a single key is unambiguous already and you could prompt the user in a non-modal way to select secondary keys otherwise.
    – Crissov
    Commented Feb 23, 2015 at 7:47

1 Answer 1

Reset to default
4

I detest the iTunes UX, so I'm a fan of any competition :-)

The 'conventional' way to sort is by clicking on the column headers. So I think any solution should attempt to be compatible with this behavior.

For multi-column sort, things become more difficult. Columns can quickly get cluttered with tiny arrows or badges. The tiny directional arrows can be frustrating to click on because they are so small, and they are basically unusable on tablets or smartphones. On top of that, the table layout has a left-to-right column order so it can be unintuitive to figure out sort order by jumping between columns.

Given the complexity and flexibility desired in multi-column sort, I think it makes sense to pull this out into a separate control, but to place it close to the table so that there is a spatial relationship between the two.

Here is one flexible interface which allows users to quickly build a multi-column sort by just clicking or dragging on column headers: uni

You can click on a column header or drag it into the control to add a sort. You can also rearrange the columns within the control to change the order of the sort, or click the arrows to change direction of the sort:

int

While this approach has the downside of introducing a control outside of the table, it has a number of benefits which may outweigh the cost:

  • Sort order is clearly and visually laid out. It separates the "sort order" from the "table column order" so removes the need for badges or awkward jumping around to figure out sort order. Changing the order of the sort is as simple as dragging the order around inside the control.
  • Interface is mobile/tablet friendly, with large buttons and landing areas for building and adjusting the sort.
  • Allows the user to build arbitrarily complex multi-column sorts, and adjust the sort easily.
  • The control relies on dragging or clicking on the table, so the relationship between the control and the table is both clear and reinforced by usage.
  • Pulling sort out into different controls allows for views/sorts to be saved, etc (probably not appropriate for this application, but for data analysis applications this design pattern works well)
  • Tapping or dragging a column automatically creates a default sort order (ascending or descending), which the user can adjust via a large button. This avoids asking the user for a down or up order and unnecessarily complicating the build process.
Improve this answer
2
  • 1
    Excellent idea! The sort order bar could pop down when a column is clicked. The click would add that column as a block to the sort order bar and make it appear for modification. This would also be intuitive as the convention is clicking the column to sort by it. The blocks could be rearranged, the direction could be flipped by clicking the arrow, and there could be an X on each block to remove it.
    – Keavon
    Commented Feb 23, 2015 at 4:51
  • Agreed. I wanted to avoid the 'x' because it creates two controls inside the block. I was thinking users could remove a sort either by dragging it out of the control, or tapping on the column to toggle it. But having an X is actually better interaction design, even if it's less beautiful :-) BTW since we're on the topic of making things explicit, I think it'd be good if there was also a filter button to reveal the sort control (in addition to the less explicit click-on-column)
    – tohster
    Commented Feb 23, 2015 at 5:30

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.