Maniphest T195335

Create a prototype to test an "Article Queue" app navigation concept
Closed, ResolvedPublic
Actions

Assigned To

Authored By

	RHo
	May 22 2018, 11:24 PM

Description

APK for testing

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

Last update: August 23, 2018 12:49 PT

Overview

Build a prototype for the "Article queue" concept update to the the app and article navigation.

How does the "Article queue" concept differ from the current app?

This concept maintains the same navigational structure as the existing app but provides a prominent ‘landmark’ element to enable quickly returning to reading tab “queue”.

Navigation structure:

Proposed design

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

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

NOTE: See Zeplin project for redlined mocks, tagged with Floating Article Queue

App navigation (key changes from existing app)

T197100: Remove Explore feed overflow and place options in a side drawer
T197811 Add floating queue element:
- Remove article tab icon from the Explore feed toolbar and make it a floating element visible across all bottom nav menu items when the Article view is minimized
- "Article queue" element shows a thumbnail from the top-most open tab
- There is a transition between the full article view when it is minimized to the "article queue" and vice versa
- New floating "article queue" element shows the exact number of tabs open [T150462]
- Remove the "Continue reading" card from Explore
T197812: Visual design updates to the Explore feed and "Add floating queue element" mode

Feed with floating article queue:

AQ 15 Feed w queue - varB.png (640×360 px, 136 KB)

Feed scrolled down:

Feed scrolled back up:

Floating article queue over Nearby

AQ 17 Nearby Copy.png (1×720 px, 390 KB)

Article view (key changes from existing app)

Besides the transition to the article queue element, make the following improvements the current tab interactions and behavior to enable easier switching between articles within the ‘queue’.

T197814 Update the article view's top and bottom toolbar elements:
- Replace the "x" close icon with a bespoke "<W" icon on the top left which upon tapping minimizes the tab stack into the floating article queue element, and returns the user to the Explore Feed.
Update the overflow actions to match mocks
Bottom article toolbar updated so that all actions except ToC are aligned left with 24dp between each icon
Move Font and theme changer from overflow actions to bottom article toolbar
On scrolling down, app bar and and bottom article action bar animate off the screen

Update and amend article tabs design:
- 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
- Update the toolbar icons and overflow options in the "exploded tabs" view
- Ensure tabs are dismissable by swiping when in exploded tab view [T103955]
- Allow users to move between tabs when swiping left and right in the top toolbar area (similar to mobile browsers like Chrome) - see request on https://ticket.wikimedia.org/otrs/index.pl?Action=AgentTicketZoom;TicketID=10730591
  - Show actual number of tabs open using an updated tab icon as background [T150462]
- When swiping down in the top toolbar area, expose all tabs (similar to mobile browsers like Chrome) [T113369]
- Add "Undo close tab" toast [T158082]

T197813: Add an additional option on link previews to "Open in new tab"

Article view

AQ 04 Article One open.png (1×720 px, 574 KB)

Article view overflow

AQ 04 Article One open.png (1×720 px, 375 KB)

Article scrolled:

Exploded tabs view

Exploded tabs overflow menu

AQ 12 Exploded tabs overflow.png (640×360 px, 84 KB)

Details

	Subject	Repo	Branch	Lines +/-
	Tweak: update colors and icons to match the design	apps/android/wikipedia	master	+101 -31
	Update toolbar icons and overflow options in exploded tabs view	apps/android/wikipedia	prototype_floating_queue	+256 -60

Customize query in gerrit

Related Objects
Search...

Status	Assigned	Task
Resolved	None	T195264 [EPIC] Improve app and article navigation
Resolved	cooltey	T195335 Create a prototype to test an "Article Queue" app navigation concept
Resolved	Sharvaniharan	T197100 Remove Explore feed overflow and place options in a side drawer
Resolved	cooltey	T200110 Remove Explore feed overflow and place options in a side drawer (prototype 1)
Resolved	cooltey	T197811 Add floating queue element
Resolved	cooltey	T197812 Visual design updates to the Explore feed and "Add floating queue element" mode
Resolved	cooltey	T197813 Add an additional option on link previews to "Open in new tab"
Resolved	cooltey	T197814 Update the article view's top and bottom toolbar elements (prototype 1)
Resolved	Dbrant	T202569 Visual update to exploded tabs for prototype "Article Queue"

Event Timeline

