Page MenuHomePhabricator

Enhancing discoverability of Wikipedia Preview Option in WordPress
Open, MediumPublic

Description

Problem

After improving the visibility of the Wikipedia Preview in WordPress by moving it to the toolbar, we noticed that site owners still need some help to find it. This task aims to look into ways to help site owners find it after installing the plugin.
T352873: Change position of Wikipedia Preview option on the editing toolbar

Design

Tooltip display behavior

tooltip.png (900×1 px, 151 KB)
  • Present the tooltip after a 1 second delay when the toolbar is first used, ensuring users have settled into the editing environment.
  • Keep the tooltip visible for a full 5 seconds to allow adequate reading time.
  • If the toolbar is closed before the 5-second display period, display the tooltip the next time to toolbar appears to provide another opportunity for the user to view it. Cap the tooltip display reattempts to just one additional session to prevent repetitive intrusion (so a total limit of 2 displays, including the very first one)
  • Once the tooltip has been displayed for the full duration, do not show it in future sessions to avoid redundancy.
  • If the user clicks on the "W" icon while the tooltip is being displayed, the tooltip should disappear and does not display again (as we infer the feature has been 'discovered' from this last user action).

Hover Tooltip
If the user hovers over the "W" icon, the built-in Wordpress tooltip should appear reading 'Add Wikipedia Preview' as well

Tooltip Dismissal
The tooltip should automatically disappear after 5 seconds.

Text content
Tooltip text message is following "Add Wikipedia Preview".

Design
Tooltip's design needs to be consistent with WordPress and the Gutenberg editor's aesthetics. The attached screenshot is to be used as a reference only (for example, the pointing arrow should be centered). The final design to match WordPress's native UI components.

Responsiveness
Implement the tooltip to be fully responsive. It adapts to different screen sizes.

Positioning
Position the tooltip above the "W" icon. If there's no space on top, it can automatically reposition to where space is available.

Hover Tooltip Text Change

Screenshot 2024-02-27 at 3.59.03 PM.png (1×2 px, 454 KB)

Change existing Hover tooltip text from Wikipedia Preview to "Add WIkipedia Preview". This shows up when users hover over the "W" icon.

Acceptance criteria
  • Post-installation, the Wikipedia Preview option should be easily discoverable within the WordPress dashboard or editor.
  • Adequate information and guidance should be provided within the interface to assist site owners in using the feature effectively.
  • The solution should be compatible across different WordPress versions and work seamlessly with both the Classic and Gutenberg editors.
  • The implementation of the solution should not disrupt existing functionalities of the plugin or WordPress.
Test scenarios
  • Test the plugin installation process and subsequent access to the Wikipedia Preview feature.
  • Ensure the feature is easily accessible and functional in both Classic and Gutenberg editors.
  • Test the effectiveness of the added instructions or tooltips in guiding the user to the feature.

Please note: for an easier and better testing experience, an API endpoint has been included to reset the variables associated with our custom tooltip, so that we can test quickly as many times as needed. The tooltip feature is meant to be non-intrusive, so it doesn't show after hitting the 2 limit to not be annoying, but that means if you don't reset the variables you won't be able to see the tooltip again. Follow these steps to reset:

  1. Copy and paste the following command onto the browser developer console, then press enter to execute, you should see something like Promise {<pending>} afterwards
                fetch( '/wp-json/wikipediapreview/v1/reset/', {
			method: 'POST',
			headers: {
				'Content-Type': 'application/json',
			},
		} );
  1. After running command above, you must refresh your page to finish resetting variables.
Usability Tests
  • Conduct followup usability tests on Userlytics to assess the effectiveness of the proposed solution. The test should focus on how easily site owners can find and utilize the Wikipedia Preview option after the changes are implemented.

Task Description:

QA Results - WordPress Dev

ACStatusDetails
1T352298#9797788

Event Timeline

SGautam_WMF renamed this task from Enhancing discoverability of Wikipedia Preview Option in WordPress Problem to Enhancing discoverability of Wikipedia Preview Option in WordPress.Nov 29 2023, 3:10 PM

Tooltip display behavior

