search

mozilla-mobile / fenix

⚠️ Fenix (Firefox for Android) moved to a new repository. It is now developed and maintained as part of: https://github.com/mozilla-mobile/firefox-android
https://github.com/mozilla-mobile/firefox-android
Mozilla Public License 2.0
6.47k stars 1.27k forks source link

[UX] Custom Tab UI #203

Closed lime124 closed 4 years ago

lime124 commented 5 years ago

User Story: As a user...

Current Design Status:

Design Priority: P?

┆Issue is synchronized with this Jira Task

jonalmeida commented 5 years ago

Feel free to ping me for help on viewing all the options available in a Custom Tabs.

jonalmeida commented 5 years ago

We also need to consider the position of the toolbar for custom tabs. The browser is meant to look more like the native app itself to give the illusion of not leaving the context of the calling app, so we might want to think about re-positioning the toolbar to the top like most apps would have.

cc: @lime124

brampitoyo commented 5 years ago

Short status update:

  1. @jonalmeida and I met to discuss possible approaches to Custom Tabs
  2. @jonalmeida has sent me an .apk that allows for rapid Custom Tabs testing
  3. I’ve designed an early user flow and mockup, and has posted it to Fenix UX for critique and feedback
brampitoyo commented 5 years ago

1. Opening a custom tab

To open a Fenix custom tab:

  1. The user must manually set Fenix as a default browser
  2. The user must use a third-party app that launches links within a CustomTabsIntent
  3. Finally, the user can simply tap on any external link within that third-party app

A Fenix custom tab contains:

Address bar

By default, Fenix custom tabs have an address bar that’s positioned on the top of the screen. This is to maintain continuity between many third-party apps (that have top app bar) and the custom tabs they’ve requested.

Continuity has a cost. Our custom tabs app bar no longer appears on the bottom of the screen, making it hard for the thumb to reach.

In the address bar, we show both site title and its host name. Site protocol/scheme, path and query are all hidden, so the address bar doesn’t get filled up.

Close action

Users can navigate back and forward to other websites within a custom tab, so the “Close Custom Tab” action is conveyed through a Quit ✕ button, not a Back ← button.

If a third-party app wants to change this icon, they are free to do so. For example, some apps may want a back icon to maintain an impression of continuity.

Overflow

See section 2.

Measurements

We normally follow our measurements diligently. However, custom tabs have to break some rules in order to give more space for the page title.

Notable measurements:

The rest of the measurements are standard.

2. Custom tab overflow menu

This menu contains various common actions. To open it, tap the menu ⫶ icon.

slice 2x

It contains:

A consequence of placing the address bar on top is that the menu is ordered in reverse.

Pay particular attention to these menu items:

3. Opening a custom tab link in Fenix

To open the current website in Fenix, go to the overflow menu, then tap “Open in Fenix”.

slice 2x

In the process, the UI will animate to signal switching from one app to another.

4. Third-party app customisation

Our custom tab is designed to be customisable by third-party app developers who can easily request for it.

For now, three aspects of custom tabs will be customisable:

a. Custom background colour

A developer can have the colour of Fenix app bar match their own app bar, to indicate better continuity.

b. Custom app bar icon

A developer can have one of their own icon as a tappable action on the app bar.

Measurements

When another app bar icon exists, the space for page title and URL has to reduce.

c. Custom overflow menu icon

A developer can add their own item on the overflow menu.

brampitoyo commented 5 years ago

@vesta0 The custom tab specs is posted above, and @colintheshots this issue is now ready for feedback and breakdown.

pocmo commented 5 years ago

@brampitoyo Those look great. I'm a bit worried though that we are breaking one of the value propositions of Custom Tabs (from the app developer's point of view): "make transitions between native and web content more seamless without having to resort to a WebView.".

From the mocks I wonder, is it correct that:

If you are interested in other customization options of custom tabs then scroll a bit through the list of methods here: https://developer.android.com/reference/android/support/customtabs/CustomTabsIntent.Builder

bbinto commented 5 years ago

I'd suggest feature parity with Focus, i.e. most of the issues @pocmo mentioned should be addressed then.

vesta0 commented 5 years ago

@brampitoyo mocks looks great! What will the back button in the Custom tab overflow menu be used for, as oppose to the browser back button?

mheubusch commented 5 years ago

@brampitoyo Reviewing these designs with Stephen - for the Powered by Fenix label type can you use the Material Design Caption spec? Also, this share icon is different than the page action buttons icons. Need to decide which we are using and apply consistently.

Please use sentence case - Desktop site and Find in page

brampitoyo commented 5 years ago

@pocmo wrote:

I'm a bit worried though that we are breaking one of the value propositions of Custom Tabs (from the app developer's point of view): "make transitions between native and web content more seamless without having to resort to a WebView.".

That’s a really good point!

I suppose I look at it more from the user’s point of view, which is: “Why should I manually switch my default browser to Fenix, if it’s not going to offer any special benefit?”

Therefore, I decided to put a few differentiating features in our custom tabs:

But you’ve made two really good points:

  1. Custom Tabs need to be attractive for developers, for them to want to call it in their apps. If our specs are too restrictive, it’s not going to work.
  2. Many Android apps have top app bars. Custom tabs shouldn’t break this positioning expectation that users have.

What if, for v1, we just make our custom tabs functionally similar to Focus or Chrome (as @bbinto has suggested)?

