Page MenuHomePhabricator

Align QuickSurvey design to the Wikimedia Design Style Guide
Closed, ResolvedPublic

Assigned To
Authored By
AAlhazwani-WMF
Sep 22 2021, 2:42 PM
Referenced Files
F34727366: 323.jpg
Nov 3 2021, 12:18 PM
F34727338: 321.jpg
Nov 3 2021, 12:12 PM
F34727344: 322.jpg
Nov 3 2021, 12:12 PM
F34727319: 317.jpg
Nov 3 2021, 12:12 PM
F34727326: 318.jpg
Nov 3 2021, 12:12 PM
F34727313: 320.jpg
Nov 3 2021, 12:05 PM
F34727126: 001.jpg
Nov 3 2021, 12:05 PM
F34727307: 319.jpg
Nov 3 2021, 12:05 PM

Description

Background and hypothesis

We rarely deploy in-product surveys but when we do, we want to make sure that the they look and feel cohesive with the rest of the interface and overall user experience.

In order to achieve that we think that adapting and implementing the Wikimedia Design Style can better support visitors to feel familiar with the displayed survey.

Jobs to be done

When I visit a Wikimedia page and I notice a new survey on said page I want to understand if this survey is from Wikimedia and therefore trustworthy so I can decide if I will answer it or continue to browse without any worry.

Prep work

  • Compare existing QuickSurvey styles with the components from the WikiMedia Design Style Guide
  • Reach out to the Web team with potential findings
  • List action items as sub tasks

Design review

See in the table below the current state of the art of a survey type, the desired outcome, the specs, and the notes that highlight additional differences.

Internal survey

CurrentDesiredSpecsNotes
image.png (375×600 px, 30 KB)
001.jpg (432×600 px, 68 KB)
Spacing
316.jpg (436×616 px, 127 KB)
Dimensions
319.jpg (432×650 px, 90 KB)
Typography
320.jpg (674×623 px, 109 KB)
Iconography
linkExternal.jpg (20×20 px, 2 KB)
General: Increase the container padding top to 16px. Text color: Base 10 #202122. Link color: Accent 50 #3366cc. Font family: system fonts. Survey title: add a margin bottom of 8px. Responses: add a margin bottom of 8px. Privacy policy: Set the type to 13/18px. Set the text color to Accent 50 #3366cc. Use the LinkExternal icon from the WVUI. Set dimensions to 10x10px. Icon color Accent 50 #3366cc.

Internal survey w/ description and freeform text

CurrentDesiredSpecsNotes
image.png (669×600 px, 50 KB)
317.jpg (592×600 px, 89 KB)
Spacing
318.jpg (596×617 px, 164 KB)
321.jpg (592×600 px, 116 KB)
Dimensions
322.jpg (592×652 px, 121 KB)
Typography
323.jpg (751×600 px, 117 KB)
General All notes above applied also here. Description Type set to 14/10px. Inner spacing between components set to 8px. Text area padding set to 8px horizontal and *6px* vertical. Type set to 14/20px. Placeholder text color Base 30 #72777d. Text color Base 10 #202122. Button padding set to 12px horizontal and 6px vertical. Type set to 14/14px. Text color set to Accent 50 #3366cc.

Internal multiple answer survey

CurrentDesiredSpecsNotes
image.png (463×600 px, 34 KB)
200.jpg (440×600 px, 63 KB)
Spacing
305.jpg (440×600 px, 70 KB)
308.jpg (440×600 px, 65 KB)
Dimensions
309.jpg (440×700 px, 80 KB)
General All notes above applied also here. Checkbox Margin between checkbox and checkbox label set to 6px. Checkbox label Type set to 14/20px.

External survey

CurrentDesiredSpecsNotes
image.png (454×600 px, 63 KB)
300.jpg (448×600 px, 113 KB)
Spacing
310.jpg (448×600 px, 111 KB)
311.jpg (448×600 px, 116 KB)
General All notes above applied also here. Description Type set to 14/10px. Font weight 400.

Sub tasks

