Page MenuHomePhabricator

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

Assigned To
Authored By
AAlhazwani-WMF
Oct 5 2021, 4:17 PM
Referenced Files
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
F34710985: image.png
Oct 25 2021, 9:32 PM
F34710987: image.png
Oct 25 2021, 9:32 PM
F34710989: image.png
Oct 25 2021, 9:32 PM
F34710960: image.png
Oct 25 2021, 9:32 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.

image.png (1×1 px, 1 MB)

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

Event Timeline

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.

image.png (1×1 px, 1 MB)

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

  1. 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.

image.png (1×1 px, 690 KB)

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

image.png (1×1 px, 692 KB)

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

image.png (1×2 px, 1 MB)

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.

image.png (1×680 px, 574 KB)

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

image.png (1×2 px, 1 MB)

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.

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.

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

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?

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

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

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

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

mepps added a subscriber: mepps.

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

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

@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’:

image.png (875×628 px, 456 KB)

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

image.png (876×631 px, 453 KB)


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

image.png (882×412 px, 249 KB)

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

image.png (881×414 px, 269 KB)


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

image.png (509×740 px, 277 KB)

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

image.png (506×740 px, 291 KB)


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

image.png (797×447 px, 267 KB)

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

image.png (791×451 px, 345 KB)


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

image.png (514×935 px, 228 KB)

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

image.png (459×934 px, 205 KB)


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

image.png (719×1 px, 221 KB)

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

image.png (706×1 px, 235 KB)


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

image.png (767×1 px, 238 KB)

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

image.png (734×1 px, 238 KB)


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

image.png (782×1 px, 219 KB)

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

image.png (779×1 px, 227 KB)


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

image.png (769×1 px, 246 KB)

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

image.png (730×1 px, 245 KB)

Madalina added a subscriber: Madalina.

Looks good to me, marking this as resolved