Maniphest T196372

Create a prototype to test an "Explicit reading mode" app and article navigation concept
Closed, ResolvedPublic
Actions

Assigned To

Authored By

	RHo
	Jun 4 2018, 2:22 PM

Description

APK for testing

https://releases.wikimedia.org/mobile/android/wikipedia/scratch/app-alpha-prototype_2.apk

Overview

Build a prototype for the "Explicit reading mode" concept update to the the app and article navigation.

How does the "Explicit reading mode" concept differ from the current app?

This concept incorporate article reading as an explicit tab in the same 'view' as the other main bottom nav sections.
When in the article view, article actions (Find in page, save to reading list, etc) are moved to the top app bar, and the table of contents is updated to use a draggable floating 'outline' button.

Navigation structure:

Proposed design

Invision prototype: https://wikimedia.invisionapp.com/public/prototype/sji0b7pde004i1t013klh67px

Walkthrough: https://docs.google.com/presentation/d/1zH_mGiJahl3z6wzuRZ5lAH-a4M0oneeIqkGESRs4aVM/edit#slide=id.g3b82d9366d_0_1008

NOTE: See Zeplin project for redlined mocks, tagged with Explicit reading mode

App navigation (key changes from existing app)

T197100: Remove Explore feed overflow and place options in a side drawer
T197703: Merge page activity to main activity - Remove "History" from the bottom navigation and replace with "Search" and "Reading" tabs
T197704: UI changes to incorporate Search and Article reading into the bottom navigation bar
- When opening an article, bottom tab navigation slides across to show details about the article(s) being read
- Search remains visible in the bottom navigation toolbar
- When in 'reading' mode, the bottom navigation can be swiped right to access the Explore feed, Reading lists and Nearby

Feed

Side drawer

Feed scrolled

T197705: Visual design updates to the Explore feed and bottom navigation bar for the "Explicit reading" mode

Article view (key changes from existing app)

T197809 Update the article view's top toolbar elements:
- Replace the "x" close icon with a bespoke back and forward icons on the top left of the app bar
- Move the tabs element to the bottom instead
Update and amend article tabs design:
- Show actual number of tabs open using an updated tab icon [T150462]
- Simplify the tab structure from 3 separate elements per tab to a single layer per tab [T176014]
- Active tab body should scroll with tab headers [T112980] - this may be fixed by the above change
- T197708 - Update the toolbar icons and overflow options in the "exploded tabs" view
- Ensure tabs are dismissable by swiping when in exploded tab view [T103955]
- Add "Undo close tab" toast [T158082]
Update the article action elements:
T197808 Update the article view:
- Move 'add to reading list' and 'share' as more common actions users can take to the top toolbar
- Place all article actions into an overflow menu in the top article toolbar
- History (aka Recently read) is moved as a sub-section within the article overflow menu
- On scrolling down, status bar, device nav, app bar and and bottom nav bar animate off the screen
T165964 - Table of contents is updated to a floating draggable button

Article view

Article scrolled

TOC open

Article overflow

View all open articles

ER 07 - exploded view 2 tabs open.png (1×720 px, 240 KB)

Related Objects
Search...

Status	Assigned	Task
Resolved	None	T195264 [EPIC] Improve app and article navigation
Resolved	Dbrant	T196372 Create a prototype to test an "Explicit reading mode" app and article navigation concept
Invalid	Sharvaniharan	T197703 Merge page activity to main activity
Resolved	Dbrant	T197704 UI changes to incorporate Search and Article reading into the bottom navigation bar
Declined	Sharvaniharan	T197705 Visual design updates to the Explore feed and bottom navigation bar for the "Explicit reading" mode
Invalid	Sharvaniharan	T197708 Update the toolbar icons and overflow options in the "exploded tabs" view in the "Explicit reading mode" app and article navigation concept
Resolved	cooltey	T197808 Update the article view in the Explicit reading mode" prototype
Invalid	Dbrant	T199722 Animations for nav bars
Resolved	Dbrant	T197809 Update the article view's top toolbar elements in the "Explicit reading mode" prototype

Event Timeline

RHo created this task.Jun 4 2018, 2:22 PM

