Good user interface-some tips for interface design

Original address: http://www.cnblogs.com/Wayou/p/goodui.html

Such a useful article I have not remember when it was discovered, but at the moment of reading it would like to translate, share to everyone's own also enjoy.

After a long time, came to 2014 years, finally calm down the heart to spend a lot of time together with the picture translated into Chinese. Like me, an amateur translator with a six-level score is only enough to pass the programmer, dare not say to do the letter, but find meaning in place.

1 try to use single column instead of multiple columns layout

A single-column layout gives you better control of the overall situation. At the same time users can also at a glance content. More than one column will have the risk of distracting your users so that your main thrust is not very well expressed. The best thing to do is to use a logical narrative to guide the user and give you an action button at the end of the text.

2 Releasing gifts is often more attractive

To give the user a beautiful small gift such a friendly move is no better. In particular, the delivery of gifts is also an effective strategy to obtain customer loyalty, which is based on the principle of reciprocity of people. The benefits of doing so are also obvious, and will make it easier for you to get ahead of the event (whether it's a promotion, product update, or another activity).

3 Merging repetitive features to make the interface simple

Throughout the development of the product we will intentionally or unintentionally create many modules, layouts or elements, and their functions may be some overlap. This situation indicates that the interface has been excessively designed. Be wary of these redundant functional modules, which are useless and degrade computer performance. In addition, the more modules on the interface, the greater the user's learning cost. So please consider refactoring your interface to make it simple enough.

4 customer reviews better than boasting.

Customer praise is an extremely effective means of obtaining project opportunities or improving project conversions. When a prospective customer sees someone else's praise for your service, the opportunity for the project will increase greatly. So try to provide some high-quality evidence that these comments are authentic.

5 frequently show your theme to deepen the impression

Repeated keynote slogans This approach applies to situations where the interface is very long or paging. First of all, you do not want to full screen to brush the same information, this will make life boring. But when the page is long enough, the repetitions show much more natural and not crowded. There is nothing wrong with placing a button at the top of the page and then placing a prominent button at the bottom of the page. This way, when the user arrives at the bottom of the page and thinks about what to do next, the button you provide can get a potential contract or it can be filtered even if the user doesn't need your service.

6 Separating the options from the buttons

Comparisons of colors, levels, and modules these visual designs can help the user to use the product well: he always knows the current page and which pages he can go to. To convey such a good interface, you need to distinguish between clickable elements (such as links, buttons), selectable elements (such as a single-selection marquee), and plain text. In the example, I set the element of the click action to blue, and the current element of the selection is black. This appropriate design allows the user to switch between the various modules of the product. But don't design these three elements in a chaotic way.

7 give a recommendation rather than let the user choose

When it comes to displaying many services, it's a good idea to give a heavy recommendation, although the recommended settings don't fit all users. This is a theoretical basis, and some studies have revealed a phenomenon: the more choices you face, the harder it is for users to make decisions. So you can highlight an option to help the user make a choice.

8 The undo operation is given instead of the deterministic operation.

Assuming you've just clicked on a connection or button, the undo operation can make the operation smooth and natural, which is also in line with human instincts. And each time the action to play a confirmation box seems to be questioning the user you understand how this operation will have consequences. I am still more accustomed to assume that the user every time the operation is correct, in fact, only in rare cases will occur in the wrong operation. Therefore, in order to prevent misoperation and the design of the confirmation window is actually not human, the user each operation needs to make meaningless determination. So consider revoking operations in your product to increase user friendliness.

9 point out that the product is suitable for people rather than age

Do you want to make the product popular or is there a precise fit for the crowd? You need to be more precise in product positioning. By constantly understanding the needs and standards of the target customers, you can make the product better to get more opportunities to communicate with customers, and let the customer feel that you are very professional, in this respect is the exclusive provision of quality services. The risk of positioning the product precisely is that it may narrow the scope of the target potential customer and make itself less versatile. But this more professional spirit in turn will win the trust, authority.

(Tip: Like the cute little characters in the shape?) Get to know Micropersonas.)

10 try to be decisive and not submissive.

You can express your meaning through an indeterminate and trembling voice, and you can express it in a confident way, of course. If your expressions in the interface end with question marks, such as "Maybe", "probably", "interested?" "or" want to try? "Then you can still get a firmer tone." However, there is no absolute, perhaps the appropriate relaxation of the wording so that users have the room for self-thinking is also possible.

