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?


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 Feb 14 '14 at 14:16
  • Use a vertical monocline with the subgroups down the lefthandside? – Fractional Feb 14 '14 at 15:33

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.