RHo mentioned this in T195264: [EPIC] Improve app and article navigation.

RHo updated the task description. (Show Details)Jun 4 2018, 6:18 PM

RHo mentioned this in T196398: Perform user testing on android navigation prototype concepts.Jun 4 2018, 6:30 PM

RHo mentioned this in T197100: Remove Explore feed overflow and place options in a side drawer.Jun 13 2018, 11:33 AM

RHo updated the task description. (Show Details)

RHo updated the task description. (Show Details)Jun 13 2018, 5:46 PM

RHo added a project: Android-app-feature-Navigation.Jun 13 2018, 8:28 PM

RHo updated the task description. (Show Details)Jun 19 2018, 4:20 PM

RHo updated the task description. (Show Details)Jun 19 2018, 4:31 PM

RHo updated the task description. (Show Details)Jun 19 2018, 4:49 PM

RHo updated the task description. (Show Details)Jun 19 2018, 4:58 PM

RHo updated the task description. (Show Details)Jun 20 2018, 4:15 PM

RHo updated the task description. (Show Details)Jun 20 2018, 4:25 PM

• Charlotte edited projects, added Wikipedia-Android-App-Backlog ( Android-app-release-v2.7.25x-J-Jaffa-Cake); removed Wikipedia-Android-App-Backlog.Jun 26 2018, 9:27 PM

• Vvjjkkii renamed this task from Create a prototype to test an "Explicit reading mode" app and article navigation concept to jobaaaaaaa.Jul 1 2018, 1:06 AM

• Vvjjkkii raised the priority of this task from Medium to High.

• Vvjjkkii updated the task description. (Show Details)

• Vvjjkkii added projects: CheckUser, Connected-Open-Heritage-Batch-uploads (RAÄ-KMB_1_2017-02), Tamil-Sites, Gamepress, Hashtags, Jade, KartoEditor, Language-2018-Apr-June, New-Editor-Experiences, Mail, TCB-Team (now WMDE-TechWish).

• Vvjjkkii removed a subscriber: Aklapper.

Sharvaniharan renamed this task from jobaaaaaaa to Create a prototype to test an "Explicit reading mode" app and article navigation concept.Jul 1 2018, 5:24 AM

Sharvaniharan lowered the priority of this task from High to Medium.

Sharvaniharan updated the task description. (Show Details)

Sharvaniharan removed projects: TCB-Team (now WMDE-TechWish), Mail, New-Editor-Experiences, Language-2018-Apr-June, KartoEditor, Jade, Hashtags, Gamepress, Tamil-Sites, Connected-Open-Heritage-Batch-uploads (RAÄ-KMB_1_2017-02), CheckUser.

Sharvaniharan added a subscriber: Aklapper.

Dbrant claimed this task.Jul 25 2018, 2:34 PM

Dbrant moved this task from Backlog to Doing on the Wikipedia-Android-App-Backlog ( Android-app-release-v2.7.25x-J-Jaffa-Cake) board.

Dbrant updated the task description. (Show Details)

Dbrant moved this task from Doing to Design signoff on the Wikipedia-Android-App-Backlog ( Android-app-release-v2.7.25x-J-Jaffa-Cake) board.Jul 30 2018, 4:06 PM

RHo updated the task description. (Show Details)Aug 10 2018, 1:46 PM

Kaartic updated the task description. (Show Details)Aug 22 2018, 7:31 AM

Restricted Application changed the subtype of this task from "Deadline" to "Task". · View Herald TranscriptAug 22 2018, 7:31 AM

Just a passer-by comment: This seems to be one of those tasks that seem to require the frequent users to come over their habitual actions to access different UI elements such as Share, Add to reading list etc. It would be nice if these kind of changes were better kept at a minimum as they are not very well welcomed by all comoared to other changes such as a new feature.

Hoping that this change would bring more good than bad. It would be nice if this change stabilises the UI at least now avoiding repositioning of UI elements in future.

The task was to create this prototype (B) for testing against prototype A (T195335). Testing completed in T196398 indicated a preference for the incremental improvements in Prototype A.
As such, this task and associated tickets can be closed pending further exploration of nav improvements in future.