Developing a progressive location filter

Every interaction we create helps define and guide 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 different templates ?!”, you ask.

A seemingly simple 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 analysis platform that collects a huge amount of data for its users.



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



The location filter is perfect as an example. We read Christian Holst's article “ Redesign of 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 (already a task in itself), he also needs the ability to select a state or region, region, city, etc., in these states. With so many options, we need to focus on the most important filtering parameters. But this is not enough - the filter should work so that users can take a step back while viewing the filter options, just as 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 works fine always, 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 the best solution. Let's say a user wants to filter London, UK. He introduces "Lond", and we guessed correctly - London ... But what kind of London does the user need? Obviously, London in the UK, comes to mind to everyone who is not from Canada. You may be surprised to learn that there is London in Ontario, Canada. That is, we have to offer at least 2 options:

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

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

Task 2: Research Promotion

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



Our solution involves a tree structure in the choice of filters. To keep things from being so scary (we’re tracking thousands of places, after all), we decided to show the list of continents first. After that, we show only those places that contain the necessary data (mentions in social media) for the current user. Thus, the whole tree has only important values ​​at each point. To plunge deeper, users click on the arrow next to each place. As you dive inward, each option is revealed to display its subcategories:



The only downside to this method is that you add extra scrolling. When users hover over this area, they will scroll through the filter, and when the mouse pointer is somewhere else, they scroll through 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 does not answer the question “What are the most important places?”. Our users need a list of the TOP 5 discussion places, and this is exactly what we offer them. The list of the most important countries, depending on the number of messages collected from a particular place:

Task 4: Return

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

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



After use, the filter will remember your route through the list, and select it on your next visit. That is, when you open the page again, you will open the entire tree of filters: the continent, the country and the region will be expanded to show you the entire route you have chosen earlier.

In conclusion: Using everything together

We tried to put all the solutions together. In theory, all this will complicate the work with filters, but, surprisingly, everything works very well together. It may seem difficult, but everything is quite practical. We have amazing reviews 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 delighted with the solution!

More importantly, our decision itself is the path we took to create it. Perhaps you are doing the same thing:

• Understand that if everyone does something in a certain way, it does not mean that you should do the same. A popular choice of developers may simply not suit your product.
• Look at the development from the user's point of view. Listen to customers to understand what they may have problems.
• Make a list of all the items you want to include. Ensure that each element has a clear function. Do not add items for the sake of items. Be pragmatic.
• Put it all together and see if everything is in its place. Can you remove something without affecting the functionality of the element?
• Run, test and repeat!

This process has opened our eyes to the fact that many designers seem to simply rework standard templates, which leads to a suboptimal experience. I know what we did likewise. 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 another problem that needs to be solved, but as an opportunity to create something amazing!

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