T294894: Spacing changes for QuickSurveys
T294908: Font changes for QuickSurveys
T294909: Response buttons changes for QuickSurveys
T294910: Icon changes for QuickSurveys

Event Timeline

This tasks investigates potential design work necessary to adapt QuickSurvey styling to the latest design language updates. The following evaluation puts in comparisons screenshots taken from the QuickSurvey MediaWiki Page and the same components recreated with the Figma components library.

Screenshots of QuickSurvey from MediaWikiScreenshots of QuickSurvey made with Figma
image.png (279×414 px, 24 KB)
6.jpg (204×271 px, 32 KB)
image.png (421×418 px, 33 KB)
5.jpg (297×271 px, 46 KB)
image.png (451×297 px, 34 KB)
7.jpg (449×271 px, 73 KB)
image.png (538×414 px, 41 KB)
8.jpg (397×271 px, 60 KB)

Following this comparison it seems that QuickSurvey is already using the latest design language. @Jhernandez can you confirm that the styling is still the same as the one displayed in the screenshots above from the MediaWiki page? That said, there are some smaller design considerations (eg. layout and spacing) that can be taken into account -- but those tasks can be address during the engineering implementation of the safety perception survey in my opinion.

I'll have a look, right now I'm having some issues with my local setup and in production only the perf survey is enabled, which you can see here:

https://es.wikipedia.org/wiki/Alicante?quicksurvey=true

image.png (615×814 px, 76 KB)

I'm going to try the beta cluster maybe we can see the example surveys there.

I've made T292459: Deploy all types of surveys to beta cluster so that we have a place to look at the real deal quick surveys in beta cluster.

Right now we can see those two mentioned in that task:

Feel free to look at them, once that task is resolved we can come back to this and look at all the other variations (multiple answer, with and without description / free form text), and then make tasks for refining the visuals.

Thanks @Jhernandez! From what I can see on the beta cluster the design is still the same as the one from the screenshots on the MediaWiki page. Regarding the small design considerations (eg. layout and spacing) how do you suggest to continue? Should we keep this task open and document missing bits here or should I create separate tasks for each one of those bits? Many thanks!

I think this can be an Epic (tag it with that) and we can make smaller subtasks of specific changes to the UI.

It depends on how @Madalina wants to do it really, engineers shouldn't mind as long as the tasks are fleshed out and clear enough to work on.

AAlhazwani-WMF renamed this task from Align QuickSurvey design to the Wikimedia Design Style Guide to [EPIC] Align QuickSurvey design to the Wikimedia Design Style Guide.Oct 11 2021, 2:02 PM
AAlhazwani-WMF added a project: Epic.
AAlhazwani-WMF updated the task description. (Show Details)

Hey @alexhollender! The Trust and Safety Tools team is working on a new deployment of a QuickSurvey across different Wikimedia projects in order to measure editors' safety perfection. As we carry on this work we thought that it would be a good opportunity to investigate if QuickSurvey is following the latest Design Style updates. Joaquin suggested to reach out to the Web team to share our findings and get your approval for potential changes. You can find the results of our investigation here. In short: QuickSurvey is already using the latest design language, we identified only minor areas of improvements around spacings and paddings. What do you think?

We are not planning to implement substantial changes to QuickSurvey. We are currently working on a dismiss mechanism that might introduce a new piece of UI but that's all. If you're up for it I can CC you any time we are planning to introduce a change experience-wise, cheers!

In T291567#7417500, @aminalhazwani wrote:

Hey @alexhollender! The Trust and Safety Tools team is working on a new deployment of a QuickSurvey across different Wikimedia projects in order to measure editors' safety perfection. As we carry on this work we thought that it would be a good opportunity to investigate if QuickSurvey is following the latest Design Style updates. Joaquin suggested to reach out to the Web team to share our findings and get your approval for potential changes. You can find the results of our investigation here. In short: QuickSurvey is already using the latest design language, we identified only minor areas of improvements around spacings and paddings. What do you think?

We are not planning to implement substantial changes to QuickSurvey. We are currently working on a dismiss mechanism that might introduce a new piece of UI but that's all. If you're up for it I can CC you any time we are planning to introduce a change experience-wise, cheers!

