Super comprehensive 38 UI experience optimization experience, and indeed the design is more advanced!-v2tn

Hi, I'm Caiyun. Interface is what users see when interacting with any product, app or platform. User experience is based on solid interface design. Therefore, if you want to improve your ability in UI design, you should think more about the reasons behind interface design.

Today I will share with you some widely used interface design rules, which can quickly make your interface design cleaner and more efficient.

1. The copy should be easy to understand

Use guiding copywriting that is easier for users to understand (speak human words) and improve the use experience.

(Caiyun note: in the following two cases, the "shopping cart" and "inventory 2" on the left are too terminological, and the "only 2" and "add to shopping cart" on the right are closer to the daily understanding of users. When you work at ordinary times, you must also pay attention to the copywriting in the interface, especially the description text, control text, etc., which is often easy to be ignored.)

2. Vertical alignment is easy to scan

Good alignment can enhance the readability of content and make it easier for users to scan.

(Caiyun note: the zigzag shaped sight line on the left is difficult to read and not professional enough; the vertical alignment on the right enhances readability and makes the design look more unified, which can quickly improve the design details.)

3. Add icons to options

Using icons and animations as labels helps to understand the content more easily. It makes the interface look more rational and rich, and can instantly catch the user's eye.

(Caiyun note: compared with the navigation on the right, it is difficult to accurately identify its meaning at the first time. After adding icons, it is not only faster to see, but also more visually beautiful.)

4. Large sections should be split

Long paragraphs make the content difficult to read. In order to get a good experience and UI, we should pay attention to splitting the content, highlight the key points with bullets, and make use of the split content blocks to make users grasp the key points faster. Especially in the "function description and terms and conditions" or any statement, refining the key points will help improve the user experience, so that users will not directly ignore it.

