Page MenuHomePhabricator

Homepage: mobile version
Open, Needs TriagePublic

Description

The location, navigation, and framework of the newcomer homepage is laid out in T215982. This separate task for mobile exists because we anticipate that additional work will be required for a functional mobile version.

InVision mockups (this contains the up-to-date specifications): https://wikimedia.invisionapp.com/share/KUQV2QDJ8A7#/355549128_NH-Homepage_Layout_Mobile
InVision interactive prototype (this shows how the interaction works, but may not contain the up-to-date specifications): https://wikimedia.invisionapp.com/share/28RPQWV67VK#/360015010_Homepage_-_Mobile_Layout_A_V1_Copy_2

Summary: in the mobile version of the homepage, the idea is that when users navigate to their homepage, they can see a short preview of each module in a list, and then when they open them up, they get a full page version of the module. As currently designed, virtually all the functionality that exists on the desktop version of the homepage also exists in the mobile version. But it is possible in the future that we develop complex functionality that makes sense on desktop but is too complex for mobile. In those situations we may make some parts of the homepage desktop-only. Because the mobile homepage will have all the functionality of the desktop homepage, this task only describes how the layout and UI works. None of the module functionality is described, except in the handful of cases in which it deviates from desktop.

Specifications:

  • Navigation to the page
    • Users will access their homepage by opening the side menu and tapping their username in the list.
    • Users who have the preference turned on to "Display newcomer homepage" will have the new tabbed layout in their user space, which has a tab each for "Homepage", "User page", and "Discussion". The user will also be able to access their homepage by tapping the "Homepage" tab from their user page.
    • The tabs will be underneath both the title of the page ("Hello, USERNAME!") and the subheader ("This is your homepage...")
    • Note that though the tab layout is associated with "Advanced mobile contributions", we do not want to turn on that whole "Advanced mobile contributions" setting for newcomers -- just the tabs.
  • Layout
    • Underneath the tabs, there should be a module preview box for each module, stacked in this order:
      • 1) Start module
      • 2) Impact module
      • 3) Mentorship module
      • 4) Help module
    • Though each module contains an arrow in the upper right, tapping anywhere on the module should open the full page module.
  • Module previews
    • Start module
      • Icon: checkmark
      • Sub-modules are shown horizontally, with their icons showing their state above the titles of the sub-modules.
      • This module should have heavy drop shadow until complete, at which point it has light drop shadow.
    • Impact module
      • Icon: chart
      • Unactivated state
        • Top line reads: "You have not yet edited any articles."
        • Second line reads: "This area will show the impact of your edits:"
        • Next to the second line is a large blue "0".
      • Activated state:
        • Top line reads: "X edits to articles", with the number being bold. If only one edit, it should read, "1 edit to articles". This only counts edits in the article namespace. Below is a modification to this business rule based on performance constraints:
          • If the user's total edit count is less than or equal to 1,000, then display the article edit count with this language: "4 edits to articles"
          • If the user's total edit count is greater than 1,000, then display the total edit count with this language: "1,123 total edits"
        • Second line reads: "Views from recent edits (last 60 days):"
        • Next to the second line is a large blue number, calculated as the number of views to the ten most recently edited articles (pages in the articles namespace) the user has edited, just over the course of the previous 60 days, with the current day included. Note that this is not just among the top five articles -- it is of all the ten most recent articles. On the first day the user has edited, there won't be any views yet. This number should show "--". The formatting of this number should respect formatting conventions of different languages in terms of spaces, periods, and commas. Numbers with 6 digits should be able to fit here. Calculating pageviews should use the same logic as in T216217.
    • Mentorship module
      • Icon: happy face speech bubble
      • First line shows an avatar with the mentor's username.
      • Second line shows the number of days since they were active, following the same logic as in T216631.
    • Help module
      • Icon: question mark
      • Content reads "Ask the help desk or read help pages."
      • Note that this module is a different color than the others.
  • Full page modules
    • All module headers should have an arrow to bring the user back to the homepage.
    • Using the browser's back button should return the user to the homepage.
    • Start module
      • The four sub-modules in the start module should vertically stack in this order: account created, email, tutorial, user page.
      • All other behavior should be identical to desktop.
    • Impact module
      • All behavior should be identical to desktop.
    • Mentorship module
      • All behavior should be identical to desktop.
      • Question for engineers: do you think we should use dialogs on mobile the way we do on desktop? Or since the desktop help panel is already a dialog, we should make the experience more closely aligned with the help panel -- meaning a text box to type when the module is opened, etc.?
    • Help module
      • All behavior should be identical to desktop.
      • Question for engineers: do you think we should use dialogs on mobile the way we do on desktop? Or since the desktop help panel is already a dialog, we should make the experience more closely aligned with the help panel -- meaning a text box to type when the module is opened, etc.?

