DevUI has recently released version 11.1.0, which adds two new members to the DevUI component family:
- One is CategorySearch, the CategorySearch component
- The other is the ReadTip reading prompt component
Both of these components are very useful, and the DevCloud development toolchain is already in use by businesses. Let’s look at the feedback from real businesses using the CategorySearch component for the ProjectMan project management business.
The ProjectMan service recently plugged into the CategorySearch category filter component of the DevUI component library.
Initial experience, search, filtering experience than before to improve a lot.
Defects of the old filter
The previous search and filter feature had the following disadvantages.
Disadvantage 1: The search and filter functions are separated
Mainly reflected in:
- The search box and search criteria are displayed separately
- The search box is separated from the field filtering function
As shown in the figure below:
Flaw 2: Advanced filtering interaction is too complex and inefficient
The previous filter feature had a separate entry, after the display field
Clicking the filter button opens up a very high filter panel that takes up space in the body content (the list of work items).
Second filter panel to do not take up too much space as possible, hide part of the field, and then designed a “increase filtration field” function, let the users themselves as needed to add, from logic is reasonable, but from experience is bad, increases the user’s learning cost, and reduce the efficiency of the operation.
Such as:
To filter work items updated in the last three days by update date, perform the following operations:
- Click the Filter button to expand the filter panel
- Click the add filter field button and open the field selection mode box
- Check the update date field
- Click ok
- Click the Update date drop-down box to bring up the date selection panel
- Select a start/end date
- Click ok
- I’m gonna hit Temporary Filter
After replacing with the new classification filter component, the above filtering requirements can be completed in only 5 steps, improving the operation efficiency.
Suppose the date above needs to be changed and the user wants to filter work items from the last seven days. The old filter takes 6 steps and the new filter only takes 4 steps.
Defect 3: poor interactive scalability
Once the filter field is added, the old filter cannot be expanded and will continue to take up space in the body content until the screen is full of filter criteria and no body content.
Integration, efficiency and scalability
The flaws of the old filter are also pain points for users, and these are the pain points that the new filter is designed to address.
Optimization a: integration of search, filtering, filtering conditions of the display of three functions
The new filter integrates search, filter, and display of filter criteria with a single input box. It is very refreshing to look at, simple usually means that the user’s learning cost is low, easy to use, users will like to use, often use.
And because the filter conditions are displayed in the input box, the interaction is expanded. No matter how many fields are filtered, one input box does everything.
As shown in the figure below:
Optimization 2: Receiving filter fields
If it is simple but has fewer functions, it will definitely not work. The new classification filter retains all the functions of the old filter, and simplifies the interaction, improving the operation efficiency and user experience.
The new filter removes the crappy design of adding new filter fields and puts all filter criteria into a drop-down box that pops up when you click on the input box.
As shown in the figure below:
After selecting the filter field, a drop-down box will pop up to select the filter value. This interactive experience is very natural and smooth, which is the main reason WHY I like this filter.
In addition to being smooth and in line with expectations, the operation path is shortened and the operation efficiency is improved: operations that used to take eight steps now take five.
Optimization 3: Modify filter conditions more efficiently
Due to the bad design of the filter panel, the filter panel had to be reopened every time the filter conditions were modified, which was very troublesome.
The new filter can be modified directly by clicking the filter condition option and expanding the filter value drop-down box, which is very efficient.
The following is the address of CategorySearch component, welcome to try and feedback:
Devui. Design/components /…