Page MenuHomePhabricator

It should be easy to make a microsurvey question go away, without answering it
Closed, ResolvedPublic3 Estimated Story Points

Assigned To
Authored By
Whatamidoing-WMF
Jan 11 2018, 6:59 PM
Referenced Files
F34765035: image.png
Nov 24 2021, 5:46 PM
F34765058: image.png
Nov 24 2021, 5:46 PM
F34765056: image.png
Nov 24 2021, 5:46 PM
F34765046: image.png
Nov 24 2021, 5:46 PM
F34765053: image.png
Nov 24 2021, 5:46 PM
F34765033: image.png
Nov 24 2021, 5:46 PM
F34765050: image.png
Nov 24 2021, 5:46 PM
F34765029: image.png
Nov 24 2021, 5:46 PM
Tokens
"100" token, awarded by awight.

Description

Original request

Microsurvey questions should appear instantly/when the page loads, but they should also be very easy to remove without answering. We probably want a small "Cancel" button as well as an (x) button on the box (maybe next to the privacy link), so that it will be very obvious that the box can be closed without answering the question.

Design specs

Spacing:

image.png (620×1 px, 468 KB)

Close button:

StateScreenshotSpecs
Default
Default.jpg (560×664 px, 128 KB)
Icon fill: Base 10 #202122. Button background: transparent.
Hover
Hover.jpg (560×664 px, 130 KB)
Icon fill: Base 10 #202122. Button background: Base 90 #f8f9fa. Corner radius: 2px.
Active
Active.jpg (560×664 px, 130 KB)
Icon fill: Base 10 #202122. Button background: Base 80 #eaecf0. Border: Base 30 1px solid #72777d. Corner radius: 2px.
Focus
Focus.jpg (560×664 px, 129 KB)
Icon fill: Base 10 #202122. Button background: transparent. Border: Accent 50 2px solid #36c. Corner radius: 2px.

Technical information

  • The dismissal behavior should be the same that the "No thanks" button has. It sets a value with the name of the survey as key in local storage and gets rid of the survey box in the same way.
  • The implementation of the button should happen locally in QuickSurveys
    • We can likely re-use wvui-icon with the wvuiIconClose type (docs).

Acceptance criteria

  • All surveys (internal and external) show the close button
  • The close button behaves as expected in the design mockups
  • Clicking the close button dismisses the survey for the current session
    • The dismissal behavior should be the same that the "no thanks" button has in external surveys.

QA notes

This patch is about the behavior and design of the X close button, not about the buttons or the rest of the survey box
Scenario 1
  1. Clear storage if the survey has been dismissed/closed before
  2. Visit https://en.wikipedia.beta.wmflabs.org/wiki/User:EssexIgyan/sandbox
  3. The trust and safety test survey should show up, there should be a [x] button in the top right
  4. Clicking the close button removes the survey from the page
  5. Refreshing the page, the survey does not show up again
Scenario 2
  1. Clear storage if the survey has been dismissed/closed before
  2. Visit https://en.wikipedia.beta.wmflabs.org/wiki/User:EssexIgyan/sandbox
  3. The trust and safety test survey should show up, there should be a [x] button in the top right
  4. Clicking the close button removes the survey from the page
  5. Click the link on the page that goes to User:Erayfield/sandbox
  6. Once at User:Erayfield/sandbox, the survey should not show up
  7. Click the link on the page that goes to User:EssexIgyan/sandbox
  8. Once at User:EssexIgyan/sandbox, the survey should not show up

Event Timeline

There are a very large number of changes, so older changes are hidden. Show Older Changes
matmarex added a subscriber: matmarex.

Removing MediaWiki-Page-editing so that this doesn't clutter searches related to actually editing pages in MediaWiki. This project should only be on the parent task, probably (T89970). [batch edit]

These are some of the early explorations on how we could enable users to dismiss a survey without providing an answer. These options include a close "x" button, a close banner, and different positioning and layout approaches.

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

  • Version 000 uses the OOUI quiet button widget.
  • Version 001 uses the same button but tries to create a stronger separation of concerns by constraining the survey content in a "separate" column. This approach might be not ideal for longer surveys that need the full width available.
  • Version 002 and 003 explore the idea of a banner below the survey but it feels that it's taking too much space for such small interaction.
  • Version 004 tries a different position of the dismiss button which might be not very familiar, close buttons are usually positioned in the top right/left corner.
  • Version 005 reinforces the meaning of the close button with an additional label which might not be necessary as the "x" is a quiet common pattern and metaphor.

Taking all of this into account we further explored option 000. In order to better separate the content of the survey from the additional interactions such as the close button we are going to use the same close button as the popup component.

image.png (550×742 px, 70 KB)

The following screens display the different interaction states: default, hover, active and focused.

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

If we think this is a valuable solution we'll go forward and prepare the redlines for implementation.

Looks good to me. The only thing I'd highlight (more on the design front than the engineering one) is that the spacing is inconsistent with the popup content.

