How can I preserve readability when using a dynamic grid layout?

Question

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.

While this has proved to be a wonderfully beautiful and unique design for an image-based site such as Pinterest, many designers are starting to pick up the trend in text-based sites.

A good example of what a text-based masonry grid would look like can be seen here: http://masonry.desandro.com/demos/basic-multi-column.html

That example is particularly bad, but it shows my point perfectly. As I'm sure you, UX gurus know, the natural tendency is for the human eye to read left-to-right and top-to-bottom. With a dynamic grid layout, left-to-right doesn't necessarily work because the content to the right of where you're reading may not be exactly where your eye is expecting it to be.

So, the natural tendency for me is to continue reading down the column - this turns out pretty bad because then I'll infinitely read one column, and never move to the next column without a conscious realization of what I'm doing.

My question is: Is there an effective way to use a masonry grid layout and still maintain readability and good UX?

Answer 1

I wouldn't assume that there is a natural tendency for the human eye to read things left-to-right, top-to-bottom. That is a cultural aspect of most Western languages. Many languages (Hebrew, Arabic, Japanese) do not follow this flow.

Here is a good article to put this into perspective: http://www.smashingmagazine.com/2012/03/05/japanese-a-beautifully-complex-writing-system/

To answer your question, I would say yes, there are ways to create effective grid layouts for readability. Some things I would consider for this "masonry grid":

• Font size. Small text will tend to bleed into one another.
• Padding. Give the text some space to breathe.
• Contrast. If some text blocks are higher priority in some way, you should think of ways to distinguish it.
• Flow. If you have a hierarchy of content, you should think of ways of ordering the grid to give it an appropriate flow. That is, the reader's eye should follow a designed path so they don't jump all over the screen. This might be the toughest challenge.

However, it would depend on your context or plans for use, but a good question to ask is, "Are you designing for readability or scan-ability?" This "masonry grid" seems well suited for scanning content that links to separate product pages or full-length articles.

Answer 2

Older post but .. I concur with Mitch

I think layouts like masonry work fairly well when they are used with nonlinear/nonhierarchical information, for instance pure images or a selection of headlines, or a grouping of tweet topics vs. a specific stream etc.

This kind of layout applies a kind of controlled chaos. This causes the user to slow down and explore a bit more than they would with linear or evenly spaced layouts which people have a tendency to rapidly swipe through.

Therefore again I don't think it's appropriate to use with anything that benefits from an ordered flow, like a specific twitter stream, table of contents, chat session etc. since as you pointed out it ends up being disjointed, irritating and the exact opposite of ordered and useful.

Great UX is whatever benefits the user the most while accomplishing the designer’s goals, regardless of the "Hotness" of something.

If your goal is to allow the user to sample while imparting some useful information then things like masonry work well, if you want to the user to follow a flow then not so much.

You could think of Masonry as a cover page, or brain dump with no particular order that has selected content presented in a way that lets the user scan, while also possibly taking some queues about where they might want to go or what they might want to pay attention to.

For instance ordering/focusing via size for things like oldest to newest, or most popular to least popular, but IMO it would be better for the user to transition to a more linear design once you select something that needs ordering.

In your tweeting example I think something like masonry would be useful for twitter stream hotness, big blocks for a hot topic, smaller for not so hot etc. Just an example.

Anyway that's my two cents.

Update: Not asked or part of the question but a look at http://stackexchange.com/sites to see Masonry that almost works with some. They use size to implement a heat map, and when you click a site it expands both in size and information, what it annoyingly do quite often is move the item out from under you mouse making you lose track of the item.

They almost get it right, this is the thing that dynamic grids were created for.