15 User Interface Design Principles for Better Websites

Having a clearly articulated set of user interface design principles will make you a better designer, not constrain your creativity.

As designers, we often design intuitively. However, to be a truly great designer, you need to dig a little deeper and identify the user interface design principles that underpin the work you do.

What precisely these user interface design principles are is open to debate and interpretation. However, what we can say with confidence is that great design is not born purely from creative inspiration. Instead, we build it upon best practices that have emerged from hundreds of years of design and evolved over the last few decades as user interfaces have become more sophisticated.

In this post, I want to share with you the 15 user interface design principles that have shaped my designs over the years. I do not claim it is a comprehensive list, but I hope it will guide newer designers and maybe inspire some other old hands like myself.

We begin by addressing the fundamentals of usability.

1. Don’t Make the User Think

As designers, our primary job is to make user interfaces intuitive. We need to presume that those using our websites will be distracted or have limited time. Their cognitive load will be high and will probably only give the site a few seconds. If it is hard to use in those few seconds, they will abandon it, and your design will have failed to do its job.

2. It Is Not About the Design

One way designers make a user interface harder to use is by putting the aesthetics before the usability. We can often be so keen to show off our design skills or experiment with the latest design trend that we undermine the usability of the site.

It is important to remember that a website is about the content and functionality, not the design. The design facilitates the user in finding out what they want to know or doing what they need to do. The design should never take centre stage.

3. Keep the User in Control

What design should focus on primarily is giving the user a sense of control over their experience? When a design leaves the user searching for how to do something or worse still breaks a fundamental feature of the web (like breaking the back button or resizing text) it has failed.

Giving the user control also means control over that looping animation or whether video auto-plays. The more in control the user feels, the more relaxed and receptive they will be.

4. Design for Interaction

It is important to remember that ultimately the web is an interactive environment and so our designs need to accommodate that. Buttons should look and behave like buttons. The same also applies to links.

We should also think carefully about the impact of those user interactions. What happens if the user makes a mistake? How does the design adapt if the user resizes the browser or switches devices?

Finally, what about the default states for those interactions. Should that checkbox be ticked or unticked? Should that country list default to a particular country, or what about what a user sees when they login to an app for the first time? All these design decisions matter.

5. Focus on One Action at a Time

Because of the interactive nature of design on the web, users often have to complete many interactions. However, they can also become quickly overwhelmed. That is why we need to focus on one action at a time.

That is particularly important when it comes to calls to action. We often bombard users with secondary calls to action (such as signing up to a mailing list or following us on social media) that the primary action gets overlooked. Users can only take so much in at a time.

6. Break Up Dense Content Into Chunks

Another way we can avoid overwhelming users is to break our content into more manageable chunks. Whether big blocks of text, lots of product categories or flat information architectures, we can overwhelm users by presenting too much information in one go.

To avoid this problem, we can break the content down into smaller groupings making the information easier to digest. For example, we can break that block of text into sections with headings, or we can separate our navigation into different categories.

Illustration showing the user interface design principles of chunking.
As Jeff Davidson points out in his post The Most Important Rule in UX Design that Everyone Breaks chunking can help process information faster.

Although breaking up content can be beneficial in many circumstances, sometimes you need to also do the opposite by visually grouping related elements together.

Take, for example, navigation, don’t force the user to hunt the screen to find different navigational blocks. Bring them all together into a similar part of the interface.

8. Create a Strong Visual Hierarchy

Ultimately this grouping and chunking of content are about building a strong visual hierarchy for your website. But that goes beyond the relationship between elements.

Size, colour and position all play a role in creating a visual hierarchy and guiding the user around the page.

9. Be Predictable

A lot of designers desperately want to do something new and innovative. They want to do things differently, but that is rarely a good thing. When your designs deviate from people’s expectations, it confuses them and creates a sense of unease.

My advice is that if you want to experiment (and you should) do this on side projects or on particular websites where exploration is appropriate.

10. Use Aesthetics to Put Users in the Right State of Mind

Although the design is about facilitating the user’s actions, that is not its only role. Despite what some usability experts seem to imply, I don’t believe the purpose of design is only about function.

The design should also elicit the right state of mind in the user, whether that is to excite them, impress them or build trust.

Slot machine design is a good example of the role of aesthetics in shaping the user experience.

11. Imagery Should Have a Clear Purpose

One particular area of danger is imagery. Designers often include imagery just to add a ‘bit of visual interest’ to a page, but this is a mistake.

You should have a clear purpose for any imagery you include. Either it should support the content on the page by conveying information, or we should design it to encourage a particular response from the user.

12. Support Inclusiveness

When we do use imagery, we should also consider accessibility. More than that, we should build our entire websites to accommodate the needs of the broadest possible audience.

Making assumptions about our audience and their accessibility needs is dangerous.

13. Match the User’s Mental Model

Another area we tend to make assumptions about the user is how they organise information in their heads. That typically manifests itself in the assumptions we make when creating our sites information architecture or our use of language.

However, in truth, it is unlikely that our mental models match those of our users because our clients are specialists in the content matter they want to post online. The more knowledgeable a person is in a subject, the more their mental model deviates from the general population.

14. Test and Iterate

To combat our assumptions about users, we should test. However, testing is much more fundamental to the design process as a whole.

Great design doesn’t spring fully formed from the mind of a designer. Instead, it evolves through testing and iteration. Our process, therefore, needs to reflect that.

15. Prioritise Performance

Finally, good user interface design online should be prioritising performance. As designers, we love to use imagery, video and lots of web fonts. However, these will have a significant negative impact on the performance of a website.

A one second delay in page load costs 7% in sales and a 11% reduction in page views.
Poor performance has a significant effect on conversion and page views.

Like any designer, we need to work within the constraints of the medium. On the web, performance matters. You cannot assume that people have a specific bandwidth. We, therefore, need to design for a less than optimal environment.

Are User Interface Design Principles Constraining?

I often hear that principles like these constrain creativity and hold back innovation. However, I disagree. Design is not art. It exists within constraints. The design has a job to do, while art is about expression.

Does user interface design principles constrain? Absolutely. However, they do not hold back creativity or innovation. Creativity and innovation happen because of the constraints and not despite them.

That is the lesson that we all need to learn if we want to become better designers. Working within principles like these will help.

Boagworks Boagworld