Search vs Filter options on Large complex catalogues

[smoofdude]

Hi all,
Firstly I am a complete UX (UX Mastery) noob, and I tried searching the forum for a similar topic(s) but it was a bit overwhelming, so I hope you guys can point me in the right direction (of the relevant thread).
What you should also know is I am a Process Engineer by profession, I am just them most creative guy in my team, so I got the job of UI/UX design. So on to my question…

Some Background:
I am busy creating the front end for a large source cataloguing/registering system that also has a spatial (map view) component linked to it.
There is A LOT of metadata information linked to every source. Rough guess but 90% of the metadata should be searchable. Users also want to be able to click on a location on the map, and view ONLY the (filtered) sources based on if the source coverage intersects with that location.

So my question
I am currently VERY stuck with how I should approach the search function:

1. Sidebar filters (static or not)
2. Multiple Horizontal filters.
3. How to display metadata on selected source - popup, within the sidebar, below the mapview etc…
   I basically have too many options…

Lastly, as a new user I’m only allowed to upload 1 image so I apologize beforehand, but what you’ll see is:

Left side - current search filters and search result all done in static side bar. Screen split in 2
Right side - my future idea - screen divided in 3, static (but collapsible) filters far left.
Search results in middle
Once selected some info in middle pane
More info available inside map view.

[HAWK]

Calling in the @Experienced guys.

[lykc]

Having quickly scanned over this, there’s a lot going on, and it’s quite hard to understand how it works looking at static screens

it might be an idea to prototype this, and then perhaps share with us?

You can upload your screens and add hotspots using something like https://www.invisionapp.com

[smoofdude]

Yeah I thought it might be difficult…more images would have helped…

But for what it is worth… I’ll try explaining it like this:
The system is a massive catalogue/ library. Each source has location (on earth) as well as text based metadata, and plenty of it.

Workflow:

• Users need to be able to search on almost any of the metadata entries, so I know I’ll need multiple filters
• Users need to be able to see location of their selection on the map at all times (not my issue, but I know I need to keep space for in on my screen)
• Users need to be able to view the large amount of metadata of their selected item

So I have: search > search results > select item > view meta data (while needing space for the map view)

I need it to be clean and intuitive because as far as possible I want to avoid popups and the need for large amount of scrolling needed. I have the basic knowledge, but I think I have too many options.

So maybe my question could rather be…

Tricks and Tips for “hiding” large amount of text in a small amount of space on a single page…

(Lastly…thanks for that link…It’s going to keep me busy for a while!)

[dopamino]

@smoofdude
it’s not easy to help you in finding a reasonable usability pattern for that scenario.

I can just share with you some best practices that I and my team are following every time we design a search/lookup experience:

• the more options you provide to the user, the higher is the error rate. If you have a large number of form controls to deliver use UI components such as TABs or accordions. Avoid overwhelming the users with a packed UI plenty of form controls
• the “progressive disclosure” technique could help in providing the right quantity of data at the right moment in time
• the web form usability drastically increases when the fields are pre-filled with default data and/or intelligent data (eg if there’s a multiple choice like State, City and ZIP code, as soon I select the State just apply the query at all the other connected fields)
• the web form usability drastically increases when labels are self-explanatory
• the web form usability drastically increases when placeholders are provided

I am a big fan of this website’s content, especially about the search experience, https://baymard.com/ecommerce-search

I’m looking forward to seeing your progress

[anne_dougherty]

@dopamino had some great suggestions.

Another key concept to keep in mind:

Search is for finding and delivering results.
Filtering is for reducing already delivered results down to specific elements.

That concept may help because it affects what you initially deliver (a blank slate vs. a dump of everything you have).

I hope you’ll post your prototypes / additional screenshots. I’m looking forward to your iterations

[smoofdude]

Thanks @dopamino and @anne_dougherty.

Thanks, all of that does make sense… The moment I simplify things for myself…It will be simpler for the user as well…

"Search is for finding and delivering results.
Filtering is for reducing already delivered results down to specific elements."

• This actually focuses my attention a bit better…I was thinking of them as interchangeable, and they are not .

Awesome Forum! You guys have really helped me a lot!

Thanks Again!

[benrenegar]

Take a step back from the UI and think about the user experience. An understanding of your users, what their goal is and what they need/want to achieve that, will really help you make the right UI choices based on what your users are actually trying to do.

Some questions to think about

• Do your users start in the application knowing what they’re looking for (e.g. they have geocoordinates, an address or some other form of identifier)?
  • In this case, search should be prominent in the UI because it’s likely that the user behaviour will be to search for the source they’re looking for, they know exactly what they’re after
• Do your users need to narrow down what they’re looking for because they don’t have specific details (e.g. they know the source is of a certain type, or in a certain location, or some other general criteria)?
  • In this case, the filtering mechanism would be more prominent because it’s going to be essential to the user’s goal of trying to narrow things down to locate what they’re after
• How frequently and central to their goal is filtering? If the user’s behaviour in the application is to repeatedly locate things on a map, this would influence your UI decision to leave that panel open statically. If filtering is going to be something that’s used occasionally, then make it collapsible, or floating etc.

There’s lots of things I could dive into here but the key point I’m making is understand your users. Know what their goals, need+wants, motivations, behaviours and pain points are. This will help you make the right UI decisions that will be based on human-centred insights. And don’t forget, prototype and test this with the user’s and validate that you’re making the right choices. Ultimately no-one on this forum is likely the user of this application, speak to your users and not us to make sure you’re doing the right thing

[smoofdude]

Got you… and I am starting to do this little by little.

Analogy Time : We are sort of “building the car as we’re driving”. And up to now, only the wheels and a steering wheel was needed. So a basic version of this system is currently being used, and I am getting valuable feedback already.

However, we haven’t designed what the finished car should look like so we haven’t really been working towards the same goal yet, so I’m trying to do this while I’m driving as well.

I have to say that all the feedback here has made me more aware of actually designing in stages as well. Being the noob I am, I thought I had to provide the final product tomorrow…but the more I plan, the more I realise that becomes VERY complex very quickly.

[smoofdude]

For what it is worth…

I have decided to model my library on an E-Commerce approach. (Amazon is my inspriation)

Step one: Users add a simple search term based on an option of 3 topics.

1. Supplier
2. Product
3. Source
   Step two: Users use sidebar to narrow down specifics from there

Finding a book in a library is just like shopping after all…Why not!