Page MenuHomePhabricator

[mobile] Homepage UX/UI issues
Closed, InvalidPublic

Description

Legend
⏫ : high priority
🔼 : medium priority
🔽 : low priority


🔽 The total number of pageviews is vertically centered for the element: appears to have been fixed since it was reported

<div class="growthexperiments-homepage-impact-subheader-subtext"><span>Views from recent edits (last 60 days):</span><span class="growthexperiments-homepage-impact-mobile-totalviews">6</span></div>

Screen Shot 2019-06-07 at 1.48.26 PM.png (350×468 px, 51 KB)

🔽 Enabled Homepage affects the position of the add-to-watchlist icon: T225658

Homepage enabledHomepage NOT enabled
IMG_7664.PNG (1×640 px, 77 KB)
IMG_7668.PNG (1×640 px, 79 KB)

🔼 Different paths to User talk page depending from which tab 'Discussion' tab is clicked: T225659

IMG_7669.PNG (1×640 px, 92 KB)

IMG_7670.PNG (1×640 px, 95 KB)

🔼 Tapping on the links to view your question on your mentor's talk page leads to desktop version of the mentor's talk page. T225660

  • Tapping on the link to view your question on your mentor's talk page, at the end of the "ask your mentor" flow, leads to desktop version of the mentor's talk page. Should go to mobile version of the page instead.
  • Tapping on one of the links in the "your recent questions" list in the mentorship module leads to desktop version of the mentor's talk page. Should go to mobile version of the page instead.

Photo 12-06-2019, 07 21 52.png (1×750 px, 331 KB)

  • Tapping on the "View your mentor's other conversations" link in the mentorship module correctly leads to the mobile version of the mentor's talk page.

🔼 Tapping on the links to view your question on the Help desk leads to desktop version of the Help desk page. T225660 (same as above)

  • Tapping on the link to view your question on the Help desk, at the end of the "ask the help desk" flow, leads to desktop version of the Help desk page. Should go to mobile version of the page instead.
  • Tapping on one of the links in the "your recent questions" list in the help module leads to desktop version of the Help desk page. Should go to mobile version of the page instead.
  • Tapping on the "View questions from other users" link in the mentorship module correctly leads to the mobile version of the Help desk page.

🔼 The link to "Guidelines for user pages" in the start module leads to desktop version of the Wikipedia:User_pages, Should link to mobile version of the page instead. T225661

🔽 Special:ConfirmEmail page is missing a link to go back to the Homepage It looks like it should be covered by T222848

🔽 Tabbed menu should have border bottom in order to be consistent with AMC T225662

Screenshot 2019-06-10 13.20.36.png (1×908 px, 155 KB)

Sub-header text about user longevity is missing in Homepage T225663

Screenshot 2019-06-10 13.20.36.png (1×908 px, 145 KB)

Until the user creates their user page, tapping on the User page or Discussion tabs lead user to User page or Talk page editor, instead of unactivated state of those pages. T225665

Jun-11-2019 17-10-05.gif (624×376 px, 2 MB)

🔼 The Homepage Header text should correctly inherit the same h1 styles as the User page h1 T225666

CurrentDesired
Screenshot 2019-06-11 16.24.20.png (1×754 px, 126 KB)
Screenshot 2019-06-11 16.32.42.png (1×756 px, 123 KB)

🔼 Missing icon on iOS Safari for adding an email
You can see in the image below that an icon is missing in the start module. This is an iPhone 6S with Safari 12.1 on iOS 12.2 (also reported with more details in T225615). Fixed in T225615

IMG_7599.jpg (1×750 px, 128 KB)

🔽 The submodule headers of the start module don't have correct styling T225667
The div is not inheriting the correct subset of parameters from .growthexperiments-homepage-module .growthexperiments-homepage-module-header, .growthexperiments-homepage-module h2.growthexperiments-homepage-module-header

CurrentDesired
Screenshot 2019-06-11 16.44.10.png (1×758 px, 123 KB)
Screenshot 2019-06-11 16.45.03.png (1×754 px, 117 KB)

The start module layout in fullscreen view is broken on iOS Safari 10 and iOS Chrome 60.0.3112.89 T225668

