Page MenuHomePhabricator

Enhancing discoverability of Wikipedia Preview links for Readers
Open, MediumPublic

Description

Problem

Recent user research uncovered that most readers (reading via desktop or mobile) do not notice the Wikipedia Preview link as they browse content on sites that have preview links. This task aims to explore and implement suitable intervention/s that would help with the discoverability of the links by Readers.

  • This task focuses on discoverability with the Reader in mind and is meant to complement efforts outlined under T327104.
Discovery

Explore below options with considerations noted:

a)Adding a nudge on sites that have preview links
  • irrespective of how the preview link is styled by the Site Owner
  • the solution shouldn't compromise the overall UX on the site
  • should allow Site Owners to turn it off
  • possibly a one-off nudge
b)Adding a badge/widget that shows there's a preview link on the site
  • examples: incognito badge on google chrome, this site, .....
Design

We explored different subtle animations(pulse, shimmer, progressive underline) to bring preview links under readers attention. They worked to some extent but we want to explore further so we decided another approach where Preview popup kept open by default for one of the previews in the article. We are moving forward with this approach along with some crucial considerations.

Desktop - 3.png (1×1 px, 1021 KB)

Triggering mechanism
The pop-up activates when a preview-enabled word enters the viewport. A top banner message briefly informs new users about the feature and stops showing once dismissed.

Banner message - Hover over dashed underlined words for instant Wikipedia Preview
Banner background color - #F8F9FA

Timing
Implement a delay of 0.5 - 1 seconds after the word becomes visible in the viewport before the pop-up appears. If possible, introduce a slightly longer delay(1-2 seconds) if preview enabled words are part of the first paragraph.

Frequency
Default popup should only appear once per user session and if possible not to reappear in future sessions once dismissed.

Design
Existing popup design along with a banner message on top.

Positioning
The pop-up is positioned near the highlighted word for easy reference.

Dismissal
Users can dismiss the pop-up via a close icon. An auto-dismissal feature is also included, closing the pop-up after 10 seconds of inactivity.

Device
Pop-ups are desktop-only by default.

Link style for default popups
To prevent confusion between Wikipedia Preview links and other hyperlinks on a page, default popup should be activated only when preview links are styled using the predefined, default style (dashed underline) provided with the Wikipedia Preview feature. This ensures users can easily distinguish between interactive preview links and standard links. If a site customizes the appearance of preview links to match the styling of regular hyperlinks (e.g., solid underline, color changes), the automatic popup feature should be disabled to avoid user confusion.

Handling multiple previews in close proximity
When multiple preview-enabled links are in close proximity, the pop-up for the first link in the viewport is prioritized.

Handling page load delays
Do not wait for all page resources to load. Showing Preview popup after primary content(text) is ready.

Acceptance Criteria
Test Scenarios

Event Timeline

We have been thinking of showing a default popup, dropping following UX points related to it. I will update the task description once team agrees.

Screenshot 2024-02-27 at 4.49.07 PM.png (1×1 px, 1 MB)

Triggering mechanism
The preview should appear when a preview-enabled word or phrase enters the viewport.

Timing
Implement a delay of 0.5 - 1 seconds after the word becomes visible in the viewport before the pop-up appears. If possible, introduce a slightly longer delay(1-2 seconds) if preview enabled words are part of the first paragraph.

Frequency
Default popup should only appear once per user session and if possible never shows up again by default for the same user in their future visit on the website.

Design
No change here, we will use existing popup designs.

Positioning
Positioned close to the preview word.

Dismissal
Allow users to dismiss the pop-up by using the close icon. Additionally, implement a time-sensitive auto-dismissal feature, where the pop-up automatically closes after a set period of inactivity (e.g., 10 seconds).

Device
Default popups are only available for desktop readers. On mobile, they will show when users decide to interact with preview words/phrases.

Link style for default popups
To prevent confusion between Wikipedia Preview links and other hyperlinks on a page, default popup should be activated only when preview links are styled using the predefined, default style (dashed underline) provided with the Wikipedia Preview feature. This ensures users can easily distinguish between interactive preview links and standard links. If a site customizes the appearance of preview links to match the styling of regular hyperlinks (e.g., solid underline, color changes), the automatic popup feature should be disabled to avoid user confusion.

Handling multiple previews in close proximity
Prioritize showing the pop-up for the first preview-enabled link that enters the viewport within a section of content.

Handling page load delays
Do not wait for all page resources to load. Showing Preview popup after primary content(text) is ready.

We can show a small banner on top of the default popup for readers who are seeing these for the first time. This can help readers have more understanding about these popups.

Banner.png (1×1 px, 1 MB)
  • Display a brief message at the top of the popup.
  • Stop showing the message along with the Wikipedia Preview popup once users dismiss the default popup.
SGautam_WMF updated the task description. (Show Details)
SGautam_WMF updated the task description. (Show Details)

@SBisson I am wondering while implementing it if its possible for us to have the banner on top of preview remain until the reader closes the preview or have it automatically disappear after a predefined seconds? whichever comes first?

SBisson moved this task from Dev to Ready for Dev on the Inuka-Team (Kanban) board.
SBisson subscribed.