Make the filter item (de-)selection features more intuitive
As Olaf, an economic adviser to a Swedish policy maker and frequent user of the Data Explorer,
I want to be able to know that I can select and deselect facet/filter items by simply clicking on the items,
So that I more intuitively understand how to change facet/filter selections and can do my data grasping work more efficiently.
UI solution
- add a checkbox on the left (right in rtl) of the item labels in the facet/filter lists. When a label is prefixed by an icon, the checkbox should be on the left (right in rtl) of the icon.
- when no selection of the item, the checkbox is empty (see CheckBoxOutlineBlankIcon from '@material-ui/icons/CheckBoxOutlineBlank')
- when no selection of the item but the mouse hover over the item, the checkbox stays empty and the background is blue
- when the item is selected, the checkbox becomes a tick mark (see CheckIcon from '@material-ui/icons/Check')
Modified page layout to make more space for the icons
We decided to abandon Orsi's current page layout in the UI guidelines and base the new layout on the currently implemented layout. However, the UI guidellines need to be updated so that the future implementation is identical with the new UI guidelines.
The following changes are to be done to the page column widths (Note that also in one case the viz page needs to switch to the responsive layout!):
screen width | search page padding | search page max width | facet width | search result width | viz page padding | viz page max width | filter width | table width |
---|---|---|---|---|---|---|---|---|
XS: < 600px | 16px (left+right) | 100%-32px | 100%-32px (responsive design) | 100%-32px (responsive design) | 5% | 90% | 90% (responsive design)**--> change to 100%-32px (responsive design)** | 90% (responsive design) |
SM: < 960px | 24+16px | 600px | 600px-padding = 552px (responsive design) | 600px-padding = 552px (responsive design) | 5% | 90% | 300px **--> change to 552px (responsive design)** | 90%-300px **--> change to 90% (responsive design)** |
MD: < 1280px | 24+16px | 960px | 33.3% of 960px - padding = 304px **--> change to 40% of 960px - padding = 342px** | 66.6% of 960px - padding = 608px **--> change to 60% of 960px - padding = 569px** | 5% | 90% | 300px **--> change to 342px** | 90%-300px **--> change to 90%-342px** |
LG: < 1920px | 24+16px | 1280px | 25% of 1280px - padding = 308px **--> change to 33.3% of 1280px - padding = 380px** | 75% of 1280px - padding = 924px **--> change to 66.6% of 1280px - padding = 852px** | 5% | 90% | 300px **--> change to 380px** | 90%-300px **--> change to 90%-380px** |
XL: >= 1920px | 24+16px | 1280px | 25% of 1280px - padding = 308px **--> change to 33.3% of 1280px - padding = 380px** | 75% of 1280px - padding = 924px **--> change to 66.6% of 1280px - padding = 852px** | 5% | 90% | 300px **--> change to 380px** | 90%-300px **--> change to 90%-380px** |
Note: 33.3% means 100%/3=33.333333333...%
Background information
- During the usability tests done for INS in 2019, the facet/filter item selection/deselection in the search result and visualisation pages was identified as insufficiently intuitive. The users did not easily guess that they can select and deselect the filter items by clicking on their labels.
Example with the search results page: The user could click with its mouse on "Inbound (I)" item of the "Tourism form" filter to reduce the number of results to 2.
- The solution in this ticket should allow better guiding the users on this feature without requiring an in-depth review or change of the DE design, and thus without drastically changing the current scopelist technical implementation.