UI Design Principles: What are they and how do they help?

Paul Boag

From Silicon Valley startups like Airbnb to multi-national companies like IBM, UI design principles are becoming adopted. But what exactly are design principles?

Senior management is very good at establishing goals, but are much worse at clearly defining how the company will achieve those goals. Instead, staff fall back on personal experience or informal processes that have grown up within the organisation.

Generally speaking this approach works reasonably well. After all, people are hired for their experience and ability to deliver to their job description. However, in the case of digital things are not so straightforward.

Because of the relatively new nature of digital, most organisations lack the culture and set of processes designed for digital. Also, many of those involved in the decision making relating to digital lack much experience in the field. See also: Digital Transformation: A Comprehensive Introduction

One of the solutions adopted by many organisations to address this problem is UI design principles. From Silicon Valley startups like Airbnb to multi-national companies like IBM, design principles are becoming adopted. But what exactly are design principles?

What Are UI Design Principles?

According to William Lidwell, Kristina Holden, and Jill Butler (authors of Universal Principles of Design):

Design principles are aimed at helping designers find ways to enhance usability, influence perception, increase appeal, teach users, and make sound design decisions during projects.

Although this is true, I would argue that UI design principles have begun to take on an even broader role. In fact, calling them UI design principles might be slightly misleading. That is because these principles often provide guidance that extends well beyond most people’s mental model of design.

I prefer to think of them as a set of principles for the delivery of digital services. A framework within which to operate. A structure made up of rules, guidelines and considerations that need to be taken into account when creating digital services.

Digital principles are not a definitive roadmap from A to B like you would find in a set of standard operating procedures. Instead, they work more like a compass, pointing in the right direction and providing guidance against which you can measure your decisions.

UI Design Principles are more like a compass than a definitive roadmap. They point you in the right direction.

Thanks to Triff from Shutterstock for allowing me to use this image.

If all of this is sounding a bit nebulous, I won’t blame you. UI Design principles have become a buzzword that many have latched onto, but they do offer real benefits.

Why You Should Establish UI Design Principles

The value of UI design principles for improving your efficiency in delivering digital projects is not something you should underestimate.

UI Design Principles Educate

For a start, UI design principles are a great way of educating stakeholders and ensuring that they make better decisions in the project. Better educated stakeholders lead to faster and more informed decision making.

UI Design principles help establish a framework for decision making, providing guidance about what a right decision would be, without the need to lecture or patronise the stakeholders.

The act of establishing your design principles can be an educational exercise for stakeholders.

In fact, the act of establishing your principles can be an educational exercise. By looking at the UI design principles of others, you help gently show stakeholders what a better approach to a digital project is.

Equally, as you discuss the UI design principles, you have an opportunity to explain the thinking that lies behind them.

Admittedly, educating stakeholders and establishing UI design principles takes time, but this is time that is worth you spending as it reduces problems further down the line. Issues such as disagreements over the best approach to take.

UI Design Principles Resolve Disagreements

When a stakeholder makes an uninformed or damaging suggestion, you can use the UI design principles to realign their thinking without it turning into a confrontation.

For example, imagine that a stakeholder wants to add additional fields to a form that users must complete during signup. Fields that exist only to give the company demographic information on users.

Instead of getting into an argument about the merits or otherwise of the idea, you can refer back to the UI design principles you established at the start of the project. Policies such as “Always put the user’s needs first” or “make the tough calls to keep things simple”.

By referring to the UI design principles agreed early on you are not criticising the idea, you are just saying it does not fit with how everybody has decided to approach the project. It is about implementing the agreed principles, not about rejecting somebody’s idea.

UI Design principles are a useful reference to refer back to in order to stay on track.

That approach is even more useful when there are two opposing ideas, as UI design principles can often be used to break the deadlock. In short, UI design principles can reduce time wasted on disagreements over approach. But, they can also lead to faster and better decision making.

UI Design Principles Enable Better, Faster Decisions

Digital projects can feel overwhelming at times. Part of the problem is that there are so many different approaches that you could take, so many ways of achieving the desired goals or overcoming challenges.

That makes digital projects especially tricky in the early days when you are trying to establish the right direction. Making a mistake at this stage can mean many wasted hours further down the line.

Traditionally this is where a specification would come in. But, creating a specification is time-consuming and often not particularly well informed. On the other hand, a set of UI design principles provide enough of a framework to help ensure the project moves in the right direction from day one.

But UI design principles don’t just help with decision making at the start of a project. They are also invaluable in the midst of a project when we start to lose our way.

UI Design principles can help us make challenging decisions.

Working without a detailed specification and continually adjusting based on user feedback can be disorientating sometimes. You can feel lost in the myriad of possibilities and be overwhelmed by the amount of data.

But, UI design principles don’t just point you in the right direction. Used well; they can help to realign the entire company.

