Change Details

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** {F35131123} {F35131138} **Detailed UI specs** Link to [[ https://www.figma.com/file/86M7oLZplSxXKwKJR59mIK/Special%3ASearch-on-Wikipedia?node-id=1216%3A12613 | figma ]] **Notes on updated design** * 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 the elements 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. * Thumbnails are added to give visual anchor for each result. Covered in this [[ https://phabricator.wikimedia.org/T306883 | ticket ]]. **More design changes pending community reviews** * 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. {F35131177}

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** {F35131123} {F35131138} **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. [ ] 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. {F35131177}

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** {F35131123} {F35131138} **Detailed UI specs** Link to [[ https://www.figma.com/file/86M7oLZplSxXKwKJR59mIK/Special%3ASearch-on-Wikipedia?node-id=1216%3A12613 | figma ]] **Notes on updated design** * 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.Refer to the link to Figma above for detailed specs * The elements on the screen are aligned by columns for better eye movement and making both results and side column more distinct[ ] 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. * Improved spacing between the elements[ ] 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. *[ ] Thumbnails are added to give visual anchor for each result. COut 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. {F35131177}