Page MenuHomePhabricator

Unify back button design
Closed, ResolvedPublic

Description

@Catrope noted while reviewing T244546: Newcomer tasks: guidance root screen

This is a semi-preexisting issue, but the "back" button in the general-help/search panels looks different from the "back" button in the ask-help panel, because the former is an action and the latter is in a padded PanelLayout in the footer. The former is frameless and has no padding around it, whereas the latter is framed and does have padding around it. This doesn't have to be addressed in this commit, but we should probably unify these two competing designs soon.

image.png (411×531 px, 37 KB)

image.png (411×516 px, 31 KB)

Event Timeline

@RHo do you want the footer to look like the "Ask help" panel or the "general help" panel?

Thanks @kostajh and @Catrope for raising the issue. Given that the sticky button bar on the bottom of the dialog doesn't work very well on iOS mobile devices, I propose this is an opportunity to make a change that unifies the back button design and also only simplify call-to-actions to navigate through the help/guidance screens to only be in the dialog header. So the updates would be on the following sub screens:

Ask a question
image.png (634×458 px, 74 KB)
Ask a question > Question posted
image.png (622×454 px, 71 KB)
General help search
image.png (618×450 px, 51 KB)

What do you think?

Sounds good to me! That will also let us remove some hacks that we put in place so that we could have the primary actions on the bottom.

For Design review after the recent fixes:

Help Panel: Fix panel title for ask-help

https://gerrit.wikimedia.org/r/582794
Help panel: On mobile, use 'previous' icon for non-home panels

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

Screen Shot 2020-03-23 at 12.08.35 PM.png (542×427 px, 46 KB)

Change 587860 had a related patch set uploaded (by Kosta Harlan; owner: Kosta Harlan):
[mediawiki/extensions/GrowthExperiments@master] Help panel: Unify back button design

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

Change 587860 merged by jenkins-bot:
[mediawiki/extensions/GrowthExperiments@master] Help panel: Unify back button design

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

@RHo - please review; the items marked with are not in the scope of this ticket and they may be not worth to work on them, so I'll appreciate your opinion.

(1)
In T244546: Newcomer tasks: guidance root screen there are two specs that were addressing the Back button behavior and they are overridden now by the specs in this task. No issues are here - just to remind of the task background.

  • On mobile, in place of an "X" in the upper left, this screen should have a back arrow that leads back > to the root screen via a swipe animation. Even though it has the back arrow, it should still have the "Back" button in the lower left.
  • On desktop, it should have the "X" in the upper left and the "Back" button.

According to the specs in this task - there are no X and no Back button for the Desktop and for the mobile.
Desktop

Ask a questionGet help with editing
Screen Shot 2020-04-17 at 4.37.10 PM.png (526×503 px, 56 KB)
Screen Shot 2020-04-17 at 4.37.23 PM.png (520×507 px, 42 KB)

Mobile

Ask a questionGet help with editing
Screen Shot 2020-04-17 at 4.56.18 PM.png (592×378 px, 64 KB)
Screen Shot 2020-04-17 at 4.54.09 PM.png (587×378 px, 46 KB)

two things to notice

  • the text is placed too close to the search field (those diacritical marks need more space?). It's only mobile; the desktop looks fine.
  • no bullet points

(2) Mentorship - the first dialog screen also has the back arrow icon, but the second one doesn't:

Screen Shot 2020-04-17 at 4.39.28 PM.png (255×507 px, 35 KB)
Screen Shot 2020-04-17 at 4.39.54 PM.png (407×506 px, 52 KB)

(3) I reviewed T248544: Help panel UI issues and closed it as Resolved due to some updated in Design (some issues reported there became invalid and the issue with Back button was resolved in this ticket).

Thanks @Etonkovidova - I think at least some of the visual design issues you noted in (1) as well a couple more things make sense to be fixed as part of this task, (even though admittedly some items could be regression from earlier).
Please see notes inline:

@RHo - please review; the items marked with are not in the scope of this ticket and they may be not worth to work on them, so I'll appreciate your opinion.
(1)
In T244546: Newcomer tasks: guidance root screen there are two specs that were addressing the Back button behavior and they are overridden now by the specs in this task. No issues are here - just to remind of the task background.
[...]
Desktop

Ask a questionGet help with editing
Screen Shot 2020-04-17 at 4.37.10 PM.png (526×503 px, 56 KB)
Screen Shot 2020-04-17 at 4.37.23 PM.png (520×507 px, 42 KB)

Mobile

Ask a questionGet help with editing
Screen Shot 2020-04-17 at 4.56.18 PM.png (592×378 px, 64 KB)
Screen Shot 2020-04-17 at 4.54.09 PM.png (587×378 px, 46 KB)

two things to notice

  • the text is placed too close to the search field (those diacritical marks need more space?). It's only mobile; the desktop looks fine.
  • no bullet points

Agree. I have some more visual tweaks to append the ones you picked up:

  • 1(i) - help links text too close to the search field (mobile + desktop)
  • 1(ii) - no bullet points for help links list (mobile only)
  • 1 (iii) - Missing the divider in Base70 color at the bottom of the header
Expected ask help
image.png (144×610 px, 26 KB)
Expected question submitted
image.png (148×610 px, 24 KB)
Expected help links
image.png (544×610 px, 68 KB)

(2) Mentorship - the first dialog screen also has the back arrow icon, but the second one doesn't:

Screen Shot 2020-04-17 at 4.39.28 PM.png (255×507 px, 35 KB)
Screen Shot 2020-04-17 at 4.39.54 PM.png (407×506 px, 52 KB)

