Usability testers found highlighting to be a very helpful feature. In addition to making filter results more meaningful, highlighting also provided a powerful diagnostic that enabled users to answer many of the questions they had about how the filters work, thus helping them master the system more quickly and fully. However, because the Highlight Results button scrolls out of view as users work with the dropdown filter menu, it was also clear that users would benefit from some help in discovering this feature sooner.
# solution
A blue dot with a pulsing halo will be shown hovering over the "Highlight results" button inviting users to click. This follows the same pattern as educational popups on Visual Editor (more details in T101481#1504143).
{F4730267}
When the user clicks on the button or dot on the "Highlight results" button, a popup panel is shown introducing the feature:
{F4730272}
The above should only happen when these conditions are met:
- When a user who has not clicked the Highlight Results button before opens the Dropdown filter menu __for the fifth time__, the blue dot, etc. displays.
-- If that user fails to click the Highlight Results button, the blue dot will display again every third time the user opens the Dropdown menu.
- This applies only to users who have not clicked on the Highlight Results button before. That is, users who already discovered highlight on their own don't need to be introduced to it, and neither do users who have already seen the panel one time.
- (Users who have been shown the blue dot but not activated the popup panel will continue to see the blue dot when the proper conditions are met.)
- Once the user closes the popup with the "Ok, got it" button
-- the highlight mode becomes active automatically without requiring additional steps for the user.
--The highlight feature becomes enabled at the same time as the popup appear.
- Once the user closes the popup with the "Ok, got it" button, the user will never see the panel again.
# Graphical assets
An image of a marker highlighting a row is used in the dialog. The SVG versions for both writing directions are available below:
{F6363218}
{F6363223}