Page MenuHomePhabricator

Improve Wikipedia Preview Popup design to integrate images in default view
Open, MediumPublic

Assigned To
None
Authored By
SGautam_WMF
Mar 22 2024, 6:45 AM
Referenced Files
F49976542: Wikipedia Preview-4.png
Fri, May 3, 1:15 PM
F49976543: Wikipedia Preview-3.png
Fri, May 3, 1:15 PM
F49976487: Wikipedia Preview-2.png
Fri, May 3, 1:15 PM
F49976433: Wikipedia Preview.png
Fri, May 3, 1:15 PM
F49976347: Wikipedia Preview-1.png
Fri, May 3, 1:15 PM

Description

Problems

Inuka team identified areas of improvements that could enhance the functionality, user interface, and overall reader experience of the Wikipedia Preview plugin. These improvements include:

  • Making the Wikipedia Preview thumbnail clickable to provide a more intuitive interaction.
  • Showing images available in the preview within its default window to enrich the preview content without requiring the "Continue reading" action.
  • Avoiding redundancy by not showing the thumbnail image as part of the gallery available below the Wikipedia Preview text.
Design:

➡️ If an article has no images then do the following

Wikipedia Preview-1.png (376×400 px, 34 KB)
  • Display a preview with just the wordmark.

➡️ If an article has 1-2 images then do the following

Wikipedia Preview.png (400×400 px, 40 KB)
Wikipedia Preview-2.png (237×400 px, 27 KB)
  • Display a preview with Thumbnail.
  • Use lead image as Thumbnail.
  • Thumbnail should be clickable, opening into media viewer for more details.

➡️ If an article has 3 or more images then do the following

Wikipedia Preview-3.png (450×400 px, 123 KB)
Wikipedia Preview-4.png (400×400 px, 96 KB)
  • Implement a horizontal scrolling carousel that allows users to browse through the images. These should be clickable, opening into media viewer for more details.

➡️ Scrolling behavior

  • Ensure the thumbnail grid and single thumbnail, along with the Wikipedia wordmark, are fixed at the top.
  • Allow text to scroll behind these fixed elements.

Design file

Notes: During development, we will experiment with adjusting the sizes of thumbnails, fade effects, and other visual elements to optimize the preview popup layout.

Test Scenarios:
  • Test the clickability of the Wikipedia Preview thumbnail.
  • Evaluate the visibility of displaying images within the default preview window.
  • For no image article, we only show Preview with wordmark.
  • For 1-2 images we show thumbnail.
  • For 3 or more images we show horizontal scrollable gallery below the wordmark.
Acceptance Criteria:
  • The thumbnail in the Wikipedia Preview is clickable.
  • Images are integrated into the default preview window.