UI Design Principles Can Change Company Culture

Your ability to deliver digital projects efficiently is going to be constrained by the broader business. Your digital team could work in the most efficient way possible, but if the rest of the company isn’t approaching things in the same way, it will limit what is possible.

Unfortunately, this problem is all too common. I often encounter digital teams who proudly tell me that they work in an agile way, yet in truth, they do not. Although their team has adopted some aspects of agile, they are trapped in a departmental production line.

To truly work in an agile way, the entire company will need to change. UI Design Principles will help with that.

Because digital projects require so many different parts of the organisation to work together, you can only really achieve digital efficiency when the entire organisation’s culture starts to shift.

Cultural change is hard, and no one approach is going to make it a reality. But UI design principles do have the potential to contribute.

The Government Digital Service here in the UK used their UI design principles as a critical component in a government-wide education program. They turned them into posters, included them in their service manual and referred to them often in meetings.

UI Design principles can become mantras that start to influence thinking. Almost like an earworm or meme, if you repeat them enough, they become embedded in an organisation’s collective mindset.

In fact, the very act of including people from across the organisation in their creation encourages people to consider new ways of thinking and working. That brings us on to the question of how you should establish your UI design principles. See also: Why and How You Should Create a Digital Playbook.

How to Establish Your UI Design Principles

The key to the success of your digital principles is that they have near universal support. In other words, we need as many people as possible to agree that they are a good set of standards upon which to build the organisations digital future.

To achieve this, we need to collaborate widely in their creation. If people are not involved in their production they will feel that the principles are being forced upon them and so will resist them.

Often a good starting point for this process is to run a workshop.

Running a UI Design Principles Workshop

Like so many things in digital, there is no definitive way of running a workshop to establish UI design principles. However, I can share with you my approach.

I tend to make the workshop open invite. In other words, I encourage anybody who wants to come, to attend. When I invite people, I make a point of emphasising that the workshop will lay the foundations for digital moving forward and so is a crucial moment in the companies future. That encourages as many people as possible to attend.

However, I do ensure specific critical stakeholders can attend before setting the date. You want at least one senior executive in the room as well as a cross-section of your digital team.

In preparation for the workshop, I will research the UI design principles of other companies and make a collection of between 30 and 50 candidate principles to start the discussion. A site like Principles.design is an excellent source as is Design Principles FTW.

Principles.design is a great repository of UI design principles that you can use for inspiration.

It is always good to give people a starting point, as coming up with principles from scratch can be hard if you have never done it before.

Print each principle you have found on a separate card, and have enough sets of cards to allow for multiple groups in the workshop.

Once your workshop starts, split attendees down into groups. Pairs are okay if the group is small, but never have more than about six people in a group as quiet attendees will end up feeling that others have not heard their opinion.

Give each group a stack of cards and ask them to narrow the options by discarding cards they do not consider a good fit with the company. They should also feel free to create cards if they come up with an idea not listed. However, by the end, they should be left with no more than ten cards.

Once that is done, bring the groups back together and compare cards. Group duplicates together as this will enable you to see which cards proved more popular. Lay out all of the options on a table for everybody to see. See also: 10 ways to get more from your UX workshop.

At this point, you probably have more than ten cards, unless all the groups completely agreed. You reduce the list through dot voting.

Dot voting is a technique for avoiding endless discussion in all kinds of areas. Each person is given three votes in the form of self-adhesive dots. They can stick these dots on a card that they think should be included in the final list. They can either place all three dots on one principle or spread their votes across several cards.

Dot Voting can be a useful way for narrowing the list of potential principles.

If you have more senior stakeholders in the room, you could choose to give them more dots. That will reduce the chances of them overruling any decision later.

Once the group has voted, you will be able to see which cards don’t have much support. You should remove these cards until you have less than ten remaining.

At this point, it is worth discussing the remaining cards. In particular, ask the group what the cost of implementing the card would be. In other words, if we adopted the approach outlined on the card, what would the company have to do differently.

Being Clear About the Cost of Your UI Design Principles

For UI design principles to have any value, they must encourage the organisation to work in new ways, and that will inevitably come at a cost. It is essential that everybody is clear about that cost going in otherwise the design principles will quickly become nothing more than hollow words.

That is why, in my UI design principles workshops, I encourage attendees to think through the consequences of the design principles they have selected.

Split your attendees down into small groups and give each group one or more principle to discuss. Ask them to write down one or two sentences outlining how the company would need to change the way it works if they implemented the chosen principle.

For example, if your principle was:

We prioritise user needs above all else.

The supporting statement might read.

For example, we will focus our website on addressing user questions rather than pushing our agenda through marketing campaigns.

This discussion is not always comfortable. When attendees start to consider the cost of the principles, they may wish to revise them. That is okay and may be necessary. But it is better to have this discussion now, rather than in the midst of a project.

