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.

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:

Mullen.com/work

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?

share|improve this question
4  
Asking us what the alternatives are to a particular layout isn't a question that fits this format very well, as the answers are almost infinite. –  DA01 Dec 18 '13 at 17:31
1  
It remember me some discussions on interface evolutions. First there was text (text menu), then we add icons to helps users (menu), then we remove text to only pictograms (toolbars), then as we add more nobody remember what icon means what and we add tooltips, then people start to ask to have tooltips always displayed side by side to image... It's a never ending problems we can't replace everything with text or picture there always be some drawbacks. –  ColdCat Dec 19 '13 at 14:43
    
@DA01 I don't think he needs to go so far as to seek out an alternative layout entirely. The specific issue of how to give equal respect to non-image content tiles could be solved while keeping the pinterest layout. –  Erics Dec 20 '13 at 4:27

5 Answers 5

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.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

share|improve this answer
    
Excellent point. I had that as an alternative to a stock image. Also kinetic typography animations or whiteboard animations (which are a lot of work to make). I guess a better formulation of what I'm getting at would be: is there a layout-style/interaction style that accomplishes what Metro/Pinterest does but without resorting to pictures/text in boxes? –  JGS Dec 18 '13 at 16:09

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.

enter image description here

share|improve this answer
    
Thanks for that. Yes, the current design has hoverstates with text similar to the ones in your screen cap. –  JGS Dec 18 '13 at 17:57
8  
@JGS: Speaking as someone who has made the switch to tablets (my three computers are a Surface, an iPad, and a Nexus), I'd appreciate it if you didn't use hover-states. If you have to use them, think of a fall-back for people who can't access that part of the content. –  Andrew Coonce Dec 18 '13 at 21:22
    
TED.com uses a similar notion of this. but using subtitles in the lower part of the imagebox rather than full text overlays. Then upon hovering, you see a basic sub text note of the particular article and uses a modal pane over the other selections. –  iowatiger08 Dec 18 '13 at 22:22

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.

mockup

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?
share|improve this answer

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.

enter image description here

share|improve this answer

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/

share|improve this answer

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.