Fenix: Menu and quick action sheet

Created on 2 Jul 2019  ·  7Comments  ·  Source: mozilla-mobile/fenix

Why/User Benefit/User Problem

This issue handles several minor UX issues that are a bit related:

  • I don't see the benefit of the quick action sheet.
  • Small usable screen estate.

Small usable screen estate

When comparing Fenix to Chrome there's much less usable ("website") screen estate:

Fenix

fenix_plain

Chrome: More content is visible

Note: Chrome auto hides the toolbar (even when the toolbar is visible chrome has 1123px to display the content where as Fenix only has 1091px).

chrome_plain

Benefit of the quck action sheet?

According to me the quick action sheet has no benefit: To invoke "Share" or "Bookmark" I need 2 interactions:

  1. Swipe to open the action sheet
  2. ...and then press the "Share"/"Bookmark" button.

It also takes two interactions to invoke "Share" from the menu:

  1. Open the menu ("...")
  2. Press the "Share" button.

...No benefit but it wastes precious vertical space.

qab_wasted_space

Possible suggestions

  • Remove the quick action sheet altogether.
  • ... or provide an option to disable the quick action sheet.
  • ... or integrate the quick action sheet buttons into the menu (see example below).
  • Auto-hide the toolbar (like chrome does).

Example 1: Menu integration

Phones get bigger and bigger I think there's enough space to provide a two column layout menu (*1). This has those advantages:

  • Enough space to integrate the quick action sheet buttons.
  • Using a two column layout you could place all important actions in the area that's easy to reach on big phones.

(*1): Not on all phones though: The layout should adapt to phone size: When there's not enough horizontal space the menu should fall back to a one column layout.

The menu could then look like this (note: The "bookmark" and "share" buttons from the quick action sheet have been integrated):

with_alternative_menu

With description:

with_alternative_menu_areas

feature request 🌟

Most helpful comment

@cadeyrn

And early mockups showed two more items

Also move them into the menu when the QAB is disabled.

Or another solution: (Optionally) Merge the QAB and the menu; would look like this:

integrated

Prior Art: Windows 10 Menu

qab_win_10

All 7 comments

@apbitner for your consideration as you look at QAB

Personally not a fan of the two column layout, but I do think it'd be nice to disable QAB and have the items in menus.

but I do think it'd be nice to disable QAB and have the items in menus.

Sounds like a good solution to me.

Please note that the QAB can contain more items than only "Share" and "Bookmark". For pages with reading mode available there is also the reader mode access in the QAB. And early mockups showed two more items which are not yet implemented in Fenix 1.0.0 but could be implemented later (Screenshot and Download).

In reading mode the QAB shows also items for "Appearance" and "Close".

Also due to the move of some menu items to the left your proposal make it more difficult to reach some menu items which are easier to reach in current implementation, for example the back button.

@cadeyrn

And early mockups showed two more items

Also move them into the menu when the QAB is disabled.

Or another solution: (Optionally) Merge the QAB and the menu; would look like this:

integrated

Prior Art: Windows 10 Menu

qab_win_10

removing needs ux label - taking a look at this in a larger QAB design effort

The Quick Action Bar is being removed at this point in time. Work covered in https://github.com/mozilla-mobile/fenix/issues/4281.

Was this page helpful?
0 / 5 - 0 ratings