Interface Design Skills

 

I can't remember when I found such a useful article, but I wanted to translate it and share it with myself.

After a long time, in 2014, I finally calmed down and spent a lot of time translating the image into Chinese. I am a programmer who can only pass the cet6 score in my spare time translation. I dare not say that I believe that I can do it, but the meaning is in place.

 

1. Use a single column instead of multiple columns as much as possible.

The single-column layout gives you better control over the global environment. At the same time, users can view the content at a glance. If you have multiple columns, there will be a risk of distracting users so that your subject cannot be well expressed. The best practice is to use a logical description to guide the user and give your operation button at the end of the article.

 

2. gifts are often more attractive.

It would be better to give the user a nice little gift. Specifically, sending gifts is also an effective tactic for gaining customer loyalty, which is based on people's principles of reciprocity. The benefits of doing so are also obvious, and will make your future activities more smooth (whether it is sales promotion, product updates or re-launch activities.

 

3. Combine repeated functions to make the interface concise

During product development, we intentionally or unintentionally create many modules, la S, or elements, and their functions may overlap. This indicates that the interface has been over-designed. Always be alert to these redundant functional modules, which are useless and reduce computer performance. In addition, the more modules on the interface, the higher the learning cost for users. Therefore, consider refactoring your interface to make it simple enough.

 

4. The customer is better at self-evaluation

The customer's praise is an extremely effective means to gain project opportunities or increase the project conversion rate. Project opportunities increase greatly when potential customers see that others give high praise to your service. Therefore, we tried to provide some evidence with a high amount of gold to prove that these favorable comments are authentic and credible.

 

5. Show your subject frequently to deepen your impression

This method can be used when the page is too long or paging. First, you certainly don't want to fill the screen with the same information, which will be annoying. However, when the page is long enough, these duplicates will naturally become much larger and will not appear crowded. There is nothing wrong with placing a button at the top of the page and then adding a highlighted button at the bottom of the page. In this way, when the user arrives at the bottom of the page and is thinking about what to do next, the buttons you provide can obtain a potential contract or filter out services even if the user does not need them.

 

6. differentiate options from buttons

Visual designs such as colors, layers, and comparison between modules can help users use products well: they always know the current page and what pages can be transferred. To deliver such a good interface, you need to distinguish the elements that can be clicked (such as connections and buttons), the elements that can be selected (such as multiple choice boxes), and common text. In the example, I set the click operation element to blue and the selected current element to black. This appropriate design allows users to switch between various modules of the product. But do not confuse these three elements.

 

7. give recommendations instead of asking users to choose

When presenting many services, it is a good practice to give a major recommendation item, although the Recommended settings cannot satisfy all users. There is a theoretical basis for doing so, and some research has revealed that the more choices you face, the more difficult it is for users to make decisions. So you can highlight an option to help you make the choice.

 

8. Cancel the operation to replace the operation.

If you have just clicked a connection or button, undo operations can make the operation smooth and natural, which is also in line with human instinct. A confirmation box is displayed for each operation, as if to ask the user whether you understand the consequences of this operation. I am still more accustomed to assuming that each operation is correct, in fact, only a very small number of cases will happen misoperation. Therefore, the validation window designed to prevent misoperation is actually not user-friendly, and each operation of the user needs to be meaningless. So please consider implementing the Undo operation in your product to increase the user's operation friendliness.

 

9. Point out the target audience of the product rather than the full age.

Do you want to make the product popular? Is there a precise audience? You need to be more precise in product positioning. By constantly understanding the requirements and standards of the target customers, you can make the products better and have more opportunities to communicate with the customers, and make the customers feel that you are very professional, this is an exclusive high-quality service. The risk of precisely positioning the product is that it may narrow down the scope of potential customers and make itself less omnipotent. However, such a more professional spirit will in turn win trust and authority.

(Tip: Do you like cute little guys? Learn more about micropersonas)

 

10. Try to be decisive directly instead of leaving alone.

You can express your meaning in an uncertain and trembling voice, or in a confident manner. If you end the expressions on the interface with question marks, for example, "maybe", "maybe", "interested? "Or" do you want to try? ", Then you can make your tone more firm. However, everything is not absolute. It is also possible to relax the wording so that users can have their own discretion.

 

11 The interface should be clearly different, which makes it easy to distinguish

