Principles of Good Design for Interaction Designers

Part 1 | Part 2

Introduction: "But I make digital stuff, not coffee pots..."

Apple's Jonathan Ive and his design teams spend a lot of time thinking about Dieter Rams’ Ten Principles for Good Design, but many of us working in interaction design have yet to benchmark our own efforts against this list. In case you’re not already familiar with these fundamentals, here they are:

1. Good design is innovative.
2. Good design makes a product useful.
3. Good design is aesthetic.
4. Good design makes a product understandable.
5. Good design is unobtrusive.
6. Good design is honest.
7. Good design is long-lasting.
8. Good design is thorough down to the last detail.
9. Good design is environmentally friendly.
10. Good design is as little design as possible.

Everyone who takes design seriously – regardless of the sub-discipline or medium we work in – can derive goodness from including these principles as a fundamental component of the creative process. I've watched many different kinds of teams make use (or not) of these guidelines, and in most cases when something went sideways with the creative vision it was because one or more of these axioms was ignored.

1. Good design is innovative

The word “design” assumes invention and originality – an identical copy of an existing design isn’t a design at all, rather it’s an implementation of a prior invention. That said, due to the nature of ideas and the contingency of human experience on what’s come before, you’ll usually see derivative qualities in even the most noteworthy new designs -- defining how much is enough to declare something a breakthrough design is subjective and often the focus of heated debate. Most people agree, however, that great design requires a critical mass of invention and originality. Innovation can be major -- like a fundamentally new interface convention -- or it can be minor, like a small enhancement to an existing convention that still has a significant impact on the overall experience.

So how does knowing "good design is innovative" help guide product development? Innovations are generally easy to comprehend -- you did x before, you're now doing y, and it's elevating the experience from its prior state. Often we have the tendency during the course of a project to lose sight of the big picture and focus on the myriad details of design, getting so deep into the woods that we're no longer able to succinctly express the core innovation or innovations we're pursuing.

In software development this tendency to become burdened in features to the exclusion of understanding overall value and innovation is one of the primary factors that gave rise to agile development over traditional waterfall methodologies -- in the former the "here's what we're doing that's cool" is always kept at the front of value discussions, while in the latter it tended to get lost in a sea of specifications and line-item features. Feature implementation shouldn't drive design -- innovation should drive design.

The principles of innovation hold true if you're designing software, if you're making a toaster or if you're an artist working on a video installation: understand the heart of what makes whatever you're doing awesome, and make sure all the work you do directly supports that vision.

2. Good design makes a product useful

I like to illustrate this with a personal story from my early days as a visual designer. In the mid 90s I was responsible for making a number of web sites for Microsoft’s Developer Tools division – and back in those days this meant I was the sole person doing coding, writing, visual design, UX… so I had a huge ability to go totally insane. I had just hired a dedicated developer and visual designer but hadn’t yet been able to let go of the reins, so one weekend I stealthily added what I thought was a really eye-catching element to the Microsoft Data Access site: an animated test tube on the right side of every page with green bubbles jauntily floating to the top. It looked awesome! I was proud! It was like Data Access was SCIENCE! I showed my handiwork off to the folks I worked with and the reaction was universal:

“What do these floating green balls have to do with Microsoft Data Access (the product)?”

DEVASTATED. T_T

The answer, of course, was that the floating green balls had nothing to do with Data Access, and they added nothing to the design of the site other than decontextualized eye candy… and eye candy that quickly became intrusive by the third time you saw the animation. In everything I’ve designed since, I ask the question “Is this a floating green ball?” If the answer is yes, it gets cut.

3. Good design is aesthetic

So now let’s talk about the good kind of floating green balls – the visual and experiential elements that enhance the experience and make us feel good while we use it. The aesthetics of design are often ineffable and difficult to describe, but they always convey a feeling. Form, color and sound may not be required to complete the tasks of a given type of software, but if they’re done well each aesthetic choice elevates the overall experience, making it greater than the sum of its parts and making us feel good when we interact with it.

