Tuesday, August 28, 2012

Seeking a Definition of Clean Design

For some years now, but increasingly lately, there has been a trend to discuss digital designs as "clean" vs. "cluttered."

These are reasonable adjectives on their own, but both do us no good at all as guides to design, or as useful feedback during design criticism. Not because I don't want to talk about design style, but because they are subjective terms. I can't find a useful definition anywhere.

The Goldilocks Problem

We do design products for people. Subjectivity is built into the problem set, and is close to the reason I like digital design at all. Striving for pixel perfection is a fools errand – things change over time, or with different devices. To me, much like trying to pull a "perfect" print, you strive for near-perfection, but revel in the variability of the results, and how satisfied the users are with their perception of the result. They may each even be satisfied or entertain in slightly different ways.

But subjective perception is not the same as opinion. If users can take away different experiences from a design, then the designers, developers, clients and others on the project teams simply seem to have opinions. What I am seeing with discussions and guidelines for "clean design" are assumptions that any one opinion is founded in an assumed absolute truth.

Aside from having problems with ascribing too much weight to any one opinion, this particular truth is never stated, or defined.

I propose that this is because it does not exist. I have discussed the faith-based belief in clean design and how to conduct good design criticism in the past. But now, let's go ahead and entertain the concept. If I assume that "clean design" is a goal, I need to know what it is. I need a single, universally-applicable definition in order to accept it as a design goal, or a request for improvement, and apply it to my work.

Good Design

As a starting point, and an example, let's take Good Design. Note, it's got capital letters. Design (and art, and architecture, and so on) is a real job with a formalized language. A lot of things that are used as generics also have specific meanings within the field. For example, we do not live in the Modern era; we're in some sort of post Post Modern period.

When a client says they want a "modern" design, I do not however assume that they want me to experiment with geometric counter-formality, but understand that they mean a "contemporary" look of some sort. When you start a discussion around design, it is best if you (and everyone else) has a grounding in what it really means, so you know what your goals and definitions mean to your work, and know what others probably mean as well.

Aside from going to art school and working as a (very-slightly award winning) graphic designer, I have also written on the nature of design in much the way I write and present on patterns and process. I'll start by cribbing from my first book, where I started on much the same path, trying to discover the reason we design.

Kauffman’s twelve precepts of Good Design (1950, MoMA) are informative to review for designers even today:

  1. Fulfill the practical needs of modern life
  2. Express the spirit of our times
  3. Benefit by contemporary advances in the fine arts and pure sciences
  4. Take advantage of new materials and techniques and develop familiar ones
  5. Develop the forms, textures and colours that spring from the direct fulfilment of requirements in appropriate materials and techniques
  6. Express the purpose of an object, never making it seem to be what it is not
  7. Express the qualities and beauties of the materials used, never making the materials seem to be what they are not
  8. Express the methods used to make an object, not disguising mass production as handicraft or simulating a technique not used
  9. Blend the expression of utility, materials and process into a visually satisfactory whole
  10. It should be simple – its structure evident in its appearance, avoiding extraneous enrichment
  11. Master the machine for the service of people
  12. Serve as wide a public as possible, considering modest needs and limited costs no less challenging than the requirements of pomp and luxury

A lot of these still make a lot of sense — furniture designers working today put these to good use in their day-to-day work — but they also imply a specific style of design. Of course, this was intentional at the time, and guides a specific style of design in furniture, interior design and decoration. This is an unadorned geometrically-constructed style that, yes, is very much what Apple is following in the form of their hardware. 

And you better believe "just make it clean" in the interactive (and especially mobile) design field is often followed by "like Apple." I now get worried when everyone in the room has their iPads out during a discussion. 

For interaction design, I am personally unconcerned with the problem of additional adornment, or the style of the design, as long as it does not interfere with the primary functionality. There’s room to argue what involves adornment that interferes, hence the original Good Design movement, and many others. But, in general, digital design has arrived at a place where decorative elements fulfill a purpose other than style, so the discussion is easy to have.

