990041 - Make In Content Prefs more consistent to Firefox's UI

Status: RESOLVED WONTFIX

(Firefox :: Settings UI, defect)

Description

[Peter Henkel [:Terepin]]

Attachment: New ICUI design in Windows 8.bmp

User Agent: Mozilla/5.0 (Windows NT 6.3; WOW64; rv:31.0) Gecko/20100101 Firefox/31.0 (Beta/Release)
Build ID: 20140330030202

Steps to reproduce:

In current state, new ICUI design feels out of place. It needs serious tweaking.

Comment 1

[Jared Wein [:jaws] (please needinfo? me)]

Please reupload your attachment as a JPG. The attachment you uploaded is failing to load for me.

Comment 2

[Peter Henkel [:Terepin]]

Attachment: New ICUI design in Windows 8.jpg

Here it is.

Comment 3

[Tim Nguyen :ntim]

First step would be using system fonts.

Comment 4

[Peter Henkel [:Terepin]]

...And checkboxes, and hover effects, and menus, and colors, and...

Comment 5

[Peter Henkel [:Terepin]]

I wonder if it wouldn't be better to split this bug into separate bugs for each operating system.

Comment 6

[Jared Wein [:jaws] (please needinfo? me)]

Please don't. The implementation here was as directed by the specifications, and it was intended to use these controls. If the issue is the non-native controls, then leave it at this bug for that decision to be made.

Comment 7

[Peter Henkel [:Terepin]]

That was a hypothetical question. If I wanted to do it without your consent, I'd simply do it.

Comment 8

[Tim Nguyen :ntim]

I wouldn't suggest fully using the native styling. I would rather suggest using more of the Australis stuff, for consistency and more platform integration. Australis already integrates better to the platform than about:preferences.

Here's how I would do things :
- Use the native font
- Use the Australis style buttons instead of the current ones (I think the Australis buttons fit better here)
- Use the Australis style menus
- Use the Australis style inputs
- Use native checkboxes and radios
- Remove the background gradient
- Keep the other stuff

Comment 9

[Tim Nguyen :ntim]

Attachment: Suggested tweaks for Windows

How do you like these tweaks ? I removed the background gradient, and used the native font.

Comment 10

[Peter Henkel [:Terepin]]

