Page MenuHomePhabricator

Homepage: mobile version
Closed, ResolvedPublic

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.?

Details

Related Gerrit Patches:
operations/mediawiki-config : masterEnable mobile homepage on cswiki, kowiki, viwiki

Related Objects

StatusAssignedTask
OpenNone
ResolvedMMiller_WMF
ResolvedSBisson
Resolvedkostajh
ResolvedMMiller_WMF
Resolvedkostajh
OpenCntlsn
ResolvedCatrope
Resolvedkostajh
InvalidSBisson
ResolvedMMiller_WMF
ResolvedSBisson
ResolvedSBisson
Resolvedkostajh
Resolvedkostajh
ResolvedSBisson
ResolvedSBisson
ResolvedEtonkovidova
ResolvedSBisson
OpenNone
ResolvedSBisson
ResolvedMMiller_WMF
DuplicateNone
ResolvedSBisson
Declinedkostajh
Resolvedkostajh
Resolvednettrom_WMF
Resolvedkostajh
ResolvedSBisson
ResolvedSBisson
Resolvedkostajh
ResolvedEtonkovidova
OpenNone
ResolvedSBisson
InvalidNone
DeclinedNone
OpenNone
ResolvedCatrope
ResolvedJdforrester-WMF
InvalidNone
ResolvedCatrope
ResolvedCatrope
OpenNone
DeclinedNone
OpenNone
ResolvedSBisson
ResolvedSBisson
ResolvedSBisson
ResolvedSBisson
ResolvedSBisson
ResolvedJTannerWMF
ResolvedSBisson
ResolvedSBisson
ResolvedSBisson
ResolvedSBisson
Resolvedkostajh
ResolvedSBisson
ResolvedSBisson
OpenNone
DuplicateCatrope

Event Timeline

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

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

MMiller_WMF closed this task as Resolved.Aug 5 2019, 6:41 PM
MMiller_WMF claimed this task.

Though some sub-tasks remain open, I'm closing this parent task because we have deployed the mobile homepage.

Restricted Application added a subscriber: Masumrezarock100. · View Herald TranscriptOct 14 2019, 3:30 PM