My user is shown a list of devices as a table, say:

Name, OS
"Amazon Fire Phone", "Android 4.2.2"
"Nexus 7", "Android 4.3 1"
"asus_015d41d46d53f411", "Android 4.3"
"HTC_HT14NT214173", "Android 2.3.5"
"iPhone 3GS1", "iOS 6.1.3"
"Nexus 4", "Android 4.2.2"
"iPad Mini", "iOS 6.1.3"

When they click on a column header, it toggles sorting of that column between ascending and descending. This is intuitive because it's a common UI pattern.

I'd like to introduce grouping as well. Instead of the flat table, there would an alternative "tree" view. If they were to group by the OS column, a rough layout would be:

- Android
-- Android 4
--- "asus_015d41d46d53f411", "Android 4.3"
-- Android 2
--- "HTC_HT14NT214173", "Android 2.3.5"

How can I preserve the existing UI, and also present them with the third option of grouping by column?

1 Answer 1


Outlook does this reasonably well by right clicking on a column header and selecting group-by. This doesn't work so well on the Web especially with touch interfaces - though touch and hold is becoming more common. A tree icon by each column heading would work but would be a bit fiddly especially on small screens. A mobile style menu icon (small square with horizontal lines) could potentially be added to each column heading incorporating sorting and grouping. By combining them on one button you declutter a bit.

A common pattern emerging in the last few years is a filters panel to the left. This works well and could incorporate grouping.

Alternatively I would have a tree icon at the top left of the table. Clicking it would display a drop down of columns to group by.

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.