To illustrate what I mean:

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

In this one 👆 the spacing is all the same across the whole popup, including the X to close.

image.png (469×1 px, 134 KB)

And in the QuickSurvey mockup the X and its bounding box have different spacing to the survey container than the rest of the elements in the container (unlike the referenced popup).

This is not a problem per se, just wanted to highlight it in case it wasn't intentional, and if it is intentional then we would need what the spacing is supposed to be so that it makes sense and we don't make it up.


Details for the implementation side: QuickSurveys uses WVUI, and this is how they would look like: https://doc.wikimedia.org/wvui/master/ui/?path=/story/components-button--configurable&args=type:quiet;default:;icon:wvuiIconClose;disabled:false The bounding box isn't square, and the background + borders are different from the mockups.

There are also plain icons https://doc.wikimedia.org/wvui/master/ui/?path=/story/components-icon--configurable&args=icon:wvuiIconClose that we could use to construct our own button for this case, but I'm not sure how good of an idea that would be.


To summarize, @aminalhazwani:

  • Is the spacing difference in the x buttons intentional? If so, we need some details about it for implementation
  • Can you look at the button component in WVUI and check if that is out of style guide or if it could work?

Initially the x button position was intentional (I was afraid that the button was too close to the survey question and might creating some confusion: am I dismissing the survey or am I answering it) but after talking with Pau this morning we opted for a different solution, more aligned with the overall layout.

I check the (quiet) button component from WVUI and it may be too prominent for our needs.

image.png (622×2 px, 627 KB)

I also noticed that in our design Figma library we have a (quiet) icon-only button which is not available in WVUI at the moment. It's a square button instead of a rectangular one. But also in this case I believe that this button (32x32px) is too prominent for our needs.

image.png (638×2 px, 687 KB)

That is why I opted for the x button from the popup component, which it is uses a 14x14px icon. But the x button in the popup has no bounding box nor states in the design Figma library so I added a bounding box and the necessary interaction states (default, hover, active, focused). In this case the icon cointainer would be a 24x24px button.

image.png (616×2 px, 597 KB)

These are the proposed specs, do you know @Jhernandez how we can propose new additions to the WVUI? I can also ping Volker if necessary.

image.png (620×1 px, 468 KB)

Colors for icon fill, hover, active and focused states follow the same patters as the other buttons in the WVUI. If we need those colors specified also here I'll gladly add them.

I love reading the process and options, thanks for taking the time!

In T184760#7428299, @aminalhazwani wrote:

image.png (616×2 px, 597 KB)

[...]
image.png (620×1 px, 468 KB)
>
Colors for icon fill, hover, active and focused states follow the same patters as the other buttons in the WVUI. If we need those colors specified also here I'll gladly add them.

Can we add these to the task description? Looking solid to me.

These are the proposed specs, do you know @Jhernandez how we can propose new additions to the WVUI? I can also ping Volker if necessary.

I have no idea about how this works. I know they are working on another new library but that is not ready so the options are:

  • Add a new kind of icon-only-small-button to WVUI
  • Build this close button in QuickSurveys with the wvuiIconClose icon and maybe upstream it in the new library in the future

I think getting input from Volker would be helpful to know where we stand at this moment.

@Volker_E do you recommend we add something to WVUI? Or we build something custom for QuickSurveys on top of WVUI? Or use something else?

Thanks @Jhernandez! Here's the specs for the different icon states:

StateScreenshotSpecs
Default
Default.jpg (560×664 px, 128 KB)
Icon fill: Base 10 #202122. Button background: transparent.
Hover
Hover.jpg (560×664 px, 130 KB)
Icon fill: Base 10 #202122. Button background: Base 90 #f8f9fa. Corner radius: 2px.
Active
Active.jpg (560×664 px, 130 KB)
Icon fill: Base 10 #202122. Button background: Base 80 #eaecf0. Border: Base 30 1px solid #72777d. Corner radius: 2px.
Focus
Focus.jpg (560×664 px, 129 KB)
Icon fill: Base 10 #202122. Button background: transparent. Border: Accent 50 2px solid #36c. Corner radius: 2px.

I've updated the description.

For QA for this ticket, we only care about the "X" button's position and spacing of that. Nothing else.

@aminalhazwani Do you want the survey title to wrap around the X if it is very long? (like the one in the example survey) or do you want the X to take all the vertical space in the title?

This?

xxxx xx xxxx xxx x  [x]
xxxx x xxxx xxxxxx
xxx xxx xxxxxx xxx xxxx

[xxx] [xxx]

Or this:

xxxx xx xxxx xxx x  [x]
xxxx x xxxx xxxxxx
xxx xxx xxxxxx xxx
xxxx

[xxx] [xxx]

@aminalhazwani The last row on the table with the designs is focus not hover right?

Change 734736 had a related patch set uploaded (by Jhernandez; author: Jhernandez):