But much of the concepts, of both design and that designed products are mass-distributed (by factories originally, and now also as time-sharing on computer networks) I have, in the past, modified these precepts for contemporary interactive design purposes:

  1. Fulfill the practical needs of your users
  2. Express the spirit of our times
  3. Benefit by contemporary advances in technology and the understandings of human behaviors
  4. Take advantage of new technologies and techniques and develop new ones
  5. Allow the form, and position of each element to spring naturally from the direct fulfillment of requirements, using appropriate techniques and methods
  6. Express the purpose of an element, never making it seem to be what it is not
  7. Express the qualities and truth of the information presented, never making information seem to be what it is not
  8. Emphasize transparency in process, intent and information processing, to gain the faith and trust of your users
  9. Blend the expression of utility, technology and process into a visually satisfactory whole
  10. It should be simple – its meaning and content evident by its appearance, avoiding extraneous enrichment
  11. The system should work for the end user, instead of for its own means
  12. Serve as wide a public as possible, considering modest or specialized needs, and limited capabilities as no less challenging than the requirements of your most expected or profitable users

Good or Clean?

I think some of this sort of definition may be getting close to understanding what we mean by Clean design. I'll even start capitalizing it, as though it's a thing, for our discussion here at least. 

Typical analysis of this design style discusses the trend in these definitions towards suppression of ornamentation, or decoration. The form of the thing itself is supposed to emerge, fully-apparent. There are a lot of terms used interchangeably in these discussions; though I am using "clean" as my basis, as the most grating of the terms, others exist. For example:

  1. It should be simple – its meaning and content evident by its appearance, avoiding extraneous enrichment

So, an element simply (cleanly) designed is clearly apparent, and without ornamentation. Easy.

But we still have a problem. Go look at something simple and easy to understand like a tea kettle. Of these, once you discount the Hello Kitty ones, almost all are quite simple, straightforward design. They are not painted in stripes, covered in filigree or tassels. They have no specifically decorative elements. And, not a one is quite like another.

Adornment or Design?

I should probably continue/h3 to define terms, to make sure everyone follows. "Adornment" is a design term than means decoration to add interest to the plain or make something everyday stand out.

In these sorts of discussions, and almost universally in design today it is applied derisively, and means a design element that has no practical purpose. Of course, fashion designers, interior decorators, graphic designers and others might well argue that "adding interest" is a valid function, but even in those fields there is a tendency to dismiss (and generally to remove) "unnecessary" decoration. Watch one of the home decorating shows and you will see moldings removed as needless decoration, but then the walls painted in stripes. Hmm.

Even as someone raised in post-modern simplicity, I find it hard to disagree with the concept from anything other than an aesthetic point of view. And by that I do somewhat mean opinion. Sure, there can be a style of the times, but they are always able to be defined.

Simply saying everything has to have a function leads to everyone wearing Mao suits. Back to websites, how about the logo in the corner of the page? Google is often an exemplar of clean design based (probably too narrowly, and only) on their home page, but they clearly play around by decorating their logo. So, what does that mean?

Is branding as a whole something with a true function? It's pretty easy to argue that brand elements serve no practical purpose in comparison to other functions on a page.

This is not theoretical. I have completely removed branding for products that approach OS pervasiveness, or where the primary functions occupies the viewport entirely. Many of you are reading this on a Mac, and can glance to the upper left to see a little apple. Many of you are reading this on an iOS device; go ahead and find me an Apple logo on the screen, or anywhere on the front of the device.

Features are Not Subject to Opinion

So, go to your client or boss and propose just tossing the logo from their website. I mean, it's not something the user interacts with so clearly does not cross the threshold of importance. This won't usually go well, because you have to measure importance on several levels. You cannot let opinion take over because there are multiple players. Your project also better not destroy the rest of the digital product, or the company for that matter.

