Principles of User Interface Design


Published on

This Presentation base on Joshua Porter Blog (

Published in: Technology, News & Politics

Principles of User Interface Design

  1. 1. “ To design is much more than simply to assemble, to order, or even to edit; it is to add value and meaning, to illuminate, to simplify, to clarify, to “ modify, to dignify, to dramatize, to persuade, and perhaps even to amuse. - Paul Rand PrinciplesUI Design Joshua PorterDirector of UX at HubSpot, Co-founder @performable, Founder @bokardo & Co-founder @52weeksofux
  2. 2. Clarity is jobClarity is the first and most important job of any interface. To be effective usingan interface youve designed, people must be able to recognize what it is, careabout why they would use it, understand what the interface is helping theminteract with, predict what will happen when they use it, and then successfullyinteract with it. While there is room for mystery and delayed gratification ininterfaces, there is no room for confusion. Clarity inspires confidence and leadsto further use. One hundred clear screens is preferable to a single cluttered one.
  3. 3. Interfaces exist toenable interactionInterfaces exist to enable interaction between humans and our world. They canhelp clarify, illuminate, enable, show relationships, bring us together, pull usapart, manage our expectations, and give us access to services. The act ofdesigning interfaces is not Art. Interfaces are not monuments unto themselves.Interfaces do a job and their effectiveness can be measured. They are not justutilitarian, however. The best interfaces can inspire, evoke, mystify, and intensifyour relationship with the world.
  4. 4. Conserve attentionat all costsWe live in a world of interruption. Its hard to read in peace anymore withoutsomething trying to distract us and direct our attention elsewhere. Attention isprecious. Dont litter the side of your applications with distractiblematerial…remember why the screen exists in the first place. If someone isreading let them finish reading before showing that advertisement (if you must).Honor attention and not only will your readers be happier, your results will bebetter. When use is the primary goal, attention becomes the prerequisite.Conserve it at all costs.
  5. 5. Keep users in controlHumans are most comfortable when they feel in control of themselves and theirenvironment. Thoughtless software takes away that comfort by forcing peopleinto unplanned interactions, confusing pathways, and surprising outcomes. Keepusers in control by regularly surfacing system status, by describing causation (ifyou do this that will happen) and by giving insight into what to expect at everyturn. Dont worry about stating the obvious…the obvious almost never is.
  6. 6. Direct manipulationis bestThe best interface is none at all, when we are able to directly manipulate the physical objects in ourworld. Since this is not always possible, and objects are increasingly informational, we createinterfaces to help us interact with them. It is easy to add more layers than necessary to an interface,creating overly-wrought buttons, chrome, graphics, options, preferences, windows, attachments, andother cruft so that we end up manipulating UI elements instead of whats important. Instead, strivefor that original goal of direct manipulation…design an interface with as little a footprint as possible,recognizing as much as possible natural human gestures. Ideally, the interface is so slight that theuser has a feeling of direct manipulation with the object of their focus.
  7. 7. One primary actionper screenEvery screen we design should support a single action of real value to theperson using it. This makes it easier to learn, easier to use, and easier to add toor build on when necessary. Screens that support two or more primary actionsbecome confusing quickly. Like a written article should have a single, strongthesis, every screen we design should support a single, strong action that is itsraison detre.
  8. 8. Keep secondaryactions secondaryScreens with a single primary action can have multiple secondary actions butthey need to be kept secondary! The reason why your article exists isnt so thatpeople can share it on Twitter…it exists for people to read and understand it.Keep secondary actions secondary by making them lighter weight visually orshown after the primary action has been achieved.
  9. 9. Provide a naturalnext stepVery few interactions are meant to be the last, so thoughtfully design a next stepfor each interaction a person has with your interface. Anticipate what the nextinteraction should be and design to support it. Just as we like in humanconversation, provide an opening for further interaction. Dont leave a personhanging because theyve done what you want them to do…give them a naturalnext step that helps them further achieve their goals.
  10. 10. Appearance followsbehaviourHumans are most comfortable with things that behave the way we expect. Otherpeople, animals, objects, software. When someone or something behavesconsistently with our expectations we feel like we have a good relationship withit. To that end designed elements should look like how they behave. In practicethis means that someone should be able to predict how an interface element willbehave merely by looking at it. If it looks like a button it should act like a button.Dont get cute with the basics of interaction…keep your creativity for higher orderconcerns.
  11. 11. Consistency mattersFollowing on the previous principle, screen elements should not appearconsistent with each other unless they behave consistently with each other.Elements that behave the same should look the same. But it is just as importantfor unlike elements to appear unlike (be inconsistent) as it is for like elements toappear consistent. In an effort to be consistent novice designers often obscureimportant differences by using the same visual treatment (often to re-use code)when different visual treatment is appropriate.
  12. 12. Strong visualhierarchies work bestA strong visual hierarchy is achieved when there is a clear viewing order to the visual elements on ascreen. That is, when users view the same items in the same order every time. Weak visualhierarchies give little clue about where to rest ones gaze and end up feeling cluttered and confusing.In environments of great change it is hard to maintain a strong visual hierarchy because visualweight is relative: when everything is bold, nothing is bold. Should a single visually heavy elementbe added to a screen, the designer may need to reset the visual weight of all elements to once againachieve a strong hierarchy. Most people dont notice visual hierarchy but it is one of the easiestways to strengthen (or weaken) a design.
  13. 13. Smart organizationreduces cognitive loadAs John Maeda says in his book Simplicity, smart organization of screen elements canmake the many appear as the few. This helps people understand your interface easierand more quickly, as youve illustrated the inherent relationships of content in yourdesign. Group together like elements, show natural relationships by placement andorientation. By smartly organizing your content you make it less of a cognitive load onthe user…who doesnt have to think about how elements are related because youve doneit for them. Dont force the user to figure things out…show them by designing thoserelationships into your screens.
  14. 14. Highlight, dontdetermine, with colorThe color of physical things changes as light changes. In the full light of day wesee a very different tree than one outlined against a sunset. As in the physicalworld, where color is a many-shaded thing, color should not determine much inan interface. It can help, be used for highlighting, be used to guide attention, butshould not be the only differentiator of things. For long-reading or extendedscreen hours, use light or muted background colors, saving brighter hues foryour accent colors. Of course there is a time for vibrant background colors aswell, just be sure that it is appropriate for your audience.
  15. 15. Progressive disclosureShow only what is necessary on each screen. If people are making a choice,show enough information to allow them the choice, then dive into details on asubsequent screen. Avoid the tendency to over-explain or show everything all atonce. When possible, defer decisions to subsequent screens by progressivelydisclosing information as necessary. This will keep your interactions more clear.
  16. 16. Help people inlineIn ideal interfaces, help is not necessary because the interface is learnable andusable. The step below this, reality, is one in which help is inline and contextual,available only when and where it is needed, hidden from view at all other times.Asking people to go to help and find an answer to their question puts the onuson them to know what they need. Instead build in help where it is needed…justmake sure that it is out of the way of people who already know how to use yourinterface.
  17. 17. A crucial moment:the zero stateThe first time experience with an interface is crucial, yet often overlooked bydesigners. In order to best help our users get up to speed with our designs, it isbest to design for the zero state, the state in which nothing has yet occurred.This state shouldnt be a blank canvas…it should provide direction and guidancefor getting up to speed. Much of the friction of interaction is in that initialcontext…once people understand the rules they have a much higher likelihood ofsuccess.
  18. 18. Existing problemsare most valuablePeople seek out solutions to problems they already have, not potential problemsor problems of the future. Therefore, resist creating interfaces for hypotheticalproblems, observe existing behavior and design to solve existing problems. Thisisnt as exciting as blue sky wondering but can be much more rewarding aspeople will actually use your interface.
  19. 19. Great design isinvisibleA curious property of great design is that it usually goes unnoticed by the peoplewho use it. One reason for this is that if the design is successful the user canfocus on their own goals and not the interface…when they complete their goalthey are satisfied and do not need to reflect on the situation. As a designer thiscan be tough…as we receive less adulation when our designs are good. But greatdesigners are content with a well-used design…and know that happy users areoften silent.
  20. 20. Build on other designdisciplinesVisual and graphic design, typography, copywriting, information architecture andvisualization…all of these disciplines are part of interface design. They can betouched upon or specialized in. Do not get into turf wars or look down on otherdisciplines: grab from them the aspects that help you do your work and push on.Pull in insights from seemingly unrelated disciplines as well…what can we learnfrom publishing, writing code, bookbinding, skateboarding, firefighting, karate?
  21. 21. Interfaces exist tobe usedAs in most design disciplines, interface design is successful when people areusing what youve designed. Like a beautiful chair that is uncomfortable to sit in,design has failed when people choose not to use it. Therefore, interface designcan be as much about creating an environment for use as it is creating anartifact worth using. It is not enough for an interface to satisfy the ego of itsdesigner: it must be used!
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.