It is said that , Code farmer without product thinking is not a good programmer . After some time of front-end project development , In addition to the necessary business functions that must be implemented , It's time to start thinking about adding value to the development system , Improving the user experience can be said to be the greatest added value . Of course , It's best to prioritize customer experience from the start of a development project .
Single column layout enables better control over the whole situation . At the same time, users can see the content at a glance . Multiple columns can be a distraction , Make your main idea difficult to express . The best way is to use a logical narrative to guide the user , And at the end of the article, give your operation button .
It would be nice to give users a nice little gift . In particular , Giving gifts is also an effective strategy to gain customer loyalty , It's based on the principle of reciprocity . And the benefits are obvious , It will make you progress in the future activities （ Whether it's marketing , Product update or another activity ） More smooth .
During the whole product development process, we will intentionally or unintentionally create many modules , Layout or element , And some of their functions may overlap . This indicates that the interface has been over designed . Always be alert to these redundant functional modules , It's useless and reduces computer performance . Besides , More modules on the interface , The higher the learning cost for users . So consider refactoring your interface to make it simple enough .
Customer's praise is a very effective way to obtain project opportunities or improve project conversion rate . When a potential customer sees someone else giving you a good opinion of your service , Project opportunities will increase greatly . So try to provide some high-quality evidence to prove that the praise is authentic .
Repeat the main slogan many times. This method is applicable to the case of long interface or paging . First of all, you don't want to flash the same information all over the screen , It's annoying . But when the page is long enough, the repetitions are much more natural and less crowded . There is nothing wrong with putting a button at the top of the page and then a prominent button at the bottom of the page . So when the user reaches the bottom of the page and thinks about what to do next , The button you provide can get a potential contract, or it can filter even if the user doesn't need your service .
Such as color , Comparison between layers and modules these visual designs can help users use the product very well ： He always knows where he is and what pages he can go to . To convey such a good interface , You need to add clickable elements （ For example, connection. , Button ）, Optional elements （ For example, single selection and multi selection box ） As well as ordinary characters . In the example below , I set the click action element to blue , The current element selected is black . In this way, users can switch between different modules of the product . But don't confuse these three elements .
When displaying many services , It's a good idea to give a heavy recommendation , Although the recommended settings cannot satisfy all users . There is a theoretical basis for this , Some studies have revealed such a phenomenon ： When there are more choices , The harder it is for users to make decisions . So you can highlight an option to help the user make a choice .
Suppose you just clicked a link or a button , Undo operation can make the operation smooth and natural , It's also in line with human instinct . And each time you play a confirmation box, it's like asking the user you don't understand the consequences of this operation . I'm still more used to assuming that the user is right every time , In fact, only in a few cases can misoperation occur . therefore , The confirmation window designed to prevent misoperation is actually inhumane , Users need to make meaningless decisions every time they operate . So consider implementing undo operations in your product to increase user friendliness .
Do you want to make the product popular or have a precise applicable population ？ You need to be more precise in product positioning . Through continuous understanding of the needs and standards of the target customers , You can make the product better and get more opportunities to communicate with customers , And make customers think you're professional , In this respect, it is an exclusive high-quality service . The risk of positioning the product precisely is that it may narrow the scope of the target potential customers , And make yourself less omnipotent . But this more professional spirit, in turn, wins trust , authority .
（ Tips ： Do you like the cute little figure in the picture below ？ To understand MicroPersonas Well ）
You can express yourself through uncertain and trembling voice , It can also be expressed in a confident way . If your expressions in the interface often end with a question mark , such as " Maybe ",“ Probably ”,“ Interested in ？” perhaps " Do you want to try ？", Then you can make your tone stronger . But nothing is absolute , Maybe it's OK to relax the wording properly so that users can think for themselves .
It will be much better to highlight the main functional areas from the interface . There are many ways to make your main slogan stand out . Highlight by contrast of light and shade . Display the theme by adding shadow gradient and other effects to the element to make the interface feel layered . Last , You can even choose complementary colors on the hue ring （ Like yellow and purple ） To design your interface , In order to achieve the purpose of highlighting the center of gravity . All of these , The resulting interface will clearly differentiate your main intention from other elements of the interface , Get the perfect presentation .
Indicate your area , Services provided , Where products come from is of great significance , At the same time, it introduces the communication with customers into a more specific scene with regional characteristics . Point out where it comes from , Country , Province and city , It's also often mentioned in self introduction or product presentation . When you do that in interface design , It's very friendly . At the same time, specifying the region will also improve the reputation of the product invisibly , All right, well done. .
Life is lazy , The same is true when filling out forms , No one wants to fill out a bunch of form fields . Every field in the form is at risk of losing users . Not everyone can type very fast , And input on the mobile device is a very troublesome thing . Ask yourself if every field in your form is required , Then minimize the fields in the form . If you really need a lot of information for users to fill in , Try to spread them across different pages , You can continue to supplement after the form is submitted . Too many fields can easily make the whole form appear bloated , Of course, it's easy to be concise , Put only a few fields .
Any drop-down box you use will hide the user's information and require additional operations to display it . If this information is necessary throughout the operation , Then you'd better show it and make it more obvious . The drop-down box is best used to select a date , Provinces and other conventional places . For the important options in the program, it is better not to make the drop-down form .
A plain writing will undoubtedly make users lose interest and continue to read . Yes , It's good to scroll a long page in a single column , But we should set some sections appropriately , And it's connected , To increase users' interest and keep them reading . But it should be noted that the space between sections should not be too large .
In order to meet the needs of various users , It's a common practice to put links here and there on the page . If your main goal is to let users click the download button at the end of the page , You need to think twice . Because the user may have clicked another link and left the page . So you need to pay attention to the number of links on the page , It is best to distinguish the style used for navigation from that used for operation . Try to remove unnecessary links from the page, which will let users click on your function button .
At present, most of the interfaces have shown various progress bars or icons indicating status , For example, the mail has read or unread status , Electronic bill has paid or unpaid status . It is necessary for users to present such a state on the interface . In this way, the user can know whether some operations are successful or not , What to do next .
Imagine that there are two buttons on the interface ： One is " Get discount ", The other is " Register now ". I bet most people will click on the first one , Because the second button doesn't feel profitable , also " register " Reminiscent of endless forms . That is to say, the button that makes users feel profit is more likely to be clicked . This kind of text message that makes users feel good can also be placed next to the button , It doesn't have to be the title of the button . Of course , Normal buttons are still useful , Generally used in places with frequent repetitive operations .
Needless to say, it's a more intuitive way to operate directly on elements . Like in a list , If we want users to operate on each item, put the button on the current item , Don't leave it out of the list . Another example is to click the element directly and enter the editing state （ For example, the address information on the page can be edited after clicking ）. This method is much simpler and more convenient than the traditional way of selecting and clicking the corresponding button for operation . Of course , There's no context for general operations , There's no need to do that , Like moving forward on the page , Back button .
It's better to give the form directly on a wide enough screen , It's a lot better than clicking a button and then popping up a form . First of all, click operation is reduced , Process simplification and time saving . secondly , Presenting the form directly lets users know how long the form is , In fact, it's also telling users that it won't take much time to register . Of course , This rule is suitable for the very simple case of registration form .
During user operation , Elements on the interface often appear , hide , open , close , To enlarge, shrink, shift, etc . Add some natural animation to these elements , Fade in and fade out effect is not only beautiful , It's more practical , Originally, the change of element size and position is an animation process that needs time . But pay attention not to set too long animation time , It will make users impatient to finish the operation as soon as possible .
Instead of letting users register right away , Why not let the user do some experiential operations first . This experience can show the function of the program , Characteristics, etc. . Once the user understands the value of the program through a few simple steps , Then it will be more willing to fill in the registration form . This step-by-step guidance can delay the time of user registration as much as possible, but it can also allow users to perform simple operations such as personalization without registration .
Too many borders make a noise . Needless to say , The border really plays an important role in the layout setting of the partition area , But at the same time, its obvious lines will also attract the attention of users . In order to achieve the purpose of partition without diverting users' attention , In typesetting, elements in different areas of the interface can be grouped by whitespace , Use different background colors , Unify text alignment , The other is to set different styles for different regions . When using WYSIWYG interface design tools , We often drag many blocks on the interface conveniently , If there are more blocks, they will be disordered . So we're going to put some horizontal lines all over the place . A better approach is to align blocks vertically , It doesn't let the extra lines disturb the vision .
That's what the market is like , Users always care about their own interests, but product features are not so important to them . Only benefits can more directly reflect the value of using products .Chris Guillebeau In his book 《100 Dollar starts 》 Pointed out in , Comparative pressure , Conflict , Worries and the unknown future , People care more about love , money , Identity and free time . So I believe it's necessary to return to benefits when displaying product features .
The interface often needs to present different amounts of data , from 0,1,10,100 To 10000+ etc. . The common problem here is ： At the beginning of the program 0 Data before data , How to display the interface . That's what we often overlook . When the program initially has no data , What users see is a blank , At this time, the user may not know what to do . Using the initial interface without data can let users learn and be familiar with how to use the program , Creating data in a program . Striving for perfection is always our goal , Interface design is no exception .
Make the interface the default user. Select the product you want to use , Which means if the user really needs to use , Then you can click OK directly without additional clicking . Of course , Another way is to uncheck the service by default , You can click and select manually if you need . There are two reasons why the former design is better . First, users don't need to click extra , Very economical , Because the default setting is that users need our products or services . Second, to some extent, this approach is to recommend products to users , It suggests that everyone else chose us . Of course , It's controversial to design the interface as the default choice , It's kind of forced . If you want to be moral , You can either make the user's choice ambiguous , Or use double negation, a less straightforward description , Both of these ways can make users feel that they are forced to use the product when they are not so strong .
since Donald Norman After a series of works of , Consistency in interface design has become a general rule . Consistency in design reduces user learning costs , Users do not need to learn new operations . When we click the button , Or drag , We expect such operations to be consistent across all interfaces of the program , We'll get similar results . On the contrary, we need to relearn what kind of operation will produce in the new situation . There are many ways to achieve a consistent interface , Including color , Direction , Representation of elements , Location , size , Shape, etc. . But before making the interface consistent , Remember a little , It is also advisable to break the overall consistency properly . This occasionally inconsistent design can be very useful where you need to emphasize it . So there is no absoluteness in the world , We should follow consistent design criteria , But break the routine properly .
Appropriate default values and pre populated form fields can greatly reduce user workload . Save users precious time , It's a very common practice , It can help users fill in forms or registration information quickly .
The rules of compliance in interface design are very similar to the previous ones . If we follow some conventions in interface design , It will be very convenient for users . contrary , Inconsistent and noncompliant design increases learning costs . With these conventions in interface design , We don't even need to think about it to know the upper right corner of the interface （ Most of the time ） The fork of is used to close the program , Or click a button and we can predict what will happen . Of course , The agreement will be out of date , as time goes on , The same operation may be given a new meaning . But remember, , When you break these conventions in the interface, make sure you have a clear purpose , And the starting point is good .
We like success , No one wants to fail . Reliable conclusions from psychology , People tend to avoid losing what they have rather than gaining new benefits . This conclusion is also applicable to product design and promotion . Try to explain that your product will help the customer to protect his interests , To keep healthy , Social status is better than telling the customer that the product will bring something he didn't have . Like insurance companies , Is it to sell the large amount of compensation we can get after the accident, or is it to emphasize that it can help us avoid losing the property we own ？
Hierarchical design can distinguish the important parts of the interface from the unimportant parts . Make the interface clear , You can write about these things ： Alignment mode , spacing , Color , Indent , font size , Element size, etc . When all these adjustments are in place , It can improve the readability of the whole interface . Compared with a very straightforward interface, the user can glance at the design from top to bottom at a glance , This clear-cut design can also let users slow down to read slowly . This also makes the interface more distinctive . It's like a trip , You can take the high-speed rail to get to the scenic spot quickly （ From top to bottom of page ）, But you can also slow down to enjoy the scenery along the way . So the layered design gives the eye a place to stay , Instead of facing a blank and monotonous screen .
Grouping and merging features together improves program availability . People with a bit of common sense know about knives and forks , Or open and close files are put together . It's also logical to put elements with similar functions together , In line with our usual cognition .
When processing forms , It is better to detect whether the content filled in by the user meets the requirements immediately and then give a verification message . In this way, mistakes can be corrected as soon as they appear . contrary , Checking the form after submission will give an error message , It will make users feel weak and repeat the previous work .
Data input to users , Try to relax the restrictions , Including format , Case or something . It's a little more human , It also makes the interface more friendly . A perfect example is when a user enters a phone number , There are many ways for users to enter , Parentheses , Dashed , Spaces , With and without area codes, etc . If you deal with these formats in your code , The price is just that you write more lines of code by yourself , But it can reduce the workload of countless users .
The right sense of urgency is an effective tactic that allows users to make immediate decisions rather than wait ten and a half days . What's important is that this tactic has been tried and tested , Because it implies a shortage of resources or a limited time for activities , You can buy it today , But tomorrow may not be so low . On the other hand , This tactic also makes users feel that they will miss a great opportunity , Once again, , Applied the nature that people are afraid of losing . Of course , This kind of tactics will be sneered at by some people , Think it's not straightforward . however , It's just a tactic , And it doesn't hurt to use it on the premise of maintaining legitimacy . So please don't create the illusion of urgency on the interface for the sake of marketing .
Rare things are precious . The message of hunger marketing is that there's not much , There are only a few pieces left. , Come back tomorrow , Probably not. . You can compare the price difference between wholesale and limited edition products . Looking back , Those wholesalers or big retailers , They also use hunger marketing , For better sales . But in the software industry , We often forget about hunger marketing . Because digital products can be copied easily , No shortage . Actually , In interface design , It can also be used to connect with the shortage of resources in reality . Think about tickets to an online seminar , Think about the number of people you can serve in a month , All of these information can inform users that it is limited .
The classic rules in this interface design are based on psychology , It's better to remind someone of something , It's easier to recognize something from a pile . To recognize something, we just need to remember it a little bit , It can be done by some clues . And recollection requires us to search our brains completely . Maybe that's why the multiple choice questions on the test paper are faster than the short answer questions . So try to show some information about the user in the interface and let them choose , Instead of letting them think for half a day and fill it out by themselves .
Like links , There are buttons in the input box of the form , If the size is bigger, it's easier to click . According to Fett's law , Using peripherals like the mouse to click takes some time , Especially when the elements are relatively small , More time . In view of this , It's better to put your form in the input box , Make the buttons bigger . Or you can keep the original design unchanged , Just put the clickable area of the element （ That's the hot spot ） increase . A typical example of this is text links and navigation menus on mobile devices , They don't have to be big, but the background is stretched , It works on a wide range of clicks .
Speed matters . Page load speed and UI The response speed to the operation is directly related to whether the user has patience to continue to wait . There is no doubt that every second of waiting will lose some users or project opportunities . A good solution, of course, is to optimize your pages and images . In addition, we can use psychology to make the waiting time seem less long . Specifically, there are two skills . First, display the progress bar , Second, display other relevant or interesting things to attract users' attention （ It's like it's better for you to walk along the transmission than to stand and stare at a place ）.
When your program is popular , We should consider the feelings of advanced users . People always try to find a faster way for repetitive operations , The shortcut key came into being . Compared to the interface , No doubt the shortcut key greatly improves the working efficiency . A good example is the one that is popular in all mainstream programs J（ back off ）K（ Forward ） Shortcut key combination , For example Gmail,Twitter and Tumblr in . Button is good , But hotkeys add to the mix .