I say I am unconcerned with adornment, because the process and principles of UX design (or Information Design, or Interaction Design...) will tend to solve for it. When a review meeting comes to the number of features causing "clutter," we've already had this discussion weeks or months ago. When we say there's no need to have fewer features on mobile, because if they aren't needed there, they aren't needed anywhere. That's the same argument, and it's based on good design processes.

Information Design has slightly different definitions in different fields and parts of the world. In the U.S., where I am either an Information Architect or (I prefer to think) an Interaction Designer, I put Information Design in between the two. A key part of the processes I follow to decide what features go in a product, and where and how in relation to each other, is based on some very serious works in this field.

If you want a good background, I'd get this book. My favorite part, of many good parts, is that the cover is not an illustration but a visualization of the content and organization of the book. That's commitment.

Information design is "sense- making," or making sense of information through communication of information. We design how that information gets to the user. This relies very much on design helping the user not be overloaded. For example, we do not present all information at once, and for it to be consumed at a human pace.

A process derived from this thought, the process I like to use, is not totally unique or anything. You figure out what to include, and mostly what not to include. Group and prioritize items, then arrange them in a way that makes the most relative sense to the user. 

Of course, what users we design for is always the question. You use any research, build personas or profiles and make sure that you are building for the user. Never for opinion, and only for the client in so far as their organizations' goals are met. 

Other Elements are Also Not Subject to Opinion

The next step is considering all the extra bits and pieces on the page. In definition mode, again, this is interface design or visual design. Here, again, I generally argue for adding or preserving elements not out of opinion, but for functional purposes, in support of the IA, ID or IxD.

Not to say the job of an IA, ID or IxD is more important than that of a VizD, and they must bow down before those others. Just that the principles, goals and intent be understood, and adhered to. Ideally, not in a handoff, but by everyone being engaged all along. My whole argument here about refuting opinion is about team dynamics; even within the design team, if you see opinion, challenge it, and if challenged explain why it's grounded in good principles, heuristics or actual research. If it is opinion, own up to it.

When, on the other hand, things are going poorly for the visual designer, a common thing that I see removed in discussions of "cleaning up" the design is rules, or fields of color. And then I see (by applying heuristics or actually putting it in the lab) that removing them makes it hard to tell what items go together. Performance is degraded. Adding space is the usual answer, and as you might expect has it's own issues of fitting in the viewport and scanability of the content.

You cannot just tug on parts of a complete design and expect it to survive. Processes of design, like I briefly outlined above, are about holistic design. Change pretty much anything, and you have to reconsider the entire design.

Now that I've said we should all work together, I'll admit that I see a lot of good design ruined by applying designers. Organizations are not always set up that way, so wireframes make perfect sense and even test well at a high level (prototypes), but the visual or graphic design team is then tasked to come along, and apply their work to it without asking (or maybe, being allowed to ask) the point of even things like position, spacing, or alignment. Yes, position. Things have moved around the page, which we used lengthy user testing to get in the right order.

Or, another favorite is when a multi-tier list (with items indented to express hierarchy) is perceived as confusing and cluttered. Everything gets aligned to a restrictive grid. And no, the design doesn't work at all once it gets to the end user. Aside from arguing why it needs to be retained if you'd work with me, I could totally have worked around this if the constraint had been given up front.

Don't even get me started on things like not underlining links.

But enough ranting. As I have said, this is not because visual designers are terrible people, but because there is far too much assembly-line process, where one worker passes to the next. I am to some degree seeing this get worse, actually, with formal practices of putting teams in a room with each role next to each other; receive work from the left, hand it off to the right. That's not collaboration in the way we need. 

Regardless of the people involved, simply disregarding heuristics and design elements with specific goals is a recipe for disaster. Maybe you get a screenshot up on a pretty-designs list, but does it serve the users, or the organization or just the designer?