(Caiyun note: I don't think many people will read the large text on the left. At least, the one on the right can quickly look at a few keywords in a short time.)

5. Add progress bar to the process

The progress bar helps users track the process, and it also makes it easier to view the next step. Using this format in online shopping, form filling, application process and other scenarios can well simplify the process.

(Caiyun note: the form UI on the left is not convenient to track the progress and process. The form on the right puts the progress on the top to help users clearly know the process progress.)

6. The error prompt should be clear

The error prompt must be clear, easy to understand, and convenient for users to carry out the next operation. If users don't understand the errors on the interface, they will feel very disappointed and may give up the next process. In UI design, it is very important to use popular language to explain problems in the right place to avoid ambiguity.

(Caiyun note: I often encounter all kinds of errors, but the prompts are too jargon, and there is no prompt in the right place, which makes me very distressed.)

7. The button should be correct and reasonable

From fitt's law, we should know that the distance and appearance of the target area are proportional to the action taken. Therefore, in order to focus on the conversion button, the button should be accurately placed in a reasonable position. In addition, the size of the button should be easy to click to avoid the loss of users due to the inconvenience of trying to click.

(Caiyun note: the button on the left is not in the correct decision-making position and the button is too small. The button on the right is concise and meets the psychological expectations of users, which can make users make decisions and click faster.)

8. Make good use of color psychology

Color is an indispensable part of UI, which can affect users' emotions when using applications. Using colors correctly will make the UI look richer and more reasonable.

(Caiyun note: the color of the blue button on the left does not meet the user's psychological expectation of deletion. The red button on the right is dangerous and warning to the user's psychological expectation. Using red to represent deletion can make the user focus on this special operation.)

9. A single train is easier to maintain attention

Displaying content in a single column can better help users scan. When you want to display a large amount of information on your application and website, it can better maintain user attention when you align all the information vertically.

10. Priority social media account login

When users are ready to log in or register for your platform, try to put all available social media login in the first place. This will avoid the loss of extra cognitive burden and time consumption when users fill out the form. First of all, using social media accounts can well increase the click through rate.

11. The selection status should be clear

When the user makes a choice, it is necessary to clearly tell the user which option is selected. Ambiguous colors will increase the cognitive burden of users. Fewer colors and clear selection status can give users a better experience.

(Caiyun note: the problem on the left is that the selection status is not clear and the colors of the options are too rich. The selection status on the right is clear and there are only two colors of the options. The experience will be better if it is selected and unchecked.)

12. Group with left blank

If you want to group information, using blank space is the best way. Adding a line as a grouping symbol will add an additional element to the interface. Blank space can make the UI look cleaner and more elegant. The case of grouping by line is applicable to scenarios such as heavy content platforms such as twitter and medium.

13. The control style should be consistent

Maintaining the consistency of design can reduce the complexity of functions and make users make decisions faster. Consistent design makes users familiar with operations faster without much thinking. (Caiyun note: the inconsistent rounded corners of the options on the left will make users think about why there are differences here, while the consistency Option Design on the right can make users ignore the interference outside the content.)

14. Make good use of placeholders in search

Add appropriate placeholders in the search input field to prompt users for the content they can search and find on the platform, which can provide users with reference and bring a better user experience.

15. Saturation should not be too high in dark mode

Colors with high saturation can form a strong contrast. Using high saturation in dark mode will be dazzling and give users a very bad experience. Diablo mode is usually used at night, so for designers, what they need to do is to make the whole color matching relatively soft and make users feel relaxed. Based on this, the saturation should be limited to 200-500 in the design.

(Caiyun note: the 200-500 Caiyun here checked a lot of information, but did not find the best answer. Here is the color specification in material design. Interested students can find it by themselves.)

16. Buttons should have priority

In the same interface, the ideal state is that there is only one primary key button and the following secondary button. This is because if there are too many such action buttons (CTA) on an interface, key operations will be submerged in these buttons, leaving users at a loss.

17. Simplify unnecessary verbs

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

18. The fewer font size categories, the better

You may notice that few forms have unbalanced font sizes, and it will look more balanced if there are as few categories between fonts as possible. When deciding the font size, try to standardize the standard of font size. For example, the size of the title (16px), subtitle (12px), body (10px), and explanatory text (8px) is a multiple of 2.

19. Don't mix icon styles

Although I know to do a good job of icon consistency, I still often make mistakes in practical work. Many designers often mix icons of different styles, which will make the design of the entire UI interface look immature. Icons are designed to make users understand things more efficiently. When using icons, you must pay attention to the consistency of icons, especially some style details.

Here I also share with you two commonly used figma icon libraries:

1)Unicorn (https://www.figma.com/community/file/931512007012650048)

2)Basil Icons (https://www.figma.com/community/file/931906394678748246)

20. Fine tune the color saturation under different backgrounds

Usually, we think that a color uses the same color value in dark mode and light mode, but this is actually wrong. A color looks very beautiful in light mode, but it 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.

21. Novice guidance gives users more autonomy

The novice guidance of APP determines how users feel when they experience the product for the first time. When designing, it is very important for new users to try to disclose the specific steps needed, and increase the ability to "skip" and move forward and backward to view.

22. Add overlay layer on the picture

Many websites and apps are image driven, but sometimes adding text directly to images will be drowned out. Adding a overlay layer to the picture can improve the readability of the content.

23. Partial exposure of information

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

24. Split large text

In order to let users focus on reading, try to avoid using long / wide lines with large sections. Keeping short sentences and brevity can increase the readability of the content. (Caiyun note: This is also very suitable for your portfolio. Some people often use large paragraphs of text to describe it, which is likely to directly persuade the interviewer to dismiss.)

25. Zigzag principle

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

26. Expand the clickable range

Expand the click area and maintain the response size of controls such as buttons, radio and multi-choice. If the click area you design is too small, it will make it difficult for users to click and cause loss.

27. Try to use simple icons

Avoid using fancy and tacky icons, which will make the whole design look very immature and difficult to understand. Using simpler icon forms will make the interface more advanced. (Caiyun note: of course, the simpler the icon is, it will be more difficult to draw color. In addition, it also needs to distinguish different scenes. For example, some icons of operation class may be relatively stylized for the atmosphere of the event.)

28. Correct copywriting

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

29. Consider gesture operation

Tapping and clicking are sometimes tiring. It may be better to use gestures such as sliding and dragging, which will make the interface simpler and complete the established tasks smoothly.

30. Show part of the copy

When exploring hotels, destinations and even reading any article, users often need to click on the card. To make the exploration more eye-catching and straightforward, avoid scrolling caused by long text. Instead, you can add a read more button for users who want to see all the content.

31. Law of approach

”Adjacent objects are often regarded as the same group of content ". Sometimes, in order to distinguish the content more clearly, try to group the relevant content with lines. (Caiyun note: in fact, it is also possible to distinguish between white space and different colors. It is suggested to decide according to your own design style and specific content.)

32. Text control visualization

When designing controls, if you can use graphical visualization, you should give priority to trying to graphize the controls, in addition to the very need for very precise parameter settings. For the price range, it is easy to visualize it as a slider control.

33. The placeholder should be close to the content to be filled in

What is easy for some people to understand may not be for some people. Therefore, it is best to use sample placeholders to explain input fields, which can prevent users from making mistakes when filling in content.

34. Series position effect

According to the "series location effect", psychology tends to remember the first and last items of the list, rather than the middle item. Therefore, when designing navigation in any app, keep the leftmost and rightmost options according to the context of the application. For example, instagram, the leftmost is "home page" and the rightmost is "user". (Caiyun note: This is a psychological theory. For a series of materials, it is easier for people to remember the beginning, also known as the first cause effect or the first effect; it is easier to remember the end, which is called the proximate effect.)

35. Reduce the number of clicks

When designing any experience, the number of clicks is a very important indicator. Count how many clicks a user needs to complete his goal. Additional clicks will slow down the whole operation process. Simplify the process, and the natural experience will be better, so reduce the number of clicks as much as possible. (Caiyun note: in the following case, adding clickable symbols can also reduce users' thinking time.)

36. Less is more

In order to make the content prominent, there is no need to use multiple font types, including bold, color change, etc. Only use the enhanced text hierarchy and font weight where it is most needed, and only one font is enough to attract users' attention to the content.

37. Define key points by leaving blank

White space is very important in design. Too little or no white space will make the design very chaotic. Using white space wisely can clearly emphasize the content.

38. Don't leave users idle

According to the theory of Doherty threshold, "the system needs to respond to the user's operation within 400ms, so that the user can remain focused and improve production efficiency. ". therefore, we can use animation, images and even text to keep users' attention. (Caiyun note: Tips for users can quickly load the information framework first, so that users can do something instead of seeing nothing.)