Learning from the Eames about information design

Ray and Charles Eames looking through slides

I happened across the (now defunct) website of Brooklyn-based designer Frank Chimero the other day. It’s a nice site, pleasing to look at, easy to navigate and so on. But what interested me most was this, on the about page:

“This site is an attempt to produce a contemporary personal website. I tried to avoid simplification and consolidation hoping that a bit of sprawl and clutter is more comfortable and interesting. In a weird way, the choice to ‘untidy’ things was inspired by the Eames house.”

Two reasons I found this interesting:

1. Tidiness is normally a good thing, so why “untidy” a website?

2. What’s the Eames house?

The first question took me into a bit of a labyrinth, more of which later. The second question was more easily answered.

The Eames Case Study House #8

The Eames house is tucked into a bit of woodland by the coastline of Los Angeles. Charles and Ray Eames were a married couple who also happened to be icons of modernism, and they built the house to act as both their home and studio. They’re best known for their furniture, but they also made short films and other things besides. Slightly remarkably, they lived in the house from its construction in 1949 right up until their deaths in 1978 and 1988, lending the building a certain credibility over other architectural landmarks.

Here it is on the outside, looking a bit like a Mondrian painting:

eames-house-ext

And here it is on the inside:

eames-house-int

You can see why a web designer might be inspired by a house like this. For one thing, it strikes a nice balance between being artistic yet lived in. Here’s Frank Chimero again:

“The Eames house was everything I wanted: modern, but lived in, made out of everyday, accessible materials. No pristine white, dustless Dwell magazine show rooms here. There are plants and books and lights and seats and dust and you get the feeling it is a beautiful, functional space. There are fingerprints all over it. The more I click around the web, the less and less I sense those fingerprints on people’s websites the way I used to. I’m not sure if it’s because of templates, or because those things take time, or if people just don’t think it’s worth it. But I think those traces of people are worth the effort, so I wanted to really work towards having this site feel like it was made by a person, and not some smug guy in a very tight, black turtle neck.”

I think Frank identifies a real phenomenon here, regarding the lack of fingerprints on most modern web design. It’s common to see sites with personality, only it’s a boilerplate, template kind of personality. Maybe I’m being overly nostalgic, but sometimes I miss GeoCities.

Tidiness

The other part that I like about the Eames house is that it’s tidy without everything being tidied away. The objects haven’t been hidden in cabinets and cupboards; they’re out on display. If you cast your eye around that picture above, you find your attention caught by all sorts of things. In films like this one, you can see that the house was full of trinkets and items from all over the world. In Jason Cohn’s 2011 documentary Eames: The Architect and the Painter, and in films of their own, like Tops (1969) it’s clear that Charles and Ray Eames took enormous joy from things.

I think the untold story is that the Eames must have been really good at throwing things out. Maybe they followed a rule like Marie Kondo‘s Only keep what brings you joy. Or maybe William Morris‘s Have nothing in your house that you do not know to be useful, or believe to be beautiful.

Information design

When we’re organising information, we might use a deep hierarchy of folders, sub-folders and sub-sub-folders. The Eames house is more akin to organisational systems with a shallow hierarchy. In the photo above, the room is like one “folder” containing everything. The shelves act as dividing lines rather than containers. Finely curating your web content along William Morris lines is important if you’re using a deep hierarchy, but if you’re using a shallow hierarchy, it’s crucial.

The Eames house also demonstrates how items densely packed into space can still look good. It reminds me a bit of that blog, Things Organised Neatly.

In this 2006 post, Jeff Atwood cites Edward Tufte as someone who has long argued for denser displays of information on the web. Since our screens are of limited size, the inevitable result of putting more information on display is going to be information density. But with the increase of mobile since then, it’s hard not to see this as a losing battle. It seems that a lot of sites these days are designed for mobile and then scaled up for desktops. If you think of a nice, dense piece of information from the old world – say, a page from a phone book – can you think of a single website that resembles that? Tiny font, well-organised, easy to scan? It’s just not something you get on the web. Not often, anyway.

This all changes when you come to images. As Google know, our eyes don’t have any trouble scanning through hundreds of images:

Screen Shot 2015-01-09 at 22.22.00

Indeed, Tufte has used this idea to create Image Quilts, beautiful clusters of images grouped together. Scanning through the quilts, it’s easy to find what you’re looking for. Try visiting the site and finding Picasso’s Guernica. Now compare this experience to finding it in a sub-sub-folder called Art > Artists > 20th century > Spanish.

The process of going through those other image quilts isn’t just easy; it’s actually pleasant! You’re given the opportunity to browse past other interesting pictures while you’re on your hunt for the one you want to find. Do you remember how good it feels to browse through a shop, or a library? The web can be like that too!

Just most of the time, it isn’t.

“What are you looking for?”

“Here is that thing you were looking for”

“People who looked for that also looked for this”

It can all get so lifeless. So unlike the stuff you see made by Charles and Ray Eames.

Advertisements

3 thoughts on “Learning from the Eames about information design

  1. Really liked this Nick, thank you. Original and thought-provoking. I wonder what the distinction is between information design and information architecture. The shallow/deep spectrum (structure?) seems to relate to architecture, but the lived-in-ness and moderate clutter you refer to feels more like a design (content?) sensibility.

    But then the concept of design is generally understood to be not about content but about function. Hmmm, just some quick surface responses anyway.

    BTW I first heard about the Eameses fairly recently, in Sara Hendren’s recent piece on design: https://medium.com/backchannel/all-technology-is-assistive-ac9f7183c8cd

    I think a lot of sites now are designed mobile-first, or at least using responsive design toolkits. Designing for mobile initially is likely to increase accessibility.

    1. That does look like a good course. Two books I’d recommend in the meantime are:
      IA and the World Wide Web http://shop.oreilly.com/product/9780596527341.do
      and A Practical Guide to IA http://uxmastery.com/practical-ia/

      On the other point, designing with accessibility in mind often benefits everyone. I’ve only skimmed through the Sara Hendren post, but that seems to be one of the things she’s saying. You find that in online education too. For example, an institution might provide a transcript of a lecture to make it accessible to deaf students. Then the transcript gets used by students who can hear just fine. And the lecture becomes searchable.

      Thinking about it, the old world phone books I mention are about as inaccessible as it gets. Maybe that’s one reason you don’t see that kind of design on the web.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s