RHo created this task.May 22 2018, 11:24 PM

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

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

RHo updated the task description. (Show Details)

RHo updated the task description. (Show Details)Jun 4 2018, 2:05 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:45 PM

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

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

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

RHo updated the task description. (Show Details)Jun 20 2018, 5:02 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 "Article Queue" app navigation concept to chcaaaaaaa.Jul 1 2018, 1:08 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 chcaaaaaaa to Create a prototype to test an "Article Queue" app navigation concept.Jul 1 2018, 5:25 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.

CommunityTechBot updated the task description. (Show Details)Jul 5 2018, 6:45 PM

cooltey claimed this task.Jul 25 2018, 4:40 PM

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

cooltey updated the task description. (Show Details)Jul 25 2018, 5:08 PM

cooltey updated the task description. (Show Details)Jul 25 2018, 8:57 PM

Hi, @ABorbaWMF

I uploaded the APK of prototype one, and you can find it on the top of the ticket description. Please let me know if you have trouble downloading or installing it.

cooltey updated the task description. (Show Details)Jul 27 2018, 9:53 PM

cooltey updated the task description. (Show Details)Jul 28 2018, 12:29 AM

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 mentioned this in T198473: [Spike] Investigate ChromeLikeTabSwitcher component.Aug 7 2018, 11:27 AM

Change 451209 had a related patch set uploaded (by Cooltey; owner: Cooltey):
[apps/android/wikipedia@prototype_floating_queue] Update toolbar icons and overflow options in exploded tabs view

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

gerritbot added a project: Patch-For-Review.Aug 7 2018, 11:10 PM

Hi @RHo

What's the color set of the Exploded tabs view in Dark/Black mode?

In T195335#4486999, @cooltey wrote:

Hi @RHo

What's the color set of the Exploded tabs view in Dark/Black mode?

hi @cooltey - please use the existing theme Base color for Dark and Black mode:
https://www.mediawiki.org/wiki/Wikimedia_Apps/Android_theme_guidelines

@RHo Thank you :)

cooltey updated the task description. (Show Details)Aug 8 2018, 10:44 PM

Hi, @RHo
The UI tweak has been completed, please download and install the update APK and let me know if you see anything unexpected.
https://releases.wikimedia.org/mobile/android/wikipedia/scratch/app-alpha-prototype_1.apk

@RHo
The APK has been updated, please wait at least 30 minutes and download it again through the link above.

hi @cooltey - this is almost perfect but there are still a few minor visual discrepancies between the Actual vs Expected:

Actual (Light)

Expected

a. The group of 'exploded' tabs appears further down the screen than expected
b. It's expected that there should be a drop-shadow around the tab set
c. It's expected that the article content (inside the tab window) should remain the "Paper" color - at the moment the article is showing as the same color as the tab title bar.
d. It's expected that there is an inner 2dp border the same color as the tab title bar background for the article content in the tab window
e. It's expected that there is drop-shadow under the tab title bar

Actual (Dark)

Expected:

Actual (Black)

Expected:

cooltey updated the task description. (Show Details)Aug 17 2018, 10:43 PM

cooltey updated the task description. (Show Details)Aug 20 2018, 9:20 PM

Restricted Application changed the subtype of this task from "Deadline" to "Task". · View Herald TranscriptAug 20 2018, 9:20 PM

Hi, @RHo

The tweak patch is partially done now, please download the latest version of the prototype one APK.

In T195335#4508512, @RHo wrote:

a. The group of 'exploded' tabs appears further down the screen than expected

^ Not done. Now we are using a "hack" way to animate the tab list view and the article content view to move to their position.

b. It's expected that there should be a drop-shadow around the tab set

^ Not done. The tab list view and the article content view are not in the same container, which is more complicate to add the drop-shadow around them.

c. It's expected that the article content (inside the tab window) should remain the "Paper" color - at the moment the article is showing as the same color as the tab title bar.

^ Done.

d. It's expected that there is an inner 2dp border the same color as the tab title bar background for the article content in the tab window

^ Not done. The same reason that the tab list view and the article content view are not in the same container.

e. It's expected that there is drop-shadow under the tab title bar

^ Done.

hi @cooltey - can you clarify what it means for some of the items that are not done? It's just that if it means "won't be done" due to constraints mentioned then the piecemeal changes don't really work. For example, I would not want part (e) drop-shadow under the tab title bar if part (d) and (b) is not possible, since the drop-shadow just makes it more obvious that the tab bar is a separate object to the tab content area.