It is much better to highlight the main functional area from the interface. There are many ways to make your main slogans eye-catching. It is highlighted by comparison of light and shade. By adding a shadow gradient to an element and other effects, the interface will show a subject with a sense of excitement. Finally, you can even select complementary colors (such as yellow and purple) on the color palette to design your interface to highlight the center of gravity. After all these elements are integrated, the final interface will clearly differentiate your main intent from other elements on the interface and display it perfectly.

 

12 specify the origin

It is of great significance to specify the region, service, and product source. It also introduces communication with customers in a more specific scenario with regional characteristics. Pointing out the specific sources, countries, provinces, and cities is also often mentioned in self-introduction or product presentation. It is very friendly when you implement this in the interface design. At the same time, the specified region also increases the product's reputation.

 

13. Simplified Form Content

Life is just lazy. The same is true when you fill out forms. No one wants to fill in a lot of form fields. Each field in the form has the risk of losing users. Not everyone can type quickly, and inputting data on a mobile device is even more troublesome. Ask if every field in your form is required, and then try to reduce the field in the form as much as possible. If you really need a lot of information for users to fill in, try to scatter them across different pages, and you can continue to add after the form is submitted. If there are too many fields, it is easy to make the entire form show bloated. Of course, it is easy to put only a few fields.

 

14. Expose options instead of hiding the operation

Any drop-down box you use will hide the user's information and requires additional operations to display it. If this information is necessary throughout the entire operation, you 'd better display it more clearly. It is best to use the drop-down box to select a date or province. For important options in the program, it is best not to use the drop-down form.

 

15. It is better to make the interface a straightforward layout.

A plain text will undoubtedly make users lose interest and continue reading. Yes, it is good to scroll the long page in a single column, but we should set some sections as appropriate and link them to improve the user's interest so that they can continue reading. However, it should be noted that the white space between the Section and the section should not be too large.

 

16 do not put too many links to distract the user's attention

To meet the needs of various users, it is common to put some link links here to link them there. If you want to allow users to click what to download at the end of the page, you need to think twice. Because the user may have clicked another link to leave the page. Therefore, you need to pay attention to the number of links on the page. It is best to separate the links used for navigation from those used for operations with styles. Remove unnecessary links on the page as much as possible so that users can click your function button.

 

17. Present the operation status or progress

Nowadays, most interfaces have displayed progress bars or status icons in various styles. For example, emails are in read or unread status, and electronic bills are in paid or unpaid status. It is necessary for users to present such a status on the interface. In this way, you can know whether some operations are successful and what operations are to be performed next.

 

18 do not make the user feel that the task is being completed

Imagine there are two buttons on the Interface: "Get discount" and "register now ". I bet most people will click the first one, because the second button makes people do not feel profitable, and "register" makes people think of incomplete forms. That is to say, buttons that make users feel profitable are more likely to be clicked. This text information that benefits users can also be placed next to the button, not necessarily as the button title. Of course, normal buttons are still useful, which are generally used for frequent repetitive operations.

 

19 make the operation intuitive, rather than making people feel that the context is not found

Needless to say, directly operating on elements is a more intuitive and clear method. For example, if you want to operate on each entry in a list, place the button on the current entry instead of the list. For example, you can click an element directly to enter the editing status (for example, you can click the address information on the page to edit it ). This method is much simpler and easier than clicking the corresponding button after the traditional selection. Of course, for general operations, there is no need to have any context, so there is no need to do so, such as the forward and backward button on the page.

20. Try to display all content instead of additional pages.

It is better to give a form directly on a wide screen interface that is large enough, which is much better than clicking a button to pop up a form. First, the click operation is reduced, and the process becomes concise and saves time. Second, directly presenting a form allows the user to know how long the form is, in fact, it is telling the user that registration does not take much time. Of course, this rule is suitable for situations where the registration form is very simple.

 

21. Smooth display of the interface instead of rigid display

During user operations, elements on the Interface often appear, hide, open, close, zoom in, zoom out, and shift. Add some natural animations for these elements. The Fade-in and fade-out effects are both beautiful and practical. The change in the size and position of the elements is a time-consuming animation process. However, do not set the animation time to be too long, which will make users impatient to complete the operation as soon as possible.

22 step-by-step guidance instead of directly letting users register

Instead of letting users register immediately, why not let users perform some experiential operations first. This experience process can display the functions and features of the program. Once the user understands the value of the program through a few simple operations, it will be more willing to enter the registry form. This step-by-step guidance can minimize the user registration time, but also allow users to perform personalized settings and other simple operations without registration.

