6 tips to quickly improve UI design effects

Editor's note: When doing UI design, many tips can just improve the visual effects and user experience of the interface. This article from Mark Andrew sorts out 6 very practical tips for improving UI effects. It is a series of five articles, and the original article was first published on marcandrew.me.

When creating a practical, accessible and visually appealing UI interface, we usually only need to make limited fine-tuning to achieve quite good results. Previously, I have written a lot of practical UI & UX optimization tips (get them at the end of the article after reading it). This article continues to add 6 practical suggestions. Let's take a look!

1. Ensure that the content of the bottom tab bar remains unchanged in the APP

Currently, most apps use the bottom tab bar as the main navigation module. So when designing, you must ensure that the function of this part is fixed and clear, and it will not disappear, change, or cause frustration to users.

2. You can build hierarchy by simply changing the weight and size of the font

Just use weight and size variations to do this!

In most text typesetting, you only need to use a single font to achieve a rich level of information hierarchy. You need to arrange the text according to the importance and priority of the content. The higher the priority, the larger the font size and the heavier the weight.

Also pay attention to the density of the arrangement, making sure that the more readable and relevant text blocks are closer together.

3. Use larger clickable areas on mobile UI

Although this is obvious, it is easy to forget this important point when designing a specific interface. On iOS, the minimum clickable area is 44×44 pt, and on Android it is 48×48 pt.

Sometimes, a control may seem small and you can make the trigger area a little larger.

4. Use a consistent navigation design

Navigation constitutes the most important behavioral path for users to explore websites and apps. Ensuring the consistency of navigation ensures that users will not feel confused and frustrated during subsequent interactions.

Therefore, during the iterative upgrade process, even the smallest changes should be kept consistent at the system level. For important, critical, and destructive operations, some obvious differentiation can be made.

5. For content-rich websites, make the search function prominent

If possible, for websites with a lot of content, try to make the search button prominent and within easy reach. Try not to hide the search button in places like drop-down menus, because it may be the main way or even the only way for users to reach their goals.

6. Don’t choose font size arbitrarily

How big should the text be on the page? In many places, there are complete solutions and processing techniques for choosing the font size. For example, use TypeScale.

Generally speaking, keeping the text size of different information levels at a ratio of 1.25 can achieve a very good visual effect and experience. TypeScale can scale the basic text font size of 18px at a ratio of 1.25 to help you generate the sizes of different levels of text such as H1, H2, H3, etc.

TypeScale generates text that brings a natural, comfortable rhythm and feel to your typography.