Dismiss survey behaviour after a user answers to a survey
Closed, ResolvedPublic2 Estimated Story Points
Actions

Assigned To

Authored By

	AAlhazwani-WMF
	Oct 5 2021, 4:17 PM

Description

Background

T225549: [Bug] Dismissing external survey thanks user for the feedback

Clicking "No thanks" here 👇

localhost_8181_w_index.php_title=Foo&quicksurvey=external-survey-external+example+survey&mobileaction=toggle_view_mobile.png (600×600 px, 72 KB)

Shows this message 👇

localhost_8181_w_index.php_title=Foo&quicksurvey=external-survey-external+example+survey&mobileaction=toggle_view_mobile (1).png (272×600 px, 34 KB)

That message shouldn't show.

Jobs to be done

When I notice a message that asks me to visit an external survey away from the page I am currently viewing I want to dismiss the message so I can continue browsing without distractions.

Mocks of proposed design

Click/tap on "No thanks" hides the survey message and moves the sidebar back into place at the top of the page.

Notes on design

This is a Figma prototype showcasing the interaction. Adding the prototype also as a gif as raw backup.

dismiss-interaction.gif (1×604 px, 661 KB)

Acceptance criteria

Dismissing an external survey clicking "No thanks" gets rid of the survey box on the page

Interaction flow for QA

Visit this page to see an external survey: https://en.wikipedia.beta.wmflabs.org/wiki/African_wild_dog?quicksurvey=external%20example%20survey
Click/tap on "No thanks" hides the survey message without any "thank you" prompt.

Details

	Subject	Repo	Branch	Lines +/-
	Survey no longer rendered if user says no thank you	mediawiki/extensions/QuickSurveys	master	+57 -11

Customize query in gerrit

Related Objects
Search...

Status	Assigned	Task
Open	None	T89970 Enable microsurveys for long-term tracking of editing experience
Resolved	• Jhernandez	T184760 It should be easy to make a microsurvey question go away, without answering it
Resolved	• Jhernandez	T225549 [Bug] Dismissing external survey thanks user for the feedback
Resolved	None	T293624 [EPIC] Build opt-out feature
Resolved	• mepps	T292555 Dismiss survey behaviour after a user answers to a survey

Event Timeline

AAlhazwani-WMF created this task.Oct 5 2021, 4:17 PM

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptOct 5 2021, 4:17 PM

AAlhazwani-WMF moved this task from Needs triage to Design work on the Trust and Safety Tools Team Backlog board.Oct 5 2021, 4:22 PM

• Jhernandez subscribed.Oct 6 2021, 9:42 AM

After gathering internal product and design feedback we will opt for option 1, which is: click/tap on "No thanks" hides the message and moves the sidebar back into place at the top of the page.

I'll add for posterity the other options down here and update the description above with the most recent changes.

Click/tap on "No thanks" shows a feedback message and keeps the sidebar in place in order to avoid any layout shift. Reloading the page (or navigating to another page) could hide the feedback message for good.

Click/tap on "No thanks" shows a feedback message with an "Undo" button to bring back the message.

The undo options brings into play different (potential) considerations. For example we could implement an auto hide mechanism 3A.

Or the message box could collapse to a permanent smaller box with an "Undo" button takes away less real estate to the rest of the sidebar 3B.

Or finally the box could collapse to a temporary smaller box and then auto hide 3C.

AAlhazwani-WMF updated the task description. (Show Details)Oct 6 2021, 1:54 PM

AAlhazwani-WMF mentioned this in T225549: [Bug] Dismissing external survey thanks user for the feedback.

ARamirez_WMF moved this task from Design work to Ready for estimation on the Trust and Safety Tools Team Backlog board.Oct 6 2021, 2:45 PM

A couple of things regarding the interaction:

The survey can be placed at an arbitrary place on the page, depending on configuration of it. See embedElementId in the QuickSurveys docs. Due to this the animation / interaction we need to apply to the survey element only without touching other elements on the page because the survey could be placed anywhere.

This said, on the web for animating there are some types of CSS property changes which can have bad performance. This is because when the values of these properties are changed, they change the layout of the page. Examples of such properties are:

changing size: width, height
changing position: top, left, bottom, right

Changing the layout of the page is costly, since it means that we’re triggering the browser to do a layout and a paint all over again for each animation frame.

