Page MenuHomePhabricator

Improve app navigation by using a bottom drawer instead of modal drawer
Closed, ResolvedPublic3 Estimated Story Points

Authored By
scblr
May 20 2020, 3:55 PM
Referenced Files
F31906431: 2020-06-26 10.58.01.png
Jun 26 2020, 9:01 AM
F31903672: menu-02.png
Jun 24 2020, 10:52 AM
F31903670: 2020-06-24 12.47.56.png
Jun 24 2020, 10:52 AM
F31863287: menu.png
Jun 12 2020, 6:41 PM
F31859347: Screenshot_20200609-113114.png
Jun 9 2020, 6:37 PM
F31843895: menu-04.png
May 27 2020, 7:42 AM
F31835450: menu-03.png
May 21 2020, 10:03 AM
F31835446: menu-01.png
May 21 2020, 10:03 AM

Description

Why are we doing this?

  • Currently, the “Explore“ tab contains a modal drawer (hamburger icon).
  • From an information architectural point of view, a bottom drawer is the way to go. The current, contextual modal drawer contains global items such as “Settings“, “Notifications“, “Support Wikipedia“, “About“ and “Help“.
  • The only contextual item for the “Explore“ tab is “Customize the feed“, which can be moved to “Settings”.
  • It makes all nav items within the drawer more discoverable (less taps needed) and accessible (closer to bottom = thumb friendly).
  • As a result, it will likely lead to more donations through “Support Wikipedia“, as obvious always wins (L. Wroblewski).

Check out Google Material Design’s section about bottom drawers for reference.

Proposed designs

menu-01.png (1×720 px, 457 KB)
menu-02.png (1×720 px, 356 KB)
menu-03.png (1×720 px, 222 KB)
menu-04.png (1×720 px, 190 KB)

👉 Prototype | Zeplin

Changes

  • Add “More” item to bottom navigation.
  • Use bottom navigation drawer instead of side navigation drawer.
  • New bottom navigation drawer is accessed via “More” item.
  • Restyle header with username to be displayed on one line
  • Remove “Customize the feed” option from navigation drawer
  • Add “Explore feed” to “Settings” (Copy: “Customize the Explore feed”)
  • Remove shadows from top nav bar
  • Swipe anywhere in feed no longer opens this menu
    1. How do measure success?
  • See subtask: T253240
  • Compare usage of drawer before and after
  • Compare usage of items in drawer before and after (access of/taps on individual items)
    • Especially interesting: “Support Wikipedia”

Future (not for this update)

  • Include “Search” instead of “History” in bottom navigation
  • Rename / rebrand “Suggested edits” to “Contribute”
  • ☝️ These two items depend on the outcome of T253240, where we are looking into usage of current navigation items in the app.
  • Rename / rebrand “My lists” to “Lists” as we’re considering to add Watchlist functionality. Depends on the outcome of T253129, T253130.

Visual for future navigation:

menu-06.png (1×720 px, 456 KB)

Event Timeline

scblr renamed this task from Improve app navigation by using a bottom drawer instead of modal drawer. to Improve app navigation by using a bottom drawer instead of modal drawer.May 27 2020, 7:42 AM
scblr updated the task description. (Show Details)

Screenshot_20200609-113114.png (2×1 px, 341 KB)

@schoenbaechler i think i need an image resource for the avatar icon, because you can see an arc on the bottom with the current avatar image

menu.png (1×720 px, 283 KB)

Hi @schoenbaechler does the globe icon look fine to you? i felt it was a tad bit small, if you feel so too please give a size for it which you think would look better..

@Sharvaniharan looks good, two comments!

01) Off canvas menu is overlapping the tab bar, this is suboptimal for the user’s orientation. Also, can we adapt the color of the nav bar here? And, active state on “More” menu item should be applied (colorAccent)

ImplementationvsDesign
2020-06-24 12.47.56.png (2×1 px, 244 KB)
menu-02.png (1×720 px, 356 KB)

02) Can we use the Material login icon instead of the Wikipedia globe? I also suggest to move the LOG IN / JOIN WIKIPEDIA link to the left side (align it with the other labels):

https://material.io/resources/icons/?search=login&icon=login&style=baseline

THX

02) Can we use the Material login icon instead of the Wikipedia globe? I also suggest to move the LOG IN / JOIN WIKIPEDIA link to the left side (align it with the other labels)

Maybe you’ve missed the second part @Sharvaniharan. Can you move the “LOG IN / JOIN WIKIPEDIA” CTA to the left side? Feels odd that it’s so far away from the icon. The logged in state can be kept as is.

2020-06-26 10.58.01.png (2×1 px, 219 KB)

Also, change the color of the login icon to colorAccent to make it obvious that it belongs together with the label.


THX

ABorbaWMF subscribed.

Looks good to me on 2.7.50324-alpha-2020-07-07 and 2.7.50324-beta-2020-06-29