23 too many borders will split the interface

Too many borders will be overwhelming. Needless to say, the border does play a major role in setting the Forum in the area, but its obvious lines will also attract the user's attention. In order to achieve the goal of dividing Forum sections without shifting the user's attention, you can group elements in different areas of the interface through blank spaces during the layout, and use different background colors to unify the text alignment, you can also set different styles for different regions. When we use WYSIWYG interface design tools, we often drag a lot of blocks out of the interface, and these blocks become messy when they are too many. So we will place some horizontal lines to divide them. A better way is to vertically align the blocks, so that the redundant lines will not disturb the vision.

 

24. Show the benefits of the product instead of listing the product features

The market is like this. Users always only care about their own interests, and product features are not that important to them. Only benefits can reflect the value of using products more intuitively. Chris guillebeau pointed out in his book "starting from $100" that people care more about love and money than stress, conflict, annoyance, and the unknown future, sense of identity and free time. Therefore, I believe it is necessary to return to the benefits when presenting product features.

 

25. Zero data considerations

Different quantities of data are often displayed on the interface, from 10,100, 10000 to +. There is a common problem here: how to display the interface before the first 0 pieces of data used by the program is too large to have data. This is what we often overlook. When there is no data in the program, the user will see a blank space, and the user may not know what operations to perform. Using the initial interface without data, you can learn and familiarize yourself with how to use the program and create data in the program. Perfection is always our goal, and the interface design is no exception.

 

26 by default, users are introduced

Make the interface a default user and select the product you want to use. This means that if you really need to use the product, you can click "OK" instead of clicking "OK. Of course, you can also choose not to select Services by default. You can click Services manually if needed. The former has two reasons for better design. First, the user does not need to click any more, which is very easy, because the default setting is that the user needs our products or services. Second, this practice is to some extent to recommend products to users, suggesting that others have chosen us. Of course, there is a bit of controversy over how much the interface is designed as the default choice, which forces the user to feel. If you want to be more moral, you can either make the text you choose ambiguous, or use double negation, which is not so straightforward, both methods can make users feel that they are forced to use the product.

 

27 The interface design is consistent, so do not increase the learning cost for users.

Since the publication of a series of books by Donald Norman, it has become a general rule to maintain consistency in the interface design. Consistency in design can reduce the learning cost for users, and users do not need to learn new operations. When we click the button or drag it, we expect that the operation will be consistent across the interface of the entire program, and similar results will be obtained. On the contrary, we need to re-learn the results of an operation in a new situation. You can make efforts in many aspects to achieve a consistent interface, including color, direction, element form, position, size, shape, and so on. However, before making the interface consistent, remember that it is also advisable to properly break the overall consistency. This occasionally inconsistent design can be used in the areas you need to emphasize. So there is no absolute world, we should follow consistent design principles, but appropriately break this convention.

 

28 using the appropriate default value will reduce the operation

Appropriate default values and pre-filled form fields can greatly reduce user workload. This is a very common practice to save valuable time for users. It can help users quickly complete forms or registration information.

 

29. follow some conventions instead of re-designing

The compliance rules in the interface design are similar to the previous interface consistency rules. If we follow some conventions in the interface design, it is very convenient for users to use them. On the contrary, designs that do not necessarily follow the conventions increase learning costs. With these conventions in the interface design, we don't have to worry about knowing that the upper-right corner of the interface (in most cases) is used to close the program, or click a button to predict what will happen. Of course, the conventions will be outdated. Over time, the same operation may be given a new meaning. But remember, when you break these conventions on the interface, you must have a clear purpose and a good starting point.

 

30. Make users feel that they can avoid losing rather than obtaining

We like success, and no one is willing to fail. According to the reliable conclusions of psychology, people generally prefer to avoid losing what they own rather than gaining new benefits. This conclusion also applies to the design and promotion of products. Try to explain that your product will help the customer maintain his interests, maintain health, social status, and so on. Tell the customer that this product will bring something he did not own. For example, is an insurance company entitled to a large amount of compensation after an accident in sales? Is it emphasizing that it can help us avoid losing our property?

 

31 hierarchical graphical display is better than straightforward text description

