1074220 - Remove curve from the phone toolbar

Status: RESOLVED INCOMPLETE

(Firefox for Android Graveyard :: Theme and Visual Design, defect, P5)

Description

[Lucas Rocha (:lucasr)]

1. It doesn't serve any functional role in the UI. It's pure branding that has a fundamental implications in the way we animate things in our UI.
2. It doesn't actually represent a tab in the UI. There's no reason to make the toolbar look like one.
3. It wastes precious space in our already-crammed toolbar. Removing it would make our UI look simpler. Or maybe we could use this space for something actually valuable to our users. 

Bonus reason: it adds complexity to our toolbar implementation due to the unusual shape of the toolbar buttons.

As you can see, I'm not a fan of the curve ;-) I'm intentionally putting it bluntly here to get some counter-reactions and brainstorm a bit.

I think we can communicate the Firefox/Mozilla brand in other ways on phones.

Comment 1

[Paul [pwd]]

1. What's wrong with branding? In this case it unifies the product across platforms. Unless there's a negative performance impact, having Firefox remain recognisable is important.

2. In wanting to move the tabs button to left side to fall more in line with drawer navigation paradigm (bug 943037), it would've made the tabs button and awesomebar more contextual and thus would've just left the dark grey for the overflow. In short, you're right, but it could.

3. As someone that keeps the toolbar visible on my main browser, I can't say I share your thoughts of visual complexity. Rather the opposite in fact, the lighter shade of the faux tab highlights the important information such as page title and security status. Regarding other valuable buttons that could be squeezed on, that would come at the expense of page title. I'm not sure what supersedes page title in terms of importance.

Comment 2

[Anthony Lam (:antlam) Find me, @antlam on Slack!]

Fair points all around. But, I think this is a pretty complex task that will need a lot of steps. We should consider all our alternatives before deciding.

I think the real issue we should get to here is a "better toolbar design" rather than a prescriptive solution of removing an element although it might seem like an obvious candidate of choice.

As a part of the next iterations of this Toolbar project, I've already begun taking considerations of a couple major determining factors.

1) Our Visual design direction (from both desktop and mobile) 
2) Updating the design to play better with user expectations nowadays
3) Updating the design to be more functional on newer devices (thingz have bigger more high res screens now) 
4) How this affects our other devices (like tablets and desktops)
5) Giving a better browsing experience on Mobile in general (more controls? better arrangement of our UI? etc)

I'm open to hearing if there's more that I should consider and possibly forgotten to add here or what not?

Basically, V1 was initially just about updating the UI with a quick refresher since we are doing a Tablet refresh so the next steps will be more extensive for sure.

Will post more as work on this progresses

Comment 3

[Paul [pwd]]

Can someone also make this block bug 1098596

Also the more I look at Fennec on Lollipop, the harder it is to fight against the removal of the faux-tab. I've been racking my brains to think of another alternative. I've considered a faded Firefox logo within the location box, adding a back button to create our iconic keyhole and a bunch of other things. 

Given the complexity of the browser UI, there's not much room for scope. I've looked at Chrome, Opera and even Dolphin and have come to the conclusion that as :alam says, it requires a more extensive step.

At this point I'm thinking that perhaps :lucasr's solution is the best, go with a solid action bar retaining our orange highlights and then using a navigation drawer like tabs tray, we can have a Firefox header and within that we can promote the whole "My Firefox". Though of course the obvious drawbacks of such a solution is that we lose horizontal space for the tabs drawer but with the material guidelines, perhaps we could re-imagine the drawer to use circle thumbnails instead of the current rectangular ones. 

We'd lose branding-at-a-glance but it would give us a modern/material feel on Lollipop and it'd be good to get things moving on this so that we're not playing catchup once Lollipop starts rolling out from the OEMs on mass.

Comment 4

[Paul [pwd]]

Attachment: Firefox - Material (Very Rough Wireframe).png

Here's a very very rough wireframe of what I was attempting to describe.

Comment 5

[Michael Comella (:mcomella) [NI reported issues only: ex-Mozilla]]

Attachment: Tablet w/o tab strip

For curiosities' sake.

Comment 6

[Mark Finkle (:mfinkle) (use needinfo?)]

I think the curve will be with us for a while longer. The Firefox for iOS mocks are using the curve too. It does start to give Firefox a distinctive cross-platform look.

Comment 7

[Paul [pwd]]

