Provantage x (Microinteraction)

ITN Networks / Product UIUX Design / 2015-Present


what is the best way to select multiple items?
no, what is the best way to select multiple items for "our users?"

This is an in-depth user interaction design case within ProVantage X. The goal of this design case is to find the ideal experience when users are selecting multiple items on our platform. The experience must be simple, intuitive and efficient.    


initial design

 


ProVantage X is a heavily data driven platform, which often requires a large amount of selections to be made by users. When I first joined the team, I realized there were some inconveniences in the multiple select dropdown UI that existed in the platform. Above image is the first Multiple Select Dropdown design that our platform had. The way it worked was that users would click on the box to open up the dropdown. Then they would select an item and click on the "Add" button. If they wanted to make multiple selections, they had to reopen the dropdown and repeat the same steps again for each additional selection made. 

At this point, users were already unhappy with the experience and we were receiving negative feedback. In order to find a solution that suited our users and our system, I first started interviewing the users. The main complaint was about how it was annoying to click on "Add" every time they wanted to select another item. I tried using it myself and it was easy to agree that their points were valid. The next step I took was talking to the veterans of the industry. While they didn't know much about UX design, they had great insights as they have been using many similar tools and knew the process of the industry in and out. The key points I got out of them were that it is not only important to make the selections easily, but it was just as important to easily view the list of selections made and edit them quickly. 

 
3 key points for multi select experience.jpg
 
key point 1.jpg

1. Minimal Actions to Select   The initial design required users to click on the "Add" button for each and every item, which made the user take a lot of unnecessary actions. The new design should easily be able to select multiple items with less effort. 

key point 2.jpg

2. Clear View of Selected List   Once the selections are made, the user should be able to review them in a single list that does not require the user to go back and forth different screens.   

Goal 3.jpg

3. Easy to Edit the Selections   Whenever the user feels the need to make a change to the list, it should require minimum effort from the user to add and delete selections. 

 

first redesign

 

So the first redesigned Multi Select Dropdown got rid of the "Add" button. Users would open the dropdown and click on all the items they want to select and they would all be added to the list. A checkbox was added on the side to let the users know what is selected and what is not while they were in the middle of the process. The Green Pills were kept from the previous design because it was a nice way to view the list of selections even when the dropdown is closed after the selections were made. The "X" on each pill was also kept as it was a quick way to delete the item from the list. Obviously the user could always open up the dropdown and uncheck the items as well. Another big change, which was actually something that should have been there from the beginning was the "Select All" option. Regardless of the scrolling, this option was always kept at the top, due to its frequent use. 

As we deployed these changes into the system, we immediately knew we missed one feature that could have helped the users tremendously. So we went right back to the design and added a search feature which would be activated when the dropdown is open. With the improved interaction, plus the search feature, our users were very satisfied with the experience. This Multi Select Dropdown was used for about a year until we ran into new issues.  

 

NEw updates = new issues

 

Originally this product started out as a platform targeting local markets and stations. Once the first version was released, it received great attention from not only local markets but also national market suppliers. This was obviously great news and we started preparing for version 2.0 with upgrades that would suit our new target user group, the national market. Within this process there was an issue that appeared. For version 1, most of the multi selections made were a relatively small number. On average 4-5 items were selected, and it was rare that the selections would go over 10. However as we updated the system to account for the national market, there were numerous cases where users had to make hundreds of selections. Soon the real estate of the pills were becoming a major problem. 

 
 

Now I entered the second redesign phase, and my first priority was to solve the real estate problem with pills. After trying out various options, I started developing a design that allowed pills to be displayed up to a certain number only. Once it surpasses the specific number, a special pill would be created, which the users can click on. When this pill is clicked on, it opens up a standard size scrollable container that displays all the pills. 

 
 

When I presented the new design, at a weekly UI meeting, one developer disagreed with my approach and suggested the above design. In this design, when the users make selections, the items are listed in the search box and a chip on the right indicates the number of selections. While I did like the visual aspects of this design, I had to disagree with it for one main reasons. There was no method for the users to easily view the full list of selections. The space for the list was too limited and would only fit in 2-3 items in most cases. As this was one of our main criteria, I could not let the design pass. However I did like the fact that it contained all the action within the dropdown itself. My previous design did decrease the amount of changes in real estate but it still had 2-3 variations, which was not ideal. I believed that if I could contain everything inside the dropdown, it would help the UI stay in the most organized fashion. 

 
 

So this lead me to my next design. I started out with the approach that was suggested, but added a key feature where a list of selections made appears above the available options list. This could seem like a small change but it had great impact on the feedback we got from our user testing sessions. 

 
 

As I continued to work on the design, there was one more area left for debates. When the users made a selection, the selection could be copied to the new list or moved to the new list. At first thought, it seemed like it would be better to move them into the new list, and some of the team members voted for that approach. However after simulating the experience in various cases, I realized that moving the options would mean that the option selected would be immediately disappearing from the users view if the list was long and scrolled down. I pointed this out while convincing the team towards the copying approach. 

Currently we have come to agreement with this new design and copy approach. However, I know this is not the final design, since I believe there is no such thing as a final design. The product will continuously evolve and the users might need new experiences. We will see how this goes, and if our users ever feel like the experience is not working, I am always ready to get back to the design board.