@aminalhazwani thanks for the heads up and sounds good. Maybe it's worth adding a third column to the table in T291567#7394946 for notes that describe the difference between what we have and what we want? cc @ovasileva @Jdlrobson @Volker_E

Thank you @Jhernandez for the additional links, they are very helpful. And thanks @alexhollender for your feedback. I tried to display in the table below the current state of the art of a survey type, the desired outcome, the specs, and the notes that highlight additional differences.

Survey type: https://en.wikipedia.beta.wmflabs.org/wiki/African_wild_dog?quicksurvey=internal%20example%20survey

CurrentDesiredSpecsNotes
image.png (375×600 px, 30 KB)
000.jpg (272×600 px, 54 KB)
001.jpg (396×600 px, 72 KB)
Spacing
2.png (276×616 px, 22 KB)
Dimensions
304.jpg (272×650 px, 66 KB)
Type
3.png (514×763 px, 48 KB)
Icon
linkExternal.jpg (20×20 px, 2 KB)
General: Increase the container padding top to 16px. Text color: Base 10 #202122. Link color: Accent 50 #3366cc. Font family: system fonts. Survey title: add a margin bottom of 8px. Responses: If survey responses are short we could opt for an horizontal button group (since the survey configuration is hard coded we could assume we have control over this). If responses are longer we could stick to the vertical button group. When more responses are staked together we could remove the horizontal (or vertical) border and set the corner radius to 0 of the inner elements. Privacy policy: Set the type to 13/18px. Set the text color to Accent 50 #3366cc. Use the LinkExternal icon from the WVUI. Set dimensions to 10x10px. Icon color Accent 50 #3366cc.

Survey type: https://en.wikipedia.beta.wmflabs.org/wiki/African_wild_dog?quicksurvey=internal%20example%20survey%20with%20description%20and%20freeform%20text

CurrentDesiredSpecsNotes
image.png (669×600 px, 50 KB)
100.jpg (528×600 px, 97 KB)
Spacing
301.jpg (528×600 px, 100 KB)
302.jpg (528×600 px, 123 KB)
Dimensions
303.jpg (528×650 px, 123 KB)
General All notes above applied also here. Inner spacing between components set to 8px. Text area padding set to 8px horizontal and *6px* vertical. Type set to 14/20px. Placeholder text color Base 30 #72777d. Text color Base 10 #202122. Button padding set to 12px horizontal and 6px vertical. Type set to 14/14px. Text color set to Accent 50 #3366cc.

Survey type: https://en.wikipedia.beta.wmflabs.org/wiki/African_wild_dog?quicksurvey=internal%20multiple%20answer%20example%20survey

CurrentDesiredSpecsNotes
image.png (463×600 px, 34 KB)
200.jpg (440×600 px, 63 KB)
Spacing
305.jpg (440×600 px, 70 KB)
308.jpg (440×600 px, 65 KB)
Dimensions
309.jpg (440×700 px, 80 KB)
General All notes above applied also here. Checkbox Margin between checkbox and checkbox label set to 6px. Checkbox label Type set to 14/20px.
CurrentDesiredSpecsNotes
image.png (454×600 px, 63 KB)
300.jpg (448×600 px, 113 KB)
Spacing
310.jpg (448×600 px, 111 KB)
311.jpg (448×600 px, 116 KB)
General All notes above applied also here. Description Type set to 14/10px. Font weight 400.

Hi @Jhernandez! I updated the comment above detailing the status quo of the survey types that you deployed on beta cluster, the desired outcome, the specs, and the notes highlighting the proposed changes. I reached out to the web team and we are good to go on our end. I wanted to ask your feedback on how to detail the next action points and/or create the necessary sub tasks.

Awesome stuff Amin, I've added the review to the task description.

Regarding splitting this into tasks, I'm not sure what the best approach would be exactly, all the surveys and components are rendered and styled in the same place, so if we split it it shouldn't be by survey type to avoid stepping on each other's toes.

Maybe we can split them by "category". For example, a task for the font size changes, a task for the spacing changes, another one for the external icon, etc. I'm not sure whose responsibility it is to flesh those out though. Maybe @Madalina or @ARamirez_WMF have thoughts about this?

