Improve usability of exclude/include facet options
Based on recent usability testing of the new UI we have found that our users appeared to be confused about how to include and exclude facet options from their results set. One of the main pain points seemed to be that they did not know that they were able to exclude a specific facet option (for example to exclude English items from the results set most of our users ticked all options under the language facet other then English rather then just excluding the English option).
At the moment the option to exclude only appears when someone hovers over the facet option, and it appears on the right of the text of the facet option. Although the option to include a facet also only appears when the mouse hovers over the text of the facet option because it appears on the left of the text it is more obvious, as users will be reading left to right, then something that appears after the text.
We feel the overall usability of the exclude/include facet option functionality could be improved by:
- Moving the exclude option so it is next to the include option on the left of the facet options
- Both options are made static so users are aware there are filtering options without the need to hover over the text of the facet option.
- Currently a tool tip exists for the exclude option, but there isn't a equivalent tool tip for include. We would like a tool tip to be available for both options.
-
Manu_Schwendener commented
This is an interesting solution: https://librarysearch.kent.ac.uk/client/en_GB/kent/search/results?ln=en_GB&ir=Both&q=art#topOfPage
-
Manu Schwendener commented
Does somebody have examples of sites which do this well? Could you post URLs and maybe screenshots?
-
Manu Schwendener commented
Change background of the exclude icon (thank you, FF):
.available-facets .section-content .md-chips .md-chip .md-button:before
{background-color: #fff; }----
If somebody knows how to right align the icons, please let me know.
-
Manu Schwendener commented
Change border colour of the include check box:
md-checkbox .md-icon {
border-color: #DDD !important ;
}---
Change background colour of 'Apply Filters':
.multiselect-submit .multiselect-submit-inner .md-button.md-primary, .prm-positive-bg {
background-color: #008488;
}.multiselect-submit:hover .multiselect-submit-inner:hover .md-button.md-primary:hover, .prm-positive-bg:hover {
background-color: #A5D7D2;
}
---Change the colour of the exclude icon:
.available-facets .section-content .md-chips .md-chip .button-exclude {
color: #ECECEC;
}---
Thank you, JC!
-
Manu Schwendener commented
Thank you, Nancy!
-
Nancy Babb commented
Here's the css that our webmaster (University at Buffalo Libraries) suggests adding to the css file:
To display the facet select boxes persistently:
.multiselect-facet-group.multiselect-inactive .md-chip md-checkbox {
transform: scaleX(1);
}To display the facet Exclude boxes persistently:
.section-content .md-chips .md-chip .md-chip-remove-container .md-button {
opacity: 1;
}You can see it at https://suny-buf-psb.primo.exlibrisgroup.com/discovery/search?vid=01SUNY_BUF:ExLib_Default_for_Test
-
Manu Schwendener commented
swisscollections.ch has an elegant solution
(Not Primo / Primo VE)
-
Manu Schwendener commented
I see that Buffalo has made the first of the steps by making include static:
https://search.lib.buffalo.edu/discovery/search?query=any,contains,discovery&tab=LibraryCatalog&search_scope=MyInstitution&vid=01SUNY_BUF:catalog&offset=0
(Primo VE)---
And as Anne mentioned, Washington shows both include and exclude (Primo)
https://alliance-primo.hosted.exlibrisgroup.com/primo-explore/search?search_scope=all&tab=default_tab&institution=01ALLIANCE_UW&vid=UW&displayMode=full&bulkSize=10&highlight=true&dum=true&pcAvailabiltyMode=true&query=any,contains,facets&displayField=all&queryTemp=facets -
Manu Schwendener commented
There's another problem with the UX as it is at the moment:
When you do an OR selection by putting a checkmark left to several facets at once, this only works correctly for facets within the same facet type.
If you combine facets from different types, the search that is done is AND, not OR. -
Anne Pepitone commented
We found out how poor the user experience was with facets when we did a three-part UX study in 2017 on the NUI. Users will not hover to include or exclude unless they graze the area of the facets by accident. We had so much of a problem with this that we had to build in our own code to keep everything static however, this code breaks every other release. Please build in this functionality.
-
Manu Schwendener commented
"making the filter options static - including the persistent (lock) option- would go a long way to improving the usability of facets for users."
This is also true in Primo VE.
-
Keren Stiles commented
MS, that is the 'out of the box' default presentation of the filters, rather than a custom solution. It does clutter the interface less, but usability testing shows that it leads to most users never discovering that it's possible to filter by more than one filter in a facet group, or that it's possible to exclude filters. Therefore they are left with the impression that they can only filter by one resource type at a time, or one subject at a time, etc.
-
Manu Schwendener commented
[Keren is right in her reply]
-
Keren Stiles commented
We have recently (January 2019) done some more usability testing on our instance of Primo and can confirm that students still can't even tell that a way to exclude facets exists, much less find out how to use it. We have only been using the new UI for 5 months, but even frequent users haven't stumbled across this functionality.
-
A Rowe commented
making the filter options static - including the persistent (lock) option- would go a long way to improving the usability of facets for users.
Too often we hear from students that they didn't know the system could do that. Static filter options (include, exclude, persistent) would enable users to see exactly what the system can do.