tooltip.png (900×1 px, 151 KB)
  • Present the tooltip after a 1 second delay when the toolbar is first used, ensuring users have settled into the editing environment.
  • Keep the tooltip visible for a full 5 seconds to allow adequate reading time.
  • If the toolbar is closed before the 5-second display period, skip the tooltip for the remainder of the session.
  • Reattempt displaying the tooltip in the subsequent editing session to provide another opportunity for the user to view it. Cap the tooltip reattempts to just one additional session to prevent repetitive intrusion
  • Once the tooltip has been displayed for the full duration, do not show it in future sessions to avoid redundancy.

Hover Tooltip Precedence
Give priority to the hover tooltip over the delayed introductory tooltip. If the user hovers over the "W" icon, display the tooltip immediately without the additional delay. After the hover tooltip has been displayed, there's no need for the delayed tooltip to appear again.

Tooltip Dismissal
The tooltip should automatically disappear after 5 seconds.

Text content
Tooltip text message is following "Add Wikipedia Preview".

Design
Tooltip's design needs to be consistent with WordPress and the Gutenberg editor's aesthetics. The attached screenshot is to be used as a reference only. The final design to match WordPress's native UI components.

Responsiveness
Implement the tooltip to be fully responsive. It adapts to different screen sizes.

Positioning
Position the tooltip above the "W" icon.

Hover Tooltip Text Change

Screenshot 2024-02-27 at 3.59.03 PM.png (1×2 px, 454 KB)

Change existing Hover tooltip text from Wikipedia Preview to "Add WIkipedia Preview". This shows up when users hover over the "W" icon.

Moving it to ready for dev based on our conversation during the team meeting.

PWaigi-WMF triaged this task as Medium priority.Mar 5 2024, 2:10 PM

@eamedina For the most part, the behavior goes with T352298#9579731. I did come across a few issues though, if you can please review them, thanks!

Status: ❌FAIL
Environment: WordPress Dev- 6.5; Wikipedia preview-WordPress.q: commit 56c2041c49a156009eed6ca0c4b642d73036b040 Thu May 9 22:07:30 2024 -0400; Wikipreview: 1.10.0; Commit: commit 7fa5a624dd696f96306aee4be34498236a29b265 Tue May 14 21:14:46 2024 +0800
OS: macOS Sonoma 14.4.1
Browser: Chrome 124
Skins. N/A
Device: MBA M2
Emulated Device:: n/a
Test Links:
http://dev-test.local/philadelphia-eagles-test/

✅AC1: https://phabricator.wikimedia.org/T352298

W IconClick OutsideLimit 2 times5 Second DurationReader's View
iPhone 14 Max ProSurface 7

❌ Issues

  1. Are you supposed to see both tip popups when hovering the "w" icon because, on the tablet and phone, it's only showing the blue tooltip as seen from above?

  1. Limit 2 only exists if you do this all within 5 seconds. If you have the tooltip after 5 seconds, you can only see it once. I'm not sure if you want a real limit of two times or only if it's all under 5 seconds to be able to see it twice.

  1. When you click outside, is the toolbar supposed to close or do you want to pop up again? Also, did you want the tooltip to pop again even though I'm not hovering over anything except me clicking on the right side? If I click outside a 2nd time, the toolbar closes.

Are you supposed to see both tip popups when hovering the "w" icon because, on the tablet and phone, it's only showing the blue tooltip as seen from above?

Yea that's fine, the hover tooltip is the Wordpress built-in tooltip, and hovering is a behavior you can only do on desktop so makes sense that table/phone is a different behavior.

Limit 2 only exists if you do this all within 5 seconds. If you have the tooltip after 5 seconds, you can only see it once. I'm not sure if you want a real limit of two times or only if it's all under 5 seconds to be able to see it twice.

That's correct, if the tooltip is displayed for more than five seconds it disappears and you only see it once, this is the expected behavior

When you click outside, is the toolbar supposed to close or do you want to pop up again? Also, did you want the tooltip to pop again even though I'm not hovering over anything except me clicking on the right side? If I click outside a 2nd time, the toolbar closes.

This is all expected behavior as well, I don't see anything wrong in the video. The toolbar appears and disappears according to Wordpress code, our plugin code only comes in when the toolbar is rendered.

Thanks for the feedback @GMikesell-WMF !