People love the Apple visual and experience metaphors, and frequently talk about how good it feels to use the Mac interface. For many years Microsoft didn’t pay enough attention to aesthetic principles and people started complaining that using Microsoft software felt like living in a gulag. Windows 7 is a step in the right direction, but it’s always harder to dig yourself out of a hole, and so Microsoft is now saddled with being perceived as a utilitarian workhorse when the industry has long since embraced aesthetic beauty as a requirement for consumer devices.

The Microsoft “Metro UI” is a response to the cry for aesthetic beauty and modern design which has its heart in the right place, but it’s struggling to be taken seriously due to an over-reliance on a particular implementation instead of a larger aesthetic spirit – a topic for a future article.

Architecture is a classic example of aesthetic design that most people easily relate to: brutalist concrete office buildings with small windows and uninspired gray slab structures hold the same number of people and do all of the same things that inspired architecture does, yet the former feels heavy, depressing and burdensome, while the latter feels lyrical and magical and elevates the spirit. Digital design is no different.

When aesthetics are done well and in-tune with the form of the things they support we’re all elevated. When they’re mistmatched to the forms they support or done poorly they feel ham-fisted, bolted-on and silly.

Bad aesthetics are floating green balls.

4. Good design makes a product understandable

This is a cautionary tale for designers who get caught-up in making art to the exclusion of function, or who focus on the “what” to the exclusion of the “how” – we’ve all seen products that look cool or that can do amazing things, but ultimately fail because nobody can figure out how to use them. The entire User Research field has developed around the principle of making things understandable – good design minimizes and reduces end-user complexity, allowing people to do what they need to do with a minimum of confusion and wasted effort. When I worked on the Microsoft Casual Games web site my first task was understanding why traffic was falling month-over-month when competing sites were growing. It didn’t take long to validate my guess that the declining traffic was due to a nonsensical site design with nearly 50% of the space given to random advertisements that had nothing to do with games – when we put the site through user testing almost nobody was able to discover any of the areas we asked them to find.

If someone comes to a games site and can’t find the games, that’s a problem.

The casual games issue went deeper than just bad design – people in the organization couldn’t agree on which revenue streams were most important (ads, purchased games, subscriptions, etc.), and as a result the design team was constantly adding one-off changes to appease whichever business was yelling the loudest at the time.

What I experienced while working with casual games is all too common: design is often a passenger when it needs to be driving the bus, and things are made even more complex when organizations can’t articulate what they want a design to accomplish.

Design leadership has a responsibility to help the organization clearly articulate what it wants to accomplish, then it needs to focus on an approach that matches how real users would go about accomplishing those things. This is the heart of what we call user-centered design. We might want users to jump through hoop B in order to get to the prize, but that won’t get us anywhere if users always want to jump through hoop A to get to the prize. We design based on how people actually behave, not how we think they should behave.

5. Good design is unobtrusive

This principle goes hand-in-hand with aesthetics and usefulness, and once again is an area where I bring my floating green ball analogy into play. Imagine you’re constructing an interface, and you’re feeling especially arty and fancy. So you decide that all of your buttons will be little green test-tubes with floating bubbles because hey, they look really awesome and you’re showing off your elite animation skillz and – I’M TALKING TO YOU NOW, TRES HENRY – they’re actually BUTTONS, so they do stuff! So there!

So you bring in a user to test-out your awesome design, and the first thing the user says is All I see when I look at this interface is a lot of moving bubbles. I can’t focus on what it is exactly that I’m supposed to be doing.

You’ve nailed your user flows, you have pitch-perfect calls to action and an amazingly efficient workflow… but nobody is ever going to appreciate it because they can’t get past all the floating green balls competing for their attention.

The floating green balls are obtrusive – they’re not elevating the experience, they’re hurting it. They don’t make people feel great while using your product, they place a burden on the user, because you're making them spend energy to ignore a distraction when they could otherwise focus that energy on the tasks you actually want them to do.

Floating green balls aren't just pointless, they're obtrusive.

Part 1 | Part 2