I've spent the last quarter re-designing the user interface for the Devshop product. The new design will be out in a couple months. During this process, I spent practically the whole year with my eyes wide open, looking for and noticing little cues to good industrial design along the way. I'd keep a list of screen shots of aspects of a particular product that I liked. I kept a list of ideas I had along the way for reference and revisited them all during the design process. I didn't just look at software. I looked at automobile design, furniture, interior design, print, architecture - any product discipline. I looked at video production, animation and writing too.
Good design is considered to be very subjective. I don't believe it is subjective. I think it is empirical and measurable. The problem is, people have a difficult time articulating what they like and don't like. They have a hard time dealing with the fact that unfortunately, a product isn't designed JUST for them, but rather for a market of people that hopefully all share a set of common enough needs and can therefore use the same product to fulfill some number like 80% of their needs. And because of these difficulties, people discount design as subjective because they can't reconcile why one person (who can't articulate why) likes something while someone else doesn't.
The other day something hit me. I think it's an easy way to articulate a set of characteristics in design that people gravitate towards, without consciously realizing it. It must have some root or explanation from anthropology or some very natural origin. I don't pretend to know the causal relationship, I've just noticed the trend.
It's what I'll now say is the difference between a product that looks like it was "assembled" (from various parts) versus a product that looks like "carved" from a single source material (like a single block of wood, clay or stone).
I have 3 examples to share: cars, laptops and finally, software.
Example #1 - Cars:
Assembled:
Carved:
Avalanche: The Avalanche is clearly "assembled" from various materials (metals & plastics), which jump from one to another along the exterior. The surface is lumpy and clearly shows things "bolted on" to the exterior. The coloring is high contrast, from light colors to dark colors. The shape is boxy, rough and has lots of cracks, crevices and protrusions.
Corvette: The Corvette looks like it was carved from a single piece of red metal. It has long smooth lines that are curved instead of at sharp angles. Very few protrusions and crevices, and nothing bolted on to the exterior. It is the ultra "low contrast" (in this case monochromatic) which furthers the illusion that it was carved.
Example #2 - Laptops:
Assembled:
Carved:
Dell: Latches, stickers, logo/emblem, rubber stoppers, lights and buttons all protrude, in different colors, from different materials along the exterior. It has a lot of visible seams, cracks and crevices. You can just imagine things being "snapped" together during assembly (and things "snapping" off as they catch things during use). The stickers aren't even straight.
Apple: Again, a single color is used to make it look like it is a single piece molding. Care was taken to remove anything that might stick out beyond the smooth surface. Even the screws on the edge have been carefully chosen and placed to not deter from the soapstone-like exterior. The power light, IR receiver and iSight camera (even the screws!) are all perfectly flush along the outside.
Example #3 - Software:
Assembled:
Carved:
Google's Gmail: Gmail actually makes my eyes bleed. It looks like it was cobbled together as an experiment or a prototype and nobody bothered to finish it. The inconsistent use of margins and whitespace, font-sizes and layout waste opportunities to visually group and convey information to the user about usage and importance. The color choices were obviously made by someone that is style blind and probably wears plaid with stripes to work. It looks like a hack.
Apple's iDisk: This iDisk screen struck me when I first saw it. It is one of the best examples of a user interface that actually looks like it was "carved" from material. The round, smooth edges, low contrast & subtle color changes (as if almost to signify texture change of a physical material rather than primary color change). The cleanliness of the margins and generous whitespace further indicates that is was designed rather than hacked.
The cues:
There is actually a morale to this story. We're surrounded by so much technology that we sometimes forget that we all come from nature. Most people have either a conscious (embraced) or unconscious (unrecognized) affinity to natural materials. Most people prefer curves to edges, simplicity to complexity (simplicity = fewer apparent material changes and protrusions, etc.). They may not know it but they will gravitate towards these things when given a choice, if everything else is equal.
I recently came to consider the following cues that can be used (or misused) to achieve a "carved" (natural) versus assembled (artificial) look in user interface design for software:
- Curves vs. angles: Sure, sure, the Web 2.0 craze is experiencing a backlash towards rounded corners. The point is that people respond to smooth curves better to sharp jagged edges - again, if not consciously, then subconsciously, depending on how self-aware they are and how well they can articulate why they like or don't like something.
- Contrast: : Lots of high contrast color changes mid-surface are going to increase the artificial or "assembled" looking nature of your product. A few changes is probably ok, but use them to convey something or shy away from them. The higher the contrast of the change, the more influence that change has to convey something, either intentional or by accident, so make it intentional.
- Margins and whitespace: Even and consistent margins and gutters give a look of polish. Make these inconsistent, and your product comes off looking hacked. VERY generous use of whitespace can convey a feeling of cleanliness and simplicity, regardless of how many things are actually on a screen. The mean-distance between "things" on a screen (i.e. the gaps of whitespace) increase the overall perception of "smoothness" of the surface. The less white-space around things, the more "lumpy" it looks (remember all those protrusions in the Avalanche and Dell?).
Going forward, I think it's better to make your product look carved than assembled. People will respond better to it, even if they don't really understand why.

Those are some great comparisons. I always like "carved" products over "assembled".
Posted by: soapstone | Dec 02, 2009 at 11:33 AM