Plain English Intro to User Interface Design

by Matt Garvin, published 2012

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*.
*Note: Grandma Garvin has an I.Q. of 161.

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.


FEATURED ARTICLE

"Plain English Intro to User Interface Design" tries to make UID simple enough for grandma.

Read article

FEATURED ARTICLE

"Love Jquery, Hate the Jquery UI" shows what hapens when software engineers do UI work.

Read article

FEATURED ARTICLE

"Top Five Goals for Front End Developers" prioritizes the most important goals of coding HTML and CSS.

Read article