Another great Firefox improvement is releasing soon!
Firefox’s Preferences, until now, have required navigation through a cumbersome floating window where it’s nearly impossible to find what you’re looking for. This window is a classic example of a common software problem: settings are slowly added onto the interface as new functionality is introduced, and eventually it sags under the weight.
The mess that is current Firefox Preferences
Until now, that is!
The Firefox UX team is excited to announce that brand new, beautiful Preferences are now the default in Firefox nightlies and will soon be in release Firefox. In this redesign, the interface is visually consistent, the information architecture is improved, and the whole thing is rendered in content space rather than as a separate window.
Firefox’s new in-content preferences
Why is it important that Preferences are in the content space rather than a separate window?
- Consistency across devices. By using the content space, we no longer have to rely on the ability of a device to draw separate windows and dialogs. This is particularly important on tablets and phones, where window management is more difficult. Now, users of mobile Firefox will see a familiar interface when move to desktop Firefox, and vice versa.
- Consistency across operating systems. Windows, OSX, and Linux all create windows and dialogs differently, which means the user’s experience with Preferences was different depending on the OS. Now, as we draw this interface within Firefox, we can make it look and feel identical across systems.
- Consistency with the web. Ultimately, the browser is a doorway to the rest of the web. For the browser to behave like a dialog-heavy desktop application rather than the web itself was jarringly anachronistic. Beneficially, rendering like a website also means users won’t need to find and manage a separate window in addition to their open tabs.
- Space to grow. Not being bounded by a small, floating window means we can create richer customization experiences. The Add-ons manager has already moved to content space, and we’ve been able to explore richer use cases as a result. Similarly, expect to see innovative customization experiments as well as the usual Firefox settings.
And before you ask, yes, the next step is absolutely a search field in Preferences to summon the exact setting you’re looking for. This is needed particularly so users won’t have to “learn” our interface, but can instead focus on their task.
A special thank you goes to Senior Visual Designer Michael Maslaney, who’s been spearheading Project Chameleon, the style guide behind this redesign. Another thank you goes to MSU students Owen Carpenter, Joe Chan, Jon Rietveld, and Devan Sayles for creating the award-winning first version of Firefox’s in-content Preferences in May 2012.
Seems like another feature that looks like it was influenced by the Chrome browser.
Categories on the left and content on the right is a fairly old interface model, certainly pre-dating Chrome. Heck, check out what I’m typing this on:
Yes, all of Australis is pretty much Chrome influenced. Nothing to be ashamed of. No, Chrome didn’t invent in-browser dialogs and technically Firefox already had them via “Chrome URLs” http://kb.mozillazine.org/Chrome_URLs long before Google started doing them.
I just wish that the Bookmarks Manager, Downloads and pretty much all the rest of the dialogs were in the browser content. The pop-up dialogs windows can be kind of a hassle to deal with after being used to Chrome’s interface.
Also, would consider using the Linux version of Firefox if they used their own window decorations on that platform like they do on Windows and OSX. I think it’s foolish for the design team to try to integrate with every Linux system configuration when Human Interface Guidelines are only really important on Apple computers anyway. At the end of the day Firefox will have it’s own interface anyways so why hobble it on one platform out of a misguided attempt to look native?
>I just wish that the Bookmarks Manager, Downloads and pretty much all the rest of the dialogs were in the browser content.
They’re all on our list!
My approach for that, given that I always maximize my Firefox anyway, is:
1. Install Tab Wheel Scroll
2. Bind
Win+Tto “Toggle window decorations” in Openbox3. Maximize Firefox
4.
Win+TThat gives me Chrome-style “slam mouse to top of screen and scroll to switch tabs” behaviour.
If I need to pop Firefox to the opposite monitor, I just Alt+LeftClick drag. (If you need to resize, many WMs do that without a border via Alt+RightClick drag and might I suggest accessing the window border context menu by binding it to Win+ContextMenu?)
So. I’m not tooo sure what you mean by “own window decorations”
But at least in X11 (not so in Wayland) the application does not have control of that. That’s controlled by the window manager.
Chromium does exactly the same thing as Firefox on this front.
This is kinda handy if an application becomes unresponsive, since you can still move the window, click close (window managers often offer an option to force close), minimise it, whatever.
Chrome has an option where it asks the WM to hide the window decorations and then draws its own. (Like the WinAMP-style theme support in things like XMMS/BeepMP/Audacious)
As for when a window becomes unresponsive, while I think their use of it is insane (really? OK/Cancel in the titlebar?), the GNOME 3 guys claim to have done their homework with regards to WM-assisted client-side windeco.
They say that their design allows the WM to retain control over the parts not delegated to the application so things like dragging, minimization, and context menu can continue to work properly if the application becomes unresponsive.
(Basically, instead of something like Chrome turning off windeco and then drawing its own, it would request that most of the titlebar be delegated to it, then draw tabs in that delegated region.)
I’m sure it was influenced by Chrome, since it would be ridiculous to pretend that browsers don’t influence each other.
But if you mean the overall design, it actually brings Firefox back to it’s earliest design – see this screenshot from /11 years ago/ (god am I that old?): http://screenshots.oldapps.com/54/large_2_firebird_history.png
If you mean having the preferences in-content rather than in a separate dialog, that’s also been coming on lots of Firefox UI for a while, and of course about:config has been in content forever…
“Windows, OSX, and Linux all create windows and dialogs differently, which means the user’s experience with Preferences was different depending on the OS.”
So basically, the experience matched the experience they got everywhere else on that OS? And now we’re going to be jarringly inconsistent with that OS?
That’s not an improvement.
Eh, it’s a preferences window for an application, not a standardized control panel applet. As such, I don’t expect a lot of consistency between applications – ignoring Firefox for the moment, pick any two Windows apps, and you’re unlikely to find the preferences window in the same place, or with any consistency of layout. For that matter, it may not even be called “preferences”… it might be “options”, or “configuration”, or any other synonym.
As long as someone finally kills off that stupid “Edit > Preferences” idiom in the Alt-accessible full Linux menubar view, I’ll be happy.
(The “Edit” menu is cognitively scoped to the document currently being viewed/edited. Putting a browser-scoped option like “Preferences” in there is confusing at best. Preferences belongs under Tools as on Windows.)
I see what you’re getting at – and Firefox has always had this question of “when do we act like the OS and when do we act like Firefox”, which is why there have been multiple projects to make non-portable OS specific browsers with Gecko inside.
But I think you engage in a bit of hyperbole. Having native behaving windows is different from matching the OS’s native behavior for a preferences tool. On OS X, for example, where the current prefs dialog superficially matches well you run into lots of little problems. For example, Firefox’s windows may behave like stock OS X windows, but Firefox’s tendency to open new windows (see this posts top screenshot) for deeper chunks of prefs isn’t a native experience at all. Nor is the seemingly native help widget at the bottom of the preferences dialog. On System Prefs that widget opens up the Help Center. On Firefox is opens Firefox help, which is in content, and thus your prefs dialog vanishes behind the Firefox window as the main window has focus. This is a pretty shitty experience that occurs BECAUSE the window behaves natively.
On the other hand in content, web like prefs is hardly “jarringly inconsistent” with the OS. It happens to be consistent with every other web app you’re using through Firefox. So now I configure my browser the same way I configure my email client (Gmail) my Word Processor (Google Docs) and the content syndication services I use every day. It’s inconsistent with my rich client apps, yes, but it is consistent with the rest of the web that I happen to use with Firefox. And that inconsistency isn’t “jarring” at least for me as a user. It’s modestly different, but since it preserves the flow of the app I’m using better than a giant dialog is, it isn’t “jarring”.
I’ll admit to having mixed feelings about in-content preferences as a UI choice, but the old world where you had no consistency with Firefox across OSes, and also non consistency with the OS as a whole was Actively Bad.
This looks great! Very nice change. Feels very natural, like it is how things should have been all along.
Thanks, kripken! It’s a slow progression – I look forward to when all of Firefox’s internal elements, from Library to Downloads, looks and feel consistent, responsive, and render in content space.
I find these looks much better than what we have actually.
I actually wondered why firefox haven’t fixed the preference panels yet – even as a “power user” (I don’t think this expression is trendy anymore 😛 ) I’m sometimes confused where is what if i havent opened it for a couple of weeks 😉
That said its true it looks a lot like chrome. Well.. it looks a bit better than chrome. I like icons, easy to recognize (chrome has text only on the sidebar). I also like the greater contrast compared to chrome.
But a lot of supporters dislike that we emulate their (chrome’s) work.
Now what I don’t like (i’m in nightly, mind you):
– elements aren’t system UI elements and that feels strange to me. the boxes are all bigger than the default on regular webpages. As a user I don’t want that, else id make the webpages bigger too…
– the yellow “?” looks strangely placed in the middle.
That’s it, hope its useful feedback 😉
Thanks for the feedback! Particularly the “?” – I agree, it looks out of place now and really should align with other elements better. I’ll file that bug. 🙂
Hi,
first of all: great work, I really like the new preferences design. And by the way, Atharv Vaish, there were mockups of in-content preferences for Firefox before Chrome had in-content preferences. I discovered (and published on my blog) first mockup for Firefox in-content preferences in June 2010, at that time version 5 was the current version of Chrome. Chrome has in-content preferences since version 10. 😉
@Jennifer: I think ‘Consistency with the web’ also means that I should be able to select and copy text because that is how I know the web (and web sites). It this intentional that you can’t select text? The new preferences feels like a web site, so I just tried that and it was not possible. 😉
>I should be able to select and copy text
You’re right, and that’s not deliberate! I just filed this bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1013904
Thanks for filing the bug. 🙂
Chrome based browsers have one good thing in the preferences: search. I often it’s very helpful.
It’s certainly frustrating that Firefox has drifted further away from platform nativeness, all the way from being very much like IE (6 or so? It’s been a while, my memory is fuzzy). Of course , that pref dialog in the far back is a screenshot on Windows based on the layout of what the Mac pref dialogs looked like a decade ago…
What I’m actually interested in, though, is how users are protected from web pages spoofing to be the pref window; it doesn’t look like there’s very many per-user differences, and the big difference is mainly the address bar (which isn’t that noticeable when there’s no particular reason to look at it). Perhaps it’s just not a worry, based on an assumption that there’s nothing worthwhile for spoofing?
Spoofing’s always a concern in the content area, but you’re right that I’m not too worried. This is partially because there’s not much worthwhile for spoofing, and partially because extensive and responsive UI is just damn hard to spoof. Chrome hasn’t been seeing any copycats for their in-content UI that I know of, and I certainly haven’t seen any for the areas in Firefox like the add-ons manager. Where we have spoofing problems are more common when the UI is light and easy to mimic, like the yellow drop-down bar.
An area of concern would be Sync and potentially Master Password (as many reuse passwords, though admittedly most don’t have it set up).
But you tell someone they need to log into Sync for some reason – don’t worry, we’ll open prefs for you – and then prompt them for their password, then sync their saved passwords.
If anyone wanted to spoof something, it probably would be about:accounts, not about:preferences. (Or: what caspy7 says below.)
Also, using the preferences dialog at all is a bit of a power user thing. There must be an entire class of users that has never used preferences. This class of users might rather call a friend/relative for tech support than change anything in this dialogue.
As much as I like the plan to get rid of all modal dialogs that opened from prefs and were cumbersome to deal with I cannot see this as improvement in style on linux. Firefox is now the only application on my desktop where preferences look like a web page not like part of Firefox itself. This could potentially confuse the user quite a bit and simply looks out of place to me personally. Even if you make it more native looking for Ubuntu at some point it will still fit in only with their window manager style and look like a style regression on KDE. Will preferences start to honour user font size? Currently the font there is bigger than the rest of Firefox UI…
From security point of view how would an user know that providing their master password to that tab (to see their remembered passwords) gives it to browser and not to some random webpage that looks like their browser? Users generally don’t notice urls…
Also, Nightly currently doesn’t remember the part of preferences I was on last time but there’s already a bug opened for that, right?
I find it remarkable how about:preferences styling is nothing like the about:addons or about:permissions styling, and about:accounts is once again a different beast. At least about:app-manager seems reasonably similar. Are there plans to change that and to unify styling across different in-content pages? Also, I wonder whether it would be somehow possible to let add-ons use the same styling for their own settings pages, for sake of consistency.
Absolutely, this is our plan. We’re just attacking these sections one at a time. The larger styleguide we’ll be following for all of these is coming together here: http://people.mozilla.org/~jgruen/chameleon/
This is a great first step. I’m also glad to hear that search is planned.
Wondering if those three items are also planned:
– Improve the opening time. It currently takes way longer than say opening about:newtab.
– Inline the secondary windows (Exceptions, Advanced, Colors, Choose in Content for example, clear your recent history, remove individual cookies in Privacy, etc)
– Revamp the second level navigation in Advanced: General, Data choices, Network, Update, Certificates would look better as a column next to the main navigation I believe.
On opening time and secondary, absolutely in the works. Not sure on Advanced. The tabs can be cumbersome on that one, but partially Advanced needs to be able to scale well as we get more features, and I wonder if it would be as easy in a single column.
Cool! Any bug I can follow for opening time and secondary windows? Thanks.
Rather than a second column you could go for one of those popular springy submenus which collapses when you access of the other main options.
How these new preferences can be customized and blocked when needed in enterprise deployment? Hope this will be easily available and documented before release or we will scrap this ever changing beautiful storyteller once and for all.
The controls, like radio and checkboxes, looks alien to the platform, will those be corrected to fit the general style one would expect on their platform (and is this properly themable with OS themes)?
It looks really gorgeous, and I also love the idea of consistency across devices and being able to apply our intuitions about how content should behave and respond!
*pom poms waving*
Thanks, Liz!
The more Firefox looks like Chrome, the more Firefox becomes irrelevant.
“Consistency across devices” means it sucks on PCs, like almost every single GUI nowadays.
LOL, I give you some feedback and you block my comments? … no words O_o
Your comments aren’t blocked! Sorry, sometimes it takes me a day to approve the comments. I wish I could have them approved by default, but there’s way too much spam in WordPress, unfortunately.
Is the title of this post meant to be ironic? Surely having application-level preferences distinctly distinguished from web page content is a very good thing? This move just seems like another confusing factor for ordinary users that will find it difficult to distinguish between 3rds part web content and local browser content. Isn’t this also just opening up a an enormous phishing opportunity?
Personally, I don’t like the move to in-content preferences. I don’t like it in Chrome, I don’t like it in Spotify, and Sublime Text’s preferences are just weird. I also never liked the experience of Firefox’s web help or the new add-on manager.
Of course, I see that the in-content approach does have advantages. In the case of the add-ons manager, the amount of space that you can use now and the discovery panel are great. In the case of the web help, there is no need to download a help package anymore and the pages are also easier to update.
Somehow, smaller boxes just feel more comfortable to me. :/
I am also a bit split on the new non-native widget set… it’s great that everything is larger now, especially for touchscreen users. At the same time, they feel too plasticky and Windows XPy to me.
The use of Clear Sans for reading mode is great, but what the hell does it do in a preferences dialogue?
I am also not convinced that going against standard platform behaviors and conflating application preferences with web content is a good idea. However, my biggest concern is the non-native widgets.
Widgets should be native (or conform as much as possible to the native OS) for reasons of usability, familiarity, consistency, correct theming, accessibility, performance, stability, etc. Google Chrome recently ditched native widgets, causing all kinds of bugs/misbehaviors and making everything look, act, and feel wrong. Please respect the OS platform in Firefox, and hopefully save some developer time in the process.
Favoring consistency across different devices and operating systems over native OS consistency is not a good idea. Different devices and operating systems have different conventions, input devices, and output devices. By trying to force everything into one custom system, you are making Firefox inconsistent with every other application on the user’s system. Moreover, an interface designed to cater to everything is necessarily worse than one optimized for the platform being used. For example, large controls are good for phone users but waste space for desktop users. This is the exact problem that Windows 8 has, and I hope that Firefox doesn’t go down the same road.