0

Consider the following table: It's a table of 'food' all split into categories, with each sub-category also containing items. A 3-tier hierarchy.

The table is sortable by name, but... what should happen when you sort the Name column?

enter image description here

My current thinking is that it'll sort each category alphabetically within each category. So, first row will be 'Healthy Food' followed by 'Grains' followed by 'Oats' and 'Wheat', with 'Fruit' the next row.

So, the Categories are sorted in order (Healthy Food will be above 'Unhealthy food' in the table) and within each category the groups will be sorted A>Z and finally each item within each group will be sorted alphabetically.

Therefore like this:

enter image description here

However, this isn't strictly 'sorted' because you have 'Orange' above 'Grains' whereas 'G' is obviously earlier in the alphabet that 'O' and we've had feedback in QA testing that it's not behaving as expected. But I think expecting it to be fully A-Z stops it actually being useful.

Is this sorting the best way to handle it? Other than splitting out the 3 tiers into separate columns, I'm not sure if there's a better option than this.

2 Answers 2

1

It looks like you need to change the controls. Name doesn't really indicate what the button does or should do.

Give a button for each column with meaningful names like column headers.

enter image description here

Replying to JonW's comment:

The buttons would function like column headers in a data table. They both label the columns and control how they're sorted.

If you're sorting columns in a list, it's like a data table.

Here it is with the Item button hit so Items are listed in descending order:

enter image description here

1
  • OK, but what happens if I select the 'Item' sort column header? How would the table display having done that?
    – JonW
    Dec 8, 2021 at 16:31
0

On the Internet, alphabetical lists are practically non-existent: online stores group their articles according to the most relevant sales or search elements and services according to the highest priority.

patagonia

Menu list from patagonia.com

Or the most relevant item above and the rest alphabetically, as in Google Search Console:

Google Search

Regarding the list in the question, the biggest problem is that the hierarchy levels are too subtly differentiated. With few graphic changes, the alphabetical order between categories is completely disguised:

enter image description here

1
  • The mockup in my question is pretty grayscale. The real thing is closer to the design you've put at the end (each tier coloured / shaded differently. But colourcoding the rows still causes problems if I want to sort that column.
    – JonW
    Dec 9, 2021 at 14:10

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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