Related Objects

StatusAssignedTask
OpenNone
OpenNone
ResolvedSBisson
Resolvedkostajh
ResolvedMMiller_WMF
Resolvedkostajh
OpenCntlsn
OpenNone
Openkostajh
InvalidSBisson
ResolvedMMiller_WMF
ResolvedSBisson
ResolvedSBisson
OpenSBisson
OpenNone
ResolvedSBisson
ResolvedSBisson
ResolvedEtonkovidova
ResolvedSBisson
OpenNone
ResolvedSBisson
OpenNone
DuplicateNone
OpenSBisson
Openkostajh
Resolvedkostajh
Resolvednettrom_WMF
Resolvedkostajh
ResolvedSBisson
OpenSBisson
Resolvedkostajh
OpenNone
OpenNone
OpenNone
InvalidNone
DeclinedNone
OpenNone
ResolvedCatrope
ResolvedJdforrester-WMF
InvalidNone
OpenNone
OpenCatrope
OpenNone
OpenNone

Event Timeline

There are a very large number of changes, so older changes are hidden. Show Older Changes

@Cntlsn -- I think you should plan to organize your various design concepts into a slideshow so that it will be easy to discuss as a team. The slideshow can describe the pros and cons with the design choices. Here is an example set of slides around design concepts: https://docs.google.com/presentation/d/13mDD8DlMAJP6blIXhTeozSP_BS-_z7Ea2rNGoqqIGJY/edit#slide=id.p

Cntlsn updated the task description. (Show Details)Apr 25 2019, 6:18 PM

@MMiller_WMF The mockups are up-to-date, and I have added the link to the interactive prototype in the task description.
Task is now ready to get specs.

Added mockups to InVision and Zeplin for:

  • Homepage mobile layout with impact module in unactivated state
  • Impact module mobile (unactivated state)
MMiller_WMF removed Cntlsn as the assignee of this task.May 1 2019, 12:41 AM
MMiller_WMF updated the task description. (Show Details)
MMiller_WMF added a subscriber: Cntlsn.

This task is ready for development. @Cntlsn and I may make some changes to the words or the mockups, but the general structure and paradigm is set. I will make a separate task for instrumentation.

MMiller_WMF updated the task description. (Show Details)May 1 2019, 5:42 PM
MMiller_WMF updated the task description. (Show Details)May 1 2019, 6:50 PM
MMiller_WMF updated the task description. (Show Details)May 1 2019, 6:56 PM

Users will access their homepage by opening the side menu and tapping their username in the list.

@MMiller_WMF @SBisson I remember we said that this wasn't technically possible...Did I miss anything?

Users will access their homepage by opening the side menu and tapping their username in the list.

@MMiller_WMF @SBisson I remember we said that this wasn't technically possible...Did I miss anything?

Unlike desktop, there's no official extension point for changing this menu on mobile. There's an "unofficial" extension point. It allows adding a menu item but not changing the URL for an existing item (if I remember correctly).

If changing the userpage menu item URL is REALLY what we want to do, I'm sure we can work with the mobile web team to figure out a way.

@Jdlrobson would know for sure what is currently possible or can easily be added.

@ovasileva, @Cntlsn, @alexhollender, and I have a time to talk about whether we want to do this from a design perspective. We'll try to figure out whether this behavior is best for the user.

@JTannerWMF is going to schedule time with Growth engineers and @Jdlrobson to talk about technical guidance on this and other homepage issues.

@JTannerWMF is going to schedule time with Growth engineers and @Jdlrobson to talk about technical guidance on this and other homepage issues.

We've got something scheduled on Monday with Piotr, Roan, Stephane and myself.

Cntlsn added a subscriber: Urbanecm.May 6 2019, 4:18 PM

Hello @Urbanecm, I would have a quick request for feedback about the mobile design for the newcomer homepage.
As per mockup below, we noticed that the "Start module" could become cluttered when trying to add the Czech translation. That's because Czech seems to have longer words than the English translation.

How do you feel about it, is still readable? Do you think the layout could create any readability issues?
Thanks a lot for your support!

Hi @Cntlsn, I think that's perfect! Thanks for sharing it with me!

kostajh added a subscriber: pmiazga.May 7 2019, 1:41 PM

