Jobs to be done
When I see a survey on a wiki project I want to be able to understand if this survey is from the Foundation and why it is being shown So I can safely reply or dismiss it.
Right now a user has no context on how or why a survey is being displayed in their experience. This task wants to explore a possible solution to address this issue.
We are evaluating if we are able to work on this feature. If not we are going to fallback to T294363: Link to additional information and resources in the thank you message.
Additional specs can be provided if we decide to follow up on this feature.
In terms of implementation, we should avoid implementing our own popups, given WVUI doesn't have a popup component. We should probably try to integrate the OOUI popup or other existing popups in the Vue component to re-use it.
Testing and QA steps
- TBD e.g. beta cluster
Original Acceptance Criteria
- When a user clicks the info "i" button the popup dialog is displayed
- When a user navigates with their keyboard/TAB navigation, she can focus the "i" button and press ENTER to open the popup dialog
- When a user clicks on any of the links inside the popup dialog a new tab is open and the popup dialog is dismissed
- When a user clicks the close "x" of the popup dialog the dialog is dismissed
- When a user clicks outside of the popup dialog the dialog is dismissed
Questions for Spike
- Is Option A the best for the user (as the info window obscures the questions)?
- I am not sure about this as it seems to be a designer question. The ability to place window will be dependent on library script library used
- See also https://phabricator.wikimedia.org/T294354#7671610
- How do we signify the tooltip should be included (maybe a span class), and then also how to add the translation key (likely as a config value)?
- How do we use OOUI.js when we aren't currently using it in QuickSurvey?
- Jason, Essex and Ellen discussed and believe that this is probably another spike, concerning what would need to happen to bring in OOUI.js and the ramifications on the code base
Analysis for Spike
|A||Add an additional link to the meta page of the survey next to the link to the privacy statement.||Easy implementation engineering-wise. Survey authors do not need to be concerned with how additional information may impact survey layout. Reduced QA required per survey, leading to more sustainable deployments. Additional info on meta will not need to go through the slow i18n deployment process with wikimediamessages and translatewiki. Please read https://phabricator.wikimedia.org/T300293||Users need to leave the page to find out more. Smaller text at the bottom is usually identified as not so useful legal text. The working might also need to be more self explanatory: what am I going to find on this "meta page"?|
|B||Display an info button next to the survey question||Additional information is immediately accessible and contextual.||Interaction might not be explicit even if the info button is an established design pattern. Implementation is more complex, eg. hover vs touch interaction with a small input area. Additional info embedded in popup will require additional QA for each survey to ensure that the message does not break survey layout or rendering. Additional info on meta must go through the slow i18n deployment process with wikimediamessages and translatewiki. Please read https://phabricator.wikimedia.org/T300293|
|C||Display an info button next to the privacy||Secondary information is provided as a secondary interaction.||Interaction is less obvious as the info icon can feel like a simple signifier for the footer text. Additional info embedded in popup will require additional QA for each survey to ensure that the message does not break survey layout or rendering. Additional info on meta must go through the slow i18n deployment process with wikimediamessages and translatewiki. Please read https://phabricator.wikimedia.org/T300293|
Assumptions Choice A
It is assumed that the string to display the display data will be of unknown length. There would be no limit on the amount of text in the display data due to look/feel issues.
It is assumed that the display data will be located on a stand alone page.
It is assumed that the display data will have translations prior to implementation.
Assumptions Choice B and C
It is assumed that the string to display the display data will be of limited length. The display text in examples B and C are approximately 245 characters long.
It is assumed that the string to display the display data header will be of limited length. The header text in examples B and C are approximately 20 characters long.
NOTE - If the data set (content or text) is to be larger, recommend that example A be followed.
Files which may be touched in code changes for options B and C:
extension.json includes/Hooks.php includes/Rest/SurveyMessagesHandler.php (NEW file from https://gerrit.wikimedia.org/r/c/mediawiki/extensions/QuickSurveys/+/745947) resources/ext.quicksurveys.lib/lib.js resources/ext.quicksurveys.lib/vue/QuickSurvey.vue resources/ext.quicksurveys.lib/vue/render.js resources/ext.quicksurveys.lib/vue/utils.js tests/jest/render.test.js tests/phpunit/unit/Rest/SurveyMessagesHandlerTest.php ---- test file
Changes will most likely need to be made to the view
And perhaps additional css values
Please note: There is a folder, located at resources/lib/ooui
The reader is encouraged to read resources/lib/ooui/README.md, in case the library must be installed.
If the data on meta is to be over a specific length, then option A would be the most appropriate selection. If the additional information needs to be updated on an ongoing basis, then option A would also be a good choice. Otherwise, B or C would be more inline with current web standards. Option C is basically the same as option B, with the exception of the Z index.
The OOUI library seems to be needed to be brought into the code base to accomplish the popup or tooltip - this library also includes all the css and images which would go with the code change.
Tooltip feature with toggle () function: