Essential UI Design Tips From a Webflow Designer

Great user interface design calls for a careful blend of art and science.

A website or application is much more than a group of pictures, text, and links. It’s an interface that acts as the single point of interaction between human and machine. Read on as our Webflow designers share seven essential guidelines for designing a user interface that is both beautiful and functional.

01. Understand the End User

We’ve said it before in our beginners guide to user experience, and we’ll say it again. You need to understand your audience; the end user. Because only then can you ask the hard questions that will uncover key requirements for your user interface.

To understand your audience, we suggest using a fundamental human-computer interaction technique of building personas. Creating personas will help you to understand your users’ needs, experiences, behaviours and goals.

In order to build effective personas, don’t be afraid to involve real life instances of your end user. Their real-life perspectives are invaluable for making successful user interface decisions.

02. Define Usage

The biggest mistake you can make is building an interface for a design award instead of the end user. Before you get your hands dirty with drop shadows and clean lines, put some serious thought into how people will use your interface.

People use websites and apps in two ways: directly (by interacting with the interface elements) and indirectly (by interacting with ui elements external to the product).

When shaping and defining this interaction, you must consider what devices your users will likely use (traditional screen/touch-screen) and what their technological capabilities are. Do this well, and you can develop a great user experience that people actually enjoy.

03. Anticipate Human Error

People make mistakes, it’s in our nature. Here’s where you come in. Part of a UI designer’s job is really to be the unseen hero that helps users avoid mistakes. How? Anticipate human error, add roadblocks, and offer solutions. Here’s the breakdown:

1. Anticipate error - this is as simple as analysing your user interface for all possible places a user could make a mistake. These spots typically surface when searching, adding, deleting, or moving data.
2. Add roadblocks - introduce additional steps for users to take in order to complete their desired action. A classic example is the 'Exit Without Saving?' window which has saved countless people from losing work.
3. Offer solutions - To do this, ensure you provide assistance after actions have been made. A simple yet effective solution is a “click to restore” button for those who’ve accidentally deleted an item.

Master these steps, and you’re guaranteed to save the time and frustration of countless users. 

04. Reassure Users

All interactions with a site or app have consequences. Clicking a button could mean go to a new page, creating a new user, or deleting a website all together. And any time there are consequences, there is also anxiety.

Unfortunately, this concern can deter people from clicking ahead, especially if they don’t feel confident about what the outcome of their action will be.

Instead, eliminate fear and provide reassurance by clarifying user interactions with copy and design. 

Setting expectations through copy:

1. Writing clear copy
2. Delivering warnings and asking for confirmation
   

 Setting expectations through design:

1. Use universally known colours and symbols (red to warn or a tick to confirm)
2. Use colour and shade to highlight what you want users to click.
3. Highlighting the button that corresponds to the desired action
   

We have only just scratched the surface; there are countless ways to design a user interface that inspires confidence so get out and explore.

05. Make Your Interface Easy to Learn

Simplicity has been dominating digital design for the past two decades as a seemingly unstoppable minimalist trend. It even made it into the web design trends of 2020. 

Why is minimalism still so relevant today? Because it works.

Here’s the deal, humans are lazy. The easier something is the more likely they are to use it. Consequently, with increased use, more information will be absorbed and retained. Which is just what you want to achieve as a business.

Ideas to simplify your user interface:

1. Strip copy back to essential words only
2. Group copy into bite-sized, consumable pieces of information
3. Separate content with white space
4. Implement progressive disclosure. This means hiding non-essential content or functions away onto a secondary interface for users who want it. It’s particularly helpful for tools that cater for multiple levels of experience. 

06. Don’t Ignore Standards

For decades, UI design has followed a similar structure and layout. Thanks to this, users world-wide can find familiarity across digital landscapes and navigate them confidently.

It doesn’t sound difficult—keeping a basic structure. But designers tend to love to reinvent things, which is not always the best idea.

To avoid breaking user interface standards, constantly ask yourself if your persona would have any trouble using your design. You could (and should) take it one step further by actually having the end user provide feedback as you go.

For more on why it’s not always a good idea to reinvent the wheel, read our beginner's guide to great user experience.

07. Listen to the Data

As user needs evolve, so should your designs. By listening to and analysing user data, you will be able to implement changes that please, rather than disappoint. 

A great example of acting on data is the evolution of Microsoft Word. Over the years you may have noticed the copy and paste button gradually increase in size. This is a result of Microsoft identifying this as the most commonly used feature in Word and as a result made it as simple to use as possible.

When it comes to websites and web applications, we recommend using tools like Google Optimise to implement A/B testing, Google Analytics for evaluating usage statistics like behaviour flow, or Hotjar for building heatmaps and recording user interaction.

Note for designers: there will always be a simpler and more effective way of doing something. You just have to find it. For us, that was becoming a Webflow partner.

Need a Hand? Let's Talk

Building a great user interface requires just the right blend of art and science. It also requires patience, and a deep passion for continual improvement. 

For those who don’t have the time or expertise, partnering with an experienced web and digital design agency is a wise investment. 

As for the rest of you, go forward confidently with these essential guidelines. Be bold and develop interfaces that inspire confidence and stay simple in its approach.