Defensive Design for the Web: How To Improve Error Messages, Help, Forms, and Other Crisis Points
Available Now ($16.99)
Subscribe to our free newsletter and receive updates on 37signals' latest projects, research, announcements, and more (about one email per month).
One of the topics we cover at the Building of Basecamp workshop is “Epicenter Design.” It’s a technique we use when designing functional screens for web-based apps, intranets, extranets, or any functional page (it’s not as applicable for a content driven or marketing-heavy page). It helps answer the “where do we start?” question.
Epicenter Design involves focusing in on the true essence of the page (the “epicenter”) and then building outwards. This means not starting with the navigation/tabs, or the footer, or the colors, or the sidebar, or the logo, etc. It means starting with the part of the page that, if changed or removed, would change the entire purpose of the page. That’s the epicenter.
For example, here’s a typical Messages screen in Basecamp. The eipcenter is highlighted with a green box:
So, if you were to start designing this page from scratch, you’d start here — with the message unit. The subject, the body, the metadata, the link and file attachment styles, etc. Only when that unit is complete would you begin to think about the second most critical element on the page (which may be the sidebar, in this case). Then after the second most critical, you’d move on to the third, etc. That’s Epicenter Design.
It can get tricky so here’s another example: Here’s a typical Milestones screen in Basecamp. The epicenter is highlighted with a green box:
You might think the epicenter is the calendar (on the left and/or on the right) or the colored sections, but the true epicenter is the design of the milestone unit itself — the subject, the date due, the party responsible, etc. That’s the epicenter. If you removed this stuff the page would no longer be the milestones page.
So, why is Epicenter Design better? The best reason is that it helps you focus on the pure purpose of the page. It allows everything else on the page to be based on the pure purpose of the page instead of the other way around. Traditionally, the page shape would be built, then the nav would be dropped in, then the marketing “stuff” would be inserted, and then, finally, the purpose of the page would be poured in to whatever space remained. Epicenter Design flips that process and allows you to focus on what really matters first. Everything else comes second. Everything else is built around the elements that really matter. That’s why it’s better.
When you take this approach to screen/UI design you’ll see better, more customer-focused results. You’ll develop screens that are easier to use and understand. You’ll build an interface that makes more sense, and quicker sense, to the majority of the people who will be using it. And, finally, Epicenter Design forces you to think about the pure purpose of a page first. That exercise alone will result in a much better end product.
Want to learn more about Epicenter Design, or other useful interface design techniques? Consider signing up for the Building of Basecamp on September 3rd in Chicago.