This is expected, because once the user submits the question, they cannot go back to amend their submission.

(3) I reviewed T248544: Help panel UI issues and closed it as Resolved due to some updated in Design (some issues reported there became invalid and the issue with Back button was resolved in this ticket).

OK sounds good. Incidentally the screenshot you posted on that ticket F31694393 shows the expected bottom divider on the help panel header I mentioned in 1(iii).

1 (iii) - Missing the divider in Base70 color at the bottom of the header

@RHo Just to clarify: the divider should not appear for the root screen and for the suggested edits screen, but it should appear on every other screen, is that right?

Change 592767 had a related patch set uploaded (by Kosta Harlan; owner: Kosta Harlan):
[mediawiki/extensions/GrowthExperiments@master] Help panel: Add padding for general help and set list style

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

Change 592767 merged by jenkins-bot:
[mediawiki/extensions/GrowthExperiments@master] Help panel: Add padding for general help and set list style

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

1 (iii) - Missing the divider in Base70 color at the bottom of the header

@RHo Just to clarify: the divider should not appear for the root screen and for the suggested edits screen, but it should appear on every other screen, is that right?

Yes that's right, thanks!

Change 592965 had a related patch set uploaded (by Kosta Harlan; owner: Kosta Harlan):
[mediawiki/extensions/GrowthExperiments@master] Help panel: Adjust window head outline rules

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

Change 592965 merged by jenkins-bot:
[mediawiki/extensions/GrowthExperiments@master] Help panel: Adjust window head outline rules

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

1 (iii) - Missing the divider in Base70 color at the bottom of the header

@RHo Just to clarify: the divider should not appear for the root screen and for the suggested edits screen, but it should appear on every other screen, is that right?

Yes that's right, thanks!

image.png (78×462 px, 4 KB)

@RHo Oops, this looks a little weird on mobile. Should the fix be to add the outline back for mobile, or to remove the outline from the X and ellipses actions?

1 (iii) - Missing the divider in Base70 color at the bottom of the header

@RHo Just to clarify: the divider should not appear for the root screen and for the suggested edits screen, but it should appear on every other screen, is that right?

Yes that's right, thanks!

image.png (78×462 px, 4 KB)

@RHo Oops, this looks a little weird on mobile. Should the fix be to add the outline back for mobile, or to remove the outline from the X and ellipses actions?

Ah I had it so that Mobile always has the divider, even on the root screen. For simplicity's sake let's make it dividers everywhere. Sorry for the back and forth, but let me update the Zeplin for Desktop root to add the line back in.

To clarify, when I say everywhere, I meant everywhere on Desktop and Mobile root screens only (not the Suggested edits screen Desktop).

Change 594241 had a related patch set uploaded (by Kosta Harlan; owner: Kosta Harlan):
[mediawiki/extensions/GrowthExperiments@master] Help panel: Add back outline to window head

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

Change 594241 merged by jenkins-bot:
[mediawiki/extensions/GrowthExperiments@master] Help panel: Re-add outline to dialog window head

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

Checked in testwiki wmf.31 - all looks according to the specs.

The added clarifications (in @RHo's comment https://phabricator.wikimedia.org/T248065#6076623) seem to be in place too. Below are some screenshots to illustrate that they are done:

1(i) - help links text too close to the search field (mobile + desktop)

Note: uselang=cs is used on testwiki wmf.31

DesktopMobile
Screen Shot 2020-05-05 at 5.22.42 PM.png (421×535 px, 42 KB)
Screen Shot 2020-05-05 at 5.23.27 PM.png (680×377 px, 45 KB)

1(ii) - no bullet points for help links list (mobile only)

Done - see the above screenshot for the mobile.

1 (iii) - Missing the divider in Base70 color at the bottom of the header

Done - the divider is on every screen (except SE)
Mobile : (Desktop looks the same)

Screen Shot 2020-05-05 at 5.37.17 PM.png (688×379 px, 43 KB)
Screen Shot 2020-05-05 at 5.37.47 PM.png (688×385 px, 52 KB)
Screen Shot 2020-05-05 at 5.39.07 PM.png (687×385 px, 58 KB)
Screen Shot 2020-05-05 at 5.40.51 PM.png (672×381 px, 42 KB)

Thanks @Etonkovidova - I filed T252536 as a further design improvement on 1(i), but else agree this is good to go for PM review.

Checked in testwiki wmf.31 - all looks according to the specs.
The added clarifications (in @RHo's comment https://phabricator.wikimedia.org/T248065#6076623) seem to be in place too. Below are some screenshots to illustrate that they are done:

1(i) - help links text too close to the search field (mobile + desktop)

Note: uselang=cs is used on testwiki wmf.31

DesktopMobile
Screen Shot 2020-05-05 at 5.22.42 PM.png (421×535 px, 42 KB)
Screen Shot 2020-05-05 at 5.23.27 PM.png (680×377 px, 45 KB)

1(ii) - no bullet points for help links list (mobile only)

Done - see the above screenshot for the mobile.

1 (iii) - Missing the divider in Base70 color at the bottom of the header

Done - the divider is on every screen (except SE)
Mobile : (Desktop looks the same)

Screen Shot 2020-05-05 at 5.37.17 PM.png (688×379 px, 43 KB)
Screen Shot 2020-05-05 at 5.37.47 PM.png (688×385 px, 52 KB)
Screen Shot 2020-05-05 at 5.39.07 PM.png (687×385 px, 58 KB)
Screen Shot 2020-05-05 at 5.40.51 PM.png (672×381 px, 42 KB)