I wonder if the spacing changes and font changes could live in one task, then one for the horizontal to vertical move of the buttons, and one for the icon?

I've been thinking about the vertical + horizontal rearranging of buttons.

If survey responses are short we could opt for an horizontal button group. If responses are longer we could stick to the vertical button group.

This can be done if the survey box is fixed size, we can force a render of the buttons, measure their lengths, see if they fit, and re-render if necessary. If we are not careful this can cause a content reflow/repaint if the survey is laid out again as vertical. So it will be tricky to coordinate but could be done.

The reason we can't do it with the label's text length is because font sizes aren't fixed, they depend on user's preferences in their browsers and the fallback font chosen by the browser, and also the size of the box changes because the page is responsive and the survey box can resize, so the only way to accurately measure is by triggering a render with the content hidden and measuring.

Another issue comes with the responsive nature of the box. If you resize the page, there is a point where the box changes to full width and resizes with the page width, example:

image.png (687×1 px, 169 KB)

The same thing happens on mobile with 3 breakpoints but on those devices there usually is only one resize event when rotating.

Every window resize will trigger a size change so we would have to check again if we need to change the rendering layout every time. Browsers send a lot of resize events very fast so we would need to debounce this to do less work or decide that the survey is laid out on first page render and doesn't change horizontal/vertical when the window resizes even if this is suboptimal.

Anyway all this to say that the automatic button layout should be definitely a separate task because it will be tricky to implement and get right, and it may be of less priority than other changes.

Thanks @Jhernandez! Yeah, it all makes a lot of sense. We could avoid to use the button group since it would require a lot of work and potential drawbacks (I don't know if they were able to address these issues while they developed the button group component in OOUI.)

That said we could opt for a simple set of floating buttons with a min-width property applied (eg. 80px). Here below some explorations of possible scenarios.

image.png (514×2 px, 122 KB)

Do you think this is a potentially feasible alternative approach?

Yep I think that looks feasible. We should mock what it looks like when items have longer text. The simplest is likely setting a max-width on each button with a text ellipsis inside or something like that.

The button group component in OOUI seems to do what you just mocked, buttons wrap to the next line when too long. This is the simplest behavior.

I personally think the auto layout of buttons would be interesting to implement :D but it definitely doesn't seem like the highest priority task.

We still need some advice about how and who should tackle splitting the tasks. I'll put it in our Wednesday's sync agenda.

We should mock what it looks like when items have longer text. The simplest is likely setting a max-width on each button with a text ellipsis inside or something like that.

Yes, good point. I second the max-width option (and that could be the container width minus the container padding). If we opt for this solution we could probably make the text flow within the button instead of relying on text ellipsis which can bring some potential drawbacks in the overall experience, eg. in German verbs are usually at the end of the sentence or the text could be incomprehensible if not complete. What do you think?

image.png (860×788 px, 79 KB)

I personally think the auto layout of buttons would be interesting to implement :D but it definitely doesn't seem like the highest priority task.

Yeah, I would love to tackle this problem as it seems to be something very common on our products. Let's keep it in the back of our heads.

We still need some advice about how and who should tackle splitting the tasks. I'll put it in our Wednesday's sync agenda.

Thanks!

If we opt for this solution we could probably make the text flow within the button instead of relying on text ellipsis which can bring some potential drawbacks in the overall experience

Sounds good!

I'd suggest splitting this into 4 subtasks:

  1. spacing & padding
  2. font style, size & colour
  3. horizontal to vertical move of buttons
  4. icon

I've taken a stab out of creating the first subtask: T294894. Let me know if it makes sense

AAlhazwani-WMF renamed this task from [EPIC] Align QuickSurvey design to the Wikimedia Design Style Guide to Align QuickSurvey design to the Wikimedia Design Style Guide.Nov 17 2021, 1:26 PM
AAlhazwani-WMF changed the subtype of this task from "Design" to "Task".

FYI, not seeing any Left to Right in any of the examples being shown. We need to bring that into the mix also, I believe.