37 Tips for a Good User Interface Design (with Pictures)

The single-column layout allows for better control of the overall situation. At the same time, users can also see the content at a glance. Multiple columns run the risk of distracting the user and failing to convey your main point. The best approach is to guide users with a logical narrative and provide your call to action button at the end.

There is nothing better than a friendly gesture like giving users a nice little gift. Specifically, giving gifts is also an effective tactic to gain customer loyalty, which is based on the principle of reciprocity. The benefits of doing so are obvious, and will make your future activities (whether it is sales promotion, product updates or further activities) smoother.

During the entire product development process, we will intentionally or unintentionally create many modules, layouts or elements, and their functions are similar. This situation already indicates over-design. Always be wary of these redundant functional modules, which are useless and reduce computer performance. In addition, the more modules there are on the interface, the greater the learning cost for users. So please consider refactoring your interface to make it lean enough.

Customer praise is an extremely effective means to obtain project opportunities or improve project conversion rates. When potential clients see that others have given your services favorable reviews, project opportunities increase dramatically. So try to provide some solid evidence that these positive reviews are real and credible.

Repeating the main slogan multiple times is suitable for situations where the interface is very long or paginated. First of all, you definitely don’t want the screen to be filled with the same information, which would be annoying. But when the page is long enough, the repetition appears more natural and doesn't seem crowded. So there's nothing wrong with having a button at the top of the page and then a more prominent button at the bottom. This way, when users reach the bottom of the page and are thinking about what to do next, the button you provide can get a potential contract or even act as a filter even if the user does not need your service.

Visual design elements such as color, hierarchy, and contrast between modules can help users use the product well: they always know which page they are on and which pages they can go to. To convey such a good interface, you need to clearly distinguish between clickable elements (such as links, buttons), selectable elements (such as radio buttons), and ordinary text. In the example below, I set the click action element to blue and the currently selected element to black. Such proper design allows users to easily switch between modules of the product. But don't design these three elements in a confusing way.

When presenting many services, it is a good idea to give a heavyweight recommendation, even if the recommended settings may not satisfy all users. There is a theoretical basis for doing this. Some studies have revealed a phenomenon: the more choices users face, the more difficult it is for them to make decisions. So you can highlight an option to help users make a choice.

Let’s say you’ve just clicked a link or button. Undoing an action makes it smooth and natural, and it’s in line with human instinct. Popping up a confirmation box for each operation seems to be questioning the user whether they understand the consequences of this operation. I am more accustomed to assuming that the user's operation is correct every time, but in fact, incorrect operations only occur in very rare cases. Therefore, the confirmation window designed to prevent misoperation is actually inhumane, and users need to make meaningless confirmation every time they operate. So please consider implementing undo operations in your product to increase user-friendliness.

Do you want to make your product popular or targeted at a specific group of people? You need to be more precise in product positioning. By constantly understanding the needs and standards of your target customers, you can make better products, get more opportunities to communicate with customers, and make customers feel that you are very professional. This is an exclusive high-quality service. The risk of positioning your product too precisely is that you may narrow the range of your target potential customers and make yourself less versatile. But this spirit of being more professional will in turn win trust and authority.

(Tip: Do you like the cute little characters in the picture below? Go and learn about MicroPersonas)

You can convey your meaning through an uncertain and trembling voice, or you can express it in a very confident way. If you end most of your statements in the interface with question marks, such as "maybe", "possibly", "interested?" or "want to try it?", then you can definitely make the tone more firm. However, nothing is absolute. Perhaps it is okay to relax the wording appropriately to give users room to think for themselves.

It would be much better to highlight the main functional areas from the interface. There are many ways to make your main slogan eye-catching. Highlight through the contrast of light and dark tones. By adding shadow gradient and other effects to elements, the interface is layered to highlight the theme. Finally, you can even design your interface specifically with complementary colors on the color wheel (such as yellow and purple) to achieve the purpose of highlighting the center of gravity. Putting all of this together, the final interface will clearly distinguish your main intention from other elements of the interface and present it perfectly.

It is important to indicate your region, the services you provide, and where your products come from. It also brings communication with customers into a more specific and regional scenario. Indicating where you are from, country, province and city, is also a common mention when introducing yourself or displaying products. When you implement this in interface design, it feels very friendly. At the same time, specifying the area will also implicitly enhance the reputation of the product, making it even better.

People are lazy by nature, and the same is true when filling out forms. No one wants to fill out a lot of form fields. Every field in your form carries the risk of losing users. Not everyone is a fast typist, and typing on a mobile device is even more cumbersome. Ask yourself if every field in the form is necessary, and then try to reduce the number of fields in the form. If you really need a lot of information for users to fill out, try to spread it out over different pages so that they can continue to fill it out after the form is submitted. Too many fields can easily make the entire form appear bloated. Of course, it is also easy to keep it simple and only put a few fields.

