We are revamping the look & feel of our website (and making it more mobile friendly while we're at it), which includes converting a few tables to a single-column card stack. Now, there is debate around a good approach for sorting these cards (that used to be the rows from the table).

Previously, when it was a table, we could just click/tap the column headers. As a card stack, we have a "Sort By" dropdown. The problem is the number of options in this dropdown (especially if we consider ascending/descending as separate options) can be overwhelming. Aside from that, we have give a name for each sort option (e.g. "Due Date - earliest first")

What we found is that there surprisingly is a bit a debate around what "earliest" means in this context.

What we ended up doing was trimming down the number of options to those we feel made more sense, but this did not solve the verbiage debate.

Is there a generally more recommended way to sort a card stack? I found no similar questions that seem to address this.

1 Answer 1


Separate the two sorting mechanisms into two separate dropdowns. One for what used to be the column headers and the other with "Ascending" or "Descending." I wouldn't fret over what verbiage fits each data type perfectly. It's generic enough, and it's easily discoverable what the dropdown will do. Adding additional specific terms will only muddy the experience.

  • 1
    Ascending/Descending will never have other options, so I would make it a toggle, not a dropdown, and even an icon rather than text. Commented Mar 8, 2017 at 21:47

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.