[mediawiki/extensions/QuickSurveys@master] Add close button to the surveys

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

@aminalhazwani Do you want the survey title to wrap around the X if it is very long? (like the one in the example survey) or do you want the X to take all the vertical space in the title?

The X taking all the vertical space for the title only.

image.png (984×1 px, 147 KB)

@aminalhazwani The last row on the table with the designs is focus not hover right?

Yes, that is a typo, thanks for catching that! I fixed it both in the description and in the comment above.

@Jhernandez I have a question on the patch. It might need to be stepped back because I notice the hover state it's quite like the mockups.

The color comes from the wikimedia-ui-base that the design team maintains https://github.com/wikimedia/wikimedia-ui-base/blob/master/wikimedia-ui-base.less#L89-L90

wikimedia-ui-base.less
@background-color-quiet--hover:   rgba( 0, 24, 73, ( 7 / 255 ) ); // = `@wmui-color-base90` on white.
@background-color-quiet--active:  rgba( 0, 36, 73, ( 21 / 255 ) ); // = `@wmui-color-base80` on white.

@aminalhazwani said he's going to check what other parts of the product use quiet buttons in non-white backgrounds to see how we should proceed.

I did some investigation in product and I found two different implementations of the rule defined in the .less file.

wikimedia-ui-base.less
@background-color-quiet--hover:   rgba( 0, 24, 73, ( 7 / 255 ) ); // = `@wmui-color-base90` on white.
@background-color-quiet--active:  rgba( 0, 36, 73, ( 21 / 255 ) ); // = `@wmui-color-base80` on white.

Screen Shot 2021-11-02 at 12.27.18.png (1×3 px, 782 KB)

In the navigation bar, with Legacy Vector disabled the hover state of the navigation button is set to rgba( 0, 24, 73, ( 7 / 255 ) ); instead of @wmui-color-base90 since the button is on a white background.

image.png (762×2 px, 288 KB)

In the preference pane the hover state of the tabs is set to rgba(255, 255, 255, 0.3) instead of rgba( 0, 24, 73, ( 7 / 255 ) ); since it's on a non-white background.

I pinged Volker last week but I would not want this to be a potential blocker. With all things consider we could keep the color that comes from the from the wikimedia-ui-base @background-color-quiet--hoverand change it later if the design team opts for a different approach.

@aminalhazwani to confirm--you're asking to keep the patch as is, correct?

@aminalhazwani to confirm--you're asking to keep the patch as is, correct?

Correct, thanks @mepps!

Change 734736 merged by jenkins-bot:

[mediawiki/extensions/QuickSurveys@master] Add close button to the surveys

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

@mepps, I thought this task couldn't be moved to QA until ticket 'T293798 QA needs a Quick Survey test environment on beta' was completed?

I have spoken with @mepps, and will move this ticket back to Review/Feedback until ticket 'T293798 QA needs a Quick Survey test environment on beta' is completed.

Jhernandez changed the task status from Open to Stalled.Nov 3 2021, 10:35 AM
Jhernandez changed the task status from Stalled to In Progress.Nov 23 2021, 2:14 PM

I have verified the information listed in the ticket Description has been implemented…

During testing I did find one minor issue (with the spacing of the ‘X’ button on some mobile devices or small screens being too close to the survey verbiage) and I have already spoken with the Designer and Developer regarding the issue…

After speaking with them it was decided a bug will be filed by the Designer for the spacing issue…

Since this issue is more of a cosmetic issue and is not something that effects the functionality or behavior of the ‘X’ button, and no other issues have been found during my testing, this ticket will be pushed to Product Sign Off…


Testing was performed at the following urls:
https://en.wikipedia.beta.wmflabs.org/wiki/User:EssexIgyan/sandbox
https://en.wikipedia.beta.wmflabs.org/wiki/User:Erayfield/sandbox

Compatibility Testing was performed on the following:
Desktop  – Chrome version 96 Windows 10 / Microsoft Edge version 95 Windows 10 / Firefox version 94 Windows 10 / Opera version 81 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 some screenshots of new code changes on various devices and browser:
(NOTE: please disregard blurriness of screenshots, this is due to device simulation and is not related to the code changes):

Screenshots for iOS 15.0 iPhone 13 Pro Max phone:

image.png (892×424 px, 140 KB)
image.png (881×439 px, 150 KB)
image.png (888×415 px, 139 KB)


Screenshots from Android version 11 phone emulator:

image.png (793×452 px, 148 KB)
image.png (792×445 px, 137 KB)
image.png (788×443 px, 130 KB)


Chrome Browser Version 96:

image.png (724×1 px, 80 KB)
image.png (733×1 px, 80 KB)
image.png (754×1 px, 81 KB)
image.png (558×1 px, 67 KB)

Madalina added a subscriber: Madalina.

Looks good functionality wise. Additional ticket for padding issue has been filed but since this is a minor issue I'm marking this as Resolved.