11 A sharp contrast between the interfaces 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 slogan eye-catching. Highlighted by contrasting shades of light and shade. Xian the theme by adding effects such as shadow gradients to the elements to give the interface a layered feel. Finally, you can even select a complementary color (such as yellow and purple) on the Hue ring to design your interface to achieve the goal of highlighting the center of gravity. By combining all of this, the resulting interface will make your main intentions clearly distinguishable from other elements of the interface and be presented in a perfect presentation.

12 specified Origin

Identify your region, the services provided, where the product comes from, and also the communication with the customer to introduce a more specific scene with regional characteristics. Point out where the specific comes from, the country, the province and the city, is also a self-introduction or product display is often mentioned. When you do this in the interface design, it makes people feel very friendly. Also indicates that the area will be invisible to improve the reputation of the product, Paula:.

13 streamlining form content

Life is lazy, in filling out the form is the same truth, no one is willing to fill out a lot of form fields. Each field in the form has the risk of losing the user. Not everyone is quick to type, and typing on a mobile device can be a lot of trouble. Ask yourself if each field is required in your form, and then try to reduce the fields in the form. If you really need a lot of information for users to fill out, try to spread them across different pages and continue to add them after the form has been submitted. Too many fields can easily make the entire form appear bloated, but it is easy to be concise and to put fewer digits.

14 exposure option and do not hide the action

Any drop-down box you use will cause the user to hide the information and require additional action to display it. If this information is necessary throughout the operation, then you'd better show it and do it more clearly. Drop-down boxes are best used in selected dates, provinces and other conventional places. It is best not to make a drop-down form for important options in your program.

15 It's better to make the interface more connected than a straightforward layout.

A bland wording will undoubtedly make users lose interest and continue to read. Yes, a single-column scrolling long page is good, but we should set up some sections appropriately, and be interlocking to increase the interest of the user to keep reading. However, it is important to note that the white space between sections and sections is not too large.

16 Don't put too many links to distract users

In order to meet the needs of a variety of users, it is common practice to put some link links here on the page to link there. If your main purpose is to let users click on the last page of the download button, you need to think twice. Because the user may have clicked on another link to leave the page. So you need to be aware of the number of links in the page, preferably to be used for navigation and the link used for the operation is separated from the style area. Trying to remove unwanted links from the page will let the user click on your function button.

17 present the State or progress of the operation

Today, most of the interface has shown a variety of styles of progress bars or icons indicating the status, such as the message has been read or unread status, e-bill payment or unpaid status. It is necessary for the user to present such a state on the interface. This allows the user to know if certain operations were successful and what to do next.

18 do not let users feel that they are completing the task

Imagine that 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 make you feel profitable, and "sign up" reminds you of a form that you can't fill out. This means that the button that makes the user feel profitable is more likely to be clicked. This text message that makes the user feel good can also be placed next to the button, not necessarily as the caption of the button. Of course, the normal button is still useful, usually for repetitive operations frequently place.

19 make the operation intuitive instead of being unable to find context