Rough notes from the meeting @Catrope and I had with @Jdlrobson and @pmiazga yesterday:

  • keeping the HTML the same between desktop and mobile would be ideal
  • MF recently converted to using mustache templates. If we use them we'd benefit from async rendering of templates
  • In looking at the mockups it seemed like all of the individual module views could be written as MF overlays
    • one exception is the process dialog used with help and mentorship. We discussed a collaboration between teams would be to add code to MF that would allow registering a process dialog as an overlay so that it has routing support
  • we'll get routing and back button behavior for free if we use the overlay system
  • for the tab link on the user page, it sounds like there is a "insertBefore" method we can call
  • it was suggested that we add integration tests for the "tap username to get to homepage" link as well as the tab link, as this is code that will change in MF over the next year

I've created subtasks for the actual work. Making this an epic. Not sure where to put it on the board.

@SBisson -- thanks for making the subtasks. Since the epic has subtasks that are in progress, I'm putting the epic in progress.

  • Help module
    • Content reads "Ask the help desk, search for answers, or read help pages."

@MMiller_WMF Is this text correct given that the help panel doesn't have the search feature?

@SBisson -- good catch. I will change the text in the description to "Ask the help desk or read help pages."

MMiller_WMF updated the task description. (Show Details)Jun 1 2019, 12:06 AM
  • Impact module
    • Activated state:
      • Top line reads: "X edits to articles", with the number being bold. If only one edit, it should read, "1 edit to articles". This only counts edits in the article namespace.

@MMiller_WMF, @Cntlsn

MediaWiki Core maintains a per-user total edit count that we can display. It turns out counting the edits for a single namespace is too expensive. We can change it to show the total edit count for all namespaces or, as Roan suggested in the patch, count up to 50 and then display 50+.

MediaWiki Core maintains a per-user total edit count that we can display. It turns out counting the edits for a single namespace is too expensive. We can change it to show the total edit count for all namespaces or, as Roan suggested in the patch, count up to 50 and then display 50+.

For the record, I'd prefer showing the total edit count, because that's less expensive (counting article edits can be slow in edge cases) and more consistent with other interfaces: the article edit count appears nowhere else, not even on the desktop version of the homepage.

@Catrope and I talked about this, and we think we figured out a way for this to work. The reason we do want to display the article edit count instead of the total edit count is because the unactivated state of the module has been telling the user that they don't have any article edits. If they finally make their first article edit as their, say, fifth overall edit, then it basically goes from 0 to 5 all at once, and that might be confusing. So here's what we think we can do:

  • The code is already looking at the 1,000 most recent edits.
  • If the user's total edit count is less than or equal to 1,000, then display the article edit count with this language: "4 edits to articles"
  • If the user's total edit count is greater than 1,000, then display the total edit count with this language: "1,123 total edits"

@SBisson -- does this work? If so, I will change the task description.

  • If the user's total edit count is less than or equal to 1,000, then display the article edit count with this language: "4 edits to articles"
  • If the user's total edit count is greater than 1,000, then display the total edit count with this language: "1,123 total edits"

I've submitted a patch on top of Stephane's that does this: https://gerrit.wikimedia.org/r/c/mediawiki/extensions/GrowthExperiments/+/514412

MMiller_WMF updated the task description. (Show Details)Jun 5 2019, 12:27 AM

@SBisson -- does this work? If so, I will change the task description.

That works. I've merged Roan's patch. It should be testable in beta soon.

Hello everyone,
I've noticed "Ask your mentor" can't be seen in mentorship module in full length, see screenshots:

en:

cs:

It effectivelly says "Ask you...". It is up to @MMiller_WMF or @Cntlsn if this issue needs to be resolved.

Thanks @Urbanecm for posting this!

It might have been overlooked that the InVision mockups for the mobile version of the "Ask a question" modals don't feature a "Cancel" button to be dismissed, but an "X" instead, just like standard modals on mobile.
https://wikimedia.invisionapp.com/share/KUQV2QDJ8A7#/366224375_NH-Mentorship_Module_Mobile
https://wikimedia.invisionapp.com/share/KUQV2QDJ8A7#/366183245_NH-Help_Module_Mobile

Looping @SBisson @kostajh to please have a look at that, thanks!

It's possible that the fix won't solve the issue with the specific, or future, translation. In that scenario I think we would rely on the best practice of the ellipsis.
@MMiller_WMF any thoughts on this?

@Cntlsn -- i think this does need to be fixed. Please consolidate this issue onto the other task where you are trying UI/UX issues or file it separately.

The issue has been added to the list at T225288

Change 519082 had a related patch set uploaded (by Catrope; owner: Catrope):
[operations/mediawiki-config@master] Enable mobile homepage on cswiki, kowiki, viwiki

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

Change 519082 abandoned by Catrope:
Enable mobile homepage on cswiki, kowiki, viwiki

Reason:
Superseded by https://gerrit.wikimedia.org/r/c/operations/mediawiki-config/ /518779

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