A hierarchical design can distinguish important parts of the interface from irrelevant parts. To make the interface layered, you can make a fuss about the following aspects: alignment, spacing, color, indentation, font size, and element size. When all these adjustments are used properly, the entire interface can be more readable. Compared to a very straightforward interface, users can go from top to bottom on the design, such a clear design can also let users slowly read. This also makes the interface more distinctive. Just like a trip, you can take a high-speed train to quickly reach the scenic area (from the top of the page to the bottom), but you can also walk slowly to enjoy the scenery along the way. Therefore, a well-organized design gives your eyes a place to stay, rather than a blank and monotonous screen.

32. There will be associated functional groups rather than disorder

Grouping each function item can improve the availability of the program. Anyone with some common knowledge knows that knives and forks, or opening and closing files, are put together. It is logical to put elements with similar functions together, which is in line with our usual cognition.

 

33. Use an inline verification message instead of verifying it after submission

When processing a form, it is best to immediately check whether the content entered by the user meets the requirements and then provide a verification message. In this way, the error can be corrected as soon as it appears. On the contrary, an error message is displayed when you check the form after submission, which makes the user feel weak and repeat the previous work.

34. Relaxed user input requirements

Try to relax the restrictions on user input data, including the format and case. In this way, the user interface is more user-friendly and user-friendly. Another example is to allow a user to enter a telephone number. There are many input methods, including parentheses, broken signs, and spaces, areas with and without area codes. If you are dealing with these formats in the code, you only need to write a few more lines of code, which can reduce the workload of countless users.

35. Make users feel that they need to respond quickly instead of having no idea of time

An appropriate sense of urgency is an effective tactic that allows users to make immediate decisions rather than waiting for the last ten days and a half months. What's important is that this tactic has been tried and tested, because it implies a shortage of resources or limited time for activities. You can buy it today, but tomorrow it may not be so cheap. On the other hand, this tactic also makes users feel that they will miss a great opportunity. Once again, it applies people's fear of losing nature. Of course, such tactics will be sneaked at by some people and are regarded as not straightforward. However, this is only a tactic, and its application is harmless without compromising its legitimacy. Therefore, do not create pressing illusion on the interface for marketing.

 

36 Use hunger marketing

In rare cases. The information provided by hunger marketing is that there are not many things, and there are only a few items left. It may not be enough to come back tomorrow. You can compare the prices of wholesale and limited-edition items. Looking back, wholesalers or large retailers also use hunger marketing to get better sales. But in the software industry, we often forget about hunger marketing. Because digital products can be easily copied and copied, there is no shortage of products. In fact, in the interface design, it can also be used to contact the resource shortage in reality. Think about tickets for an online seminar and the number of people you can serve in a month. All of this information can tell users that they are limited.

 

37. Let the user choose not to fill in again

The classic principles in this interface design have a psychological basis. It is easier to recognize something from a bunch of things than to let someone think about something. To identify something, you just need to recall it a little and use some clues. In retrospect, we need to fully search our own brains. Maybe this is why multiple choice questions on the exam are faster than short answer questions. So I tried to display some previous information on the interface for users to make choices, instead of asking them to enter the information for half a day.

38 makes clicking easier

Such as links, input boxes of forms, and buttons. If the size is larger, it is easier to click. According to Fet's law, it takes some time to use peripherals like a mouse to click, especially when the elements are relatively small. In view of this, it is best to make your form input box and buttons bigger. Or you can keep the original design unchanged, but increase the number of elements that can be clicked (that is, the hot zone. A typical example is text links and navigation menus on mobile devices. The text is not necessarily large, but the background is stretched and effective for a wide range of clicks.

 

 

39. Optimize page loading speed and avoid waiting for too long.

Speed is important. The page loading speed and the UI response speed to operations are directly related to the user's patience to continue. Undoubtedly, every second of waiting will lose some user or project opportunities. A good solution is to optimize your pages and images. In addition, psychology can be used to make the wait time appear less long. Specifically, there are two skills. One is to display the progress bar, and the other is to show other related or interesting things to attract the user's attention (just like walking along the conveyor belt is always better than standing in the same place and staring at it ).

40 in addition to the button, the shortcut key is also required

When your program is widely spread, consider the feelings of advanced users. People always try to find faster methods for some repetitive operations, and the shortcut keys will emerge. Compared to clicking on the interface, the shortcut key will undoubtedly greatly improve work efficiency. A good example is today's popular J (backward) K (forward) shortcut combinations in various mainstream programs, such as in Gmail, Twitter, and Tumblr. The button is good, but the shortcut key will be icing on the cake.

Good UI http://goodui.org

And there will be updates from time to time...