It's been a while since the front end , For the realization of a variety of requirements is already at ease , The quality and extensibility of the code can be controlled . What is lacking most at present is the so-called User experience .
User experience is a relatively vague concept , But it really determines whether users are happy with it . Recently, I wrote a lot of background systems , Many people think that this kind of middle and back-end system has little technical content （ Use off-the-shelf UI Frame write form ,table Do something to add, delete, modify, check ）, What I want to say is that if any product wants to do well , We must pay attention to the physical examination of users .
Another disadvantage is that most of the companies are interested in this kind of product , All lack of product and ui Resources provide strong support , So , Most of the work to improve the user experience falls to the front end .
Typical applications in the middle and back office , Most of them are additions, deletions, modifications, etc , There are the following improvements ：
Each of the most basic pages ui Components should be able to use correctly , reasonable , In the use of select Don't use input, In the use of aotucomplete Don't use selec etc. .
Add menu at the head to explain , A menu title has just a few words , Users may not know what the menu function is at first , Adding explanation can help users understand the function of the page .
Classification of operation buttons , Before that, it will generally add , Delete , modify , Export table , Search for , Search terms and so on are all put together , It's a very messy feeling , Now divide these controls into two categories （ Search criteria and search buttons , Add, delete, export, refresh, etc ）. among Add, delete, export, refresh, etc Put it in the head menu , And the following Search criteria and search buttons Distinguish .
For complex search conditions , It is divided into basic query conditions and all query conditions , The basic query criteria cover several search criteria commonly used by users , Other advanced search criteria are hidden first , adopt Show all Button to display all search criteria . This experience has a sense of hierarchy , And users don't get bored with a bunch of conditional input boxes .
For forms , If the query data is empty , Is displayed Temporarily no data ; If it's a backstage error , Is displayed Network anomalies , Please click the button to refresh , In the past, the interface error was displayed through the prompt box . There are two advantages to this , One is that if users want to try to retrieve data, they don't need to refresh the whole page , Second, the prompt box will interrupt the user's focus , It's a bad experience for users .
When the table has a large number of columns , The operation column should be fixed , Convenient for users to operate .
Menu tree on the left , When there are too many menus , Add search box , You can quickly navigate to the menu page , Convenient for users to operate .
Avoid all pages loading, Only local loading.
Encapsulating repetitive logic , such as table paging , Lots of forms, etc .
User experience optimization points in big data projects
Indicator card Add question mark icon , use tooltip Show the meaning of the indicator ; Including some copywriting on the page , What is difficult to understand can be added tooltip.
The clickable element mouse becomes a hand type .
Front end cache optimization （ The icon data that the user clicks is cached ）
Make the form as simple as possible , Complex forms can make users impatient .
Drop down box if there are fewer options , It can be used directly radio Instead of , Users can save a step of clicking on the drop-down box .
When you query the chart, you need to fill in the time interval , You can put some common time intervals for users to choose from , such as today / yesterday / Last week, / Last month, / The first three months , Avoid users having to manually select two time boxes .
The current user is pushed out of the line by other users after logging in , Choose to use Full screen prompt box + OK button Prompt the user . Such notification is of primary importance , You have to make sure that the user is aware of the important notification , The OK button is used to force the user to browse the important notice .
I said before Of table Show three states ： There's data / nothing data （no data）/ Network anomalies , Click refresh , These three are actually suitable for a lot of data presentation components , For example, chart components .
Now Internet product login is to jump directly to the registration page , Then the entry to the login page is shown below , Before, it was the reverse . The advantage of this is that it can improve the conversion rate of new users .
Split the user registration process into multiple steps , Fill in a little at a time , Can effectively improve the registration conversion rate .
For general ui Layout （ list / Forms, etc ）, If there is no data , To show a Temporarily no data A hint of , Copywriters can be customized .
For common functions , There should be a global entry , To ensure that all pages can be quickly accessed , Instead of having to go to a specific page .
Interface data cache
When presenting the data, first find out whether there is a cache , If there is a cache, use the cache directly ; No, just ask for data . The problem is how to set the expiration time of cache .
When presenting the data, first find out whether there is a cache , If there is a cache, use the cache directly , And request data while using cache , Return new data and overlay old data ; No, just ask for data .