Page MenuHomePhabricator

Changes to article toolbar and overflow menu
Closed, ResolvedPublic4 Estimated Story Points

Assigned To
Authored By
scblr
Aug 6 2020, 1:16 PM
Referenced Files
F32189664: 2020-08-20 09.29.13.png
Aug 20 2020, 7:43 AM
F32189655: 2020-08-20 09.26.33.png
Aug 20 2020, 7:43 AM
F31967877: article-search-01.png
Aug 6 2020, 3:17 PM
F31967880: article-search-02.png
Aug 6 2020, 3:17 PM
F31967758: article-search-01-before.png
Aug 6 2020, 1:31 PM
F31967763: article-search-01.png
Aug 6 2020, 1:31 PM
F31967772: main-search-03.png
Aug 6 2020, 1:31 PM
F31967799: article-search-02.png
Aug 6 2020, 1:31 PM

Description

Disclaimer ⚠️

  • This should not be released before it’s validated (sanity check by a few internal Android users)
  • This task is dependent on changes in T259717 (Search needs to be at the same position in the main nav as well)

Why are we doing this?

2020-07-31 13.10.55.png (2×1 px, 1 MB)
2020-08-06 15.11.09.png (2×1 px, 1 MB)
  • Search is the most used feature in the app, but physically one of the furthest and hardest to reach.
  • According to stats in June 2020, 62.4% of all app users are visiting at least one article page during a session. That’s 3.3 Million a month.
  • Related issue: T217316.

Proposed changes

Toolbar
BeforeAfter
article-search-01-before.png (1×720 px, 1 MB)
article-search-01.png (1×720 px, 1 MB)
  • Add labels to toolbar items
  • Use the same design / dimensions as for the app’s main navigation
  • Reduce visible items to 5
  • New toolbar IA:
    • Save
    • Language
    • Search
    • Theme
    • Contents
Overflow menu
BeforeAfter
article-search-02-before.png (1×720 px, 651 KB)
article-search-02.png (1×720 px, 652 KB)
  • Move Find in page and Share to overflow menu at top right.
  • New overflow menu IA:
    • Forward (only display when available)
    • Find in page
    • Share article
    • Open a new tab
    • Explore (to get back home)

Search flow

article-search-01.png (1×720 px, 1 MB)
main-search-03.png (1×720 px, 153 KB)
main-search-04.png (1×720 px, 254 KB)
main-search-05.png (1×720 px, 323 KB)
main-search-06.png (1×720 px, 1 MB)
1. User taps on search in toolbar2. Familiar search modal opens with active keyboard3. User types in search term4. User selects a search term5. User is taken to searched article
  • Tapping back in 2/3/4 leads users back to previous article (Williamsburg Bridge)

Event Timeline

scblr updated the task description. (Show Details)
Charlotte set the point value for this task to 4.

Thx @cooltey, looks pretty good already. Two minor things:

01) Hide Forward completely when it’s not available (as opposed to disabling it)

2020-08-20 09.26.33.png (2×1 px, 765 KB)

02) Disable Save (set opacity to 50% when it’s not available, e.g. in main pages), see Zeplin

2020-08-20 09.29.13.png (2×1 px, 441 KB)


Disclaimer:

  • This should not be released before it’s validated (reality check by a few internal Android users)
  • This task is dependent on changes in T259717 (Search needs to be at the same position in the main nav as well)

Looks good @cooltey. One thing I noticed, maybe a separate task 👇

Steps to reproduce
  1. Visit an article page, e.g. Kamala Harris
  2. Use the search in the bottom toolbar and look for Ayanna Presley
  3. Visit the Ayanna Presley article
  4. Tap the Back button at the top left
  5. Tap the Back button at the top left again
Expected result

I’m back on the Kamala Harris article page (where I started my journey).

Actual result

I’m taken back to the Explore feed.

What do you think @cooltey ?

scblr added a subscriber: Dbrant.

@cooltey ... created a separate task for it after talking to @DbrantT261322

In T259795#6413020, @schoenbaechler wrote:

@cooltey ... created a separate task for it after talking to @DbrantT261322

Sounds good to me. I remember this back button behavior changed a few times and glad to see it is going to get optimized.

I think you should put the "Share" or/and "Find in page" instead of the "Theme" one because i think that they're used more.