Designing a Progressive Location Filter

Many designers rely on pattern libraries to create simple, intuitive interfaces. Vladimir Oane shows us how uberVU deconstructed a common design pattern to produce a more robust result.

Each interaction we create helps define and guide the user experience. And although best practices suggest we make something intuitive before it’s aesthetically pleasing, simply borrowing an element from a design pattern library – one that just “looks the part” – can end up hurting the user experience. Sometimes the best designs require us to reinvent the wheel.

To understand what I mean it helps to give you some context. uberVU is a social-media-analytics platform that collects millions of points of data for its users:

A screenshot of the uberVU dashboard

One of uberVU’s core features is to display social media data in a way that can be narrowed down by filters: platform, gender, sentiment and location (highlighted in the screenshot below):

A screenshot of the uberVU filter bar.

In our case, the location filter required special consideration. We read Christian Holst’s article on “Redesigning The Country Selector” – which included some great suggestions – but it didn’t exactly solve our problem.

Selecting a location in uberVU required progressive filtering. In other words, after a user selected a country (a challenge on its own) that user needed the ability to also select states within those countries, cities within those states, etc. With so many options available, we needed a way to show users where the most important filtering options (those with data) were. As if that weren’t enough, this filter had to allow users to go “back” a step while exploring, similar to how bread crumbs work for website navigation.

With our goals laid bare we set upon the challenge. What follows is the journey we took to find what we think is a pretty elegant solution to this interaction design problem.

Challenge 1: Make it instant

What if the user knows exactly what location they’re looking for? Easy. We solved this by adding auto-completion. After the user types 3 letters a suggestion appears.

A screenshot of the uberVU location search

This pattern works well in every case except when a search returns multiple results. If that happens it’s then up to the user to disambiguate. Not good. Say a user wants to filter the stream for London, UK. They’ve typed “Lon” and we’ve correctly guessed London…but to what London does the user refer? London, UK obviously comes to mind, but for those of you not from Canada you might be surprised to learn that there is a London, Ontario, too.Clearly, we should display at least 2 entries:

  • London, United Kingdom
  • London, Ontario, CAN

As you can see in the screenshot, there are actually many more Londons in the world. Ordering them from most to least popular makes things easier.

Challenge 2: Encourage exploration

Now for something even more challenging. While some users know exactly what they’re looking for, others will want the ability to explore their social media data. A person monitoring the launch of a product is curious where people are discussing that product. Wouldn’t it be nice if they could lead the expedition themselves?

A screenshot of the uberVU location browser, highlighting countries.

Our solution employed a tree-like structure within the selection filter. To keep things less intimidating (we track thousands of locations, after all), we decided to initially display a list of continents. From there, we then decided to only display locations that contained data (mentions in social media) for the current user. This way the entire tree is relevant at every node. To drill deeper, users click on the arrow next to each location. As users drill deeper, each selection expands to display its sub-regions:

A screenshot of the uberVU location browser, trees expanded.

The only downside of this method is that you’re adding an extra scroll. When users put their mouse over this region they will scroll the location filter, and when the mouse is positioned somewhere else, they scroll the entire page.

Challenge 3: Highlight important data

Let’s keep in mind that this filter should help our users explore the locations we gather data from. And while displaying a tree with continents at the top is a good start, it does not by any means answer the question “What are the most important locations?” Our users needed a top 5 location list and that’s exactly what we offered them, a list of the most important countries based on the number of messages we collected from that specific place:

A screenshot of uberVU's top locations selector.

Challenge 4: Going back

Say you filtered the stream for London, UK. The page is refreshed, all the displayed mentions are from London, UK. What if you want to select UK again? What if you want to clear all filters and go back to the default state, where nothing is selected?

Our solution was to replace the Top location part with a location trail, similar to how breadcrumbs work for web page navigation. You can use this trail to track your steps all the way back to the default state. See the screenshot below:

A screenshot highlighting the breadcrumbs in uberVU's locations selector.

In the next iteration of the location filter, we plan on also remembering the path to the location you selected for your next session. Next time you open the Location filter the continent, country & region are expanded to show you the whole trail to the location you last selected.

A screenshot of uberVU's locations selector.

Le grand finale: Putting everything together

Although many designers champion simplicity, each solution thus far involved adding yet another item to the filter drop-down. In theory, this would over-complicate things but, surprisingly, everything fit together extremely well.

