• Print this Article

I have read many books on UI design, some good, some bad, but I think that 90% of it can be summed up with some very short principles. On that note, I have read some very short principles on UI design, and many of them seem like they don't follow their own guidelines. Specifically, they can often be too wordy and too alienating. Too stuffy and too academic. In short, too user-unfriendly. So here are my own guidelines, in plain English easy enough for my grandma to understand*.

The Six Principles of Designing Things

When I say designing things, I mean literally anything, although my focus is usually on the Graphical User Interfaces employed by the web. I mean, I am a Front End Developer, afterall. But really, these 6 principles apply to user interfaces, websites as a whole, and everyday objects. In other words, everything!

#1 the principle of "VISIBILITY"

The user should be exposed to options or features that are relevant to the them, and to the task at hand.

For complicated interfaces, it is a good idea to show only what is truly relevant. At all times, it should be obvious where a user is at, what the task at hand is, and what their options are. Safe exits or safety valves should be visible, too. In short, if it ain't important, hide it. If it isn't needed, get rid of it altogether.

#2 the principle of "MENTAL MODELS / (METAPHOR AND MAPPING)"

The user interface should intuitively represent what the user is familiar with, or can readily understand.

By "Mental Models" I do not mean Kate Moss or Naomi Campbell. (Although that was pretty crazy when Naomi attacked her assistant with her Blackberry, back in 2006!) "Mental Models" has two different levels to it. On one level, there is the use of metaphor. For instance, in Windows environments, there is the "Desktop" where many of the icons and options available to the user reside. The icons themselves are metaphors for what they do, where a "Recycle Bin" is for the disposing of unneeded files. "Folders" are containers for collections of files, and "files" themselves are what you call objects that are really just a bunch of zeroes and ones that are used for a multitude of things. The use of methaphors allows common, everyday symbols to represent abstract computer concepts or events. A user's existing knowledge is leveraged to simplify what is really a complicated system.

Another part of the Mental Model is Mapping. Where the location, arrangement or behavior of an interface conforms to intuitive expectations. A good example is a well designed four burner stove, where the knob for each burner is arranged with the same layout as the burners themselves (like the four corners of a square).

3 the principle of "CONVENTIONS"

Follow normal conventions when you design a user interface.

The user, through their vast experience interacting with interfaces and objects, expects things to behave the way they always have. When they don't, confusion and frustration often result. In the web world, it is expected that for instances where only one choice is allowed from a collection of choices, a group of radio buttons is used. When more than one concurrent selection is allowed from a collection, check boxes are used. Yet, it is not uncommon for decision makers to want to change this arrangement. Often because they like the look of checkboxes better than radio buttons. ("Just use some of that Javascriptin' to make checkboxes behave like those radial [sic] buttons," I hear.) This is never a good idea. Stick with conventions.

An extension of this principle is "You need a very good reason to break conventions." This is especially true for new releases of software, from Windows 7 to (seemingly) every release of Photoshop, where software companies rearrange the GUI on a whim, with no respect for a user who just wants to get work done without having to relearn anything. When I first upgraded to Windows 7 from WinXP, it took me half an hour to find out what happened to the "Add or Remove Programs" icon that used to be in the Control Panel. Unlike most users, who blame themselves, I blame Microsoft, and the designers that decided to change how I did things, with no respect for me "just wanting to get work done."

#4 the principle of "FEEDBACK"

Users need feedback, on a micro level, and in a Big Picture way, too.

Is this button disabled, or can I click it? Is this piece of software telling me what I need to know in a way I can understand?

In the web world, when a user hovers over a "clickable" element -- be it a button or a link -- there should be a visual clue indicating that an element is clickable. And when a user takes an action, like submitting a form, there should be feedback indicating whether the submission was successful or not. And in plain English, not computer-speak. Interacting with a website or application should be like having a conversation. You say "This is what I want," and the interface should answer back if it can complete the task or not, in a meaningful way.

#5 the principle of "HELP and a SAFETY NET"

A user should never feel like they are on the edge of a cliff, with no where to go.

Or that, if "I press this button, I may lose everything." Doh!

For things that are too complex to be intuitive, plain English help must be available. And when possible, a safety net that allows the much loved "undo" should be provided. Users should know where they are, and what they can do, and what the consequences are at all times. (And I don't mean, "I am on the edge of a cliff, I can't do anything except for jump, and I am going to die!")

#6 the principle of "ATTRACTIVE / MINIMALIST DESIGN"

Although function should always be more important than fashion, things should still be attractive. But minimal.

For applications, less text, more images. Less "noise", more whitespace. And, as the first Principle says, keep it simple; show only what is necessary. When I say put function ahead of fashion, I mean what I say, but this does not mean that the "look" does not count. Your website or web application should still look attractive. In fact, looking good is a big part of usability. If things look unpolished and unprofessional, you will not inspire confidence in a user. And that may put them off before they can even get started. So make things look attractive. But invest more time in making them work properly. And keep the designs as minimalist as possible.

Tying it All Together

Of course, there is a lot of overlap in these principles. And they play off one another, and work together, making the sum of their parts far stronger than the pieces of which they are composed. And these are only guidelines. There are always exceptions, and to some extent, every situation is different. And while these six principles need to be expanded upon (and I provide some books I like at the end), at the same time, they can also be simplified and condensed.

If I were to answer "Give me a sentence that summarizes the most important things that make up designing things?", it would be:

1. Make things as intuitive as possible -- as easy-to-use as possible -- so there is very little or even no learning curve, and a user feels safe and comfortable at all times.

In a nutshell, that is the spirit of all of the six principles.

One Last Thing

This article was a plain English intro to UI Design. But I have to mention, a big part of good design, is testing your design. And then tweaking (or overhauling, or possibly completely redoing) your design based on real users and real experiences.

The reason why testing is so important is because how it works with real users is all that matters. Everything else is academic. Just theory. Things can look good on paper, and things can make sense to you, but it is the "regular users" that are going to use your designs that count. And you never know how they are going to do until you do real tests or make real observations of them using your work. But the testing of your designs, well, that will have to be another article.