principles of user interface design

"To design is much more than simply to assemble, to order,or even to edit; it is to add value and meaning, toilluminate, to simplify, to clarify, to modify, to dignify, todramatize, to persuade, and perhaps even to amuse." - PaulRand

Clarity is job #1Clarity is the first and most important job of any interface. To beeffective using an interface you've designed, people must be ableto recognize what it is, care about why they would use it,understand what the interface is helping them interact with,predict what will happen when they use it, and then successfullyinteract with it. While there is room for mystery and delayedgratification in interfaces, there is no room for confusion. Clarityinspires confidence and leads to further use. One hundred clearscreens is preferable to a single cluttered one.

01.

Interfaces exist to enableinteractionInterfaces exist to enable interaction between humans and ourworld. They can help clarify, illuminate, enable, showrelationships, bring us together, pull us apart, manage ourexpectations, and give us access to services. The act of designinginterfaces is not Art. Interfaces are not monuments untothemselves. Interfaces do a job and their effectiveness can bemeasured. They are not just utilitarian, however. The bestinterfaces can inspire, evoke, mystify, and intensify our

02.

Principles of User Interface Design http://bokardo.com/principles-of-user-interface-design/

1 of 7 8/3/2012 2:24 PM

relationship with the world.

Conserve attention at all costsWe live in a world of interruption. It's hard to read in peaceanymore without something trying to distract us and direct ourattention elsewhere. Attention is precious. Don't litter the side ofyour applications with distractible material…remember why thescreen exists in the first place. If someone is reading let themfinish reading before showing that advertisement (if you must).Honor attention and not only will your readers be happier, yourresults will be better. When use is the primary goal, attentionbecomes the prerequisite. Conserve it at all costs.

03.

Keep users in controlHumans are most comfortable when they feel in control ofthemselves and their environment. Thoughtless software takesaway that comfort by forcing people into unplanned interactions,confusing pathways, and surprising outcomes. Keep users incontrol by regularly surfacing system status, by describingcausation (if you do this that will happen) and by giving insightinto what to expect at every turn. Don't worry about stating theobvious…the obvious almost never is.

04.

Direct manipulation is bestThe best interface is none at all, when we are able to directlymanipulate the physical objects in our world. Since this is notalways possible, and objects are increasingly informational, wecreate interfaces to help us interact with them. It is easy to addmore layers than necessary to an interface, creating overly-wrought buttons, chrome, graphics, options, preferences,windows, attachments, and other cruft so that we end upmanipulating UI elements instead of what's important. Instead,strive for that original goal of direct manipulation…design aninterface with as little a footprint as possible, recognizing as muchas possible natural human gestures. Ideally, the interface is soslight that the user has a feeling of direct manipulation with the

05.


2 of 7 8/3/2012 2:24 PM

object of their focus.

One primary action per screenEvery screen we design should support a single action of real valueto the person using it. This makes it easier to learn, easier to use,and easier to add to or build on when necessary. Screens thatsupport two or more primary actions become confusing quickly.Like a written article should have a single, strong thesis, everyscreen we design should support a single, strong action that is itsraison d'etre.

06.

Keep secondary actionssecondaryScreens with a single primary action can have multiple secondaryactions but they need to be kept secondary! The reason why yourarticle exists isn't so that people can share it on Twitter…it existsfor people to read and understand it. Keep secondary actionssecondary by making them lighter weight visually or shown afterthe primary action has been achieved.

07.

Provide a natural next stepVery few interactions are meant to be the last, so thoughtfullydesign a next step for each interaction a person has with yourinterface. Anticipate what the next interaction should be anddesign to support it. Just as we like in human conversation,provide an opening for further interaction. Don't leave a personhanging because they've done what you want them to do…givethem a natural next step that helps them further achieve theirgoals.

08.

Appearance follows behavior(aka form follows function)Humans are most comfortable with things that behave the way weexpect. Other people, animals, objects, software. When someone or

09.


3 of 7 8/3/2012 2:24 PM

something behaves consistently with our expectations we feel likewe have a good relationship with it. To that end designed elementsshould look like how they behave. In practice this means thatsomeone should be able to predict how an interface element willbehave merely by looking at it. If it looks like a button it should actlike a button. Don't get cute with the basics of interaction…keepyour creativity for higher order concerns.

Consistency mattersFollowing on the previous principle, screen elements should notappear consistent with each other unless they behave consistentlywith each other. Elements that behave the same should look thesame. But it is just as important for unlike elements to appearunlike (be inconsistent) as it is for like elements to appearconsistent. In an effort to be consistent novice designers oftenobscure important differences by using the same visual treatment(often to re-use code) when different visual treatment isappropriate.

10.