It’s quite complex but still very usable. We’ve amazing feedback from customers, so all in all we are quite happy with the result!

Lessons learned

We think the location filter we built is a great solution to a problem a lot of the web-apps have: progressive filtering by location. In that case, standard, off-the-self design patterns just wouldn’t do. And our users love it!

What’s more important than our solution, though, is the process we went through to synthesize it. Perhaps you’ve done the same:

  1. Realize that just because everyone does something a certain way it doesn’t mean you should do it, too. Popular design choices may not apply to your particular use-case.
  2. Layout the objectives of the design from the user’s point of view. Listen to customers to understand their pain points.
  3. Make a list of all the elements you want to include. Make sure each element has a clear function. Don’t just add things for the sake of it. Get pragmatic.
  4. Put everything together and see how it “fits.” Can you remove anything without jeopardizing the function of the element?
  5. Launch, test, iterate!

This process opened our eyes to the fact that a lot of designers might just be recycling standard design patterns resulting in sub-optimal experiences. I know we’ve been guilty of this. Are there places in your web-app where you might be doing the same thing?

Take a look at your application’s key interactions, state their goals and honestly appreciate whether the standard solution you’re using does the job. If it doesn’t, get to work. Don’t look at it as yet another problem you need to solve but as an opportunity to create something amazing!

About the Author

Vladimir Oane

Vladimir is in charge of all aspects of the product at uberVU. His design background and obsession about details has transformed uberVU into a top player in the social media space. For 3 years before being the CPO, Vladimir was also the CEO of uberVU. He is a serial entrepreneur who likes to get involved with early stage startups, as proven by his advisory role in many international startups and by his numerous startup conference speaking engagements.

Related Articles

17 Comments

  • Si Davies Reply

    Nice methodical article on a fairly common navigational requirement. Thanks for posting.

    • Vladimir Reply

      Thank you. It took a while to write but I am so happy the end result is worthy :)

  • Theresa Neil Reply

    Thanks for the article. It seems like design patterns did help you come to a solution, the tree is a common pattern to navigate hierarchal data, and auto-complete is a common pattern for surfacing options.

    I think it is more accurate to say you leveraged multiple UI design patterns to create a custom control for progressive filtering.

    Another idea you could prototype and test is using the continent colors to indicate density. Think of heat maps like in Google Analytics that use dark colors to indicate higher densities, and light colors to reflect low densities. You could make all the continents icons blue but use varying shades to indicate the number of messages (North America and Asia might be dark blue where Oceania would be very light blue).

    If you carried this color coding subtly throughout the tree, it might provide another level of information that could help the exploration process.

  • Youssef Reply

    Interesting, thanks. But how does it fare on tablets, where mouse over does not work, or on smartphones, where the dropdown menu approach may not work well because of the size of the screens?

    • Vladimir Reply

      The current version works decently on tablets. It doesn’t use so many mouse-overs so I would say the design holds.

      The problem is not with the filter itself but with our whole interface. It’s not very touchy (small buttons, no fluid layout etc) but we’re addressing that with a design specifically designed for tablets.

  • Vladimir Reply

    @Theresa: I think I did. And thanks for the hint. We may ad it in a new iteration. This is v1.0 after all :)

  • Mark Reply

    Great article. I really like the organization of content. Thanks.

  • Martin Revert Reply

    Colorblind people (like me) and Theresa’s suggestion doesn’t match very well. In responsible UX you must have in mind that everybody (despite blind people) can see forms but not all the people see all the colors palette.

    • NK Reply

      Would not using various shades of the same color for the icons work to represent density? That way what color you see (if any) is not important as long as you can distinguish the difference in lightness/darkness of the color.

      However I am not color blind so my understanding my be incorrect.

    • Theresa Neil Reply

      I believe the various shades could represent density of data and still work for color blind people providing the right base color is selected.

  • Christopher Reply

    One problem only including cities that have data is that users will search in vain for cities of interest that have no data. Imagine how frustrating to type “London” and not have a “London, U.K.” result because there was no associated data. There are a number of solutions to this problem. It might be worth considering the issue.

  • Juan Carlos H. Reply

    Vladimir, after reading your bio, I wanted to share an early stage startup we are working called “iWantoo” which is deeply related to locations. We would love you take a look at it and give us your comments or offer your services. Thanks.

  • izdelava strani Reply

    I’ve tried ubervu demo and I must say that I am very impressed. But it is very expensive :/

Leave a Comment on This Article