An Anti-Definition

But enough of process, and organizational issues. Before proceeding further with a definition maybe first we can say what we should not do. Good design practice
"does not remove elements without good cause, and proof it will not prevent the user from understanding the information or performing their task."

Clean design – assuming it is a good design practice – therefore cannot just simplify for the sake of simplicity. You cannot use the mandate of Clean to simply remove features, interactive elements or display elements because "there are too many of them." Make sure there are just as many notes as are required. Neither more nor less.

If you are working on a project, and find it has too many unimportant features, this has to be addressed far earlier in the process. Simple questions that arise from any number of discovery processes help. One of my favorites is the "what is the one main purpose." And then you stick to it during the feature analysis. If a feature comes up that has little or nothing to do with the core reason, it's demoted. At the end, these irrelevant features look out of place, clustered in the corner of a box diagram (a sort of notional page layout) or bottom of the feature list.

A good example for me, is that focus on the home page is very often a terrible idea now, and has been for years. For the web, I'll bet almost all of your traffic comes from search, or links from email, or some other method. Users arrive more often at deeper pages. Mobile apps should work much the same way, and just annoy users if they are required to first pick a step.

Instead, you design for immediate understanding and use. A Clean mobile application for me would start with actions or information immediately. Your Twitter client, your Calendar, your Email app – unless you have a terrible one – will show the relevant content immediately. A list of recent comments, a list of upcoming events, your inbox. 

What does your tool do, that is accused instead of being cluttered? Are they right, and by the time you get to interface design it's getting clearly out of hand?

Simple Meaning and Content

None of this talk of cutting means that you should arbitrarily reduce the feature count. I do have a few numerical guidelines; I tend to say that business requirements (or goals, or objectives) should not exceed 6-7, and 2-3 is better.

But that's much higher level. Features are details, and there is no way to tell by just saying "we have 13 features" whether that is too many, or just enough. Or, very often, too few. On several projects I've been involved in, search gets descoped, or reduced to "keyword search." No parameters, no intelligence, no predictive completion.

Of course, this doesn't work. Users who must use the system (when it is not behind a login) just use Google to find the right item. Users will make your system work in ways you don't want it to. And if they can't, they try it once, maybe twice ("I must have missed it") and will give up.

Giving up is a terrible thing. Giving up is why you can't assume we'll fix it in a second release. If your organization is larger, and stick around as customers for other reasons, good luck getting them to trust the lame, crippled tool you launched. This is not a prediction or warning, but something I have seen time and again. It can take years to convince customers that the product they launch is the one that matters.

So you need to provide a perception of simplicity, a beautiful veneer of Clean design, but wrapped around a core of deeply relevant data, intelligent presentation, and robust functionality that meets the expectations of the user.

Simple is Not Boring. Clean is not Easy

Actually "veneer" is a cop-out. A pithy way of phrasing it so you can envision a diagram with layers of complexity and function building on each other to the unique and simple user interface.

And it's wrong because none of this can be done in a vacuum. Because good UX is how we get to this. And UX is about experiences, from the data and business processes through to the interface and interaction. And not even just one of those collaborating with the others. You have to go to meetings about storage and communications and specify error messages (or figure out how to avoid them).

This is holistic design in multiple dimensions. Sometimes it is innovative, or new, or difficult. Mostly it is built on principles, meaning, understanding, data, standards and yes, even best practices and patterns.

You have to, in other words, do your job. Step back and look at everything involved in any serious design process. UCD will do, but it's true of furniture and buildings and cars. You have to understand the users, the goals, the technology.

Ah, I feel we're getting back to some key principles that are easy to forget. I'll use some of those from Good Design that I messed with up above. Let's just focus on technology.

  1. Benefit by contemporary advances in technology and the understandings of human behaviors
  2. Take advantage of new technologies and techniques and develop new ones
  3. Express the purpose of an element, never making it seem to be what it is not
  4. Blend the expression of utility, technology and process into a visually satisfactory whole

