In the Isabella Stewart Gardner Museum in Boston there is a large empty frame with a small note telling of the theft of The Storm on the Sea of Galilee by Rembrandt. The painting is over six feet tall and frame extends well higher than I can reach. It is a heavy wooden affair with gilded corners and handcrafted joints.
In the absence of the painting the frame itself has become the exhibit. People stop to read the story of the thieves and marvel at the empty frame. It isn’t significantly different from the others in the gallery, but being on the wall empty gives you a chance to really see it.
The frame is normally a guide directing you to the destination. However, when there isn’t clear content the frame can become the destination. In computer software the frame contains useful options like menu bars, toolbars, and extra links. Most web applications have heavier frames than their desktop counterparts. I edit most of my blog posts in SlickEdit. It is my favorite editor in part because it has hardly any frame at all. I can expand the content I’m working on and see as much of it as my screen allows. Products like WriteRoom offer the same feeling for a less technical audience.
Most web pages use an overbearing active frame and blogs are the worst. The content is surrounded by best of posts, Twitter links, and other bric-a-brac. The Thesis Theme (which I’m using on this site) surrounds the page on two sides with navigation elements and extras that try to pull and guide you through other content available on the site. There are other configurations that surround the content on all four sides. With a header, a footer, and two sidebars this pattern is common for blogs.
The transition from a larger frame to the smaller one signals a transition from author to reader. On a desktop you’re the author and the frame disappears. The content you’re creating is the entire focus of your attention. On the web you become the reader. The author tries to guide you through the content they want you to see. They fill the frame with extra information and links to keep you clicking. Letting the author guide you through the content is fine, but when the frame overwhelms the picture you have a problem.
Tools like the Adobe Acrobat Reader blur the line. They make you the active reader. You choose your own content and don’t need them to guide you to a different file. The navigation is there if you need it, but it isn’t in your face. It takes an opt-in approach.
When you design your interfaces there are a few different frame metaphors to choose from.
Invisible frames let the content stand completely on its own. These frames do nothing to distract you from the middle and are the choice of WriteRoom where the software is meant to present a little distraction as possible.
Minimalist frames, like the ones in SlickEdit and Adobe Acrobat, give you the chance to add a little functionality with a minimum of distraction.
Dynamic frames slide in and out as needed; normally when the mouse gets close to them.
Active frames provide additional information like links and other data that is almost as important as the content.
Fluid frames allow the content to interact with and sometimes extend beyond the frame. Fluid frames provide the interactivity of active frames without the hard border. Jason Santa Maria has some excellent examples of fluid frames on his articles Royal, Pretty Sketchy, and Oh Snap.
Overwhelming frames take up more space and attention than the content in the middle. Creating such a large distraction from the content is rarely a good idea.
Appropriate framing helps your user understand the nature of your application. It sets their expectations. Providing extra information is the frame is OK, but never forget the cardinal rule: content is king. Hopefully The Storm On The Sea of Galilee will be returned to the museum one day. When that happens people will once again look at the painting instead of the frame.
And in case you’re curious, the painting linking to this article from the main page is Escapando de la crítica, 1874 by Pere Borrell del Caso.