Strong visual hierarchies workbestA strong visual hierarchy is achieved when there is a clear viewingorder to the visual elements on a screen. That is, when users viewthe same items in the same order every time. Weak visualhierarchies give little clue about where to rest one's gaze and endup feeling cluttered and confusing. In environments of greatchange it is hard to maintain a strong visual hierarchy becausevisual weight is relative: when everything is bold, nothing is bold.Should a single visually heavy element be added to a screen, thedesigner may need to reset the visual weight of all elements toonce again achieve a strong hierarchy. Most people don't noticevisual hierarchy but it is one of the easiest ways to strengthen (orweaken) a design.

11.

Smart organization reduces12.


4 of 7 8/3/2012 2:24 PM

cognitive loadAs John Maeda says in his book Simplicity, smart organization ofscreen elements can make the many appear as the few. This helpspeople understand your interface easier and more quickly, asyou've illustrated the inherent relationships of content in yourdesign. Group together like elements, show natural relationshipsby placement and orientation. By smartly organizing your contentyou make it less of a cognitive load on the user…who doesn't haveto think about how elements are related because you've done it forthem. Don't force the user to figure things out…show them bydesigning those relationships into your screens.

Highlight, don't determine, withcolorThe color of physical things changes as light changes. In the fulllight of day we see a very different tree than one outlined against asunset. As in the physical world, where color is a many-shadedthing, color should not determine much in an interface. It canhelp, be used for highlighting, be used to guide attention, butshould not be the only differentiator of things. For long-reading orextended screen hours, use light or muted background colors,saving brighter hues for your accent colors. Of course there is atime for vibrant background colors as well, just be sure that it isappropriate for your audience.

13.

Progressive disclosureShow only what is necessary on each screen. If people are makinga choice, show enough information to allow them the choice, thendive into details on a subsequent screen. Avoid the tendency toover-explain or show everything all at once. When possible, deferdecisions to subsequent screens by progressively disclosinginformation as necessary. This will keep your interactions moreclear.

14.

Help people inline15.


5 of 7 8/3/2012 2:24 PM

In ideal interfaces, help is not necessary because the interface islearnable and usable. The step below this, reality, is one in whichhelp is inline and contextual, available only when and where it isneeded, hidden from view at all other times. Asking people to go tohelp and find an answer to their question puts the onus on them toknow what they need. Instead build in help where it isneeded…just make sure that it is out of the way of people whoalready know how to use your interface.

A crucial moment: the zero stateThe first time experience with an interface is crucial, yet oftenoverlooked by designers. In order to best help our users get up tospeed with our designs, it is best to design for the zero state, thestate in which nothing has yet occurred. This state shouldn't be ablank canvas…it should provide direction and guidance for gettingup to speed. Much of the friction of interaction is in that initialcontext…once people understand the rules they have a muchhigher likelihood of success.

16.

Existing problems are mostvaluablePeople seek out solutions to problems they already have, notpotential problems or problems of the future. Therefore, resistcreating interfaces for hypothetical problems, observe existingbehavior and design to solve existing problems. This isn't asexciting as blue sky wondering but can be much more rewarding aspeople will actually use your interface.

17.

Great design is invisibleA curious property of great design is that it usually goes unnoticedby the people who use it. One reason for this is that if the design issuccessful the user can focus on their own goals and not theinterface…when they complete their goal they are satisfied and donot need to reflect on the situation. As a designer this can betough…as we receive less adulation when our designs are good.But great designers are content with a well-used design…and know

18.


6 of 7 8/3/2012 2:24 PM

that happy users are often silent.

Build on other designdisciplinesVisual and graphic design, typography, copywriting, informationarchitecture and visualization…all of these disciplines are part ofinterface design. They can be touched upon or specialized in. Donot get into turf wars or look down on other disciplines: grab fromthem the aspects that help you do your work and push on. Pull ininsights from seemingly unrelated disciplines as well…what can welearn from publishing, writing code, bookbinding, skateboarding,firefighting, karate?

19.

Interfaces exist to be usedAs in most design disciplines, interface design is successful whenpeople are using what you've designed. Like a beautiful chair thatis uncomfortable to sit in, design has failed when people choosenot to use it. Therefore, interface design can be as much aboutcreating an environment for use as it is creating an artifact worthusing. It is not enough for an interface to satisfy the ego of itsdesigner: it must be used!

20.

Make them Care! - Struggling to communicate the value of your

product or service? I'm writing a new book that shows you how to

make people care about your product or service by clearly

communicating the most important bits. For designers and marketers

creating product web sites. Find out more.

Written by Joshua Porter, an interface and product designer at @HubSpot. I currently live

in Newburyport, MA, USA. If you like UI or design, you can follow me on Twitter here.


7 of 7 8/3/2012 2:24 PM

principles of user interface design

Documents