Develop a progressive location filter

Each interaction we create helps to identify and direct the user experience. The best option would be to develop something intuitive before creating an aesthetically pleasing interface. “Why reinvent the wheel” if you already have everything ready in various templates ?! ”, you ask.

A simple-looking element can end up harming the user interface. Therefore, the best projects sometimes require us to reinvent the wheel.

The following example will help you understand what is at stake
uberVU  is a socially-oriented, media-analytical platform that collects a huge amount of data for its users.



One of the main features of uberVU is the display of social media data (social networks, blogs, forums, questions and answers, etc.) in such a way as to be able to filter them by basic criteria: platform, gender, mood and location (highlighted in figure below).



The location filter is great as an example for us. We read Christian Holst's article “ Redesigning the Country Selection Menu, ” which contains excellent suggestions for improving the design of this element, but does not solve all our problems to the end.

Selecting a location in uberVU requires progressive filtering. In other words, after the user has selected a country (the task is already on its own), he also needs the opportunity to choose a state or region, region, city, etc., in these states. With so many options, we need to focus on the most important filtering options. But this is not enough - the filter should work so that users can take a step back while viewing filter options, similar to how the navigation on the site itself works.

I hope the development tasks are clear. Next, we show an elegant way to solve them.

Task 1: Instant Options

What if the user knows the exact location? Easy. It is solved by adding auto-substitution. After the user enters 3 characters, options appear.



This model always works fine, except when the query returns several similar results. If this happens, the user himself can solve this ambiguity by clicking on the desired option. Not an optimal solution. Say a user wants to filter out London, UK. He enters "Lond", and we correctly guessed - London ... But what kind of London does the user need? Obviously, London in the UK comes to mind for everyone who is not from Canada. You may be surprised to know that London is in Ontario, Canada. That is, we must offer at least 2 options:

1. London, Great Britain;
2. London, Ontario, Canada.

As you can see in the screenshot, there are much more London in the world than it seems initially. Showing options from the most popular to the least will make everything much easier for the user.

Objective 2: Promote Research

We complicate our development. While some users know exactly what they want, others want to be able to learn data from social media. For example, a person monitors the launch of a certain product and he is curious where people discuss this product. Would it be great if he could do research for himself?



Our solution involves a tree structure in the selection of filters. So that everything was not so scary (after all, we track thousands of places, in the end), we decided to first show a list of continents. After that, we show only those places that contain the necessary data (mentions in social media) for the current user. Thus, the entire tree has only important values ​​at each point. To dive deeper, users click on the arrow next to each place. As you dive deeper, each option expands to display its subcategories:



The only drawback of this method is that you add extra scroll. When users hover over this area, they will scroll through the filter, and when the mouse pointer is somewhere else, they will scroll the entire page.

Task 3: Highlight Important Data

Let's remember that this filter should help our users explore the places from which we collect data. Viewing a tree starting from the continents is a good start, but by no means answers the question “What are the most important places?”. Our users need a TOP-5 list of discussion places, and this is exactly what we offer them. List of the most important countries, depending on the number of messages collected from a particular place:

Task 4: Return

Suppose you have filtered data for London, UK. After updating the page, all references from this city are displayed. What if you want to choose the UK again? What if you want to clear all filters and return to the starting position in which nothing was selected?

Our solution is to replace the list of the most important places with a list starting from the original location, similarly as done in website navigation. You can track your actions all the way and return to starting position. See the screenshot below:



After use, the filter will remember your route on the list, and select it on your next visit. That is, when you open the page, the whole filter tree opens again: the continent, country and region will be expanded to show you the entire route that you previously selected.

In conclusion: Using everything together

We tried to connect all the solutions together. In theory, all this will complicate the work with filters, but, surprisingly, everything works very well together. It may seem complicated, but it's pretty practical. We have amazing feedback from customers, so overall we are very pleased with the result!

Lessons learned

We believe that the filter we built is an excellent solution to the problem of many web applications that need progressive filtering by location. In this case, the standard templates simply will not work. And our users are just delighted with the solution!

More important than our decision itself, this is the path we went through to create it. Perhaps you are doing the same thing:

• Understand that if everyone does something in a certain way, this does not mean that you should do the same. A popular developer choice may just not suit your product.
• Look at the development from the point of view of the user. Listen to customers to understand what they may have problems with.
• Make a list of all the items you want to include. Make sure each item has a clear function. Do not add items for the sake of items. Be pragmatic.
• Put everything together and see if everything is in place. Can you delete something without sacrificing the functionality of an element?
• Run, test and retry!

This process has opened our eyes to the fact that many designers seem to simply recycle standard templates, which leads to a suboptimal experience. I know that we did the same. Are there places in your web application where you could do the same?

Take a look at the key interactions of the application, determine its true goals and honestly evaluate whether your standard solution does its job completely. If not, get to work. Look at this, not as yet another problem that needs to be solved, but as an opportunity to create something amazing!

_{This article is also available in Ukrainian translation .}