Any drop-down box you use will hide information from the user and require additional actions to display it. If this information is required throughout the operation, it is better to display it more obviously. Drop-down boxes are best used in places where there are conventions such as selecting dates and provinces. It is best not to make important options in the program in a drop-down format.

A bland article will undoubtedly make users lose interest and continue reading. Yes, long pages with a single column scrolling are good, but we should set up some sections appropriately and link them together to increase the user's interest and make them continue reading. But it should be noted that the blank space between sections should not be too large.

In order to meet the needs of various users, it is common practice to put some links here and there on the page. If your main purpose is to get users to click the download button at the end of the page, you need to think twice. Because the user may click on other links and leave the page. So you need to pay attention to the number of links on the page, and it is best to separate the links used for navigation from those used for operations with different styles. Try to remove unnecessary links on the page that will lead users to click on your feature button.

Nowadays, most interfaces have various styles of progress bars or icons indicating status, such as read or unread status for emails, paid or unpaid status for electronic bills. It is very necessary for users to present such a status on the interface. In this way, users can know whether certain operations are successful and what operations to perform next.

Imagine there are two buttons on the interface: one is "Get Discount" and the other is "Register Now". I bet most people will click on the first one because the second button doesn't feel profitable and "sign up" conjures up images of endless forms to fill out. That is to say, buttons that make users feel profitable are more likely to be clicked. This kind of text information that makes users feel the benefits can also be placed next to the button, and does not have to be used as the button title. Of course, normal buttons are still useful and are generally used in places where repetitive operations are frequent.

Needless to say, operating directly on the element is a more intuitive and clear way. For example, in a list, if we want the user to operate on each item, we should put the button on the current item instead of outside the list. Another example is to directly click on an element to enter the editing state (for example, the address information on the page can be edited after clicking it). This method is much simpler and more convenient than the traditional method of selecting and then clicking the corresponding button to operate. Of course, there is no need to do this for general operations that do not require any context, such as the forward and back buttons on the page.

On a large enough widescreen interface, it is better to present the form directly, which is much better than clicking a button and then popping up the form. First of all, it reduces the number of clicks, making the process simpler and saving time. Secondly, directly presenting the form lets users know how long the form is, which actually tells users that registration will not take much time. Of course, this rule works well for very simple sign-up forms.

During user operations, elements on the interface will often appear, hide, open, close, zoom in, zoom out, and shift. Adding some natural animation to these elements, the fade-in and fade-out effects are not only beautiful, but also more realistic. The change of element size and position is an animation process that takes time. But be careful not to set the animation time too long, as that will make users who want to complete the operation as quickly as possible impatient.

Instead of asking users to register right away, why not let them perform some experiential operations first? This experience process can demonstrate the functions, features, etc. of the program. Once users understand the value of the program through a few simple steps, they will be more willing to fill out the registration form. This step-by-step guidance can delay user registration as much as possible while allowing users to perform simple operations such as personalization without registering.

Process borders can distract from the main subject. Needless to say, borders do play a big role in dividing areas and setting sections, but at the same time their obvious lines will also draw users' attention away. In order to achieve the purpose of dividing sections without diverting users' attention, when layout, you can group elements in different areas of the interface through blank spaces, use different background colors, unify text alignment, and set different styles for different areas. When using WYSIWYG interface design tools, we often drag out many blocks on the interface, and too many blocks will appear messy. So we'll put some horizontal lines here and there to demarcate them. A better approach is to align the blocks vertically so that there are no extra lines that disrupt the vision.

This is how the market works. Users always only care about their own interests, and product features are not that important to them. Only benefits can more intuitively reflect the value brought by using a product. In his book Starting with $100, Chris Guillebeau points out that people care more about love, money, identity and free time than stress, conflict, worries and an unknown future. So I believe it is necessary to return to the benefits when demonstrating product features.

Different amounts of data often need to be presented on the interface, ranging from 0, 1, 10, 100 to 10,000+ and so on. A common problem here is how to display the interface from the initial 0 data used by the program to the transition to having data. This is also something we often overlook. When the program initially has no data, all the user sees is a blank, and the user may not know what operations to perform. Making good use of the initial interface without data allows users to learn and become familiar with how to use the program and create data in the program. Striving for perfection is always our goal, and interface design is no exception.

Make the interface the default choice for users who want to use your product, which means that if the user really needs to use it, they can directly click OK without additional clicks. Of course, there is another way to uncheck the service by default, and the user can manually select it if needed. The former design is better for two reasons. First, users do not need to click additional options, which is very convenient, because the default setting is that users need our products or services. Second, this practice is, to some extent, recommending products to users, implying that others have chosen us. Of course, designing the interface to be the default option is somewhat controversial and feels a bit forced on users. If you want to be more moral, you can either make the text asking users to choose ambiguous or use a less straightforward description like double negative. Both of these methods can make users feel less forced to choose to use the product.

