Formerly titled: Update of "Search Results" css on Special:Search
**Problem**
The current special:search page has a lot of information that fights for users attention. The current visual hierarchy does not take into account what design elements should get greater or lesser importance. This can make scanning of information less effective.
**Current page**
**{F35131119}**
**User story**
When I am looking at search results on the Special:Search page …
… I want to be able to easily scan the page,
… so that I can quickly locate the information I am looking for.
**Proposed Design**
{F35136774}
{F35136776}
**Detailed UI specs**
Link to [[ https://www.figma.com/file/86M7oLZplSxXKwKJR59mIK/Special%3ASearch-on-Wikipedia?node-id=1216%3A12613 | figma ]]
**Notes on updated design**
Refer to the link to Figma above for detailed specs
[ ] The new layout follows 12 column layout which leaves a fix amount of margin on both sides bringing content more to the centre of the screen and reducing the horizontal width of the page for better reading experience.
[ ] The elements on the screen are aligned by columns for better eye movement and making both results and side column more distinct.
[ ] Improved spacing between all the elements on the page to follow [[ https://ux360.design/wp-content/uploads/2020/06/7-gestalt-principles-of-design-infographics-by-ux360.design.png | gestalts principles ]] of design.
[ ] The font sizes within the results are adjusted to give more hierarchy to the information: Article title > Snippet > Metadata
[ ] The metadata colour has been changed from green to grey so as to give bring focus more to the content.
[ ] Ellipses are added at the end of snippets to indicate the omission of words from quoted material and to give user an indication that there is more to explore.
[ ] Thumbnails are added to give visual anchor for each result. Out of scope of this ticket but covered in this [[ https://phabricator.wikimedia.org/T306883 | ticket ]].
**More design changes pending community reviews** (Out of scope of this ticket. A new ticket will be created pending community review)
* In this version of the design advanced search is collapsed by default to bring more focus on the content.
* Also the metadata has been removed from the main search results and will be available in quick view.
Below is the screen indicating these changes. Both of these updates can further simplify the amount of information on the page and make scanning more efficient.
{F35136770}