Page MenuHomePhabricator

Help Panel: Disable zoom on form elements in iOS
Closed, ResolvedPublic

Assigned To
Authored By
kostajh
Dec 21 2018, 3:33 PM
Referenced Files
F27785791: Artboard Copy.png
Jan 3 2019, 9:19 PM
F27779394: Help_Panel_spacing_2019-01-02.png
Jan 3 2019, 9:19 PM
F27785819: Artboard Copy.png
Jan 3 2019, 9:19 PM
F27777853: image.png
Jan 2 2019, 7:37 PM
F27777788: image.png
Jan 2 2019, 7:37 PM
F27777775: image.png
Jan 2 2019, 7:37 PM
F27776913: image.png
Jan 2 2019, 6:00 PM
F27697324: image.png
Dec 21 2018, 5:42 PM

Description

Disable zoom on form elements in iOS.

Event Timeline

Checkmark and success text should be on the same line.

This is how the line breaks when there is not enough horizontal space ( taking padding and margin into account ). What device is it on the screenshot?

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

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

It's an iPhone. It might look better if "posted!" appears on the second line.

Change 481183 merged by jenkins-bot:
[mediawiki/extensions/GrowthExperiments@master] Help panel: fix cog menu on mobile

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

A couple things from light testing:

  • When I click into the "Your question" box, Safari automatically zooms into that box. Then I click Continue, and the next screen (the confirmation page) stays zoomed in. When the screen changes, I think it should zoom back out to normal. If this is unclear, let me know, and I'll post a video.
  • I think "View your question on the Help Desk" should have greater affordance. It's currently a blue link in the same font as the paragraph above it, and it isn't spaced away from that paragraph. I'm imagining it being larger, bolder, and distinct from the black text above it. Good question for @RHo.

When I click into the "Your question" box, Safari automatically zooms into that box. Then I click Continue, and the next screen (the confirmation page) stays zoomed in. When the screen changes, I think it should zoom back out to normal. If this is unclear, let me know, and I'll post a video.

Hmm, I don't see this behavior on Safari on the latest iOS 12.1.2.

A couple things from light testing:

  • I think "View your question on the Help Desk" should have greater affordance. It's currently a blue link in the same font as the paragraph above it, and it isn't spaced away from that paragraph. I'm imagining it being larger, bolder, and distinct from the black text above it. Good question for @RHo.

Agree. In the design the link appears as a new paragraph as the first of 2 links:

image.png (246×714 px, 33 KB)

In the design the link appears as a new paragraph as the first of 2 links

I thought we're just doing a single link, and "More about this feature" is going to live under the settings cog?


We can make the view question link bold:

image.png (510×644 px, 57 KB)

We could add another empty line if you want although IMO the extra space looks off:

image.png (550×644 px, 58 KB)

We could also replace "Done" with "View your question on the Help Desk" (the spacing around this can be adjusted)

image.png (582×644 px, 63 KB)

In the design the link appears as a new paragraph as the first of 2 links

I thought we're just doing a single link, and "More about this feature" is going to live under the settings cog?

  • @MMiller_WMF can weigh in but I think it would be good to more explicitly provide information to users about this experimental feature here as well.

We can make the view question link bold:

image.png (510×644 px, 57 KB)

+1 - think this is as much as is needed if it is a single link below the submission text.

Change 481948 had a related patch set uploaded (by Kosta Harlan; owner: Kosta Harlan):
[mediawiki/extensions/GrowthExperiments@master] Help Panel: Make view question link bold

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

@RHo @kostajh -- I think that the "More on this feature" makes more sense in the cog. We know which activities we really want users to do, which are either to look at their question in the help desk or go back to editing. So I don't think we should put other links that could distract them.

Change 481948 merged by jenkins-bot:
[mediawiki/extensions/GrowthExperiments@master] Help Panel: Make view question link bold

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

kostajh renamed this task from Help Panel: Mobile display UI fixes to Help Panel: Disable zoom on form elements in iOS.Jan 3 2019, 9:18 PM
kostajh claimed this task.
kostajh updated the task description. (Show Details)
RHo renamed this task from Help Panel: Disable zoom on form elements in iOS to Help Panel: Mobile display UI fixes.Jan 3 2019, 9:19 PM
RHo removed kostajh as the assignee of this task.
RHo updated the task description. (Show Details)

@MMiller_WMF having trouble reproducing this. Can you confirm that the problem still occurs for you on beta?

kostajh renamed this task from Help Panel: Mobile display UI fixes to Help Panel: Disable zoom on form elements in iOS.Jan 4 2019, 3:24 PM

@kostajh -- I just now confirmed that this is still happening for me on beta.

Change 482393 had a related patch set uploaded (by Catrope; owner: Catrope):
[mediawiki/extensions/GrowthExperiments@master] Help panel: Prevent iOS from zooming in on text input

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

Change 482393 merged by jenkins-bot:
[mediawiki/extensions/GrowthExperiments@master] Help panel: Prevent iOS from zooming in on text input

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

Etonkovidova claimed this task.