Update the look of the FilterBar

[jack-brinkman]

One feedback I've received is that people may not immediately make the connection that the top buttons are related to filtering. Below is one variation that explicitly marks these buttons as filters - thoughts? @MortenHofft @djtfmartin

[MortenHofft]

It looks nice, but I'm must admit that I'm a bit reluctant and sceptical. Here is why:

I'm not convinced that users actually wouldn't know how to. Or at least this could be a classical case of "I knew how to do it (implicit: because I'm smarter than average), but I have a feeling that other people wouldn't know how to".

We have had the system in production for over a year and haven't heard that feedback before.

Is this part of the UI review? I do not remember seeing it, and I cannot get the video to play and I cannot find the link to the UI review report I'm afraid.

That said I'm not dead set against it, but here is other suggestions:

• Could a filter icon in the start of the line be an option? something like: https://www.flaticon.com/free-icon/filter_6488674
• Rename the more button to say more filters?
• Or would it help to have a clear filters button?

GBIF mock

I do not see other sites spelling out filters. Perhaps they otherwise do a better job at indicating that it is filters, but then perhaps we could look to that?

AirBnB

FlatIcon search

Github

[djtfmartin]

I'm not convinced that users actually wouldn't know how to. Or at least this could be a classical case of "I knew how to do it (implicit: because I'm smarter than average), but I have a feeling that other people wouldn't know how to".

This was flagged as an issue in the UI review, but I agree with this point. Im not convinced its a real issue.

+1 as well for the use of icons as an alternative to layout changes. I'd hope github-esque icons for Maps, Downloads, Sites could be sourced. Not sure what Events would look like though...

[jack-brinkman]

Ah, okay - thanks for the feedback @MortenHofft @djtfmartin. Renaming the 'more' button to 'more filters' & adding a filter icon sounds good. @qifeng-bai has included a clear filters button as part of his PR (gbif/gbif-web@7935fc3).

[jack-brinkman]

@MortenHofft @djtfmartin I've added a simple filters icon, & renamed the 'more' button to 'more filters' - thoughts?

[MortenHofft]

I like that filters icon, the problem with it (as I see it) is that it might not scale pixel size well (does it? perhaps a simpler version could be used?). So it might be hard to use it in columns headers. And I would prefer we used the same icon throughout for filtering.
Variations on the classic funnel might scale better. It isn't as nice, but I do think it is familiar (e.g. excel use it)

Secondly, it appears almost like an inactive button now (if it is a button what does it do?). Did you try just as text, black on white background?

[jack-brinkman]

Right - I tried to find a similar icon similar to the flaticon one you linked above (this one). I do agree though, it might be better to have some consistency and use the funnel icon. Here's what it looks like now:

[MortenHofft]

tried to find a similar icon similar to the flaticon one you linked above

That makes sense. Sorry.

I'm still sceptical when seeing it together with the catalogue dropdown on the top left.

Perhaps we could make it customisable so you can move on. I wouldn't want this version on the hosted portals I must admit. Partly because i think it is a bit visually awkward/unbalanced, and secondly because I'm still not convinced that users actually struggle (perhaps they just haven't dared to tell me because they know I will be like this :D )

I'm moving this issue to the hosted portal repo so that other site owners can comment

[jack-brinkman]

That's all right - if you're not too keen on it being a part of the hosted portals, I'll leave it for now. With the funnel icon, it did look a tad odd anyway. I'll revisit this issue if it's brought up again. Changing the more filters button might make it intuitive enough for everyone.