Principles of User Interface Design
Direct manipulation is best
“To design is much more than simply to assemble, to order, or even to edit; it’s 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
Clarity is the most important aspect of any user interface. But, to be effective, people must be able to recognise it. They must understand why they would use it and what it’s helping them interact with. Users will foresee what will happen when they use it, and then successfully interact with it.
There’s no room for confusion. Clarity encourages confidence which leads to further use. One hundred clear screens is preferable to a single cluttered one.
Interfaces exist to allow interaction
Interfaces exist to allow interaction between humans and the digital world. They help us clarify, manage expectations, and access services. The act of designing interfaces is not art, it’s utilitarian (designed to be useful or practical rather than attractive).
They need to do their job effectively. However, the best interfaces can inspire, evoke, mystify, and intensify our relationship with the world.
Conserve attention at all costs
We live in a world of distractions. It’s hard to read in peace without something trying to interrupt us and direct our attention elsewhere. Attention is precious.
Don’t litter the side of your screen with material, it’s a distraction. Remember why the screen exists in the first place. If someone is reading, let them finish reading before showing that advertisement (if absolutely necessary). Respect attention and your readers be happier,
and your results will be better. When engagement is the primary goal, attention becomes the prerequisite. Conserve it.
We live in a world of distractions.
Keep users in control
Humans are comfortable when they feel in control of themselves and their environment.. Thoughtless software removes comfort, forcing people into unplanned interactions, confusing journeys, and unexpected outcomes. Help users feel in control by letting them know what to expect — it’s okay to state the obvious.
Direct manipulation is best
Direct manipulation (DM) is an interaction style where users interact with objects on screen, using physical, incremental, reversible actions, whose effects are immediately visible on the screen.
For example, dragging a window from one position to another is direct manipulation. Traditionally, we have used a mouse to perform manipulation, but touch-based interfaces feel more direct because there’s nothing between users and the object being manipulated. Users can instantly see the immediate and visible results of their actions.
One primary action per screen
Every screen we design should support a single action, making it easier to learn and use. Screens that support two or more primary actions can quickly become confusing.
Keep secondary actions secondary
Screens with a single primary action can have secondary actions but, they need to be kept secondary. The reason why your article exists isn’t so that people can share it on social media, it exists for people to read and understand it.
Keep secondary actions visually lighter, or show them after the primary action has been achieved.
Provide a natural next step
Interactions are meant to be frequent.
Anticipate what the next interaction should be, and design accordingly. Just like human conversations, you must provide an opening for additional interactions. Don’t leave a user hanging because they’ve completed an action, give them the next natural step to achieve their goals.
Appearance follows behavior
Humans are comfortable when things behave as expected. People, animals, objects, and software, to name a few. When someone or something behaves consistently with our expectations, we create a good relationship with it. Designed elements should look, how they behave. Form follows function. If it looks like a button, it should behave like a button.
Consistency is when all elements of the design behave in the same way. Creating a product that stays consistent across its design, helps users to understand how to use it. This prevents confusion, and ensures the product matches customer expectations.
Strong visual hierarchy
A strong visual hierarchy provides a clear order to view the visual elements on screen. Weak visual hierarchies give no direction of where to look, often appearing cluttered and confusing.
In environments of great change, it’s hard to maintain a strong visual hierarchy. Visual weight is relative: when everything is bold, nothing is bold.
When a single visual heavy element is added to a screen, the designer may need to reset the visual weight of all elements, to maintain a strong hierarchy. Most people don’t notice visual hierarchy but it’s one of the easiest ways to strengthen (or weaken) a design.
Smart organization reduces cognitive load
John Maeda, author of ‘The Laws of Simplicity’ says ‘smart organisation of many screen elements can make them appear less cluttered’.
Help your users to understand your interface quicker, by grouping similar elements together, to show natural relationships through placement and orientation. Smartly organised content, puts less cognitive load on the user. Don’t allow the user to think, or leave them trying to figure things out. Show them, by designing relationships into your screens.
Highlight, don’t determine, with color
The colour of physical things change as light changes. In the light of day, we see a very different tree, than one outlined against a sunset. Colour should not be the defining element of an interface but used to help highlight or guide attention.
For long-reading or extended screen hours, use light or muted background colours, saving brighter hues for your accent colours. There is a time for vibrant background colours, just be sure that it’s appropriate for your audience.
Show only what is necessary on each screen. If people are making a choice, show enough information to allow them to choose, then dive into details on a subsequent screen. Avoid the tendency to over-explain or show everything all at once. When possible, defer decisions to secondary screens to provide information in bitesize chunks.
Help people inline
A well-designed interface should not require help to use it. If help is required, it should be inline and contextual, available only when needed, and hidden from view at all other times.
Asking people to go to help and find an answer to their question puts the onus on them to know what they need. Instead build in help where it is needed…just make sure that it is out of the way of people who already know how to use your interface.
A crucial moment: the zero state
The first experience with an interface is crucial, yet often overlooked by designers. To help users get up to speed, it’s best to design for the zero state (before an action has taken place).
This state shouldn’t be a blank canvas…it should provide direction and guidance.. Once users understand the rules they are more likely to succeed.
Great design is invisible
Great design usually goes unnoticed by the people who use it. If the design is successful the user will focus on their goals and not the interface… Once their goal is completed they are satisfied and don’t reflect any further.
As a designer this can be tough, as we receive less admiration or praise when our designs are good. But great designers are content with a well-used design and know that happy users are often silent.
Build on other design disciplines
Visual and graphic design, typography, copywriting, information architecture and visualisation, are all disciplines of interface design. They can be touched upon or specialised in. Do not look down on other design disciplines, extract what you need and push on. Take advantage of insights from unrelated disciplines too, such as publishing or writing code.
Interfaces exist to be used
Interface design is successful when people are using what you’ve designed. It’s as much about creating an environment for use, as it is creating an artefact worth using. It’s not enough for an interface to satisfy the ego of its designer: it must be used