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.

There's a recent trend in web design to use dynamic masonry grids, like Pinterest, for just about everything these days. If you haven't seen such a layout before, it presents content of variable height organized in a number of columns of fixed width so it looks like a brick wall turned sideways.

One of the issues I commonly find with masonry grids is it's hard to tell the order in which the content pieces are sorted. In a regular layout, the newest content would likely be listed at the top and then it would flow chronologically left-to-right and top-to-bottom.

Because of the nature of the masonry grid, flowing left-to-right doesn't work. The space in the adjacent columns is likely not available because of a piece of content with different height. If we flow top-to-bottom, it would seem that we would only be allowed a single column (think twitter), because each column is seemingly infinite in length.

So, knowing this, what is the best way to order content in a masonry grid? The particular use-case for me is an aggregation of social networking data, but I think this applies in many different places. In the most ideal situation, the content would flow from newest to oldest - but in which direction?

share|improve this question
    
If you anticipate your users relying on sorting, then masonry grid probably isn't the best convention. But to answer your question, if your page has infinite scrolling, then the traditional zigzag is the only logical sorting option. –  Jung Lee Mar 27 '12 at 15:19
    
I would say, don't use a masonry grid if you want to enforce a particular ordering on the reading of content. Of course, the question then becomes why you want to enforce that ordering-would another method work better? (e.g. a timeline) –  Alex Feinman Mar 29 '12 at 18:15
add comment

1 Answer 1

up vote 6 down vote accepted

To be a bit simplistic, the more orderly the layout seems, the more the order has meaning to users.

Masonry-style brick layouts, to varying degrees, subvert traditional orthographic order.

I would suggest that this subversion is intentional, and this subversion accounts for the charm of these interfaces. The layouts are unpredictable, and I am guessing the visual scanning patterns people follow are likewise unpredictable (calling them "grids" is misleading in that there are not two continuous axes).

This departure from a rigid ordering system encourages serendipity, play, and discovery.

There is no set visual path to follow, no predetermined plan for how you should consume the information. You wander, and use other visual cues like color, shape, size, and texture to decide what to focus on next. Position is not necessarily meaningful, or at least it is of secondary importance.

In the case of Pinterest, there is no horizontal axis to speak of, but vertical axes are consistently maintained:
enter image description here

Within each column, the top items would be seen first, so appear more important, perhaps because of greater interest or recency. Across columns, (Western readers anyways) are likely to follow left-to-right. However, the ordering system breaks down quickly - when your eye tries to find a second row, it can't, and your eye starts to wander.

I suspect Pinterest tried even more disorderly layouts but found a completely non-axial layout too chaotic. Compare the Pinterest layout with this example from the jQuery Masonry examples where the widths of the items involved varies, and so vertical alignment is broken:

enter image description here

As a side note (as if this answer isn't too long already), you could say that masonry layouts are cousins of "shape packing" diagrams like bubble charts or treemaps:

enter image description here

I bring this up only to highlight that in this treemap, the order is arbitrary - the important information is the size, shape, color and local grouping.

share|improve this answer
    
+1 very nice answer with examples, and a really good point about serendipity –  Anna Rouben Mar 5 '13 at 20:42
add comment

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.