But be careful. Do not allow your UI design principles to become so watered-down that they are virtually meaningless. Not all design principles have value.

What Makes a Good Design Principle

A good design principle should stand for something. In other words, it should come at a cost.

A good design principle should stand for something. In other words, it should come at a cost. By implementing your principle, it should mean stopping doing something else as I outlined in the example above.

But there is more to a good design principle than that.

A Good Principle Differentiates

A good design principle should also differentiate you from the competition.

One way of knowing whether your principle differentiates you is to look at its opposite.

For example, if your principle is “we put customers first”, the opposite would be “we never put the customer first”. There is no way a company would ever take that position if they wanted to stay in business. That is a sign that your principle fails to differentiate and so needs work.

But a principle such as “we build for everyone” does work because the opposite, “we focus on a specific audience”, is a legitimate position a company may choose to take.

Not that all of your principles need to be like this.

A Good Principle Is a Counterbalance

Some of your principles will need to exist to counterbalance an inherent, and often unspoken, bias in company culture.

For example, if decision making tends to be driven by the gut instinct of the most senior person in the room, a principle such as “we make decisions with data” may be required.

But, although some principles need to encourage new behaviour, others can also reassure.

A Good Principle Reassures

Digital working practices often clash with existing culture, and that can make people nervous. That nervousness can lead to resistance, which we want to avoid if we are to make our projects as efficient as possible. See also: Handling resistance to digital change.

To avoid this problem, we can use some of our UI design principles to reassure. For example, imagine your company is risk-averse and tends to rely heavily on specifications and committees to mitigate those risks. That would be the behaviour you would want to change for digital projects.

If you try to ditch the committees and specifications, you will meet resistance. But if you can replace it with appropriate UI design principles focused on reducing risk, this will make the removal of committees and specifications easier to swallow. For example, you could have a principle that reads:

We validate ideas through continual testing.

That would not only reassure; it would also educate colleagues about best practice in digital.

A Good Principle Should Educate

One of the most significant benefits of UI design principles is their ability to change the culture. They do this by showing a different way of working. The result is a good design principle should educate people. That means they will probably need a degree of explanation. It is not enough to write:

Design with data

You need to go on to explain why. For example, the UK Government Digital Service who use “design with data” as one of their principles goes on to write:

Let data drive decision-making, not hunches or guesswork. Keep doing that after taking your service live, prototyping and testing with users then iterating in response. Analytics should be built-in, always on and easy to read. They’re an essential tool.

They also link to more detailed information on why this is the right approach. Without this context, the principle may well make little sense to those outside of the digital field.

That brings us to the question of how we should be using our UI design principles.

How to Use Your UI Design Principles

The worst thing that can happen to a set of UI design principles is that they end up in a drawer somewhere.

The worst thing that can happen to a set of UI design principles is that they end up in a drawer somewhere and nobody looks at them. Often being consigned to an intranet page is an equally unfortunate fate.

For UI design principles to be useful they have to be visible. Only then can they start to change people’s thinking and shift company culture. Shift it in a way that breaks down departmental barriers, linear project management processes and other business practices that undermine the efficiency of delivering outstanding digital services.

Achieving this will involve tapping into your inner marketer. You need to come up with creative ways of making sure your UI design principles are in front of people all of the time.

At the most basic level, this will involve merely referring to them a lot. I once worked with a client who had no culture of testing but instead relied solely on endless debates to make decisions. Unfortunately, the digital team had no authority to change anything.

My suggestion was that they just started saying “let’s test that” every time there was disagreement or a decision to be made. I knew that others would reject the idea initially, but I encouraged the group just to keep saying the same words every time an opportunity arose – “let’s test that”.

By repeating the same phrase, again and again, it eventually started to stick in people’s heads. Finally, in one particularly heated debate, the senior manager in the room just got so frustrated that she said: “let’s test that and see”. Before long it became a mantra in the company and culture began to shift. See also: Win Over Colleagues With My UX Card Deck.

But endlessly repeating your UI design principles won’t get the job done alone. That is where you need to get creative. Turn your principles into posters, add them to mouse mats, replace everybody’s default screensavers.

Take a leaf out of the Government Digital Service and turn your UI design principles into posters.

Don’t wait for permission, just do it. Sneak into the office at night and replace all those framed pictures of executives accepting awards with posters of your UI design principles. If nothing else it will get people talking!

Hold lunchtime sessions which explain the principles, and bribe people to come with food. Start wearing t-shirts with the principles printed on them. Hand out postcards with the principles on at the start of every project. Do whatever it takes to ensure people can’t ignore them. Only then will they start to make a difference.

Admittedly this sounds like a lot of work. But it is worth it because if you can embed these principles in organisational thinking your digital projects will become considerably more efficient and you will save a lot of time and money.