We can… no, we must, we have a responsibility, to keep up on technology, use them in ways users understand, and use them natively (or naturally) whenever possible. The design you subsequently produce can hardly help from being easy to use, functional and generally simple.

Or, we can approach it from other facets. How about the data, content or information?

  1. Express the qualities and truth of the information presented, never making information seem to be what it is not

Truth in information is sometimes absolutely key. You cannot make a weather map prettier – past a certain point – without modifying the information. But InfoViz is a whole field of expressing information to show even more of its core truth, or get to new meaning from the same information, often in notably attractive or interestingly interactive ways.

What are you doing with your data? Or your business processes and interactions?

  1. Emphasize transparency in process, intent and information processing, to gain the faith and trust of your users

Obscuring or obfuscating, hiding and pretending, whether about business process, technical process or simple interactions, never really works.

As far as painful business processes, your users will eventually run up against the edges. Do you want them feeling their way along to find out how to deal with it, or would it be easier to reveal the edges, or the truth of the organization and system up front.

It doesn't mean you use internal jargon and organize the website like your company. But maybe it means you don't direct every question to online self-care, when you know perfectly well that phone reps have to do a lot of these actions, and some even have to be done face to face?

Definitions, and Tactics

But I think there's one that is even better than those:

  1. It should be simple – its meaning and content evident by its appearance, avoiding extraneous enrichment

Yes, we've already pulled that out and talked about it. But let's look again. Browse through some other discussions of design philosophy, digital or otherwise, and you'll see "simple" repeated, but with an explanation to follow. Here, not only is "meaning and content is evident," but I now realize, years after first analyzing it, that "extraneous enrichment" applies just as well to the structure, the architecture, the process and the feature list as it does to adornment of any of those features.

Now, what do we do with it. I mean, aside from having a new-found faith in ourselves, or maybe going out, and printing up your favorite design principles for the cube or team room wall? You will still go into a meeting tomorrow and have an executive say "it's just so cluttered."

I can only help so much. You will have to use all your social and negotiation skills for this. If you have none, get some or bring others to help.

But some hints that might work:

  • You can use similar terminology to counter the argument. "We have already cleaned up the design as much has possible within the scope outlined."
  • Know your design. Practice saying it productively, instead of looking like you whine, but if someone points to a part to remove, be able to indicate how it will break the rest of the product.
  • , be able to talk about how it meets specific business objectives, users goals or requirements. If it meets three, and it's hard to explain how the #1 or 2 goal is met without it, suddenly it's an indispensable feature.
  • Then, you can talk about how you pursued a good design process all along to make sure only the right features were in there. Despite my first bullet here, it's hard to start with that in detail, without.
  • Next time, invite the business to some workshops to boil down the features, and organize them. It is not foolproof, but maybe you get another couple of people on your side. I love it when I don't have to argue to keep a design, as the BA and one client rep does it for me, from their experience watching us work.
  • Money talks. Your client or business owner wants the project on a date. But someone, somewhere wants it to be easy to maintain also. If your feature reduces transport, storage or other fees, do some back-of-the-envelope math and tell them it saves 1.2 million a month. How much development can you buy for that? How much time?
  • Use fear. Timelines are often driven by competitive pressures. If the competition has a truly good product, explain (carefully) how you'll be proving you are catching up if yours is not at least as good.

And of course, if you really love and embrace those simplified, Clean designs, now you have more of a starting point to actually carry them out. Not as a visual design method, or late-term axe to elements, but as a way of approaching design from the ground up, and throughout the process.


The Geeks said...

hi..Im college student, thanks for sharing :)

Logo Gravity said...

Logo Gravity is a business logo design agency, based in Mason OHIO, working since 7 Years in the industry
create Logo Designs, website designs, business stationary dsigns, mobile applications and
animated videos.