The truth lies in the details! 10 design details that effectively improve user experience

Hello everyone, I am Clippp. Today I will share with you "Design Details". In many cases, some small details can determine whether the product experience is good or not. We not only design for the sake of design, but also design after thinking. After our in-depth thinking, we present the design in its entirety.

Through these design details that can be directly used in work, we can help everyone learn design thinking~

Add icons for error states

Icons with error tips help users identify the location of the error more quickly. When entering information, error tips are often designed to be very limited in the limited space.

The common structure of error prompts is text + color: inform the user of the cause of the error and change the color state of the input box. On this basis, add an error icon to form a prompt structure of text + color + icon, which can make the entire prompt state more comprehensive and allow users to quickly and clearly perceive the problem.

Guide users instead of showing errors

Common error prompts simply tell users what they have done wrong, but do not tell users what to do correctly. This is also a headache for many users.

When setting a password, there are usually certain requirements for the password, such as at least 8 digits, uppercase and lowercase letters, special symbols, etc. These complex prompts often confuse users and prevent them from understanding the situation immediately, resulting in password creation failure.

When a user fails to create a password, it will be confusing to only tell them that the password creation failed. Rather than the result, the user wants to know how to create the password correctly. By giving clear guidance, the user knows what to enter, which is the key point to consider.

Add some color to gray

The background of the left page is pure gray (242, 242, 242), and the background of the right page is blue-gray (228, 235, 242).

By comparison, we can find that the blue-gray tone is more natural to our eyes. In design, try to make the gray of the page background cooler or warmer instead of using pure gray, so that the designed page will look more comfortable.

Using different checkbox states

Checkboxes usually have one or more options for users to choose from, and users can select one or more options.

The detail that needs to be noted here is that the options have two states: all selected and not all selected:

If not all options are selected, the check box needs to have a status prompt that is different from the options to inform the user that there are unselected options in the box; when all options are selected, a unified logo can be used to inform the user.

Highlight search results

Search is one of the essential functions of the product, which is powerful and convenient.

When we enter content to search, the search box will associate some related keywords for our reference and use. Such prompts can improve the user's search efficiency and save input time.

Based on keyword association, we can make the search experience better! While associating keywords, the input content is highlighted so that other prompted content can be quickly identified, which not only highlights the key points but also saves time.

Adding an inset to an empty state

When an empty state appears, there is no requirement that the page must be blank. You can add some elements, such as illustrations, animations, etc., to make users feel more comfortable.

If you want to make the empty state better, you can give specific action prompts to tell users how to proceed to the next step and try to guide users to the right place.

Add sensible status to messages

The two pop-ups above look very similar, the only difference is the status icon. The icon on the left is universal, while the one on the right is more appropriate for the current status.

Communication and interaction are not just about words. Images, icons or illustrations help users identify the status of the action being performed.

Add color to breadcrumbs

This method is often used for some specific solutions. By adding color to the breadcrumb navigation, users can be informed of the clickable navigation category and prompted to the specific location, making it easier to operate.

Avoid using default shadows

The default shadows preset in many design software do not look very comfortable, so we need to design some soft shadow effects ourselves.

We must always maintain a responsible attitude towards our design works and not use bad shadow effects for the sake of convenience. The consequence of doing so may be that the entire work is not standardized, which is not worth the cost.

The same color scheme

Neutral colors help create balance on a page and make it more attractive, but using too many gray tones can easily destroy this harmony on a page.

To keep the same neutral hue throughout your design, switch the color picker to HSB mode, which makes it easy to adjust color relationships by changing the values.

at last

I hope these practical design details can bring practical help to your work. Thinking more and more comprehensively in design can not only improve the dimension and depth of your thinking, but also may elevate the product and experience to a higher level.