Page MenuHomePhabricator

Move article actions into article action toolbar
Closed, ResolvedPublic3 Estimated Story Points

Description

This is to create a bar of buttons at the bottom of PageFragment, that will contain most of the actions currently available in the overflow menu. If possible, use a CoordinatorLayout to automatically hide the toolbar upon scrolling the article.

The problem
The article actions are not accessible while reading the entire article. As a user, I have to scroll to top to save an article or share an article.

iOS action bar

article.png (1×750 px, 614 KB)

The hypothesis
If we create a sticky toolbar at the bottom of the article which hosts the actions that you can take with an article, user can access them while reading the article. This will also encourage use of these actions. We would like to avoid "out of sight out of mind" effect here. specially since we are improving saving experience, we would like to have access to it all the time.

The toolbar design guide is here by google > https://www.google.com/design/spec/components/toolbars.html

Structure

Primary actions

  • Save
  • Share
  • Change Language
  • Find in page
  • Table of content

Secondary actions

  • Change appearance
  • Location. Directions for articles about places
  • Repeat some primary actions?

The mocks and spec

article-v2.png (1×720 px, 741 KB)

article-v2-3.png (1×720 px, 205 KB)

Spec: zpl.io/Zb5IGm

^^ the actions on top will have a black border so they have legibility on images with white background.
There are no changes to icons.

More here >> https://docs.google.com/presentation/d/1NnkKFlgrcHQ9aCQR1Q1bqZaGpQj0SKEHXTsZfayN3bQ/edit#slide=id.g115b994fac_0_51

Goals

  1. improved access
  2. Consistency

Success criteria
Increased engagement in sharing and saving.

Event Timeline

Dbrant subscribed.

I surveyed a bunch of the apps installed on my Nexus 5 to see how many follow this pattern:

These apps have an action bar at the bottom:

  • Uber (select different taxi rates)
  • Yelp (near me, search, activity)
  • Lyft (select different taxi rates)
  • Instagram (home, search, add photos, favourites, profile)
  • Quora (read, answer, notifications, you)
  • Camera (flip camera, take photo, browse photos)

These apps do not have an action bar at the bottom:

  • Facebook
  • Facebook Messenger
  • Messenger
  • Twitter
  • Airbnb
  • Gmail
  • Google Maps (this one is debateable)
  • YouTube
  • Hangouts
  • Play Store
  • Chrome
  • Calendar
  • reddit

A majority of apps do not use action bars and instead use floating action buttons, which is more in-line with material design. Notably, no Google-owned app (except Google Maps, debatably) uses an action bar at the bottom of the screen. However, the pattern is becoming more common on Android than it was in the past, with several prominent apps sporting an action bar at the bottom of the screen for more easy accessibility.

Based on this, I think it's unclear what the effects of creating a bar like this might be for the Android app.

@Deskana
Google design has a guideline[1][2] for bottom action bars. there are certain design principals that go beyond other apps and platforms specifics. you can see that by the fact that bottom navigation was introduced by Material design after 1 year. It's a basic principle about access.

Based on this, I think it's unclear what the effects of creating a bar like this might be for the Android app.

having access to actions at all times is basic usability :)

A majority of apps do not use action bars and instead use floating action buttons

they only serve one action. we don't have one primary action you can take on the article. ideally it would be edit but we dont have good editing tools on apps.

[1]https://developer.android.com/design/patterns/actionbar.html#considerations-split-action-bars
[2]https://material.google.com/layout/structure.html#structure-toolbars

@Deskana
Google design has a guideline[1][2] for bottom action bars. there are certain design principals that go beyond other apps and platforms specifics. you can see that by the fact that bottom navigation was introduced by Material design after 1 year. It's a basic principle about access.

Cool! I wasn't aware of that. Sounds like it'd be fine. :-)

Change 305492 had a related patch set uploaded (by Mholloway):
Eliminate floating TOC button

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

Change 305493 had a related patch set uploaded (by Mholloway):
Add page action tab layout

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

Change 305516 had a related patch set uploaded (by Mholloway):
Add actions to page action tab layout

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

Do we want to take the tabbed page actions out of the existing action bar menu, or leave them alone? I was about to take them out, but now I'm second-guessing that.

By "tabbed page actions" do you mean the Tabs button? That's definitely staying in.

Sorry, I meant the actions that now have tabs (add to list, share, choose lang, find in page, view TOC).

Oh, you mean whether we should duplicate the actions that are now buttons at the bottom. I think it's fine to leave the overflow menu items as they are. It'll be trivial to remove them during the user testing phase.

Change 305543 had a related patch set uploaded (by Mholloway):
Update ToC onboarding tooltip to point at new page action button

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

Change 305492 merged by jenkins-bot:
Eliminate floating TOC button

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

Change 305493 merged by jenkins-bot:
Add page action tab layout

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

@Mholloway let me know if you want to me take a look at it once you are done. excited to see this.

Change 305637 had a related patch set uploaded (by Mholloway):
Remove article header menu bar

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

Change 305639 had a related patch set uploaded (by Mholloway):
Update bookmark icon to reflect page saved state

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

Change 305516 merged by jenkins-bot:
Add actions to page action tab layout

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

Change 305637 merged by jenkins-bot:
Remove article header menu bar

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

Change 305543 merged by jenkins-bot:
Update ToC onboarding tooltip to point at new page action button

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

Change 305639 merged by jenkins-bot:
Update bookmark icon to reflect page saved state

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

This looks great. signing off from design. there will be followup for hiding toolbar on scroll.

For QA: Please test out the new bottom toolbar buttons (Save, Share, Change Language, Find in page, Table of contents) and confirm that there are no problems.

Tested on Wikipedia app 2.3.152-alpha-2016-08-25 and Samsung SM-T230NU (Android 4.4.2). There are no problems with the new bottom toolbar buttons @Mholloway mentioned above so this is fixed.