I am implementing sub groupings on a panel of items in a Windows 8 app. The panel is relatively thin containing a vertically scrolling list of items. The user can change the list of times by tapping between each sub group of the panel.

I want the grouping titles to have immediate visibility but without the overhang problem, is this achievable?

Problem 1 (layout):

If I lay the groupings out horizontally there is the problem that the width of them overhangs the width of the items column (see image). enter image description here

Problem 2 (visibility):

One solution is to consolidate them into a drop down (which looks alot better), but that means the unselected grouping titles no longer have immediate visibility (see image). enter image description here

How can I maintain visibility of the unselected grouping titles but also maintain an attractive layout? is it possible?

1 Answer 1


I'd suggest looking at Monocline Grouping. Coined by Alan Cooper:

A monocline grouping is a representation of data in a single layer (i.e., without a nested hierarchy). Let’s take my bookshelf for example. On the left are religious and music books, followed to the right by Dutch and German books, and continuing on with literature and poetry books.

It might look a little like this:


download bmml source – Wireframes created with Balsamiq Mockups

Clicking on each subgroup (x) link scrolls the list to the first item that belongs to that subgroup. However, the user is free to scroll through all items at any time. You can also auto-highlight the subgroup heading that belongs to the items the user is viewing - in order to give them context at which section they are viewing and to show that they are viewing ALL items.

  • interesting take on it. however I need to maintain a vertical scrolling list of items like in my mockups.
    – Dave Haigh
    Commented Feb 14, 2014 at 14:16
  • Use a vertical monocline with the subgroups down the lefthandside?
    – Fractional
    Commented Feb 14, 2014 at 15:33

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.