Eight fundamental principles to underpin UX/UI design

The eight principles

When critiquing or explaining a design it can be useful to reference principles – they provide a North Star that you can fall back on when short of ideas, and give a level of consistency to your work. They are not generally a tool for innovation and you can still produce an unusable design when trying to follow them, although it’s harder than if you don’t have principles. A colleague who was once asking for them thought that they could provide an algorithm to generate a design, or be definitive about whether a given design was the ‘right’ one. It doesn’t work like that.

These are based on some work we did at British Airways, with a big shout out to my colleague Lee Head who for many years was the lead (indeed the only) UI designer working on ba.com. Kudos. Lee was instrumental in pulling it all together.

The eight principles are

  • Design for customers
  • Design with knowledge
  • Focus on the task
  • Make it clear and simple
  • Make use of conventions
  • Be consistent not prescriptive
  • Avoid errors
  • Use design dimensions

I’m not claiming these are the only principles that you’ll need or that they can’t be improved. But they are a useful starting point.

Design for users

For services to be successful they must be designed for the user and their goals. Take satisfaction and emotion into account.

This should be an obvious starting point. Personas can be a useful way of describing the target audience – of which there may be more than one. What do your users know or not know about your product? What devices are they using? What are their physical capabilities? How can you personalise the experience and generate positive emotions whilst avoiding negative ones?

Collate all the information you have on users and decide which are the relevant (and prioritised) dimensions. Then let than influence design.

Design with knowledge

Gather information that could improve design solutions. The more
knowledge we have, the more likely we are to find a better design.

Start with the objective of the design. It’s remarkable how often you can ask a designer ‘what is this page for?’ and get a blank look. What’s the overall objective of the process, of the page, of the component?

Knowledge of the user and the objective should then lead to content. What content is needed to satisfy the objective?

‘Data driven design’ is an oft-used phrase, and rightly so. Collate existing metrics and research on user behaviour which shed light on what users want and how they want it. These can feed into success metrics. The knowledge doesn’t just have to be from your own organisation – competitor reviews play in here also.

Test early and often to ensure that you know you are doing the right thing, and keep measuring once live.

Focus on the task

Don’t make things hard for users. Break down tasks into manageable chunks and simplify the design.

Have a clear idea of what’s important. Secondary and edge cases may generate a need for additional content and a modified design, but shouldn’t distract from the main (user) goal.

User choices and how to progress should be clear and standout, and the consequences of actions should be predictable. Too often I’ve sat frowning at a screen trying to figure out what I’m supposed to do next, or how to make a selection. Real-world buttons stand out physically and they should stand out from a design. Flat design is a usability disaster.

On many sites you’ll see paragraphs of text followed by ‘Click here for more information’. Users scan links so they should be stand-alone and ‘click here’ just forces them to read more than is necessary. Instead use ‘More information about product x’. Don’t embed the links in the middle of text or if you do, repeat them away from the text so they stand out.

Only ask for information when it’s needed, and don’t ask for it if it’s not going to be used. Provide information only where it’s needed and useful – and in the eyeline, not off to one side. Provide negative as well as positive information. Users need to know what they can’t do just as much as what they can do.

Maintain a ‘scent’ so that users know that they are progressing in the right direction.

I’ve found that for sequential processes, such as a checkout, then just having the word ‘continue’ on the continue button works better than e.g. ‘go to payment’ or ‘review basket’. It’s simpler, requires no interpretation and is quite sufficient. I would only label the final button e.g. ‘Pay now’. This principle may need to be modified if there are multiple possible ‘continue’ paths.

Make it clear and simple

Nothing destroys a considered design approach more than poor layout. A cluttered design is not only hard to use, it reduces satisfaction. We should strive for a clear and simple layout that makes the experience easier and more delightful.

Everything on a screen takes attention away from other things and so has to justify its existence. Clarity of communication has to be a prime objective. So often you’ll see a useless introductory line or paragraph on a product page along the lines of ‘On this page you’ll find the best products of this type anywhere in the world and our goal is to serve you. See below for what we have to offer’. No one reads that. It’s clutter. Users go straight to the useful content.

The purpose and content of a page should be clear at a glance. Maintain an appropriate heading hierarchy, and don’t use heading styles purely to style the text, as that messes up accessibility.

When you include keywords in links, ensure that that keyword is immediately visible when the user follow it so they know they’ve arrived at the right place.

Reduce visual noise – don’t have a variety of fonts, colours, shapes, carousels etc for the sake of it. For gods sake don’t centre long paragraphs of text.

Make use of conventions

Using design conventions can be a useful method of simplifying a design. Use them unless there is a very good reason not to.

You might think that a quirky navigation and unusual interactions reflect your personality or brand – but it would turn users off. The likes of Google, Microsoft, Facebook and Apple can get away with introducing new standard elements because of their reach. Most brands don’t have that leverage. Users just want to get their stuff done. They aren’t there to admire your design.

There’s a reason for radio buttons, checkboxes and dropdowns all existing. Understand what they are good for and what they aren’t good for. Use them appropriately. You don’t need new methods. Apply this practice to all design elements.

Innovate only if you can prove that users get it and it adds value.

Be consistent, not prescriptive

Develop a pattern/component library and use it consistently. Vary it only if the context requires it.

This needs collaboration between design and engineering. A proliferation of styles either visually or technically hurts the business and the user experience. Have a process and a decision maker responsible for allowing (or not) exceptions to the standard design.

Somewhat ironically, unless a design variation is large, designers will usually spot specific variations more than users, but nevertheless those variations can cause confusion and lead to a poorer impression of your brand.

Consistency applies to terminology as much as visual design.

Avoid errors

Good design minimises the risk of user error. When it can’t be prevented, ensure customers understand what to do to achieve success.

It drives me crazy when I use a form or a process with obscure instructions, instructions in the wrong place, instructions that aren’t needed, poor labelling, unintuitive order of fields and a whole litany of other issues. Then you finally press the button, wait for a long time, and then get an error message that could have been checked inline.

If you do present an error message say (as far as you can)

  • what has gone wrong
  • why it’s gone wrong
  • what the user can do about it

Use design dimensions

There are slightly varying lists and terminology, but much common agreement on the dimensions of design. Using them intelligently will greatly enhance the user experience.

  • Contrast/similarity
  • Positive/negative space
  • Line
  • Shape
  • Form
  • Colour (hue)
  • Colour value (tone)
  • Direction
  • Size
  • Texture
  • Grouping/separation (space)
  • Motion

Take grouping and separation as an example – many times on ecommerce sites I’ve been confused by the prices in a grid layout being closer to another item than the item it refers to.

You can use colour as a guide to product type e.g. electronics are all blue, clothing are all white – so long as it’s not a critical cue that would be missed by those of us who are colour blind.

I very much like Google’s Material Design as it does so much that’s right. The ‘card’ design does grouping and separation well, and motion is used to help with usability.

Finally

It’s quite possible that someone else would come up with a different set of principles with different headings or structure – but I’m sure there would be considerable overlap.

The list above isn’t the final answer – it’s just intended to be useful.