3

I have a list of todo items with 6 properties of which 4 are sortable. The type (icon), the tags, the stars and date are sortable by clicking on them. Name and description are not sortable (no added value). I'm thinking if in the look below it's sufficiently clear to users that they can click, for example on the icon, to sort the elements according to the icon.

no sort bar

The classic way to solve this would be by including a 'sort bar' with carets to indicate ascending - descending sorting. sort bar

But I don't like this. It just looks like unnecessary clutter to me, makes it messier and attacks the visual unity while the functionality can be achieved without this. I'm feeling people would like to see this sort bar included but I'd like some suggestions on how to make it clear to users that elements are sortable by clicking on them. Without the sort bar. Any other recommendations are also welcome. Thank you.

  • 1
    The answer from @Oztaco works when you can identify the type of information in the table. If you have several columns, the top heading row is not just intended for sorting, but also to identify the type of content in the underlying column. – Bluewater Jul 28 '15 at 13:50
  • Very true, I didn't see it that way. I still think it's visually breaking though. – RobSeg Jul 28 '15 at 14:00
  • I agree, and I think it's very much connected to how people were over-using tables back in the day. – Bluewater Jul 28 '15 at 14:09
2

I completely agree with the reasoning in Oztaco's answer about expected behaviour, and will add an alternative solution:

You mentioned you want to avoid clutter - you could add a 'sorting' icon such as the one below, which could open a dropdown or expand to show sorting options.

enter image description here

  • Great icon, i love it! imho this solution fits my question even better, so I changed accepted answer. – RobSeg Jul 29 '15 at 15:11
  • Glad you found it helpful. It is technically a 'sort descending' icon, which I found here: uxrepo.com/icon/sort-alt-down-by-font-awesome ... but I think it works well for this purpose as well – Nick Todd Jul 29 '15 at 15:18
  • How will putting an ambiguous icon no one has seen before help the end user? Before you select any of these options, you have to do user tests... - My guess is that people would take Oztacos answer much faster. Simplifying is good, but over simplifying is bad. Always user test! - On the other hand - What about a combination? i.imgur.com/ALoEnLO.png - just change the text from Button to "Sort" – Bluewater Jul 29 '15 at 15:19
  • 1
    Are you SURE no one has ever seen this icon before, and that users would consider it ambiguous? Where is your data? Have you user tested this yourself? In some situations, sorting is not so crucial and is considered more of an advanced feature, in which case one may not want to sacrifice design too much for the sake of this option. It's up to the OP to make that judgment call, and I agree that one should always user test before accepting any solution offered on this site – Nick Todd Jul 29 '15 at 15:39
6

Personally, I think you should leave it up to what users are most used to which is the 'sort bar' you have in your second picture.

Alternatively, you can do what sites like Amazon do and just provide the sorting options in a dropdown menu like so:

Screenshot of Amazon

These two methods are the most common and users are likely to be used to them. Deviating too much from them may add too much confusion, even if they slightly reduce clutter.

Also, clicking on the icons to sort them may confuse users. It is expected behavior for clicking on an icon to open the item itself, like in file managers, image viewers, etc.

  • +1 for providing sorting options from dropdown and expected behavior – RobSeg Jul 28 '15 at 10:11

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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