Generally we want to avoid animating CSS properties which update the layout of the page (width, height, position), since the animation can look choppy.

The alternative would be animating using scale (resource), but while the animation/transition is running the box still takes the same space on the page, so what we would see is the box collapsing out, and the moment it is gone a jump from the rest of the contents to fill that space. Here is a quick example with opacity:

African wild dog - Wikipedia, the free encyclopedia - Google Chrome 2021-10-06 17-39-45.gif (857×990 px, 1 MB)

In other cases like UIs where we know exactly where things are we would be able to animate surrounding elements to smoothly move where the gap is and make any reflows less noticeable and more performant, but in this case this box is going to be in the middle of content in some arbitrary position so I'm afraid that is not an option.

I think we need to talk more about the animation before we can be ready to estimate.

AAlhazwani-WMF added a project: Design.Oct 6 2021, 3:54 PM

• Jhernandez moved this task from Ready for estimation to Pre-estimation review on the Trust and Safety Tools Team Backlog board.Oct 7 2021, 2:58 PM

Thanks for the thorough explanation @Jhernandez! Animating only some components might do more harm than good. I suggest we don't animate anything and simply hide the survey message. I updated the description of this task, the prototype and the gif. Thanks again!

Brilliant, thanks! I'm moving this to ready for estimation then.

AAlhazwani-WMF renamed this task from Dismissing survey behaviour to Dismiss survey behaviour after a user replies to a survey.Oct 13 2021, 9:17 AM

AAlhazwani-WMF renamed this task from Dismiss survey behaviour after a user replies to a survey to Dismiss survey behaviour after a user answers to a survey.

• Jhernandez triaged this task as High priority.Oct 18 2021, 3:35 PM

ARamirez_WMF set the point value for this task to 2.Oct 18 2021, 3:39 PM

ARamirez_WMF moved this task from Ready for estimation to Ready for development on the Trust and Safety Tools Team Backlog board.

I'll edit the description with some info from the bug and then move it to the board.

• Jhernandez removed • Jhernandez as the assignee of this task.Oct 18 2021, 4:12 PM

• Jhernandez updated the task description. (Show Details)

• Jhernandez edited projects, added Trust and Safety Tools Team Backlog (Kanban); removed Trust and Safety Tools Team Backlog.

I've removed the navigation steps from the QA flow because by using the query param in the URL to show the survey in beta cluster if you refresh or go to another page with the query param you will see the survey regardless of dismissal.

I'll add some details to acceptance criteria.

@aminalhazwani do we want to untag Design when we move tasks along?

In T292555#7437267, @Jhernandez wrote:

@aminalhazwani do we want to untag Design when we move tasks along?

Yes, I'll do it! Thanks @Jhernandez!

AAlhazwani-WMF removed a project: Design.Oct 18 2021, 4:24 PM

T293798: QA needs a Quick Survey test environment on beta needs to happen before this task can be tested. The URL in the description needs to be updated for the QA steps

• Jhernandez updated the task description. (Show Details)Oct 19 2021, 3:28 PM

Change 732051 had a related patch set uploaded (by Mepps; author: Mepps):

[mediawiki/extensions/QuickSurveys@master] Survey no longer rendered if user says no thank you

https://gerrit.wikimedia.org/r/732051

gerritbot added a project: Patch-For-Review.Oct 19 2021, 7:38 PM

I'm not sure if using the answer key is the best approach here but I thought I'd put this out there.

• Jhernandez moved this task from 🔍 Review/Feedback to 💻 In Progress on the Trust and Safety Tools Team Backlog (Kanban) board.Oct 20 2021, 11:44 AM

ARamirez_WMF assigned this task to • mepps.Oct 20 2021, 2:35 PM

• mepps moved this task from 💻 In Progress to 🔍 Review/Feedback on the Trust and Safety Tools Team Backlog (Kanban) board.Oct 20 2021, 6:27 PM

• Jhernandez added a parent task: T184760: It should be easy to make a microsurvey question go away, without answering it.Oct 21 2021, 10:10 AM

• Jhernandez updated the task description. (Show Details)Oct 25 2021, 2:59 PM

• Jhernandez removed a subtask: T293798: QA needs a Quick Survey test environment on beta.

