Design of location & tag based filtering

Question

I'm no UI expert, but I'm working on a experimental pet project that consists of an interface to search "items" (could be events, real state, etc. doesn't really matter) by location and tags.

I believe that I have more or less solved the "location" part of the filtering as you will see in the screenshot below (taking ideas from existing solutions), but I'm still struggling with the tag filtering.

The idea is the following:

1. User selects location
2. Items are sorted by distance
3. User adds a tag
4. Tag is added to the list, but results are not filtered.
5. User checks a tag, items are filtered to show only items with that tag.
6. user adds another tag, tag is automatically checked, and filter is applied (any item containg one of the tags)

Tags can be unchecked (filter is reapplied without the tag), or removed from the list. Also, there would be a select / unselect all to simplify the process.

Do you think this process is enough simple and user-friendly? Are there other ways to do this?

Plus, I also want to add a search input somewhere, I've been considering putting it in the header, but, my fear is that in such case, it is not clear if the filters are applied when searching a specific phrase. And putting it below the map makes it dificult to notice. Maybe there's another approach I could take?

Thanks!

Answer 1

A lot can depend on the context so it'll help to actually write down a few scenarios that you expect the user to be in. E.g. I am looking for a resturaints where there is live music. It helps think through how someone would use the interface to find that.

For e.g. in google I can just type "Resturaunt live music loc:Spain" So the user is only dealing with 1 input field.

But lets say there are scenarios where filtering is the right way to go.. there are many good examples of this like yelp, amazon etc. So the design you have in general is going to be fine.

However a few things to consider:

1. User generated tags are difficult to work with as the language can vary a lot, list can be very long etc. So you might end up with different tags that are intended to be the same in the list. e.g. "live-music" and "live music" etc
2. The placement of the map is above the filters, this establishes a visual heirarchy where maps is not impacted by filtering. Better way would be to have the filters go all the way up and have the map on the right (assuming map should also display filtered results)
3. It seems like that to the right of tags is a search results. If so, interaction between map and listing could be odd - what happens if the user selects a result on the map. When the user scrolls, does the map stay on the top or gets scrolled away. Have a look at the interation on http://totkare.com/search?q=20165&facility_type_id=1&lat_lng=[39.0527088,-77.3841197]