Top UI/UX design tips every designer needs to know about, part 3

The truth is, you don’t need a design background, special talents, or a university degree. By mastering the key principles, tips, and tricks, anyone can create exceptional UI designs that people love.

1. Prioritize important information

Before even touching the design, list out the features or elements you have to include in your UI design and rank them based on their importance to the user.

Then, you can use the color, size, position, and contrast to effectively highlight important information and guide users through the interface intuitively.

A common mistake is emphasizing the wrong elements. For example, consider two designs that display metrics:

In the first, the titles of the metrics (like ‘Sales’, ‘Earnings’, etc.) have large fonts, taking the focus away from the actual values.
In the second, the important figures (e.g., ‘591’) are more prominent, giving users the information they seek more quickly.

The second design gets it right. By making the key values stand out, you help users find what they’re looking for more easily.

2. Reduce user barriers by exposing content

You’re scrolling through a new app, and the first thing you see is a big banner saying, “Discover 100+ recipes selected by our chefs.” It sounds exciting, but it’s also an extra step. You have to tap on it to see the actual recipes. That’s the interaction principle in action, which is defined as the cognitive, physical, and time effort a user has to exert to reach their goal.

In today’s fast-paced world, users are looking for immediate value. By hiding content behind banners, you’re creating an unnecessary barrier between the user and the value your app provides. This interaction cost may seem trivial, but it can add up, especially when the user is new to the app and unsure about investing time and effort.

Instead, imagine opening the same app and immediately seeing a curated list of “Top 10 easy recommended recipes.” No tapping is needed, the content is right there!

This does a couple of things:
1. Quick value
The user instantly sees the value your app provides, making them more likely to engage further.
2. Reduced friction
The fewer steps a user has to take to reach their goal, the better the user experience. That means increased user retention and more interaction within your app.
3. Relevancy
When you expose content directly, you have the opportunity to showcase the most relevant or popular items, making it more likely that the user will find something that interests them right away.

3. Design fields for the type of input

When designing input fields in a UI, it’s tempting to use a one-size-fits-all approach. However, this practice is a disservice to the user experience. The key is to design fields that align closely with the type of information you’re asking the user to input. Doing so not only streamlines the interaction but also eliminates unnecessary cognitive load, making for a smoother, more efficient user experience. Let’s start by comparing two designs for entering a verification code.

The first example features four separate, big boxes with enlarged typography specifically for the code. In contrast, the second uses a single long field with standard text. The advantage of the first approach is evident: it minimizes the chance of error by providing a clearly designated space for each digit of the code. This simplifies the input process, making it quicker and less prone to mistakes. The enlarged typography further assists by making the digits easy to distinguish, especially beneficial for users who may struggle with smaller text sizes.

Now, let’s discuss another scenario, entering card information.

The first example has one long field for each piece of information, including CVC, expiry date, and ZIP code. The latter design is more effective because it matches the length of the field to the type and amount of data being entered.

A CVC is always a 3 or 4-digit number, so a shorter field is more appropriate and guides the user effectively. The same logic applies to the expiry date and zip code. These concise fields eliminate ambiguity, make efficient use of space, and ultimately lead to a more streamlined and user-friendly experience.

In both examples, the ‘better’ design makes the user’s job easier by aligning the input field’s design with the expected data. The form doesn’t just capture information; it aids in the accurate and efficient entry of that information, which is a win-win for both users and designers.

Did you enjoy these tips? There are 90 more waiting for you! ❤️

Learn tips & tricks to create UI designs users love with The UI/UX Playbook.

Get it during the launch for up to 78% off 👇

https://www.uxpeak.com/the-ui-ux-playbook

UI/UX Playbook is designed not just to educate you, but to empower you to think, act, and design like a seasoned design professional. We’ve condensed the best of everything you need to know into this powerful UI/UX design playbook, drawing from years of experience in designing successful products, so you can shortcut the learning curve and save yourself years of frustration and failure.

Over 3,324 designers have already downloaded the e-book. Now available with a time-limited offer. Don’t miss out on this opportunity to take your UI/UX skills to the next level.