Since the publication of Donald Norman's series of works, maintaining consistency in interface design has become a generally followed principle. Maintaining consistency in design can reduce the user's learning cost, and users do not need to learn new operations. When we click a button or perform a drag operation, we expect such operations to be consistent across all interfaces of the entire program and to produce similar results. Instead, we need to relearn what results a certain operation will produce in a new situation. There are many aspects that can be worked on to achieve a consistent interface, including color, orientation, element presentation, location, size, shape, etc. But before making the interface consistent, remember that it is also advisable to break the overall consistency appropriately. This occasional inconsistency in design can be very effective when used where you need emphasis. So nothing is absolute in the world, we should follow consistent design principles, but break the rules appropriately.

Appropriate default values ​​and pre-populated form fields can significantly reduce the workload on users. This is a very common practice to save users’ valuable time and help them quickly fill out forms or register information.

Conventions in interface design are very similar to previous interface consistency. If we follow the conventions in the interface, it will be convenient for users to use. On the contrary, inconsistent and unconventional designs will increase the learning cost. With these conventions in interface design, we know without thinking that the cross in the upper right corner of the interface (in most cases) is used to close the program, or we can predict what will happen after clicking a button. Of course, conventions become outdated, and the same operations may be given new meanings over time. But remember, when you break these conventions in your interface, it must be done with purpose and for good reasons.

We like success, no one wants to fail. According to reliable conclusions from psychology, people are generally more inclined to avoid losing what they own than to gain new benefits. This conclusion also applies to product design and promotion. Try to explain that your product will help customers maintain their interests, health, social status, etc. rather than telling customers that this product will bring them something they don't have. For example, does an insurance company sell the large compensation we can get after an accident, or does it emphasize that it can help us avoid losing the property we own?

A hierarchical design can separate the important parts of an interface from the less important parts. To make the interface clearly structured, you can work on the following aspects: alignment, spacing, color, indentation, font size, element size, etc. When all of these adjustments are applied appropriately, they can improve the readability of the entire interface. Compared to a very straightforward interface where users can glance from top to bottom at a glance, such a clear design can also allow users to slow down and read slowly. This also makes the interface more distinctive. Just like a trip, you can take the high-speed rail to quickly reach the scenic spot (glance from the top of the page to the bottom), but you can also travel slowly to enjoy the scenery along the way. Therefore, the layered design gives the eyes a place to stay, rather than just a blank, monotonous screen.

Grouping and merging various functional items can improve the usability of the program. Anyone with a bit of common sense knows that knives and forks, or open and closed files, go together. It is also logical to put elements with similar functions together, which is in line with our usual cognition.

When processing a form, it is best to immediately detect whether the content filled in by the user meets the requirements and then give a validation message. This way errors can be corrected as soon as they occur. On the contrary, checking the form after submission will give error messages, which will make users feel tired and repeat previous work.

Try to relax restrictions on user input data, including format, capitalization, etc. This can be more user-friendly and make the interface more friendly. A perfect example is when users are asked to enter a phone number, there are many ways to enter it, with brackets, dashes, spaces, with area codes, without area codes, and so on. If you handle these formatting issues in your code, the cost is just a few more lines of code for you, but it can reduce the workload of countless users.

Appropriate sense of urgency is an effective tactic that allows users to make decisions immediately instead of waiting ten days or half a month. The important thing is that this tactic works every time because it implies that resources are scarce or the activity is limited in time. You can buy it today, but you may not be able to get such a low price tomorrow. On the other hand, this tactic also makes users feel like they are missing out on a great opportunity, again, playing on people’s natural fear of losing. Of course, this tactic will be scoffed at by some people and considered dishonest. However, this is just a tactic and there is no harm in using it as long as it remains legal. So please don't create a false sense of urgency in your interface just for the sake of marketing.

Scarcity makes things valuable. The message given by hunger marketing is that there are not many things left, only a few items are left, and if you come again tomorrow, they may be gone. You can tell by comparing the price difference between wholesale and limited edition items. Looking back, those wholesalers or large retailers also use hunger marketing to achieve better sales. But in the software industry, we often forget that there is such a thing as hunger marketing. Because digital products can be easily copied, there is no shortage of them. In fact, in interface design, it can also be used to connect with the shortage of resources in reality. Think about the ticket price for an online seminar, think about the limit on the number of people you can serve in a month, this information can inform users that there is a limit.

This classic principle in interface design has its basis in psychology: it’s easier to recognize something in a crowd than to ask someone to recall it. Recognizing something only requires a little recollection and some clues. Recalling, on the other hand, requires us to search our brains thoroughly. Perhaps this is also the reason why multiple-choice questions on the test paper are completed faster than short-answer questions. So try to display some of the information that users have previously involved on the interface and let them make a choice, rather than asking them to think for a long time and then fill it out themselves.