(In reply to Mark Finkle (:mfinkle) from comment #6)
> I think the curve will be with us for a while longer. The Firefox for iOS
> mocks are using the curve too. It does start to give Firefox a distinctive
> cross-platform look.

Android has around 85% global smartphone market share equating to around 283 million units of that we have Firefox installed on around 55 million units. Google is making a big push in the emerging markets (BRICS nations) with a sub $100 phone targeting one billion users, these phones are all set to launch with Lollipop. We want to grab those users. Our iOS efforts are for a browser that can't be set as default and at this point we have ZERO users on the platform. That isn't enough to dictate that we can't update our cross-platform cohesion. There are a few bugs talking about our branding going forward as it's something that I personally deem important, but not in a way that it's detrimental to our products and its cohesion with the platform.

It's also worth noting that we can continue to deploy the existing UI on KitKat devices and below via Play while only serving a new UI to Lollipop users until such a time that iOS was ready to make such a switch to our new cross-platform design language as being defined by the efforts in these bugs.

Comment 8

[Richard Newman [:rnewman]]

(In reply to Paul [pwd] from comment #7)

> It's also worth noting that we can continue to deploy the existing UI on
> KitKat devices and below via Play while only serving a new UI to Lollipop
> users until such a time that iOS was ready to make such a switch to our new
> cross-platform design language as being defined by the efforts in these bugs.

That's a lot more work than you think it is, to the point that I'm confident saying it's not an option right now.

Comment 9

[Paul [pwd]]

(In reply to Richard Newman [:rnewman] from comment #8)
> (In reply to Paul [pwd] from comment #7)
> 
> > It's also worth noting that we can continue to deploy the existing UI on
> > KitKat devices and below via Play while only serving a new UI to Lollipop
> > users until such a time that iOS was ready to make such a switch to our new
> > cross-platform design language as being defined by the efforts in these bugs.
> 
> That's a lot more work than you think it is, to the point that I'm confident
> saying it's not an option right now.

More work than branching Fennec and treating said branch like an ESR/LTS while selecting/deselecting a tick box on the Play Store? It certainly wouldn't be a long term plan, just a means to give iOS some time to assimilate the new base design into something that conforms with that platform. But it's just a possible solution and it's certainly not something we'd need to tackle as we formulate a design vision.

Comment 10

[Richard Newman [:rnewman]]

(In reply to Paul [pwd] from comment #9)

> More work than branching Fennec and treating said branch like an ESR/LTS
> while selecting/deselecting a tick box on the Play Store?

You just described a few months' worth of work across three or four teams.

Go check out the bug tree from the Gingerbread split:

https://bugzilla.mozilla.org/showdependencytree.cgi?id=1039789&hide_resolved=0

Comment 11

[Paul [pwd]]

(In reply to Richard Newman [:rnewman] from comment #10)
> (In reply to Paul [pwd] from comment #9)
> 
> > More work than branching Fennec and treating said branch like an ESR/LTS
> > while selecting/deselecting a tick box on the Play Store?
> 
> You just described a few months' worth of work across three or four teams.
> 
> Go check out the bug tree from the Gingerbread split:
> 
> https://bugzilla.mozilla.org/showdependencytree.
> cgi?id=1039789&hide_resolved=0

That was actually what inspired the idea. But my initial point remains true in that iOS should not be enough to hold back a platform that dwarfs it by several magnitudes, especially when we're unable to ship a product true to Mozilla.

Comment 12

[Paul [pwd]]

Attachment: Material Firefox Almost Presentation.png

This isn't perfect, but it's give context to a few of the ideas I suggested.

Comment 13

[Paul [pwd]]

Attachment: Firefox Material Design Concept.png

There was some elevation missing which annoyed me and so I fixed it.

Comment 14

[Sören Hentzschel]

Is there a mailing list thread to discuss the design direction? In my opinion Firefox without the curve is not Firefox and the "distinctive cross-platform look" (comment 6) is important, because Firefox should look like Firefox, but it should probably not be discussed in a bugzilla ticket.

Comment 15

[Paul [pwd]]

(In reply to Sören Hentzschel from comment #14)
> Is there a mailing list thread to discuss the design direction? In my
> opinion Firefox without the curve is not Firefox and the "distinctive
> cross-platform look" (comment 6) is important, because Firefox should look
> like Firefox, but it should probably not be discussed in a bugzilla ticket.

I can see what you're talking about, but when you tackle the problem of the curve as a whole, it's much easier to see the larger picture of what happens to Firefox as a brand. Firefox ships on Windows, Linux, Android and we're about to ship on iOS. Microsoft are in the middle of unveiling their new concept of Universal Apps and Canonical is also in the middle of unveiling the converging apps, these are apps which scale. Thus by next year, our Windows app will also target Windows Phone users and our Linux app will also target Ubuntu touch users. It's important to decide on what is and isn't meaningful branding and how meaningful it is.

If the extent of the strength of the Firefox brand is a faux tab that's barely visible, I'm worried. Its importance is negligible and pales in comparison to the importance userability and feeling native. I'd also be interested to see the make up of users running Firefox in terms of what version of Android they're on as I believe if we have a high percentage of users using Lollipop, we should certainly be thinking forward.

The alternative that I've proposed is that we move to a cascading tab tray and reinforce the brand with a Floating Action Button bearing the Firefox logo. With the FAB we instantly up the reach of our branding. The tab shape is retained in the tab switcher, but we also now have the Firefox logo and Firefox colours presented on an additional five pages. In fact I'd argue that the transition from the tab switcher I've proposed to the one we've used on tablet is far more linear than that of the current tabs tray implementation.

Comment 16

[Adolfo Jayme]

The badly aged Australis tab shape will be removed from Firefox (bug 1349555). It makes sense to finally drop this from Fennec.

Comment 17

[Firefox Bug Husbandry Bot]

Re-triaging per https://bugzilla.mozilla.org/show_bug.cgi?id=1473195

Needinfo :susheel if you think this bug should be re-triaged.

Comment 18

[BMO Automation]

We have completed our launch of our new Firefox on Android. The development of the new versions use GitHub for issue tracking. If the bug report still reproduces in a current version of [Firefox on Android nightly](https://play.google.com/store/apps/details?id=org.mozilla.fenix) an issue can be reported at the [Fenix GitHub project](https://github.com/mozilla-mobile/fenix/). If you want to discuss your report please use [Mozilla's chat](https://wiki.mozilla.org/Matrix#Connect_to_Matrix) server https://chat.mozilla.org and join the [#fenix](https://chat.mozilla.org/#/room/#fenix:mozilla.org) channel.