Use these UI experience optimization techniques to make your designs more advanced!

Hi, I'm Caiyun. We often talk about optimizing product experience, but we often don't know from which angles to think. The experience optimization details shared today are some widely used interface design rules. An excellent product experience design is accumulated from little details. I believe that by self-examination of these details, your interface design can be cleaner and more efficient.

The saturation should not be too high in dark mode

Highly saturated colors can create a strong contrast. Using high saturation in dark mode will be glaring and give users a bad experience. Dark mode is usually used at night, so for designers, what needs to be done is to make the entire color scheme relatively soft to make users feel relaxed. Based on this, the saturation should be limited to between 200-500 when designing.

(Note: Caiyun looked up a lot of information about the 200-500 here, but did not find the best answer. The color specification in Material Design is quoted here. Students who are interested can look it up by themselves)

Buttons should have priority

In the same interface, the ideal state is to have only one main key button and the secondary buttons that follow. This is because if there are too many such call to action (CTA) buttons on an interface, the key operations will be drowned in these buttons, making users confused.

Simplify unnecessary verbs

There is no need to add verbs and phrases to the menu. It is enough for users to understand the function with the minimum information. Therefore, try to avoid adding irrelevant words in menu design so as not to affect the user experience.

The fewer font size categories, the better

You may have noticed that few forms have imbalanced font sizes. Having fewer font families will look more balanced. When deciding font sizes, try to standardize the size. For example, the size of the title (16px), subtitle (12px), body text (10px), and description text (8px) should all be multiples of 2.

Don’t mix icon styles

Although I know that I need to make sure that icons are consistent, I still often make mistakes in actual work. Many designers often mix icons of different styles together, which makes the entire UI interface design look immature. Icons are meant to help users understand things more efficiently. When using icons, you must pay attention to the consistency of the icons, especially some style details.

Fine-tune the color saturation of different backgrounds

Normally, we think that a color uses the same color value in dark mode and light mode, but this is actually wrong. A color that looks very beautiful in light mode may be too dark in dark mode, and vice versa. The best way to solve this problem is to use 2 sets of colors with different saturation.

New users should be given more autonomy

The app’s onboarding determines how users feel when they first experience the product. When designing, try to disclose what specific steps are required. Adding the ability to “skip” and move back and forth is very important for new users.

Add an overlay to your image

Many websites and apps are driven by images, but adding text content directly on top of the image can sometimes drown it out. Adding an overlay on the image can improve the readability of the content.

Information partly exposed

For some large-screen devices, such as laptops, tablets, and smart TVs, there is a lot of idle space. For these idle spaces, try to tell it through design that there is more content at the bottom. This is good for both UI and UX because the way the space is used can let users clearly know all the content.

Split large paragraphs of text

In order to make users focus on reading, you should try to avoid using long/wide lines. Keeping sentences short and concise can increase the readability of the content. (Note: This is also very suitable for your portfolio. Some people often use long paragraphs of text to describe, which may directly discourage the interviewer)

Z-shaped principle

The Z-shaped principle, also known as the "Gutenberg principle", describes the overall movement of the eye when people see a design with evenly distributed elements. Through this principle, we know that users' eyes read along the Z-shaped pattern on the content, so follow this principle to design the core content you want to express.

Expand clickable area

Expand the click area and maintain the responsive size of controls such as buttons, radio buttons, and multiple-choice buttons. If the click area you design is too small, it will be difficult for users to click, resulting in loss.

Try to use simple icons

Avoid using fancy and tacky icons, as they will make the entire design look immature and difficult to understand. Using simpler icons will make the interface more advanced. (Note: Of course, the simpler the icon, the harder it is to draw it. In addition, it is also necessary to distinguish different scenes. For example, some operational icons may be relatively stylized for the atmosphere of the event.)

Correct expression of copywriting

Choosing the wrong copy will make people lack interest in the task. Use more appropriate phrases according to the context.

Consider gestures

Tapping and clicking can be tiring at times, and it may be better to use gestures such as sliding and dragging, which can make the interface simpler and complete the given tasks smoothly.

Show some copy

When exploring hotels, destinations or even reading any article, users often need to tap on cards. To make the exploration more engaging and crisp, avoid using long text that causes scrolling. Instead, add a read more button for users who want to see all the content.

Law of proximity

"Adjacent objects are often seen as part of the same group of content." Sometimes, in order to separate the content more clearly, try to use lines to group related content. (Note: In fact, it is also possible to use white space and different colors to distinguish. It is recommended to decide according to your own design style and specific content)

Text Control Visualization

When designing controls, try to visualize them graphically if possible, except when very precise parameter settings are required. For example, a price range is easy to visualize as a slider control.

Placeholders should be close to the content to be filled

What is easy to understand for some, may not be for others. Therefore, it is better to use example placeholders to explain the input fields, which prevents users from making mistakes while filling in the content.

Serial position effect

According to the "serial position effect", people tend to remember the first and last items in a list rather than the middle items. Therefore, when designing navigation in any app, keep the leftmost and rightmost options according to the context of the app. For example, in Instagram, the leftmost is "Home" and the rightmost is "Users". (Note: This is a psychological theory. People are more likely to remember the beginning of a series of materials, also known as the primacy effect or the first effect; it is easier to remember the end of the content, which is called the recency effect.)

Reduce the number of clicks

When designing any experience, click count is a very important metric. Count how many clicks a user needs to complete his goal. Extra clicks will slow down the entire operation process. Simplifying the process will naturally lead to a better experience, so reduce the number of clicks as much as possible. (Note: In the following example, adding clickable symbols can also reduce the time users spend thinking.)

Less is more

To make the content stand out, it is not necessary to use multiple font types, including bold, color, etc. Using enhanced text hierarchy, font weight only where it is most needed, while using only one font is enough to attract the user's attention to the content.

White space defines the key points

White space is very important in design. Too little or no white space can make the design very confusing. Use white space wisely to clearly emphasize the content.

Don’t leave users idle

According to the Doherty Threshold theory: "The system needs to respond to the user's operation within 400ms, so that the user can stay focused and improve productivity." Therefore, we can use animations, images, and even text to keep the user's attention. (Note: The prompt for the user can quickly load the information framework first, so that the user has something to do instead of seeing nothing)