Page MenuHomePhabricator

Help panel: design tweaks
Closed, ResolvedPublic

Description

This task is to address some UI issues identified on the help panel tested in Beta labs (see T211206).

Priority: High Medium Low
Both mobile & desktop versions:

Medium | A. Missing animation to transition help panel CTA onto the editor screen
Expected: Help CTA should fade and animate into the screen, as per the demo prototype. Also refer to the css (lines 182-204) as a proposed way to achieve this effect.
Status: Not done.

Medium | B. Missing animation to transition from the help panel CTA to the open help panel
Expected: When the help panel CTA is clicked/tapped, the help panel should fade and animate into the screen, as per the demo prototype. Also refer to the css (lines 240-257) as a proposed way to achieve this effect.
Status: Not done.

NOTE: Created new task T212887 for items A & B.

High | C. Wrong icon used for help panel CTA
Expected: the Ask a Question "?" inside a chat bubble icon is used:


Actual: The standard help "?" icon is in use.
Status: Done.

High | D. Help panel CTA should have a rounded "floating action button" style
Expected: The help panel CTA should be a "floating action button" style which has (i) Rounded corners; (ii) Taller height than a standard button; and (iii) Drop shadow to visual distinguish the elevation of the button from the content below it {box-shadow: 0px 1px 2px rgba(0,0,0,.5);}.

Expected desktop:
Actual desktop:
Expected mobile:
Actual mobile:

Status: Done.

NOTE: Created new task T212890 for the mobile version of the CTA not showing as a circular shape as expected.

Medium | E. Help panel dialog header icons color and placement

Expected: (i) Close and Cog icon colors are #54595d; (ii) icons have the same 1em left and right padding from the respective left and right sides of the panel as other elements.
Actual: (i) icons are #000; (ii) Close icon lacks sufficient LHS padding and Cog icon lacks sufficient RHS padding.

Status: In discussion. Concern about proposed color matching VE disabled button state. The padding is really hacky to do via OOUI.

@RHo: OK to accept 'Actual' if it is too hacky to override OOUI, since it is a relatively minor visual impact.

Medium | F. Help panel title text color and all default paragraph text color (throughout help panel)

