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
 |
- 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
 |
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:
- 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', }, } );
- 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
| AC | Status | Details |
|---|---|---|
| 1 | ✅ | T352298#9797788 |