The Pinterest Trap

Question

First a bit of context:

I have been falling victim more and more to "Pinterestization" or the "Pinterest Trap" in my design. I have a feeling I'm not the only one. See this excerpt from Hana Schank in UX Mag's 2013 Year in Review article:

"This year, we saw a trend that started to take hold late in 2012 with the rise of Pinterest spiral out of control—namely that a good chunk of the web started to look like Pinterest, with blocky images replacing content and navigation shunted to the side […] My hunch is that we’ll look back in a few years and wonder why so many interfaces were a group of pictures in boxes. Here’s hoping that this trend is on its way out."

I agree with her. The same could be said for the ubiquitous "Metro" layouts.

But what are the alternatives?

I'll cut to the chase: I am working on a portfolio site for a large organization and it will probably end up looking something like this:

Here's the issue I keep running into on this and other projects:

This treatment works really well for visual content, especially with well-done hoverstates. The eye can parse it quickly. It is pretty. It puts a lot of great content in a restricted space. It works well for RWD. More than anything, though, users seem to WANT to interact with sites like this. They beg to be clicked.

But the content for the page in question is equal parts visual and non-visual. What about representing strategy work? Audio examples? Any work without obvious visual deliverables?

One option is to add cheesy stock imagery to give non-visual content visual assets. But that feels like a cop-out and would only work if the content was majority image-based. But like I said, it's 50/50. That's a lot of crummy stock photos…

Can we think of alternatives to using crummy stock photos here? What kinds of interactions can treat visual and non-visual work equally well while still remaining highly parseable and attractive?

Answer 1

Don't use meaningless imagery just for decorative purposes. They'll get ignored, it's clutter, it needs to be downloaded by the end-user which means the site will be slower to load... There are numerous reasons not to use such images when they don't have any purpose.

However I think you are overlooking one option: Typography. Good typography can be beautiful and is at the heart of good design. So for content that cannot be represented with imagery then use some nice typography instead. You can present tweets, testimonials, quotes, headings... if it's in typography (and not text saved as an image but actual text) then it can be searchable and read by people with assistive technologies as well.

^{download bmml source – Wireframes created with Balsamiq Mockups}

Answer 2

Another option is to use a semi-transparent layer on top of the images for text which allows you to control the colour and hue of all the images so you can have a more consistent looking portfolio (if desired).

The Verge uses a lot of colour gradients which may of may not be to your taste, but it can be an effective way of combining both text whilst being able to control the UI rather than just an assortment of disparate images.

Answer 3

To find an alternative that solves the problems with the Pinterest layout, step one is identifying what specifically the problem with the Pinterest layout is.

The big design compromise with the pinterest layout and your example is **lack of **heirarchy**** - relying entirely on the imagery in equally-weighted items to catch the eye. This underlies your problem with non-visual items being lost, as well as wider problems with these layouts feeling like a content dump.

It's fine for a site like Pinterest which is about browsing large volumes of user-curated content of variable quality, but for a company portfolio, you probably want something that guides people through some kind of story, message or overview of what the company is.

You could add fancy typography or noun project style icons for non-visual items, which would at least give them some presence - but it wouldn't solve the deeper problem of the lack of hierarchy giving a heap of competing stuff rather than a clear message or flow.

Relative prominence, using sizing, positioning and whitespace, is a better way of drawing the eye to content than trying to make everything equally eye-catching. When everything speaks at the same volume, nothing stands out.

---

So step two is figuring out that "take home message" and/or intended response(s) of the audience, which the layout will be designed to get across. What this is will depend entirely on your client.

---

Step three becomes structuring the content around this message or flow. At this stage, think abstract: don't get caught up in fine details. Post-it notes on paper, not comps in Photoshop.

A tool that'll help you translate that message into a layout is the idea that there are essentially five ways to group information, sometimes called the "five hat racks":

1. Location / geography: Development Seed's homepage is a nifty example of introducing a company by organising info geographically (slightly counter-intuitive though - it'd be better if scrolling down took you to the next step in the animation)
2. Alphabetical order (or other arbitrary known conventions): Good for reference lookups like indexes
3. Time: Good where recency matters, or for proper, engaging storytelling that has a beginning, middle and end - risky for anything else.
4. Category: Extremely flexible - there are always a number of ways things can be grouped.
5. Continuum / hierarchy / scale: (e.g. best to worst, biggest to smallest) Also very flexible.

It's a useful exercise to look through lists like this thinking how each in turn (and combinations) could work for the client - then pick the best combination.

---

Then step four is the open-ended design challenge of figuring out how to turn that into a layout.

It could be as simple as a pinterest-style layout broken into sections, with each section having a textual message introducing a theme, and a sub-hierarchy within the content going from the best, clearest example largest and/or leftmost to the most obscure/niche examples smallest and bottom right.

^{download bmml source – Wireframes created with Balsamiq Mockups}

---

The key thing is to ask these questions in this order:

1. (first) What's the problem you're trying to solve?
2. What's the message to be communicated?
3. What structure of information best communicates that message?
4. (last) How do I turn that structure into a page layout?

Answer 4

Another alternative would be to keep all image/content sizing the same, add padding, and add details underneath them instead of hovering. This would still work well for RWD and users could choose to scan all of the images or the text if they are unsure what the images represent.

Answer 5

as above mentioned there can be good number of ideas to have solution for this. As this is for Porto folio kind site, ll prefer to go for "ROW" based approach instead of boxes.

Microsoft.com is good example for the same - http://www.microsoft.com/en-in/default.aspx

Some Model's portfolio - http://www.ajazkhan.com/