Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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.

mockup

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.

share|improve this question

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.

share|improve this answer
    
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 Mar 14 '13 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. –  Benjamin Malley Mar 14 '13 at 19:24
    
Thank you SO much for your consideration. It really helps me think through my options. –  Larsenal Mar 14 '13 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 Mar 15 '13 at 12:51

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.