I'd like to have a hub page that displays 3 "columns" of data for each item. I'm having a hard time fitting the display into the typical Windows 8 design language.

Specifically, it feels like almost all Win8 hubs pan horizontally. I really feel like my data warrants a "table" but because the number of items will typically be fewer than 6, I feel like there may be some reasonable way to fit this into the typical Win8 hub pattern.

It's that item called out (1) the feels out of place.


download bmml source – Wireframes created with Balsamiq Mockups

Update: Each "column" represents some time period. Feels like they should be arranged horizontally relative to each other.

1 Answer 1


From a user perspective, it seems like the design problem that you are attempting to solve is that your current layout is not linear. Thus, you are requiring your users to scan the items in a less straightforward manner (zig zag, rather than straight across). So to successfully solve this problem, you need to coerce your design into a linear one. I can think of two approaches:

1) Flip the rows and columns

enter image description here

If you do this, you should incorporate the gestalt principle of proximity, making the vertical gap between between individual elements significantly smaller than the horizontal gap. This communicates to the user that the columns are the logical units.

2) Create hierarchical groupings

enter image description here

If you require that the individual elements (previously Flavor, etc.) be arranged horizontally (I'm not convinced this is necessary, but will assume that it is) this may be a better solution.

Note that in both of these approaches, scanning the images proceeds straightforward from left to right because a) all of the images are in a single row and b) the sub-elements are placed on different rows so they don't interfere. These solutions presuppose that this is desirable, that is, when your users are scanning through the list, they are looking at the images.

As before, this answer is not Windows 8 specific.

  • That definitely solves the horizontal scrolling problem. I should have given a more appropriate example. My three columns are "last week", "this week" and "next week" which in my mind feel very much like they should be oriented from left to right. (I'll update my example.)
    – Larsenal
    Commented Mar 14, 2013 at 18:56
  • 1
    OK, well, I updated my answer to better reflect that constraint. If that's not what you're looking for, I'm tapped out. Commented Mar 14, 2013 at 19:24
  • Thank you SO much for your consideration. It really helps me think through my options.
    – Larsenal
    Commented Mar 14, 2013 at 19:29
  • FWIW we've implemented almost this exact layout (including grouping data by time periods) before using the method that @BenjaminMalley describes in his 1st example. It has tested very well.
    – GotDibbs
    Commented Mar 15, 2013 at 12:51

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.