Hi @RHo

Sorry about that.

The (a), (b), (d) won't be done due to constraints mentioned. If so, then should I remove the (e) drop-shadow and keep (c)?

In T195335#4519540, @cooltey wrote:

Hi @RHo

Sorry about that.

The (a), (b), (d) won't be done due to constraints mentioned. If so, then should I remove the (e) drop-shadow and keep (c)?

Hi @cooltey - yes, please remove (e) and keep (c) for now. And I would suggest creating a separate ticket or otherwise tracking on an existing ticket related to tabs that the remaining visual updates still need to be fixed at a later date. Thanks!

cooltey mentioned this in T202569: Visual update to exploded tabs for prototype "Article Queue".Aug 22 2018, 7:00 PM

cooltey updated the task description. (Show Details)Aug 22 2018, 10:29 PM

In T195335#4522827, @RHo wrote:

Hi @cooltey - yes, please remove (e) and keep (c) for now. And I would suggest creating a separate ticket or otherwise tracking on an existing ticket related to tabs that the remaining visual updates still need to be fixed at a later date. Thanks!

Thanks, @RHo. Please download the latest version the the prototype one APK to see the updates.

hi @cooltey - I just tried the latest version of prototype 1 and neither update is showing (shadow is still shown under tabs, no floating queue on a single reading list)

cooltey updated the task description. (Show Details)Aug 23 2018, 7:30 PM

Hi, @RHo
Please try to download the APK again, I've fixed the bug and uploaded it to the server.

You can also check the version of the APK to ensure it is the latest one: 2.7.237-alpha-2018-08-23

Thanks @cooltey - just checked the APK and looks great!

Change 451209 abandoned by Cooltey:
Update toolbar icons and overflow options in exploded tabs view

Reason:
Move to master branch

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

RHo mentioned this in T196372: Create a prototype to test an "Explicit reading mode" app and article navigation concept.Sep 17 2018, 2:28 PM

Screenshot_20181011-103729.jpg (2×1 px, 403 KB)

Things are looking and working well for me but I noticed that the background color is the same color as the tab color and not the 'paper' color.
@cooltey would it be possible to update this?

cmadeo moved this task from Design signoff to Blocked/Waiting on the Wikipedia-Android-App-Backlog ( Android-app-release-v2.7.25x-J-Jaffa-Cake) board.Oct 11 2018, 3:32 PM

Thanks for the review, @cmadeo!
Will go to update it to match the design in T202569

Change 466807 had a related patch set uploaded (by Cooltey; owner: Cooltey):
[apps/android/wikipedia@master] Tweak: update colors and icons to match the design

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

cooltey moved this task from Blocked/Waiting to Code Review on the Wikipedia-Android-App-Backlog ( Android-app-release-v2.7.25x-J-Jaffa-Cake) board.Oct 11 2018, 11:02 PM

Change 466807 merged by jenkins-bot:
[apps/android/wikipedia@master] Tweak: update colors and icons to match the design

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

Dbrant moved this task from Code Review to Design signoff on the Wikipedia-Android-App-Backlog ( Android-app-release-v2.7.25x-J-Jaffa-Cake) board.Oct 15 2018, 7:28 PM

Thanks for the update @cooltey, looking good to me!

Dbrant closed this task as Resolved.Nov 1 2018, 5:18 PM

Dbrant closed subtask T202569: Visual update to exploded tabs for prototype "Article Queue" as Resolved.

Dbrant closed subtask T197814: Update the article view's top and bottom toolbar elements (prototype 1) as Resolved.

Dbrant closed subtask T197813: Add an additional option on link previews to "Open in new tab" as Resolved.

Dbrant closed subtask T197811: Add floating queue element as Resolved.

Dbrant closed subtask T197100: Remove Explore feed overflow and place options in a side drawer as Resolved.

	F26524677: Screenshot_20181011-103729.jpg
	Oct 11 2018, 2:39 PM

	F25259350: image.png
	Aug 23 2018, 11:09 AM

	F25021823: image.png
	Aug 16 2018, 9:56 PM

	F25027016: image.png
	Aug 16 2018, 9:56 PM

	F25021830: image.png
	Aug 16 2018, 9:56 PM

Create a prototype to test an "Article Queue" app navigation conceptClosed, ResolvedPublicActions