As a searcher, I want to have relevant information about search results surfaced so that I can make a relevancy judgment easily.
This foundational work is part of the Quick view panel epic https://phabricator.wikimedia.org/T306341
**Requirements**
- Quickview panel contains general content about the search result (article)**User story
**
- Experience is adapted for mobile/desktop usageWhen I am scanning the results on the Special:Search page …
- No regression for users (i.e. quickview panel loading time)
- No javascript fallback on search result.
**Design specs**… I want to be able to discover relevant information,
- Initial MVP quick view panel contains:… so that I do not overlook information that might be hiding within an article and could directly navigate to it.
**Quick view goal**
- Article titleQuick view panel allows users to drill down into a specific search results. Surfacing key information for each of the results in the quick view allows users to discover relevant content within the article and go directly to the desired section.
**Notes on design**
- meta data- Quick panel will have a similar visual look and feel as the hover preview that users see throughout our site. The difference is quick view is to be explicitly opened and closed and is not available on hover. (This look and feel will be finalized after reviewing with the design system team and visual designers)
- extended snippet- The width and positioning of the quick view will be based on the page grid.
- The height of the quick view panel will be variable and will depend on the content.
- //[Add mockups]//- When quick view is open the opacity of the content in the right column will be reduced so that it does not conflict with reading the content on quick view.
Link to quick view panel in [[ https://www.figma.com/file/86M7oLZplSxXKwKJR59mIK/Special%3ASearch-on-Wikipedia?node-id=1536%3A16289 | Figma ]]
**Key information in the quick view panel: **
Article image - [[ https://phabricator.wikimedia.org/T307058 | T307058 ]]
Expansion of snippet shown in the results - [[ https://phabricator.wikimedia.org/T307052 | T307052 ]]
Expansion of section mentioned in the results - [[ https://phabricator.wikimedia.org/T307061 | T307061 ]]
Table of content - [[ https://phabricator.wikimedia.org/T306630 | T306630 ]]
Interwiki link to images from Commons - [[ https://phabricator.wikimedia.org/T310284 | T310284 ]]
Interwiki links to other projects - [[ https://phabricator.wikimedia.org/T307085 | T307085 ]]