Needless to say, working directly on elements is a more intuitive and straightforward way. For example, in a list, we want the user to manipulate each entry so that the button is placed on the current item instead of being placed outside the list. Another example is to click on the element directly into the editing state (such as the page's address information can be edited after the click). This method is more convenient than the traditional selection and then clicking on the corresponding button to operate. Of course, there is no need for the general operation itself to have any context, there is no need to do so, such as the progress on the page, the reverse button.

20 try to display all content without additional pages

It is better to give the form directly on a widescreen screen that is large enough, which is much better than clicking the button and then ejecting the form. The first step is to reduce the clicks, and the process becomes concise and time-saving. Second, the direct presentation of the form can let the user know how long the form, in fact, is also telling users to register to spend not much time. Of course, this rule is suitable for a very simple case of registering a form.

21 Let the interface smooth display instead of rigidly rendered

During the operation of the user, the elements on the interface will often appear, hide, open, close, zoom out and shift. To add some natural animation to these elements, the fade effect is not only beautiful, but also more in line with the actual, the original element size position change is a need for time animation process. But be careful not to set the animation time too long, that will make the user want to complete the operation as soon as possible impatient.

22 progressive booting instead of directly registering your users

Instead of letting users register right away, why not let the user do some experiential work first. This experience process can show the function of the program, features and so on. Once the user understands the value of the program through a few simple steps, it is more likely to fill out the registration form. This kind of gradual guidance can postpone the user registration time as far as possible, but also can let the user do not register the situation to personalize to set up and so on simple operation.

23 Too many borders will make the interface fragmented

Too many borders are distracting. Needless to say, borders do play a big role in partitioning areas, but at the same time their obvious lines attract the attention of the user. In order to achieve the purpose of dividing the sections without diverting the attention of the user, the elements of different areas on the interface can be grouped by whitespace, using different background colors, unifying the text alignment, and setting different styles for different regions. When using WYSIWYG interface design tools, we often easily drag out a lot of chunks on the interface, and these chunks will appear cluttered. So we're going to put some lines around. A better way to do this is to align the blocks vertically so that the unwanted lines do not disturb the vision.

24 demonstrate the benefits of the product without listing the product features

The market is like this, users are always concerned about their own interests and product characteristics for them is not so important. Only the benefits are more intuitive to reflect the value of the use of the product. Chris Guillebeau, in his book "$ 100", points out that people care more about love, money, identity and free time than in the future of stress, conflict, annoyance and the unknown. So I believe that it is necessary to return to the benefits when displaying the features of the product.

25 Consideration of zero data

The interface often needs to present different amounts of data, from 0,1,10,100 to 10000+. There is a common problem here: How to display the interface before the 0 data that is used at the beginning of the program is over to the data. This is where we are often overlooked. When the program initially has no data, the user sees a blank space, and the user may not know what to do. Using the initial interface without data allows the user to learn and become familiar with how to use the program to create data in the program. Perfection is always our goal, interface design is no exception.

26 The user is introduced by default

Make the interface Default user select the product you want to use, which means that if the user really needs to use it, you can click OK directly without the need for an extra click. Of course, there is another way is not to select the default service, users can manually click. The former is a better design for two reasons. One is that the user does not need an additional point of selection, very convenient, because the default settings for users need our products or services. The second is that this approach is in some way recommending products to the user, suggesting that others have chosen us. Of course, the design of the interface as the default choice of how many points of contention, a bit of forcing users to feel. If you want to be moral, you can either make the user's choice of text ambiguous, or use double negative such a less straightforward description, both ways can make users feel less strong feeling is forced to choose to use the product.

27 Interface Design is consistent, do not increase the user's learning costs

Since the launch of a series of works by Donald Norman, maintaining consistency as much as possible in the interface design has become a universally adhered guideline. Maintaining consistency in the design reduces the user's learning costs, and users do not need to learn new actions. When we click on a button, or drag and drop, we expect that the operation will be consistent across the entire program's interface, resulting in similar results. Instead we need to re-learn the outcome of a particular operation in a new context. It is possible to work in many ways to achieve a consistent interface, including color, direction, element representation, position, size, shape, etc. But before making the interface consistent, it is advisable to remember that it is appropriate to break the overall consistency. This occasional inconsistency is designed to be a big part of what you need to emphasize. So there is no absolute, we should abide by consistent design guidelines, but to break this routine properly.

28 using a more appropriate default value will reduce the operation

Proper default values and pre-populated form fields can reduce the user's workload a lot. This is a very common practice that can help users fill out forms or register information quickly, in order to save valuable time for users.

29 Follow some conventions rather than redesign them

The compliance guidelines in interface design are similar to the previous interface conformance guidelines. If we comply with some of the interface design conventions, users will be very convenient. Conversely, inconsistent and non-compliant designs can increase learning costs. With these conventions in interface design, we don't want to know that the fork in the upper right corner of the interface (in most cases) is closed by the program, or we can predict what will happen when we click a button. Of course, conventions are obsolete, and as time goes by, the same operations may be given new meanings. Keep in mind, however, that when you break these routines in the interface, you must have a clear purpose and a good starting point.

30 make users feel that they can avoid losing rather than getting

We like success, no one wants to fail. According to the reliable conclusions of psychology, people are generally more inclined to avoid losing what they have and not gain new benefits. This conclusion also applies to the design and promotion of products. Try to demonstrate that your product will help the customer to maintain his or her health, social status and so on to tell the customer that the product will bring something that he has not. Like an insurance company, is it a large amount of compensation that can be obtained after we have an accident or is it an emphasis that can help us avoid losing possessions?

31 graphical presentation with levels better than straightforward text descriptions

Hierarchical design distinguishes the important parts of the interface from the non-minor ones. To make the interface hierarchical, can be in these aspects of the fuss: alignment, spacing, color, indentation, font size, element size and so on. When all of these adjustments are applied properly, the readability of the entire interface can be improved. Compared to a very straightforward interface on the user can glance from the bottom of the design, such a clear design can also let users slow down to read slowly. This also makes the interface more distinctive. Like a trip, you can quickly reach the scenic area by high-speed rail (from the top of the page to the bottom), but you can also slow down to enjoy the scenery along the way. So the hierarchical design allows the eye to have a place to stay, rather than a blank monotonous screen.

32 will have associated functions grouped instead of disorganized

Merging individual feature items together can improve the usability of the program. People with a bit of common sense know that knives and forks, or open files and close files are put together. It is also logical to put together elements of similar function, which are in accordance with our usual cognition.

33 using inline validation messages instead of submitting and then verifying

When working on a form, it is a good idea to immediately detect if the user is filling in the required content and then give a validation message. Such errors can be corrected as soon as they occur. Conversely, checking the form after submission gives an error message that will make the user feel weak and repeat the previous work.

34 Relaxation of user input requirements

To the user input data, as far as possible to relax restrictions, including the format, the case of what. This can be a bit more user-friendly and makes the interface even friendlier. An example of a time when the user entered the phone number, the user has a lot of input methods, with parentheses, with dashes, with spaces, with area code and no area code, and so on. If you're dealing with these formatting problems in your code, it's only a matter of writing a few more lines of code, but you can reduce the workload of countless users.

35 make users feel the need to respond quickly instead of having no time concept

An appropriate sense of urgency is an effective tactic that allows users to make immediate decisions instead of waiting for the last 10 days and half a month. The important thing is that this tactic is a proven one, as it implies a shortage of resources or limited time for activities, which can be bought today, but may not be so cheap tomorrow. On the other hand, this tactic also makes users feel that they will miss a good opportunity, once again, the use of people afraid of the loss of nature. Of course, this tactic will be sniffed at by some people, think it is not upright practice. However, it is only a tactic, and it is harmless to apply it if it is to remain legitimate. So please do not create a compelling illusion on the interface for marketing purposes.

36 using Hunger Marketing

It is expensive to dilute the goods. Hunger Marketing gives the information is not much, only a few, tomorrow again, may be gone. You have to compare the wholesale and the limited edition of the things they are the price gap of how much to know. Looking back, those wholesalers or big retailers are also using hunger marketing to get better sales. But in the software industry, we often forget about hunger marketing. Because digital products can be easily copied copy, there is no shortage of cases. In fact, in the interface design, it can also be used to connect with the real resource shortage. Think about the tickets for an online seminar and think about the number of people you can service in one months, which can tell you that the user is limited.

37 Let the user choose instead of re-fill

The classic rule in this interface design is psychological, and it's easier to recognize something from a pile of things than to get someone to think about something. Identifying one thing only requires a little bit of recollection, and it can be done with some clues. In retrospect, we need to search our brains in full. Maybe that's why the choice question on the test paper is faster than the simple answer. So try to display some of the information that users have previously involved in the interface to make their choices, rather than having them do it for half a day and then filling them out.

38 make it easier to click

Like links, the form's input box and buttons, and so on, if the size is larger, it is easier to click. According to Fett's law, it takes time to click on a peripheral such as a mouse, especially if the element is small. In view of this, it is best to put your form input box, button and so on bigger point. Or you can keep the original design unchanged, just increase the element clickable area (i.e. hot zone). A typical example of this is a text link on a mobile device and a navigation menu, where the text is not necessarily large but the background is stretched, and clicks are valid across a wide range.

39 optimize page loading speed, do not let users wait too long

Speed is important. The speed of page loading and the responsiveness of the UI to operations are directly related to the user's patience to continue waiting. There is no doubt that every second of the wait will lose some users or project opportunities. A good solution, of course, is to optimize your pages and pictures. In addition, psychology can be used to make this wait time appear not so long. In particular, there are two tricks. One is to show the progress bar, and the other is to show other relevant or interesting things to attract the attention of the user (it's better to walk along the carousel than to stare at a position in the same place).

40 shortcut keys are essential in addition to buttons

When your program is widely circulated, you should consider the feelings of advanced users. People are always trying to find a quicker way to do something repetitive, and shortcut keys come into being. Compared to the point on the interface points to go, shortcut keys undoubtedly greatly improve work efficiency. A good example of this is the J (backward) K (forward) shortcut key combinations that are now prevalent 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.

Original address: Good UI http://goodui.org

And there will be updates ...

Good user interface-some tips for interface design