(In reply to Tim Nguyen [:ntim] from comment #9)
> Created attachment 8402017 [details]
> Suggested tweaks for Windows
> 
> How do you like these tweaks ? I removed the background gradient, and used
> the native font.

Better. Checkboxes, text fields, dropdown menus and hover effects needs to be changed as well.
Another thing is that dark brown on section menu can not be found anywhere in Win8. I was thinking about this and I have an idea. Shall I fill bug?

Comment 11

[Tim Nguyen :ntim]

(In reply to Peter Henkel [:Terepin] from comment #10)
> (In reply to Tim Nguyen [:ntim] from comment #9)
> > Created attachment 8402017 [details]
> > Suggested tweaks for Windows
> > 
> > How do you like these tweaks ? I removed the background gradient, and used
> > the native font.
> 
> Better. Checkboxes, text fields, dropdown menus and hover effects needs to
> be changed as well.
> Another thing is that dark brown on section menu can not be found anywhere
> in Win8. I was thinking about this and I have an idea. Shall I fill bug?

The checkboxes, text boxes will require much bigger work.

What do you mean by dark brown on section menu ?

Comment 12

[Peter Henkel [:Terepin]]

Checkboxes: get rid of color on Win8 (make it dark grey).
Buttons: Australis style.
Dropdown menus: replace hower effect with Australis one.

Comment 13

[Peter Henkel [:Terepin]]

(In reply to Tim Nguyen [:ntim] from comment #11)
> (In reply to Peter Henkel [:Terepin] from comment #10)
> > (In reply to Tim Nguyen [:ntim] from comment #9)
> > > Created attachment 8402017 [details]
> > > Suggested tweaks for Windows
> > > 
> > > How do you like these tweaks ? I removed the background gradient, and used
> > > the native font.
> > 
> > Better. Checkboxes, text fields, dropdown menus and hover effects needs to
> > be changed as well.
> > Another thing is that dark brown on section menu can not be found anywhere
> > in Win8. I was thinking about this and I have an idea. Shall I fill bug?
> 
> The checkboxes, text boxes will require much bigger work.
> 
> What do you mean by dark brown on section menu ?

Or dark grey? Dunno. I meant that strip on the left where you have subsections.

Comment 14

[Tim Nguyen :ntim]

(In reply to Peter Henkel [:Terepin] from comment #13)
> (In reply to Tim Nguyen [:ntim] from comment #11)
> > (In reply to Peter Henkel [:Terepin] from comment #10)
> > > (In reply to Tim Nguyen [:ntim] from comment #9)
> > > > Created attachment 8402017 [details]
> > > > Suggested tweaks for Windows
> > > > 
> > > > How do you like these tweaks ? I removed the background gradient, and used
> > > > the native font.
> > > 
> > > Better. Checkboxes, text fields, dropdown menus and hover effects needs to
> > > be changed as well.
> > > Another thing is that dark brown on section menu can not be found anywhere
> > > in Win8. I was thinking about this and I have an idea. Shall I fill bug?
> > 
> > The checkboxes, text boxes will require much bigger work.
> > 
> > What do you mean by dark brown on section menu ?
> 
> Or dark grey? Dunno. I meant that strip on the left where you have
> subsections.

It's rather marine blue for me. I couldn't find a color that fits better than the dark blue.

Comment 15

[Tim Nguyen :ntim]

Attachment: Screenshot of second series of tweaks

Comment 16

[Tim Nguyen :ntim]

The new screenshot uses the Australis button styling, normal typography (not the old huge one), an improved checkbox style (without the shadow).

Comment 17

[Peter Henkel [:Terepin]]

MUCH better. Few things:
- Why have buttons and dropdown menu different sizes than text fields? We should use the same size. Home page's textfield and buttons are perfect, so use those sizes.
- Regarding that left strip, try this: extend section's light grey background to to selector, replace orange strip at selector's end with blue one (as ckeckboxes have) and replace dark grey color in left strip for white one. In my head it looks good, so I hope it will look good in reality as well. :)

Comment 18

[Tim Nguyen :ntim]

(In reply to Peter Henkel [:Terepin] from comment #17)
> MUCH better. Few things:
> - Why have buttons and dropdown menu different sizes than text fields? We
> should use the same size. Home page's textfield and buttons are perfect, so
> use those sizes.

Well, just some layout issues, I'll fix them when the design will be approved by UX.

> - Regarding that left strip, try this: extend section's light grey
> background to to selector, replace orange strip at selector's end with blue
> one (as ckeckboxes have) and replace dark grey color in left strip for white
> one. In my head it looks good, so I hope it will look good in reality as
> well. :)

http://images.devs-on.net/Image/2iHoJsEkraYnnsP6-OptionsNightly.png

Comment 19

[Peter Henkel [:Terepin]]

Yes, this is what I have on my mind. :) One tiny thing, that separating line needs to go around section selector, just like in about:addons.

Comment 20

[Peter Henkel [:Terepin]]

You're seriously leaving this consistency mess untouched?!

Comment 21

[Michael Maslaney [:mmaslaney] ([e-mail])]

Feedback.

• The navy and orange side nav needs to come back, we will be using it for future inContent work.

• The larger typography and interaction elements are intentional, as to increase scanability 

• we CAN adopt the native styling buttons and inputs for windows, until a uniform inContent style is designed

Comment 22

[u428464]

(In reply to mmaslaney from comment #21)
> • we CAN adopt the native styling buttons and inputs for windows, until a
> uniform inContent style is designed

I don't understand why. Current design is fine to stay until these styles are designed. The in-content preferences aren't enabled by default for now anyway and native styling is pretty ugly (at least before Win 8)

Comment 23

[Michael Maslaney [:mmaslaney] ([e-mail])]

Comment on attachment 8402062 [details]
Screenshot of second series of tweaks

• I saw a screenshot with a new color theme, let's make sure we stick to this theme

• Make sure type size is consistent with the specs. We have the screen real estate, let's use it and increase scanability.

• Make sure elements spacing is consistent with the specs

------------------------------------------------------------------

• We haven't chosen an official typeface for the inContent UI, which will leave us with native being our only choice. That being said, can we make the headers Segoe Light?

on a similar note, OSX's lucida may not yield great results for the spec size. We may want to consider going with the proposed clear sans, which will be the official sans serif font in reader mode.

• Thanks for the GUI download indicator catch, and the hard work you're putting into this.

Comment 24

[Michael Maslaney [:mmaslaney] ([e-mail])]

(In reply to Guillaume C. [:ge3k0s] from comment #22)
> (In reply to mmaslaney from comment #21)
> > • we CAN adopt the native styling buttons and inputs for windows, until a
> > uniform inContent style is designed
> 
> I don't understand why. Current design is fine to stay until these styles
> are designed. The in-content preferences aren't enabled by default for now
> anyway and native styling is pretty ugly (at least before Win 8)

I'm saying a like the button styling from the attachment in comment 23. Which feels more "Australis Windows" to me, if that makes sense. Are you saying we should revert back to the gradient buttons?

Comment 25

[u428464]

(In reply to mmaslaney from comment #23)
> • We haven't chosen an official typeface for the inContent UI, which will
> leave us with native being our only choice. That being said, can we make the
> headers Segoe Light?
> 
> on a similar note, OSX's lucida may not yield great results for the spec
> size. We may want to consider going with the proposed clear sans, which will
> be the official sans serif font in reader mode.

Why not keep Fira Sans as default ? It looks fine and it's nice to read.

(In reply to mmaslaney from comment #24)
> (In reply to Guillaume C. [:ge3k0s] from comment #22)
> > (In reply to mmaslaney from comment #21)
> > > • we CAN adopt the native styling buttons and inputs for windows, until a
> > > uniform inContent style is designed
> > 
> > I don't understand why. Current design is fine to stay until these styles
> > are designed. The in-content preferences aren't enabled by default for now
> > anyway and native styling is pretty ugly (at least before Win 8)
> 
> I'm saying a like the button styling from the attachment in comment 23.
> Which feels more "Australis Windows" to me, if that makes sense. Are you
> saying we should revert back to the gradient buttons?

No I just find the current design (minus a few bugs already filed) very nice visually and I don't understand all the fuss here to change it right now. I can say that I've seen a lot of good feedback here and there on various forums. I think it's also really an advantage to have it unified across all platforms.

Comment 26

[Michael Maslaney [:mmaslaney] ([e-mail])]

(In reply to Guillaume C. [:ge3k0s] from comment #25)
> (In reply to mmaslaney from comment #23)
> > • We haven't chosen an official typeface for the inContent UI, which will
> > leave us with native being our only choice. That being said, can we make the
> > headers Segoe Light?
> > 
> > on a similar note, OSX's lucida may not yield great results for the spec
> > size. We may want to consider going with the proposed clear sans, which will
> > be the official sans serif font in reader mode.
> 
> Why not keep Fira Sans as default ? It looks fine and it's nice to read.
> 
> (In reply to mmaslaney from comment #24)
> > (In reply to Guillaume C. [:ge3k0s] from comment #22)
> > > (In reply to mmaslaney from comment #21)
> > > > • we CAN adopt the native styling buttons and inputs for windows, until a
> > > > uniform inContent style is designed
> > > 
> > > I don't understand why. Current design is fine to stay until these styles
> > > are designed. The in-content preferences aren't enabled by default for now
> > > anyway and native styling is pretty ugly (at least before Win 8)
> > 
> > I'm saying a like the button styling from the attachment in comment 23.
> > Which feels more "Australis Windows" to me, if that makes sense. Are you
> > saying we should revert back to the gradient buttons?
> 
> No I just find the current design (minus a few bugs already filed) very nice
> visually and I don't understand all the fuss here to change it right now. I
> can say that I've seen a lot of good feedback here and there on various
> forums. I think it's also really an advantage to have it unified across all
> platforms.


Points taken. On one end I want to just stick with the original and then when we make changes it will be universal. On the other end, there is a benefit to having elements look native; a sense of trust if you will. This is also a discussion that our team is currently debating when it comes to inContent UI.

Let's do this, we will move forward with the proposed spec, which sets the type to have Fira Sans for headers and Clear Sans for body. We will also keep interaction elements consistent with the spec. In order for the project Chameleon team (the visual unification team) to move forward we must have a clear view of all our incontent work. Separating them out is going to make the process harder in the long run and I don't want that.

Comment 27

[u428464]

So basically this bug is really a wontfix I think.

Comment 28

[Michael Maslaney [:mmaslaney] ([e-mail])]

Yeah, minus the native download glyph, which I never dictated in the spec.

Comment 29

[Tim Nguyen :ntim]

(In reply to Guillaume C. [:ge3k0s] from comment #27)
> So basically this bug is really a wontfix I think.

Not at all, the goal is to unify the UI, and having different buttons style in the same product isn't the best thing (Australis, native and InContent UI), it'd be nice to be consistent with the style. We should choose which one we want in the UI, and use it once and for all. 

Right now, I would agree with the bug reporter about the design being too mac-ish. I still agree that the new design is an improvement, but it needs tweaks.

----

I'm alright about using custom fonts, but the problem is that the font smoothing on Windows isn't as good as the mockups. 

I would personally suggest using the about:home search button as button style for In content UI. It matches better the Australis design, and has a gradient.

Comment 30

[Peter Henkel [:Terepin]]

So I guess using native color scheme is out of the question.

Comment 31

[Tim Nguyen :ntim]

OK, so I came up with a great idea to make everyone happy here :
- Remove the background gradient
- Keep typography
- Use the about:home button style
- Flatter design for the menulist items
- Remove box-shadow from checkboxes and radios (as in the screenshot)

The problem in the UI is the bulky gradients and thick shadows that look out of place on Windows. Eliminating them won't do any bad to Mac users, and will make things MUCH better for Windows.

What do you think Michael ?

Comment 32

[Tim Nguyen :ntim]

(In reply to Peter Henkel [:Terepin] from comment #30)
> So I guess using native color scheme is out of the question.

The Firefox's UI is platform friendly, especially with recent tweaks to Australis.

Comment 33

[Michael Maslaney [:mmaslaney] ([e-mail])]

Tim, I would stick to the spec to the make the unification process easier. There are multiple designers, including myself) that will be working on and documenting the standardization of styles. Point being; it will not be decided in this bug.

I'm trying to remember, but I believe the intention was to literally port the about:home buttons and inputs right into the InContent UI (for consistency at the time). I may have worked of off an old comp so the values may be off. The only difference being the hover and active states are more subtle (darker gray instead of blue).

Comment 34

[Peter Henkel [:Terepin]]

Don't get me wrong, I have absolutely nothing against Australis. I even like it. But sticking with dark gray color on all platforms is bad idea. It looks good on Mac and Linux, and perhaps even on XP. Not so much on Windows 8 and even less so on Windows 7. There are two issues:
1. Modern UI is using light color scheme, so changing it to light gray should in theory do the trick. 
2. Aero is another story. It's using combination of white and light blue. I'm not a designer, but I can't imagine dark gray in that environment. 

My whole point isn't to wage the war against new design. Not at all. But making ICUI that ignores Austratis' styling is a big mistake.

Comment 35

[Michael Maslaney [:mmaslaney] ([e-mail])]

(In reply to Tim Nguyen [:ntim] from comment #31)
> OK, so I came up with a great idea to make everyone happy here :
> - Remove the background gradient
> - Keep typography
> - Use the about:home button style
> - Flatter design for the menulist items
> - Remove box-shadow from checkboxes and radios (as in the screenshot)
> 
> The problem in the UI is the bulky gradients and thick shadows that look out
> of place on Windows. Eliminating them won't do any bad to Mac users, and
> will make things MUCH better for Windows.
> 
> What do you think Michael ?

Tim, based on where I think we're heading, in terms of visual unification project, I can agree to the proposed updates. Can I see an example of the flat menu list? Also, let's keep the button hover and active states subtle (like the Australis dropdown menu).

Comment 36

[Jennifer Morrow [:Boriss] (UX)]

(In reply to Peter Henkel [:Terepin] from comment #4)
> ...And checkboxes, and hover effects, and menus, and colors, and...

Peter, thank you for raising this.  Consistency within Firefox vs consistency with the platform has been a constant challenge for the designers, and this is a great example of a rubber-meets-the-road UI.  It's true that in-content prefs are more Firefox specific than OS specific.  And that's a tradeoff.  Maybe we got it wrong!  However, we did do it deliberately.  This is for a few reasons:

- Greater consistency across operating systems.  In as many places as possible, we don't want users to feel their UI is inconsistent or unpredictable.  With Firefox-specific UI, we can create a more cohesive design for users - even which they switch OS's.

- Greater consistency across devices.  Particular as Firefox is available on more platforms, making sure users don't have to re and relearn UI is paramount to us.  While OS consistency may call for a new window or a different font on each device, Firefox UI in content means we can optimize the UI for the device to the best of our ability.

- Less need to constantly change UI.  With OS-specific controls, we're always at the mercy of the OS to provide a (hopefully) good UI, and always need to make sure we're consistent.  As OS's change, we're on the hook to change too.  It's a cycle that becomes more difficult to change with more diversity on the operating system space.

- We want in-content pages to feel a part of "the web" rather than "this computer."  As rich applications become more plentiful, they tend to provide their own UIs.  Your UI on Facebook on OSX is rather identical to your Facebook UI on Windows, because Facebook is a part of the web.  We want Firefox to feel this way also.

- More ability to design the best Firefox experience.  While OS controls can provide consistency, the tradeoff is that they remove freedom from the space to craft the best experience of Firefox.  Particularly when we’re already drawing an in-content UI unlike anything else on the OS, there’s less need to be restricted to the interface and widgets of the OS.  Further, taking some parts of the OS and not others can feel even more inconsistent, since then Firefox feels kinda-the-web and kinda-the-OS, while not being particularly great at either.

Peter, your attention to the subtle pieces of Firefox UI is really awesome to see.  You’ve hit on one of the hardest decisions we’ve been making as a design team, and I’m not sure we got it right.  But, we’ve made it deliberately, and I hope you’ll like the improvements we make to this “unified” UI as we build it out.

Comment 37

[Peter Henkel [:Terepin]]

(In reply to Jennifer Morrow [:Boriss] (Firefox UX) from comment #36)
> (In reply to Peter Henkel [:Terepin] from comment #4)
> > ...And checkboxes, and hover effects, and menus, and colors, and...
> 
> Peter, thank you for raising this.  Consistency within Firefox vs
> consistency with the platform has been a constant challenge for the
> designers, and this is a great example of a rubber-meets-the-road UI.  It's
> true that in-content prefs are more Firefox specific than OS specific.  And
> that's a tradeoff.

But this logic has one flaw, which I mentioned earlier. Firefox was made to be OS specific and you're claiming that ICUI was made to be Firefox specific and ignoring OS. But that's not possible. You'll either end up with ICUI fitting Firefox, or Firefox fitting OS, but not both at the same time. In current situation, you are literally forcing ICUI design to be consistent across operating systems inside Firefox, that was modified to fit those operating systems.
In short, ICUI doesn't fit into Firefox itself. If you believe this is not truth, show me concrete evidences that it does.

> Peter, your attention to the subtle pieces of Firefox UI is really awesome
> to see.

Thanks. Although it seems it's meaningless at the same time.

Comment 38

[Tim Nguyen :ntim]

There are lots of issues that need to be adressed on Windows :
- Horrible font smoothing with the current font (Open Sans might be a better choice here)
- Background gradient that fits in no way on Windows 8
- Controls that seem very influenced by OSX, and that look in no way good on Windows

There are just some small tweaks that can fix that :
- Use a better font (Open Sans might be a good choice, as it's got great font smoothing on all platforms, and it's already used by many mozilla sites)
- Remove that background gradient
- Adjust controls to look as good on all platforms

I'm sure those issues can be adressed quickly. Plus, this won't disrupt any consistency across Firefox's UI. Maybe this could be adressed in a new bug.

Comment 39

[Jennifer Morrow [:Boriss] (UX)]

(In reply to Tim Nguyen [:ntim] from comment #38)
> There are lots of issues that need to be adressed on Windows :
> - Horrible font smoothing with the current font (Open Sans might be a better
> choice here)
> - Background gradient that fits in no way on Windows 8
> - Controls that seem very influenced by OSX, and that look in no way good on
> Windows
> 
> There are just some small tweaks that can fix that :
> - Use a better font (Open Sans might be a good choice, as it's got great
> font smoothing on all platforms, and it's already used by many mozilla sites)
> - Remove that background gradient
> - Adjust controls to look as good on all platforms
> 
> I'm sure those issues can be adressed quickly. Plus, this won't disrupt any
> consistency across Firefox's UI. Maybe this could be adressed in a new bug.

You're absolutely right on all counts.  Separate bugs would likely be a better way to handle these.  Many of the issues require fixes at very different levels and areas.  Tim or Peter, please feel free to create those bugs.

Comment 40

[Peter Henkel [:Terepin]]

I'll leave that to Tim. My knowledge is insufficient for this task.

Comment 41

[Tim Nguyen :ntim]

Filed bug 998229

Comment 43

[Ed]

What a mess! I just came to this bug from another duplicate one. Guys, can't we just live with an interface (controls look and feel) typical for underlaying OS? Please, free Firefox from custom controls implemented from the scratch and simultaneously from all this mess and discussion. Make Firefox lighter!

Somebody made a mistake introducing (and implementing) custom controls. Make a step back. Stop the discussion. Close the bug. 

Ah, yes, I looked up "what is Australis?"

"1. It’s the most beautiful and detail-obsessed iteration of Firefox’s visual design yet: modern, clean, and comfortable."

I didn't ask for it, I don't need it, I dont feel comfortable, I don't wanna have it by default. Put it in plug-in for those who want (and then count how many, ha-ha). Especially scaring word is "modern", as GUIs became much worse now than 10 years ago (everything, jumps, flashes, pops-up...it is called "dynamic". I do not need dynamic, I need static, calm and peaceful).

"2. More fundamentally, it’s a streamlining and simplification of the default interface, to declutter and better focus on how people use a browser today."

simplifications? see the discussion above. :-))

"3. Finally, it includes a new simple way to customize the browser and make it your own."

Where is the button "Switch to default GUI and return me my memory". The presence of such a button would be indeed a simplification.