“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.”