Questions

  1. If we follow Focus/Chrome’s implementations, do we still need to come up with our own default style, in case the app doesn’t specify anything?
  2. Can third-party apps specify their own custom font to use in Custom Tab app bar and menu? Can Fenix uses its own font (which is not Roboto)?
jonalmeida commented 5 years ago
  1. If we follow Focus/Chrome’s implementations, do we still need to come up with our own default style, in case the app doesn’t specify anything?

Some aspects, yes. For example, if the toolbar colour isn't provided by the app, then we would show the native browser app's theme colour.

  1. Can third-party apps specify their own custom font to use in Custom Tab app bar and menu? Can Fenix uses its own font (which is not Roboto)?

Unfortunately, no. These are the only options available as linked above: https://developer.android.com/reference/android/support/customtabs/CustomTabsIntent.Builder

Another thing to consider is which menu and action buttons do we want to consistently be there. For example, in Focus (and RB now) we always show the 'share' menu item but an app also has an option to ask to show the share button or not. With Focus + RB, this means that if they choose yes, then we have two share buttons. We've also taken away the ability for the app to choose to share a link where they would not want to expose this functionality (intranet links, internal sites, etc.)

brampitoyo commented 5 years ago

@jonalmeida @pocmo I’ve updated our Custom Tabs specs so that they have better continuity with third-party apps. As a result, the app bar is moved up top, and it carries some consequences.

@mheubusch I’ve updated the caption text style, Share icon and sentence case as you recommended.

See the updated specs just up above, or click https://github.com/mozilla-mobile/fenix/issues/203#issuecomment-463426620.

colintheshots commented 5 years ago

@brampitoyo Are users going to know the Fenix logo is a button and not simply a brand mark or a favicon? I almost want to put something around it. Maybe a rounded button border?

How will back and forward work? I'd expect they're both gray initially and only activate later. Is that correct?

vesta0 commented 5 years ago

@brampitoyo What will the back button in the Custom tab overflow menu be used for, as oppose to the browser back button?

jonalmeida commented 5 years ago

@brampitoyo What will the back button in the Custom tab overflow menu be used for, as oppose to the browser back button?

In a Custom Tab, you can still click links on that page so the back button would be used for site navigation. It would be greyed out if there is nothing to go back to.

mheubusch commented 5 years ago

@brampitoyo I share Colin's concern that the Fenix button looks like a logo and competes with the space given to the URL, but am not sure if what you are suggesting is that this is the default and a developer could move this action to the overflow menu or are you suggesting that this would be a text link in the overflow menu and a developer could add whatever they want there?

brampitoyo commented 5 years ago

@colintheshots wrote:

Are users going to know the Fenix logo is a button and not simply a brand mark or a favicon?

@mheubusch wrote:

I share Colin's concern that the Fenix button looks like a logo and competes with the space given to the URL

Originally, I was going to give users one-tap access to open links from third-party apps in Fenix (which will then save that link into a session). This is our default state.

But your points are both very good:

  1. The Fenix logo doesn’t look like a button
  2. It reduces the space for page title

So now I’m thinking that, by default, our custom tab shouldn’t come with any toolbar button:

fenix-custom-tabs-1

”Open in Firefox Fenix” is now the last link inside the overflow menu.

Doing this frees up quite a bit of additional space that we can use to show page title. What do you think?

@mheubusch wrote:

[…] am not sure if what you are suggesting is that this is the default and a developer could move this action to the overflow menu or are you suggesting that this would be a text link in the overflow menu and a developer could add whatever they want there?

Even without our own toolbar action, a developer can still have their own. Doing this will leave less space for page title, but it means more flexibility for developers – and many developers will choose not to use that precious space:

We have moved our “Open in Fenix” action into the overflow menu, but a developer can also have their own item there. Hopefully, most developers will choose this option!

It should be noted that a developer can have both a custom toolbar action and a custom overflow menu item.

Just for completion’s sake, a developer can also recolour the toolbar to make it more seamless with their app:

jonalmeida commented 5 years ago

Nice overview of all the Custom Tab options! \o/

colintheshots commented 5 years ago

Thanks, Bram! This looks good. I'll mark this closed.

brampitoyo commented 5 years ago

@colintheshots @jonalmeida Thanks. I’ve updated my specs up above, so it contains the most recent mocks.

https://github.com/mozilla-mobile/fenix/issues/203#issuecomment-463426620

vesta0 commented 5 years ago

@brampitoyo I really liked the one-tap access to open links from third-party apps in Fenix but I have to defer to UX experts on this.

brampitoyo commented 5 years ago

@vesta0 You’re right. “Open link in Browser” is an important action to have. However, it will come at the cost of hiding some of the page title (ie. we’ll have to truncate many titles if we have so little space for it). For the moment, page title takes priority.

sblatz commented 5 years ago

@brampitoyo am I able to get font size for the title as well as the host name? I also need the "elevation" value for the URL bar (relevant for the shadow)

brampitoyo commented 5 years ago

@sblatz

The URL bar elevation value is 1 dp.

Exact dimensions and spacings are posted just below. It had to be relatively narrow to give as much space as possible for title and host name, which can run long.

topotropic commented 5 years ago

As discussed here https://github.com/mozilla-mobile/fenix/issues/1727#issuecomment-488541929, we want to support hiding URL bar when 3rd party apps request it https://developer.android.com/reference/android/support/customtabs/CustomTabsIntent.html#EXTRA_ENABLE_URLBAR_HIDING – @vesta0 IMO that is something we can do post MVP, please prioritize. Thanks!