Table converted to Card Stack - sort options

Question

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.

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.