Vue advanced (12:24): front end user experience improvement (1)

No Silver Bullet 2020-11-13 07:29:14
vue advanced end user experience


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 .

1 Try to use single column layout instead of multi column layout

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 .
 Insert picture description here

2 Giving out gifts is often more attractive

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 .
 Insert picture description here

3 Merge repetitive functions to make the interface simple

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 .
 Insert picture description here

4 Customers' evaluation is better than boasting

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 .
 Insert picture description here

5 Show your theme frequently to impress

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 .
 Insert picture description here

6 Distinguish options from buttons

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 .
 Insert picture description here

7 Give recommendations instead of letting users choose

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 .
 Insert picture description here

8 Give undo action instead of confirm action

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 .
 Insert picture description here

9 Point out that the product is suitable for the population rather than the whole age

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 )
 Insert picture description here

10 Try to be direct and decisive rather than submissive

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 .
 Insert picture description here

11 There should be a sharp contrast in the interface, which is easy to distinguish

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 .
 Insert picture description here

12 Designated producing area

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. .
 Insert picture description here

13 Streamline form content

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 .
 Insert picture description here

14 Expose options without hiding actions

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 .

 Insert picture description here

15 It's better to make the interface coherent than to make it plain

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 .
 Insert picture description here

16 Don't let too many links distract users

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 .
 Insert picture description here

17 Present the status or progress of an operation

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 .
 Insert picture description here

18 Don't make users feel like they're completing tasks

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 .
 Insert picture description here

19 Make the operation intuitive instead of making people feel like they can't find the context

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 .
 Insert picture description here

20 Try to show everything without extra pages

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 .
 Insert picture description here

21 Make the interface smooth instead of rigid

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 .

 Insert picture description here

22 Step by step guidance rather than direct user registration

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 .

 Insert picture description here

23 Too many borders will split the interface

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 .

 Insert picture description here

24 Show the benefits of the product without listing the features

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 .

 Insert picture description here

25 Consider zero data

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 .

 Insert picture description here

26 Bring in users by default

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 .

 Insert picture description here

27 Consistent interface design , Do not increase the learning cost of users

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 .

 Insert picture description here

28 Using the more appropriate default values reduces the operation

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 .

 Insert picture description here

29 Follow some conventions instead of redesigning

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 .

 Insert picture description here

30 Let users feel that they can avoid loss rather than gain

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 ?

 Insert picture description here

31 Hierarchical graphic display is better than straightforward text description

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 .

 Insert picture description here

32 Group related functions instead of clutter

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 .

 Insert picture description here

33 Use inline validation messages instead of post commit validation

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 .

 Insert picture description here

34 Relax the requirements for user input

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 .

 Insert picture description here

35 Make users feel that they need to respond quickly rather than have no idea of time

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 .

 Insert picture description here

36 Using hunger 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 .

 Insert picture description here

37 Let users choose instead of filling in again

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 .

 Insert picture description here

38 Make it easier to click

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 .

 Insert picture description here

39 Optimize page loading speed , Don't let users wait too long

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 ).

 Insert picture description here

40 Except for the buttons , Shortcut keys are also essential

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 .
 Insert picture description here

本文为[No Silver Bullet]所创,转载请带上原文链接,感谢

  1. [front end -- JavaScript] knowledge point (IV) -- memory leakage in the project (I)
  2. This mechanism in JS
  3. Vue 3.0 source code learning 1 --- rendering process of components
  4. Learning the realization of canvas and simple drawing
  5. gin里获取http请求过来的参数
  6. vue3的新特性
  7. Get the parameters from HTTP request in gin
  8. New features of vue3
  9. vue-cli 引入腾讯地图(最新 api,rocketmq原理面试
  10. Vue 学习笔记(3,免费Java高级工程师学习资源
  11. Vue 学习笔记(2,Java编程视频教程
  12. Vue cli introduces Tencent maps (the latest API, rocketmq)
  13. Vue learning notes (3, free Java senior engineer learning resources)
  14. Vue learning notes (2, Java programming video tutorial)
  15. 【Vue】—props属性
  16. 【Vue】—创建组件
  17. [Vue] - props attribute
  18. [Vue] - create component
  19. 浅谈vue响应式原理及发布订阅模式和观察者模式
  20. On Vue responsive principle, publish subscribe mode and observer mode
  21. 浅谈vue响应式原理及发布订阅模式和观察者模式
  22. On Vue responsive principle, publish subscribe mode and observer mode
  23. Xiaobai can understand it. It only takes 4 steps to solve the problem of Vue keep alive cache component
  24. Publish, subscribe and observer of design patterns
  25. Summary of common content added in ES6 + (II)
  26. No.8 Vue element admin learning (III) vuex learning and login method analysis
  27. Write a mini webpack project construction tool
  28. Shopping cart (front-end static page preparation)
  29. Introduction to the fluent platform
  30. Webpack5 cache
  31. The difference between drop-down box select option and datalist
  32. CSS review (III)
  33. Node.js学习笔记【七】
  34. Node.js learning notes [VII]
  35. Vue Router根据后台数据加载不同的组件(思考->实现->不止于实现)
  36. Vue router loads different components according to background data (thinking - & gt; Implementation - & gt; (more than implementation)
  37. 【JQuery框架,Java编程教程视频下载
  38. [jQuery framework, Java programming tutorial video download
  39. Vue Router根据后台数据加载不同的组件(思考->实现->不止于实现)
  40. Vue router loads different components according to background data (thinking - & gt; Implementation - & gt; (more than implementation)
  41. 【Vue,阿里P8大佬亲自教你
  42. 【Vue基础知识总结 5,字节跳动算法工程师面试经验
  43. [Vue, Ali P8 teaches you personally
  44. [Vue basic knowledge summary 5. Interview experience of byte beating Algorithm Engineer
  45. 【问题记录】- 谷歌浏览器 Html生成PDF
  46. [problem record] - PDF generated by Google browser HTML
  47. 【问题记录】- 谷歌浏览器 Html生成PDF
  48. [problem record] - PDF generated by Google browser HTML
  49. 【JavaScript】查漏补缺 —数组中reduce()方法
  50. [JavaScript] leak checking and defect filling - reduce() method in array
  51. 【重识 HTML (3),350道Java面试真题分享
  52. 【重识 HTML (2),Java并发编程必会的多线程你竟然还不会
  53. 【重识 HTML (1),二本Java小菜鸟4面字节跳动被秒成渣渣
  54. [re recognize HTML (3) and share 350 real Java interview questions
  55. [re recognize HTML (2). Multithreading is a must for Java Concurrent Programming. How dare you not
  56. [re recognize HTML (1), two Java rookies' 4-sided bytes beat and become slag in seconds
  57. 【重识 HTML ,nginx面试题阿里
  58. 【重识 HTML (4),ELK原来这么简单
  59. [re recognize HTML, nginx interview questions]
  60. [re recognize HTML (4). Elk is so simple