This is Signal vs. Noise, a weblog by 37signals about design, business, experience, simplicity, the web, culture, and more. Established 1999 in Chicago. Visit the Product Blog for more information on our products.
The classic argument for enduring 80 to 100 hour work weeks for years on end — sacrificing relationships, hobbies, and anything else that doesn’t progress the mission — is that at the end of the rainbow lies early retirement. The reward for risking it all on a crazy startup idea. This wonderful place is filled with anything you want it to be. Never a dull moment again, all the flexibility and freedom in the world.
I’m Jack’s sense of utter disbelief.
Why does the idea of work have to be so bad that you want to sacrifice year’s worth of prime living to get away from it forever? The answer is that it doesn’t. Finding something you to love to work on seems to be a much more fruitful pursuit than trying to get away from the notion of work altogether.
It’s much easier too! The likelihood that you’ll strike gold after year’s of death-march living is still pretty low. The chance of finding something you love doing? So much more achievable. Millions of dollars not required.
If you come to the realization that work in itself isn’t evil, you can stop living your life as a waterfall-planned software project too. No need to divide your timeline on earth into the false dichotomies of Sucky Work Era and Blissful Retirement Era. Instead, you can just fill your life with a balanced mix of activities that you can sustain for decades.
“The conventional wisdom in our business is that you have to grow and keep moving to survive. We never grew, always stayed tiny, and it served us very well over the years, allowing us to pick and choose projects, and keeping our financial independence from our clients.”
-Stefan Sagmeister (link)
“Watching nonprogrammers trying to run software companies is like watching someone who doesn’t know how to surf trying to surf. Even if he has great advisers standing on the shore telling him what to do, he still falls off the board again and again.”
-Joel Spolsky (link)
“In the abstract, freedom of choice is desirable. But the arts, including the culinary arts, function more efficiently as dictatorships. Down with interactivity. Readers do not really want to decide what happens in the next chapter of a novel, and diners are happiest submitting to the iron will of a good chef.”
-William Grimes, former restaurant critic of The New York Times (link)
“I never think about the audience. If someone gives me a marketing report, I throw it away.”
-Wall-E creator Andrew Stanton (link)
“Content precedes design. Design in the absence of content is not design, it’s decoration.”
-Jeffrey Zeldman (link)
“Our sound is defined by what we left out and didn’t play, as much as by what we did. I think in a loose way the idea of keeping it minimal goes beyond just the music. It’s my whole approach to everything. Don’t say too much whenever possible. We’re just trying to get the most impact out of the least amount.”
-Glenn Mercer of The Feelies (link)
“Early unsuccessess shouldn’t bother anybody because it happens to absolutely everybody.”
-Philip Johnson, Architect (link)
The internet is full of vapid words and catch-less phrases, but one that I’ve long been particularly peeved about is the word “play”. As in this company is an “infrastructure play” or a “CPM play”. Blogger, please.
Using “play” feels like it’s just pointing to how unsubstantial something is. Like that this is their third play. And oh hell, if that doesn’t work, we’ll just get more of other people’s money and try to play again. Or that it’s a play as in pulling the lever on a slot machine and if you’re lucky gold will flow.
Here’s another reason to double, triple, quadruple-check yourself when you want to add a new feature. A while back Netflix added a “Profiles” feature to their service. A couple weeks ago, they decided to pull the feature because it was too confusing and it wasn’t adding value. But it was too late. People were pissed. The blog post received 1286 comments. In the face of this reaction, Netflix had to turn 180 and keep the feature. Whether Netflix Profiles are good or bad, clear or confusing, they’re here to stay.
The lesson: Once your user base has grown beyond a certain point, you cannot take features away from them. They will freak out. Whether the feature is good or bad, once you launch it you’ve married it. This changes the economics of feature additions. If you can’t destroy what you build, each addition holds the threat of clutter. Empty pixels and free space where a new feature could be added are the most valuable real estate on your app. Don’t be quick to sell it, because you can never get it back.
Links to Google Maps are shared all the time. So how come the URLs are so unwieldy? (For example: http://maps.google.ca/maps?f=q&hl=en&geocode=&q=1st+ave+and+1st+st,+nyc&sll=49.891235,-97.15369&sspn=52.967233,67.763672&ie=UTF8&z=17&iwloc=addr.) If TinyURL can figure out how to make a URL in just a few characters, can’t the rocket surgeons at Google do it?
Aza Raskin released a new project today called Algorithm Ink. For the full story check out his explanation and video. The app is basically a “grown up version of Logo”—a front-end to a simple programming language for creating fractal images. While the fractal art is the main attraction, I was more interested in the unconventional UI.
Algorithm Ink continues the style that Aza demonstrated six months ago with Songza. His UI comes from another planet where Microsoft Windows never caught on and Hypercard rules the world. There are no native form widgets, no scroll bars, and nary a “ or Cancel” in sight. Normally this is a recipe for confusion, but in Aza’s case the results are often models of clarity and intentionality.
On Songza, the most noticable break from convention was the mouse-flower. Traditionally, a web UI for playing a song would consist of the song’s title, a widget to play/pause, and some adjacent links to share, rate, etc. Instead Songza only shows the song title. When you click the title, a flower opens with an action on each petal like “Play” or “Share.” You can click a petal or mouse away from the flower to dissolve it. The jury’s still out on mouse-flowers, but the clutter-free UI they enabled should raise an eyebrow.
On Algorithm Ink, the header is what interested me. Each of the grey buttons (Edit, Save, Browse, etc.) is actually a toggle between an “on” state and an “off” state. When a button is “on”, a panel appears on top of the canvas with the functionality for that button.
The grey buttons toggle overlaying panels
For example, when you click “Edit”, the button turns on and a panel is revealed with the code for the current artwork. You don’t “Save” or “Cancel” to leave edit mode. Instead you click the red “Draw” button to apply your changes, or click Edit again to hide the panel.
The Edit button is on and the panel is visible
Each of the buttons has its own custom panel. Edit displays a long narrow sidebar, while Save displays a thin horizontal strip. It’s note-worthy when different features of an app actually look different. We’re all guilty of leaning on our templates to the point that each screen in our apps looks a bit like the others. In Algorthim Ink, the Edit mode is tall and narrow. The Save mode is wide and thin. These differences give the app character and also help users develop a kind of “muscle memory.” They can remember the screens by shape as much as by name.
The Save button is on and the panel is visible
My favorite thing about these grey buttons is that they don’t just turn panels on and off. They also exclude each other, so that if you are using the Edit mode and you click the Save button, the Edit panel will disappear and the Save panel will replace it. You could say the buttons are “mutually-exclusive modes”. A simpler way is to say they act just like tabs.
Look closely at how a typical tabbed interface works. You click a tab, and the whole screen reloads to a new screen. The tab bar on the new screen has the same options and position as the old screen, except the tab that you clicked changes appearance to indicate that you are “on” this tab to the exclusion of the other tabs.
In Algorithm Ink, the buttons work in exactly the same way. Except there’s a twist. The “tabs” (grey buttons) don’t replace the screen, or even replace part of it. Instead they hide and reveal panels which overlay a single screen that never changes. Your art never goes anywhere, but the panels which allow you to perform actions come and go.
These overlay tabs may not be as eye-catching as a mouse-flower, but I think they’re very interesting. It’s hard to put my finger on what exactly I like so much about Algorithm Ink, but it’s plain to see that the approach is different. And in our current UI climate, well-executed difference is itself enough to deserve some thought.
Along the way he reveals the pioneering B&O design team only spends 2-3 days a month at B&O headquarters and works externally the rest of the time, they never meet, they have no fixed process, and they build initial versions of products out of cardboard and paper.
THE WALL STREET JOURNAL: You spend just two or three days per month at B&O headquarters in Struer. Doesn’t this slow the design process?
MR. LEWIS: It’s a great, concentrated way of working. I come fresh and clean every other Friday all the way from Copenhagen and see things in a different way, because I am not at all part of the system there. I sit down with the engineers and go through 10 or so projects in various stages. There are thousands of things to discuss — the minutiae of angles, coloring, buttons, graphics and more.
This is not just my way of working. All designers for B&O — not just me and my team of six — are external. The company believes in it. My six-member team aside, designers for B&O don’t ever meet, we don’t have any cooperation with one another at all.
WSJ: How does the design process work when you are rarely on-site?
MR. LEWIS: Every time we design a new product, it’s like starting all over. Time frames, technology and demands are different each time. So we don’t have a process per se.
My designers and I do have an approach, though. Whether we are given a brief for a new product or we come up with an idea on our own — and it’s a fair mix of the two — we don’t sketch it. We model it out of cardboard, pieces of paper, little bits of plastic, whatever’s on hand.
We build it up little by little, the way a sculptor does. We stand around the object, have an open dialogue and modify it as we go along. Then, I bring that same model along when I go to Struer. That way all sides can see what the design is about and why it’s essential to do it this way and not another.
WSJ: How much does the final product depart from that cardboard version?
MR. LEWIS: Hardly. When it comes out unpacked at the shop, usually it’s exactly what was envisioned. One example: In 1993 B&O management said, “Make us a new speaker.” Just that. I had the idea to make something less present in a room, something that could offset the bulky television sets that still existed back then. Essentially, a loudspeaker that you could hear, not see. So we modeled ultra-slender column speakers with cardboard and plastic. Once it was in three dimensions that way, we could see all the details and really feel the design…
WSJ: How do you get your inspiration, your crazy ideas?
I often just sit and look out my office window for a long time, thinking. Why does this look so terrible, why can’t we do this or that?
I also visit art galleries and museums as well as Danish antique dealers with architectural furniture and the like, from the 1930s to ‘50s. I have a lot of it at home. It interests and inspires me.
I just tried to buy something using my company AmEx card and accidentally entered the wrong security code. (AmEx has their code on the front of the card, not on the back like my personal check card.)
Instead of a generic error message that told me the card was declined or couldn’t be accepted, I got this very specific error message that includes a detailed graphic. A graphic! What a pleasant failure message.
Backpack CSS tip for customizing the appearance of Backpack pages
“You may sometimes wish you could modify the text on a page to fit a little more information on it. I have a page where I collect code snippets and terminal commands and the default font seems a bit large with so much content. Turns out there’s an easy solution to this: simply add a small amount of CSS to the page in the form of a note and you can change the formatting to meet your needs.”
There’s a popular book on entrepreneurship called The E-Myth which claims that bakers shouldn’t run bakeries, plumbers shouldn’t run plumbing companies, and everyone else should think about how they could turn their small business into a franchise. On the face of it, there’s a lot of good advice about how you can’t just be a good baker if you don’t have a business bone in your body and expect commercial success.
Problem is that the reverse is also often true. If you just put MBAs in place — or other professional managers without deep subject matter expertise — you’re equally likely to end up with an uninspiring business that fails to be passionate about the right things. To stay on the ball you need to know what’s a good pass and the best way to do that is to be able to make one yourself.
Many of my favorite companies are driven by people at the top who intimately know how things should be because they could make them so. The obvious example is the detail-oriented nature of Steve Jobs at Apple. But a few other examples I like are Ulrich Bez at Aston Martin who’s not only the CEO but also part of the company racing team at places like Le Mans. Or Thierry Nataf at Zenith who’s CEO and head designer of their luxury watches as well.
Bill Gates was amazingly technical, and he knew more about the details of his company’s software than most of the people who worked on those details day in and day out. He understood Variants and COM objects and IDispatch and why Automation is different than vtables—and why this might lead to dual interfaces. He worried about date and time functions. He didn’t meddle in software if he trusted the people who were working on it, but you couldn’t bullshit him for a minute because he was a programmer. A real, actual programmer.
For people who love what they do, whether that’s programming, design, designing watches, or building cars, that’s a great motivation to not grow your company too quickly. Enjoy the time when you can actually be a full participant in the actual activities themselves, rather than just managing them.
We recently added a support request form to Basecamp (there used to be just a direct email link). The goal of this form: To prioritize support inquiries, reduce uncertainty, and get people the answers they need faster. It also reduces the number of back and forth information-gathering emails, which ultimately makes everyone more satisfied with the support experience.
It’s worked really well so far too. But the last question in the original form was missing the mark:
We wanted to know how important the problem was and gauge the emotional state of the person writing to us. But this pulldown just didn’t cut it.
First off, it required too much reading for a pulldown menu. Who wants to process this much info when there’s a problem? Also bad: It’s a pulldown but the options aren’t mutually exclusive. Someone could very well be confused AND worried AND upset. This pulldown just muddies the waters.
So we decided to change it to an actual scale. 1 = not a big deal, 4 = I need help ASAP.
Much easier to process but it still wasn’t helping us learn whether or not this query was a top priority or not. Why? Because everyone’s problem is urgent.
For example, let’s say someone’s having trouble uploading a file. If they can’t figure out how to upload a file, they’ll say it’s urgent. If file uploading is broken, they’ll still say it’s urgent.
That’s no help to us. Of course, we’ll get back to them either way. But if file uploading is broken, we need to know that immediately so we can fix it. If it’s just confusing someone, that’s a different ballgame. We’ll still quickly resolve the issue, but it’s not a fire that has to be put out instantly.
We thought about adding in a radio button question that asked “Is something broken?” But we didn’t want to make the form any longer. (No one likes feeling interrogated while seeking help.)
So we went back to the drawing board and came up with this solution:
This gets at what we really want to know here: What kind of problem is this? We lost the subjective nature of the original “give us your emotional state” question and replaced it with a clear question with a clear answer. It’s better to ask for facts than emotions.
Now, if something’s broken, we can spot it and fix it right away. A system failure is much more important to us (and our customers) than a feature request or general feedback. This method lets us prioritize these queries accordingly, instead of treating them like they’re all the same.
Update: Per feedback on this thread, we’ve adjusted the menu to the following (more consistent language, no more “general feedback” category since “other” is close enough). Thanks for your comments.
I’m working on some improvements to Basecamp, specifically the screens where you manage which people have access to a project. There’s an area on our new template with checkboxes beside peoples’ names so you can check which people should be added to your project. I want to apply a class name to the label tag around the checkbox for each person. So I pulled up the template and searched for “label” to find where I might add the class name. There were no matches. So I dug deeper, and saw that the HTML for the label, checkbox, and person name is being generated by a Rails helper method.
This is the template code that calls the helper method.
<% people_without_access_from(company).each do |person| %>
<%= add_person_to_project_check_box(person, company) %>
<% end %>
Next I pulled up the helper method to see if it really is responsible for producing a chunk of HTML with the label and checkbox.
Yup, it’s generating the HTML. Right away this smells bad to me. The helper is first generating a label tag. Inside that label, there is a checkbox followed by a space character and the person’s name. Finally a break is appended after the label. This smells bad for two reasons. First, it’s just not so nice for helpers to cook out HTML when they don’t have a good reason to. Second, it’s harder to locate and change HTML when it’s hidden inside a helper.
Returning to my original goal, I wanted to add a class name to the label around this checkbox. If I add the class name to the existing helper, it’s going to get even more messy and complicated because I have to give content_tag an attribute with the class name I want. It would look like this:
To find a better solution, we should rethink what the helper should be responsible for. Helpers are useful when they hide complexity that isn’t relevant to the template. Looking at this helper method, I see that it’s useful to hide away check_box_tag with all those params. But the label, the break, and even the person’s name could all be in the HTML and the template would be clearer. Let’s do that.
Here’s the new helper. Now it only produces the checkbox.
And here’s the updated template code, with the label, person name, and break moved over.
<% people_without_access_from(company).each do |person| %>
<label class="checkbox">
<%= add_person_to_project_check_box(person, company) %> <%= person.name %>
</label><br />
<% end %>
Now that’s a lot easier to read. Generally speaking, it’s a good idea to keep your HTML in your templates and out of your helpers. Helpers are useful when they hide implementation details that are irrelevant to your template, or when they allow you to abstract common template code to avoid repetition. If you find yourself generating a lot of HTML in a helper, think twice and try to keep as much HTML in your template as possible.
“I’ve made much more money by choosing the right things to say no to than by choosing things to say yes to. I measure it by the money I haven’t lost and the quality I haven’t sacrificed.”
-Danny Meyer of the Union Square Hospitality Group
It’s a widely accepted axiom of business that great companies grow their revenues and profits year after year. Yet quietly, under the radar, some entrepreneurs have rejected the pressure of endless growth to focus on more satisfying business goals. Goals like being great at what they do . . . creating a great place to work . . . providing great customer service . . . making great contributions to their communities . . . and finding great ways to lead their lives.
In Small Giants, veteran journalist Bo Burlingham takes us deep inside fourteen remarkable privately held companies, in widely varying industries across the country, that have chosen to march to their own drummer. He searches for the magic ingredients that give these companies their unique “mojo” and the lessons we can learn from them.
Our friend, and former 37signals-founder, Carlos Segura has redesigned Cartype: “A museum of automobile typography”. Very nice redesign (here’s the old site for comparison).
But it’s really so much more than that. Take his museum of gauge clusters:
The site is about books and their connections. Each post references one or more books and the referenced books are aggregated in the right-hand sidebar. When you hover over a book title, the crisp tiny type is immediately enveloped in a big cozy hover block.
I particularly like how the hover reinforces the column dimensions. It’s a sudden punch of structure to the otherwise airy layout.
Last week I was in Seattle for a couple days. A friend suggested I check out the new Olympic Sculpture Park. It was near my hotel so I walked over there to see what was up.
Seattle
Nice landscaping, nice setting, nice sculpture, but the lasting impression wasn’t made by the art, it was made by a sign (actually, about 10 signs):
They even had an extra specific warning in one spot that “Even the lightest touch harms the art… Help the art survive… PLEASE DO NOT TOUCH.”
Public art in a public outdoor space in the middle of public paths and public lawns yet you can’t touch it. The only interaction is visual. It’s standoffish. It feels like a missed opportunity.
Chicago
Contrast this with Chicago’s Millennium Park. Public art and architecture that is entirely interactive.
A fountain that spits on you:
Or a snaking bridge that you can walk or hang out on:
Or reflect in public:
Chicago understands public art in a public space. The public will only be interested if they can engage with it. Walk on it, play it in, look into it, touch it, brush up against it. If you go to Millennium Park you’ll actually see and hear kids playing over the place. I don’t think you’d see a single kid at the Seattle Olympic Sculpture Park having a good time. I didn’t see any adults who were particularly interested either.
Alan Taylor of The Big Picture proves how designers who can also develop are able to get things done without jumping through hoops of approval, explanation, and cycles of review.
In an interview at Waxy.org, Alan talks about how The Big Picture came to life within the Boston Globe.
I have an advantage in that my main role is as a developer here, so I could build all my own templates, format my own style, and so on. I sort of bullldozed some things through though, like extra width, few ads, and I made it simple internally by doing it mostly on my own, no requests for development time, marketing or promotion. After the legal questions were settled, I was free to try it out. It took off fast.
This is another example of why I strongly advocate that designers build development skills into their kit. When you’re able to do things yourself, you can just do them. You don’t need anybody’s approval or anyone else’s time. And sometimes that makes the crucial difference between an unimplemented idea or a great success like The Big Picture.
Basecamp AgileAgenda: a project scheduling application that integrates with Basecamp
“AgileAgenda integrates with Basecamp by synchronizing its scheduled tasks with todo items in Basecamp so you can share what tasks people should be working on. When someone marks a todo item complete in Basecamp, AgileAgenda will take that information and update the schedule the next time it’s synced up. Basecamp can help get things done, AgileAgenda will tell you when that will happen.”
Getting Real FuelFrog uses Getting Real to keep things ultra-simple
“We built it by keeping things ultra-simple and released it with only the absolute necessary features. We even left out the ability to delete/edit your fuel records or the ability to recover your lost password. We launched the application three weeks ago and have spent nothing on marketing/advertising and currently have over 2,800 users. People really appreciate the simplicity and usefulness of the application.”
Backpack Mac users: Create a Backpack Journal Dashboard widget using Safari’s webclip button
“So I have grabbed the updating part of the page as per the widget described and also the team’s recent updates. As a double bonus, it updates the clips when you invoke Dashboard so you get the latest team updates straight away rather than what you’d normally be having to do is refresh your browser’s page yourself.”
“And this is what mine looks like on my Dashboard.”
MobileMe’s login screen is more than just an empty box. The depth charge approach gives you a peek at what’s behind the login and makes you want to “unwrap” it and get inside. It’s not surprising that a company that famously does a great job with product packaging would have an online product wrapper that stands out too.
Acrobat
Acrobat.com offers a login screen that lets you select from a variety of options. The focus shifts depending on which tool you select. And though the page doesn’t reload, there’s a distinct URL so you can link to a specific tool’s login.
Vimeo
Vimeo offers this playful login screen. Not really related to video sharing at all, but it does hint at the vibe of the community that uses Vimeo.
Any other login screens that you feel stand out from the pack?
Jason Fried, David Heinemeier Hansson, Sarah Hatter, Ryan Singer and Sam Stephenson in Chicago, Matt Linderman in NYC, Mark Imbriaco in Wake Forest, North Carolina, Jeremy Kemper in Pasadena, California, Jeffrey Hardy in Ontario, Canada, and Mr. Jamis Buck in Caldwell, Idaho.
The grey buttons toggle overlaying panels
We build it up little by little, the way a sculptor does. We stand around the object, have an open dialogue and modify it as we go along. Then, I bring that same model along when I go to Struer. That way all sides can see what the design is about and why it’s essential to do it this way and not another.
“And this is what mine looks like on my Dashboard.”