Expected: {color: #222}
Actual: {color: #000}

Status: Done

Medium | G. Help panel content section heading text color

Expected: {color: #54595d}
may be achieved by adding .mw-ge-help-panel-widget-overlay.mw-ge-help-panel-popup label > strong { color: #54595d;}
Actual: {color: #000}

Status: Done

NOTE: Created new task T212893 for the mobile version to be updated as well.

Medium | H. Help panel content top articles link list

Expected: .5em padding below each link list item
(may be achieved by adding .mw-ge-help-panel-widget-overlay.mw-ge-help-panel-popup li { padding-bottom: .5em;}
Actual: lacks spacing below each list-item

Status: Done

NOTE: Created new task T212894 for the mobile version to be updated as well.

High | I. Height of the text-area input for entering a question

Expected: height of text area input is 3 rows of text
Actual: height of text area input is only 2 rows initially, then "jumps" to three lines when user starts inputting textopen full screen to see animated gif:

Status: Sort of done. Please have a look at what you see in beta, as it's now a little different.

Looks fine to me on Desktop and Mobile:

Medium | J. Paragraph text style

Expected: {color: #222; line-height:1.5}
Actual: {color: black; line-height:1.2}

Status: Patch up for review.

Low | K. Confirmation icon color

Expected: icon is #14866d (WMF Green
Actual: icon is #36c

Status: Per comments on this task, we agreed to leave it blue.

Low | L. Settings cog background color and positioning of popup

  1. Popup should be two pixels higher
  2. Settings cog should have background highlight when open

Status: Done

Desktop version only

Low | L. Slightly wider help panel
Expected: the panel is 22.5em (= 360px) wide
Actual: the panel is slightly narrower at ~300px wide
Status: Not done. AFAICT there's not a clean way to do this with OOUI.

Low | M. Lighter border color on open help panel

Expected: .mw-ge-help-panel-popup {border: 1px solid #c8ccd1;}
Actual: .mw-ge-help-panel-popup {border: 1px solid #a2a9b1;}

Status: Done.

Mobile version only

High | N. Help panel opens as a full screen

Expected: Help panel opens as a full screen overlay on mobile
Actual: Help panel opens as a modal

Status: Done

Related Objects

Event Timeline

RHo created this task.Dec 10 2018, 9:25 PM
MMiller_WMF renamed this task from Design tweaks to the Help panel to Help panel: design tweaks.Dec 11 2018, 1:47 AM
kostajh removed kostajh as the assignee of this task.
kostajh added a subscriber: kostajh.

Unassigned myself in case someone else wants to pick it up, otherwise I'll get to it later this week.

@RHo will prioritize the different issues in this task to help the team work through them.

RHo updated the task description. (Show Details)Dec 12 2018, 1:21 PM

@RHo will prioritize the different issues in this task to help the team work through them.

Updated on each line item in the Task description.

kostajh updated the task description. (Show Details)Dec 15 2018, 8:53 PM
kostajh claimed this task.

Change 479969 had a related patch set uploaded (by Kosta Harlan; owner: Kosta Harlan):
[mediawiki/extensions/GrowthExperiments@master] Help Panel: Update CTA styles

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

Change 479969 merged by jenkins-bot:
[mediawiki/extensions/GrowthExperiments@master] Help Panel: Update CTA styles

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

Change 480534 had a related patch set uploaded (by Sbisson; owner: Sbisson):
[mediawiki/extensions/GrowthExperiments@master] Make question text fields start with 3 rows

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

Change 480534 merged by jenkins-bot:
[mediawiki/extensions/GrowthExperiments@master] Make question text fields start with 3 rows

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

Change 480825 had a related patch set uploaded (by Sbisson; owner: Sbisson):
[mediawiki/extensions/GrowthExperiments@master] Help panel: UI tweaks

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

A. Missing animation to transition help panel CTA onto the editor screen

This is doable but I don't know if we'll be able to get the right timing. The loading sequence of the various editors on the different platforms (desktop vs mobile) is already quite busy, especially with VE. I don't know if adding another moving part is really helping. What would be the ideal timing for the animation (when should it start)?

E. Help panel dialog header icons color and placement
K. Confirmation icon color

I don't think we can change the icons colors. They can be black, blue, or red. Lighter grey is used to represent disabled state and is implemented by lowering the opacity.

A green checkmark would have to be a custom icon.

Change 480825 merged by jenkins-bot:
[mediawiki/extensions/GrowthExperiments@master] Help panel: UI tweaks

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

RHo added a comment.Dec 20 2018, 12:12 AM

A. Missing animation to transition help panel CTA onto the editor screen

This is doable but I don't know if we'll be able to get the right timing. The loading sequence of the various editors on the different platforms (desktop vs mobile) is already quite busy, especially with VE. I don't know if adding another moving part is really helping. What would be the ideal timing for the animation (when should it start)?

Thanks @SBisson - can we ideally time it to come in after the editor has finished loading?

E. Help panel dialog header icons color and placement
K. Confirmation icon color

I don't think we can change the icons colors. They can be black, blue, or red. Lighter grey is used to represent disabled state and is implemented by lowering the opacity.

Hmm can we make the icons black at opacity .56 so make it as close as possible to the desired Gray?

A green checkmark would have to be a custom icon.

Nevermind, we can live with a blue checkmark.

A. Missing animation to transition help panel CTA onto the editor screen

This is doable but I don't know if we'll be able to get the right timing. The loading sequence of the various editors on the different platforms (desktop vs mobile) is already quite busy, especially with VE. I don't know if adding another moving part is really helping. What would be the ideal timing for the animation (when should it start)?

Thanks @SBisson - can we ideally time it to come in after the editor has finished loading?

I can try.

E. Help panel dialog header icons color and placement
K. Confirmation icon color

I don't think we can change the icons colors. They can be black, blue, or red. Lighter grey is used to represent disabled state and is implemented by lowering the opacity.

Hmm can we make the icons black at opacity .56 so make it as close as possible to the desired Gray?

Opacity .51 is used for the disabled state. If the user has VE, it would be almost identical to the disabled buttons shown in the same screen.

A green checkmark would have to be a custom icon.

Nevermind, we can live with a blue checkmark.

Change 480979 had a related patch set uploaded (by Kosta Harlan; owner: Kosta Harlan):
[mediawiki/extensions/GrowthExperiments@master] Help Panel: Use three rows instead of four

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

Change 481010 had a related patch set uploaded (by Sbisson; owner: Sbisson):
[mediawiki/extensions/GrowthExperiments@master] Help panel: make header buttons larger

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

Change 481041 had a related patch set uploaded (by Sbisson; owner: Sbisson):
[mediawiki/extensions/GrowthExperiments@master] Help panel: adjust cog menu

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

Change 481010 merged by jenkins-bot:
[mediawiki/extensions/GrowthExperiments@master] Help panel: make header buttons larger

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

Change 481041 merged by jenkins-bot:
[mediawiki/extensions/GrowthExperiments@master] Help panel: adjust cog menu

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

Change 481191 had a related patch set uploaded (by Sbisson; owner: Sbisson):
[mediawiki/extensions/GrowthExperiments@master] Help panel: reset header actions to their original size

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

Change 480979 abandoned by Kosta Harlan:
Help Panel: Use three rows instead of four

Reason:
Seems like a browser discrepancy issue

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

Change 481191 merged by jenkins-bot:
[mediawiki/extensions/GrowthExperiments@master] Help panel: reset header actions to their original size

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

kostajh updated the task description. (Show Details)Jan 2 2019, 9:49 PM

Change 481951 had a related patch set uploaded (by Kosta Harlan; owner: Kosta Harlan):
[mediawiki/extensions/GrowthExperiments@master] Help Panel: Make paragraph elements colorGray5

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

kostajh updated the task description. (Show Details)Jan 2 2019, 10:08 PM

@RHo @MMiller_WMF I updated the status for each item. Please have a look and let me know what you think. Looking at it all together, the main item I see that's not done is the animation. If possible I'd like to close this task and open up individual tasks for follow-up items (the animation, or anything else) for better efficiency.

Thanks, @kostajh. I just did some testing, and I have a couple other "design tweak" issues. I'm putting them in this comment. But I agree that these will be easier to manage in separate tasks. @RHo -- what do you think about going through everything in this task's description and comments tomorrow, making new tasks for anything outstanding, and putting them in priority order in the "Ready for Development" column?


  • In my testing, I noticed the width of the help panel being awkwardly narrow, especially when there is a lot of text. I know this is already listed here, but I just wanted to vote for it. Here is the screenshot that was bugging me:

  • The header of the panel has a white background, while in the prototype, it has a light blue background (and the icons are in different places). @RHo, do you care about that?
  • Mobile has a lot of whitespace (see the image below), and probably will even when four more lines are taken up by additional help links. Should we make the font larger? Or the question box larger? Or something? Also, the links don't have bullet points on mobile like they do on desktop.

  • After I submit a question on mobile, the confirmation page has three paragraphs stacked together without spacing between them. Also in this screenshot, the "Done" button doesn't have a box around it like the other buttons do in the help panel.

  • In the first screen on mobile, the text that reads "Top help pages about editing" clicks like a link when I touch it, even though it's just a header and not a link. In other words, when I touch it, it has a background highlight like it is about to be a link.

Change 481951 merged by jenkins-bot:
[mediawiki/extensions/GrowthExperiments@master] Help Panel: Consistent use of paragraph elements with labels

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

RHo updated the task description. (Show Details)Jan 3 2019, 8:26 PM

@RHo @MMiller_WMF I updated the status for each item. Please have a look and let me know what you think. Looking at it all together, the main item I see that's not done is the animation. If possible I'd like to close this task and open up individual tasks for follow-up items (the animation, or anything else) for better efficiency.

Thanks @kostajh - I've created individual tasks for all unfinished items in the task description with a note pointing to each one.

RHo added a comment.EditedJan 3 2019, 9:19 PM

Thanks, @kostajh. I just did some testing, and I have a couple other "design tweak" issues. I'm putting them in this comment. But I agree that these will be easier to manage in separate tasks. @RHo -- what do you think about going through everything in this task's description and comments tomorrow, making new tasks for anything outstanding, and putting them in priority order in the "Ready for Development" column?


  • In my testing, I noticed the width of the help panel being awkwardly narrow, especially when there is a lot of text. I know this is already listed here, but I just wanted to vote for it. Here is the screenshot that was bugging me:

Since the intention of the narrower design of the help panel is to not cover too much of the editing UI, I've created an "enhancement" task T212897 to only expand the width when the browser window on Desktop is wider than 1366px

  • The header of the panel has a white background, while in the prototype, it has a light blue background (and the icons are in different places). @RHo, do you care about that?

I'm OK to accept the standard white background and icon placement used by OOUI here.

  • Mobile has a lot of whitespace (see the image below), and probably will even when four more lines are taken up by additional help links. Should we make the font larger? Or the question box larger? Or something? Also, the links don't have bullet points on mobile like they do on desktop.

The white space, this is largely due to the question box being sticky to the bottom of the mobile screen which is intended, since we want the help panel content to appear behind the "Post a question" form when the content is long or on smaller devices. Filed a new task T212905 to address this.
As for the bullet link style on mobile - I've noted this on T212894.

  • After I submit a question on mobile, the confirmation page has three paragraphs stacked together without spacing between them. Also in this screenshot, the "Done" button doesn't have a box around it like the other buttons do in the help panel.

Created T212901 and T212902 respectively.

  • In the first screen on mobile, the text that reads "Top help pages about editing" clicks like a link when I touch it, even though it's just a header and not a link. In other words, when I touch it, it has a background highlight like it is about to be a link.

Created T212903.

RHo added a comment.Jan 3 2019, 9:56 PM

Thanks @RHo, @MMiller_WMF can we close this one?

OK with me to close.

MMiller_WMF closed this task as Resolved.Jan 4 2019, 10:46 PM

@RHo -- thank you for doing such a thorough job breaking this into small tasks. I'm closing this task now.