• Jhernandez moved this task from 🔍 Review/Feedback to 🐛 QA on the Trust and Safety Tools Team Backlog (Kanban) board.Oct 25 2021, 3:09 PM

Change 732051 merged by jenkins-bot:

[mediawiki/extensions/QuickSurveys@master] Survey no longer rendered if user says no thank you

https://gerrit.wikimedia.org/r/732051

• Jhernandez updated the task description. (Show Details)Oct 25 2021, 3:14 PM

ReleaseTaggerBot added a project: MW-1.38-notes (1.38.0-wmf.6; 2021-10-26).Oct 25 2021, 4:00 PM

Maintenance_bot removed a project: Patch-For-Review.Oct 25 2021, 4:10 PM

Madalina added a project: WMF-Safety-Survey.Oct 25 2021, 4:58 PM

@mepps,
I have verified the information listed in the ticket Description has been implemented and is working successfully at the following url: https://en.wikipedia.beta.wmflabs.org/wiki/African_wild_dog?quicksurvey=external%20example%20survey

Compatibility Testing was performed on the following:
Desktop – Chrome version 95 Windows 10 / Microsoft Edge version 94 Windows 10 / Firefox version 93 Windows 10 / Opera version 80.0.4170.40 Windows 10 / Safari version 14 Mac OS Big Sur.

Mobile Devices – Android version 11 phone emulator / Android version 8.1 Galaxy A10 tablet / iOS version 15 iPad Pro 5th generation / iOS version 15 iPhone 13 Pro Max.

Below are screenshots of new code changes on various devices and browsers:
(NOTE: please disregard blurriness of screenshots, this is due to device simulation and is not related to the code changes):

Screenshot for iOS version 15.0 iPad Pro 5th generation: Before clicking ‘No Thanks’:

Screenshot for iOS version 15.0 iPad Pro 5th generation: After clicking ‘No Thanks’:

Screenshot for iOS 15.0 iPhone 13 Pro Max phone: Before clicking ‘No Thanks’:

Screenshot for iOS 15.0 iPhone 13 Pro Max phone: After clicking ‘No Thanks’:

Screenshot for Android version 8.1 Galaxy A10 tablet: Before clicking ‘No Thanks’:

Screenshot for Android version 8.1 Galaxy A10 tablet: After clicking ‘No Thanks’:

Screenshot from Android version 11 phone emulator: Before clicking ‘No Thanks’:

Screenshot from Android version 11 phone emulator: After clicking ‘No Thanks’:

Screenshot from Safari version 14 Mac OS Big Sur: Before clicking ‘No Thanks’:

Screenshot from Safari version 14 Mac OS Big Sur: After clicking ‘No Thanks’:

Screenshot from Microsoft Edge version 94 Windows 10: Before clicking ‘No Thanks’:

Screenshot from Microsoft Edge version 94 Windows 10: After clicking ‘No Thanks’:

Screenshot from Chrome version 95 Windows 10: Before clicking ‘No Thanks’:

Screenshot from Chrome version 94 Windows 10: After clicking ‘No Thanks’:

Screenshot from Firefox version 93 Windows 10: Before clicking ‘No Thanks’:

Screenshot from Firefox version 93 Windows 10: After clicking ‘No Thanks’:

Screenshot from Opera version 80.0.4170.40 Windows 10: Before clicking ‘No Thanks’:

Screenshot from Opera version 80.0.4170.40 Windows 10: After clicking ‘No Thanks’:

Djackson-ctr moved this task from 🐛 QA to 🤘 Done on the Trust and Safety Tools Team Backlog (Kanban) board.Oct 25 2021, 9:33 PM

AAlhazwani-WMF added a project: Design.Nov 2 2021, 2:19 PM

Madalina added a parent task: T293624: [EPIC] Build opt-out feature.Nov 3 2021, 8:21 AM

Looks good to me, marking this as resolved

	F34710957: image.png
	Oct 25 2021, 9:32 PM

	F34710962: image.png
	Oct 25 2021, 9:32 PM

	F34710998: image.png
	Oct 25 2021, 9:32 PM

	F34710980: image.png
	Oct 25 2021, 9:32 PM

Dismiss survey behaviour after a user answers to a surveyClosed, ResolvedPublic2 Estimated Story PointsActions