The first wave! 12 UI design tips that designers must pay attention to

Remember Michal Malewicz, the senior designer who summarizes UI and visual design trends every year? He recently started sharing the UI design tips he noticed in his daily work on Twitter. Although these tips are scattered, they summarize some common problems in UI design very well.

Using these tips together with a quick check of your designs can help you identify and resolve many common minor issues.

1. Avoid using carousel indicators

Most users will only scroll down to view the page, and most of the time they will not scroll through the carousel that flips horizontally.

• Slideshows are usually difficult to quickly capture the user's interest.
• If possible, remove this feature or use other option controls instead.

2. Use clear and targeted button labels

Button labels should always point to a clear action, telling users what will happen after clicking the button. Avoid "Next", "OK", and other vague action names.

• Avoid using vague actions such as "OK" or "Next".
• The button label text needs to clearly explain what will happen.

3. Button text also needs a hierarchy

When there are multiple buttons in the UI, it should always be clear which action is primary and which is secondary. Avoid having buttons for two actions that are identical in appearance, as this will take users longer to distinguish and may be confusing.

• Clearly show which actions are primary1 and which are secondary2.
• Avoid making two action buttons look visually identical

4. Avoid using fonts with too thin strokes

After all, fonts with too thin a stroke are difficult to read, especially at normal size, and will make the text look unimportant.

• Regular, semi-bold, and bold fonts are easier to read and have better accessibility.
• Avoid using fonts with very thin strokes in your projects.

5. Icon style should be consistent

Mixing different types of icons (such as stroke style vs fill style) can make the design feel confusing, especially since many icons will switch from stroke style to fill style when triggered. Mixing different styles in the same state may contradict the user's cognitive expectations and cause confusion.

• All icons should have exactly the same style, feel, and form.
• Don’t mix filled icons with outlined icons.

6. Keep enough whitespace in buttons

Buttons that lack sufficient white space are visually unsightly. On the one hand, they make the message difficult to read, and on the other hand, they make the design look incomplete.

• A safe bet is to have the text at least one x-height away from the edge, and even better, twice the distance.
• Avoid using buttons with too little white space around the text label.

7. Avoid using red asterisks to mark required fields

Today’s mobile form designs tend not to use red asterisks to emphasize required fields, but try to provide users with only the required fields, and the wrong order of fields can make filling out forms very time-consuming.

• If possible, please change the text to indicate that the fields are "optional" or simply remove these fields.
• Avoid using red asterisks to indicate required fields, and try to only allow users to fill out necessary fields.

8. Avoid using multi-column tables

Although multi-column tables have higher space utilization, the experience and usability are not good. Using a table arranged in one column will be clearer, easier to read, and easier to fill out.

• Keep your form in one column to make it easier to read and fill out quickly.
• Avoid multi-column forms whenever possible!

9. Avoid using underscores to identify fields in forms

Using underlining to indicate a form that needs to be filled out is not very obvious to users, and it usually takes users longer to understand that the underline means a form that needs to be filled out.

• It takes users longer to understand that underlined fields are forms that need to be filled out.
• The input box has clearly visible borders and can be easily understood.

10. Keep the attributes, colors, and symbols of message notifications consistent

Notifications with unclear or contradictory information can easily confuse users. The main reason is that its meaning (affirmation or negation) and the corresponding visual signs (such as color, icon, symbol) should match each other, otherwise it will be difficult for users to determine the accuracy of the information.

1. Avoid using contradictory messages and conveying unclear information.
2. Clearly tell users what happened and what to do next.

11. Avoid using too small a click area

Too small a tap area, whether on mobile or desktop UI, reduces user comfort and is often confusing.

• Larger control sizes are easier to use on desktop.
• Even on desktop, try to avoid small click areas.

12. Avoid using rounded edges for form input boxes

Circular form input boxes are not always visually easy to handle. Even if the text and input box are aligned, it will look strange visually.