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.
If building for mobile does**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, in factthey get a full page version of the module. As currently designed, require additional workvirtually 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, then rolling out a mobile version will be a lower priority than a desktop versionthis task only describes how the layout and UI works. We will decide what additionalNone of the module functionality is design and engineering is needed via conversations between engineers andcribed, except in the handful of cases in which it deviates from design resourcesktop.
Here are initial thoughts:**Specifications**:
* The work by the Readers Web team in T210658 may facilitate our ability to have multiple tabs (User page, Talk, Homepage)* 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...")
** 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.
**** Second line reads: "Views since you edited (last 60 days):"
**** Next to the second line is a large blue number, calculated as the number of views to //all// 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 articles they have ever edited. 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, search for answers, 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.
** 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.
* There may be modules, such as task recommendations, that we decide are too complex for mobile, causing the set of mobile-accessible modules to be a subset of the desktop modules.* Impact module
* Here are some pot*** All behavior should be idential mobilecal to design concepts:ktop.
** Simply stack the various homepage** Mentorship modules such that they scroll vertically.ule
** List of menu items, one for each module, each of which opens a full page version of the module*** All behavior should be identical to desktop.
** Each module is a tab across the top of the screen* //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, with the selected one taking up the screen below the tabs.
InVision mockups proposals: https://wikimedia.invisionapp.com/share/KUQV2QDJ8A7#/355549128_NH-Homepage_Layout_Mobie 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
InVision prototype (click-through): https://wikimedia.invisionapp.com/share/28RPQWV67VK#/360015010_Homepage_-_Mobile_Layout_A_V1_Copy_2*** 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.?//