This ticket is to provide proper visual affordances and hover interactions for various elements in the search results.
Current hover states that should remain as it is. (Desktop)
Currently we have hover states on blue links which when interacted with also opens a preview of an article along side underlining the text. This interaction will remain as it is and we should make sure it stays intact in the new UI.
New hover state for quick view (Desktop)
To make users aware of quick view while browsing results, we are introducing a hover state on snippets. When the mouse is over the snippets an arrow appears on the right side of the snippet pointing towards right indicating that it is an interactive element on the screen that opens a quick view on the right.
Other Acceptance Criteria
Make sure the hover state doesn't show for users who don't have javascript or for users on mobile.
User testing note: This visual affordance will be validate in user testing and tweaks could be may be made if we find that this is not discoverable or usable.
User testing update and new acceptance criteria (Added Sep 1)
It was observed in the test that some users while hovering over the snippet moved their cursor over to the arrow to click on it. However moving the arrow outside the snippet area would make the arrow disappear.
To fix this issue:
- Expand the hover and click zone to include the area in which the arrow appears.
- If possible, it would be nice to have the zone expand upon hover and leave the original hover zone as snippet only.
New Acceptance Criteria (Added Sep 29)
Refer to the comments to see the discussion on expanding click zones.
- Expland the hover and click zone to include the metadata line as well as shown in the image below.
Link to prototype
Link to arrows position and style in figma
