Table of Data in Windows 8 Store App

Question

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.

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

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

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.