Photo 11-06-2019, 17 12 29.png (1×750 px, 199 KB)

The items below are captured in T225669: Homepage: "ask a question" dialog and overlay issues

The ask a question modals should feature the an "X" icon to be dismissed, instead of the current "Cancel" button

CurrentDesired
image.png (729×414 px, 33 KB)
Screenshot 2019-06-11 16.20.15.png (1×754 px, 149 KB)

The buttons in the header of the ask a question modal don't support the mobile styling

CurrentDesired
Screenshot 2019-06-11 16.52.44.png (1×756 px, 133 KB)
Screenshot 2019-06-11 16.55.34.png (1×754 px, 149 KB)

The button to complete the ask a modal flow and go back to the module is placed on the wrong side of the header

CurrentDesired
Screenshot 2019-06-11 16.57.28.png (1×758 px, 116 KB)
Screenshot 2019-06-11 16.58.02.png (1×758 px, 118 KB)

The title of the ask a question modals (eg. "Ask your mentor") needs to be left aligned"

CurrentDesired
Screenshot 2019-06-11 16.59.49.png (944×756 px, 109 KB)
Screenshot 2019-06-11 17.00.19.png (988×756 px, 113 KB)

Event Timeline

MMiller_WMF added subscribers: kostajh, SBisson, Catrope and 4 others.
MMiller_WMF added a subscriber: MMiller_WMF.

Assigning to @Cntlsn to decide whether these issues need to be addressed.

Cntlsn renamed this task from [mobile] Homepage UI issues to [mobile] Homepage UX/UI issues.Jun 10 2019, 11:29 AM
Cntlsn updated the task description. (Show Details)

@Etonkovidova @MMiller_WMF Thanks!

I have renamed the task since some of the issues are actually Experience issues, and have not UI implications.
I think some of the issues are critical and would need to be solved before releasing the mobile version of the Homepage, but some of them fall outside of my power.

What I propose is to list UX and UI issues here, and then eventually open other tasks.

How does that sound?

Thx, @Cntlsn - the task is in the current sprint and should be moved to Ready for Develpment upon @MMiller_WMF approval.

Moving this to Ready for Development because most of the issues I think we need to solve, except:

  • (3): this is not a bug. Readers Web said both those links are supposed to be there for now.
  • (8): similarly, I don't think this is a bug. @Cntlsn, didn't Readers Web say that those links are supposed to be there for now? I don't think we want to alter the user page.

@Cntlsn -- is this all of your design feedback for the mobile homepage, or is more coming?

@MMiller_WMF

  • (3): this is not a bug. Readers Web said both those links are supposed to be there for now.
  • (8): similarly, I don't think this is a bug. @Cntlsn, didn't Readers Web say that those links are supposed to be there for now? I don't think we want to alter the user page.

I might have missed that, and I can't seem to find it anywhere in our notes, but I'm ok with it.
(By the way I agree that it's bad UX and we will need to fix that at some point. )

@Cntlsn -- is this all of your design feedback for the mobile homepage, or is more coming?

I'm updating the task with more stuff

@SBisson @kostajh @Cntlsn -- I used icons to indicate priority levels for these issues. There are three levels: down, up, double-up. The series of issues at the bottom of the list, around the headers and buttons for the mentorship and help modals, all have double-up together as a unit.

Please let me know if you have any questions. @Cntlsn, let me know if you think this priority should be different.

Change 516657 had a related patch set uploaded (by Sbisson; owner: Sbisson):
[mediawiki/extensions/GrowthExperiments@master] Homepage guidelines link: go to desktop or mobile as appropriate

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

@SBisson will break this task up into subtasks

@Cntlsn will interlock with @Volker_E . @Catrope and @MMiller_WMF will strategize how to ensure modals align technically, which may include needing to meet with VE and/or Readers Web.

It was recommended by @SBisson revisiting work on the Help Panel on desktop in interest of standardization during the Growth team Grooming session.

@MMiller_WMF I've updated the task description with links to all the tasks that I've created. Once you've triaged them, I think this task can be closed as invalid or something.

Everything in this task has been broken out into other tasks by @SBisson. Closing this in favor of those subtasks.