Firefox Settings Design: Share Your Input!

[AshleyT]

Hi everyone, my name is Ashley Thomas, and I’m a Product Manager at Firefox. We are in the early stages of redesigning Firefox Settings to help our users discover ways to shape their browsing experience. It is important to us at Mozilla that Firefox users have agency in accessing the web, whether choosing a default search engine, enabling browser dark mode or tuning the privacy options. To achieve this, we plan to create:

• A modern, user-friendly design with intuitive navigation and search that will help you find and discover options that suit your needs.
• Clear descriptions (and visuals as needed) of setting/configuration options that enable you to make informed choices.
• An experience that highlights the value behind each feature and invokes a sense of confidence in using Firefox.

True to Mozilla’s roots, we are designing this in the open. Today, I’d like to share our latest concept for the Privacy & Security section on desktop to invite your input. We were thrilled to hear the excitement and positive feedback about our early designs in a recent Reddit thread and would love to continue that discussion here. This work is still in the early stages and may change before you experience it in the Firefox release as we iterate on internal and external feedback. 

Concept: Privacy & Security Settings

We’re updating the top-level categories to help users quickly find what they are looking for. You’ll see the new list on the left of the screen. The screenshots below are specifically for the “Privacy & Security” settings. 

The goal behind this new design is to reaffirm that Firefox always has your privacy in mind and already puts thoughtful defaults in place while giving the flexibility to customize based on your preferences. To achieve that, we have split the settings into two pages - a primary page with information on how you’re currently protected while offering the most common customization options and a secondary page geared towards more tech-savvy users. Increases in privacy protections come with an increased risk of certain websites or functionality not working correctly. Therefore, we feel that it is important to distinguish these as ‘Advanced settings.’

P&S Settings Main Page

P&S Settings Customize Page

These are early concepts, so expect them to change over time. You may also notice this doesn’t include all the existing options in our “Privacy & Security” section. We are not removing the options you don’t see here. Anything not included in the above design has simply been moved to another section of settings to improve discoverability.

Please let us know what you think!

This new concept is fresh off the press! We are reviewing it internally and reaching out to folks like yourselves for input. Privacy & security are critical parts of our product, we live by our Privacy promise, and we want to ensure everyone feels confident browsing with Firefox.

Thanks in advance for sharing your feedback. Once we're through with the early stages and ready to make the new settings design available in Firefox’s pre-release Nightly version, we will update this thread so you can test it out yourselves and provide feedback.

-Ashley

[Mutzu]

What do you think about a dashboard to show an overview of the current settings?

https://denovers.com/blog/top-dashboard-design-examples-and-practices/

[AshleyT]

Thanks for the suggestion @Mutzu . We'll add this as something to be looked at. If you're comfortable sharing, I'd love to learn more about what information you'd find most valuable to be included in a settings dashboard like this?

[Mutzu]

Thanks, @AshleyT. For me, I think, it would be a (visual) overview of the main settings from the setting's sections:

Startup

Open previous windows and tabs

Synchronization

Sync is active with mutzu@mutzu.com

Privacy & Security

Strict security level enabled
Cookie banners are blocked
14 websites restricted by security level today
CryptoVPN enabled

Statistics

Last five days:
A bar chart showing the amount of time I've used Firefox in the last five days. (Only when Firefox had the focus.)

Appearance

Automatic color theme
English

Search

DuckDuckGo as default search engine

Plugins

7 plugins active

---

Maybe the dashboard should be customizable, since other people have different priorities than I do.

In general, the settings in Firefox feel a bit "buried" to me because there are so many (which is good). Either I have to click on a section header (and scroll down to see them), or I use the search dialog.

A dashboard would make the usability a little more immediate.

[Kvin]

It's good that the design of the settings has begun to change, I like it in general, but I have a few questions:

Is it possible to add more categories?
Move more settings from about:config, for example, do not close the browser when closing the last tab, and close the tab when double-clicking, and other settings to move.
How can I make the search focus when opening the settings?
For the settings pages, add the appropriate logos of different foxes to make it nice?
Replace the category icons with completely new ones, because the icons have not changed for years?

Does this mean that we can also expect a new design and redesign, history pages, bookmarks, extension pages, libraries, about the program?
The return and addition of icons for menus and context menus?
And new icons, the browser, and the icons in the browser that are on the toolbar, as well as a new design of menus and context menus?
Thank you for your work and for your answers!

[AshleyT]

Thanks for taking the time to review and write a detailed response! I'll take your suggestions around focusing the search on open, including more Fox icons, and more categories to our team for consideration. Are there certain categories you'd like to see? We are in the process of running usability testing to determine the right set of high level categories.

And thank you for the additional suggestions. This particular project is specific to updating the design for our existing settings. That means incorporating additional options (including ones from about:config) and updating the design in other parts of our app isn't included. However, I appreciate the callout for those. We'll add them as something to be looked at. There's another thread on Mozilla Connect about the menu icons.

[moz_samri]

I agree that one needs more flexibility to show icons on a tool bar...

here is what I do to overcome the limitation:

[moz_samri]

It would also be useful, and more coherent, to have the "Customize Toolbar..." operation to be available as an icon.  At present, there are about 3 (Tabsbar, HamburgMenu, Between the Help & searchBar...)  places where one can R-Click to invoke it, which is certainly not friendly to new/novices... and difficult to remember for even seasoned people.

In addition, at least in my working example above, one cannot invoke the "customize..." menu.

In some cases it is EXTREMELY diffifult to "know" where one can access the "customize" via R-Click...   Adding a colored region, would be a lot of code, confusing, and more code to maintain;  Putting the functionality into an optional ICON, in the default interface, allows each user to reconfigure its presence/absence...

I also prefer the "+" icon for NewTab, to be on the LHS of the TabBar.

Another config option is the location of the SearchBar... in the above example, I place it, in the Unused space, to the right of the "File, Edit..." Toolbar... that allows keeping apples and oranges, wrt search and current URL, logically distinct, yet visible.

Also note in my example, the toolbar UNDER the TabsToolbar, has a larger-inter-icon spacing;
Compare that to the myCustomized, repurposed Bookmarks toolbar, where the icons are more closely spaced, yet still legible !

The Scissors clipping icon is purposefully in the center of myCustomized bookmarksToolbar;
that allows doing clipping, when you have multiple independent windoz open..

The ability to do an external call to the BaseOS's.TakeScreenshot functionality, incorporated into a FFox Icon, would allow one to capture the entire current window... useful for making BaseOS.CurrWndow (or subWindows), of the window running FFox, llike the above example.
This abstracts the difference of the differing BaseOS design, and makes it very useful when one needs to do work across, VM's or differing computers.

[Synchro]

I like it, looks nice and smooth. I just hope you will add some more preferences from about:config - other browsers have more options to be customised by regular users.

[AshleyT]

Thanks for your response and I'm glad to hear you like it. Are there particular preferences from about:config that you're interested in? We'll add this as something to be looked at. The work shown here is focused on updates to the design of our existing settings.

[Synchro]

browser.tabs.closeWindowWithLastTab

browser.tabs.loadBookmarksInBackground

browser.bookmarks.openInTabClosesMenu

And it would also be great to have in Settings "Show Downloads Panel when download begins", "Always show Bookmarks Toolbar" etc. I think it's convenient when all settings are in one place.

[AshleyT]

Thank you for the extra detail. I'll share this to be looked at

[ivan1]

If ANY functionality wont be missing, and you like the appearance, i dont mind, but you MUST bring back old history dialog! Im enough of removing functionality for no reason!

[AshleyT]

Hi @ivan1 thank you for the feedback! There have been some concerns with the new history dialogue raised in another thread and they're on our radar.

[Denir]

Well if you are working on the UI, I would really like the compact mode to be an option in the settings itself, lot of people including myself don't really like the default density of UI, It's too big and looks ugly. A lot of people leave firefox just because of this. Compact mode however, looks better at least acceptable I would say. It should be an option in settings, let users decide what ui density they want please.

[Agentvirtuel]

Hello

Take a look at https://connect.mozilla.org/t5/discussions/fully-support-web-usb-and-web-serial/m-p/48852/highlight/...

[Halbour]

Well, I'd say one thing - The "Have fun!" is a bit... weird.

Overall, I really like the redesign, though!

[jules_s]

Thanks so much! The writing you see on these designs are definitely not final. We appreciate the feedback 🙂

[Vadim_k1337]

1) This cartoon fox logo should change color depending on the version,it should be gradient-blue in the night build of Firefox

2)Add a flag to disable the cartoon fox image to make the interface cleaner

[AshleyT]

Thank you for taking the time to review and share your feedback!

[Hissymaster]

I personally think the "Custom" and "customise" settings should be in "Advanced", move the non-custom items out of the advanced options. i also feel like there is not enough details shown in the nav-bar, it should be formatted something like Privacy And Security > DNS Over HTTPS> Advanced Settings, not Privacy and security > Advanced Settings.

[AshleyT]

Thank you for taking the time to review and walk through the interactions!

[okay_okay]

Really like the design! And the fox is a nice touch. 

[meskobalazs]

The only issue I have are the Privacy Protection and DoH sections. Having a single "choice" and an advanced settings button makes no sense to me. Those should be similar to the ones at Tracking protection and HTTPS-Only Mode.

[JonesJackie]

if you're working on the UI, I strongly suggest adding an option for compact mode in the settings. Many users, myself included, find the default UI density too large and visually unappealing. This issue is significant enough that it drives some users away from Firefox. The compact mode, on the other hand, looks much better—at least acceptable. Please make it a setting option so users can choose their preferred UI density. Additionally, if you're a big Homeworkify fan, you might find https://homeworkifyofficial.com/  helpful for more tips and solutions. They might have some valuable insights to improve your overall Spotify experience.

[moz_samri]

agreed.  compact mode is highly desired;

Adding the ability-to-fold-lines-within columnar displays, as an option, would be highly desired.
at present, one must play with column widths manually, if at all possible.

[jules_s]

Thank you for taking the time to share UI density suggestions and concerns. I've raised this to the team.

[tilwiti]

I like it. Could you consider adding the userChrome.css edit to a "Danger^W Advanced Settings" tab? Include a warning about potential interface issues, along with an easy way to reset if needed. Maybe even include a section within that for experimental features from the UI team and a userChrome.css catalog (basically a mirror of what's already out there). It could be a great way to involve CSS enthusiasts.

[Agentvirtuel]

Hello

Firefox advanced customization and configuration options
https://support.mozilla.org/en-US/kb/firefox-advanced-customization-and-configuration

In addition, to edit your css file, this other possibility
https://connect.mozilla.org/t5/discussions/in-feedback-we-trust/m-p/66228/highlight/true#M23461

[tilwiti]

just a smol question to the devs—does "legacy" mean it’s going to be removed?

[ThePillenwerfer]

Hopefully not as it's what makes Firefox better than the competition.  Removing it would make a nonsense of the claim to be "Highly configurable" as there's not much you can do with the standard 'user' settings, and about:config only adds so much.

[ThePillenwerfer]

It certainly looks like an improvement.

I used Firefox 3.5 years ago and then various Chrome derivatives until a few months ago.  I have to say that I've struggled to find the relevant settings and often have to resort to the Search box.  The old central 'Preferences' box seemed much easier to navigate — this isn't rose-tinted spectacles as I was using Thunderbird 45 until recently and that retained it.

I'd suggest a tree view, like e-mail folders.  So under General would be sub-catagories for Startup, Import, Tabs, Language &c.

A simple link to about:config in the left-hand panel would be too much to hope for I suppose.

[AshleyT]

Thank you for the response. I hope our updated list of categories will make it easier to find the setting you're looking for. And yes, we intentionally moved the search to the top left to make it more visible. Thank you for the suggestion about the tree view. I'll raise that as something to look at

[myspace]

Thanks for sharing the early concepts! Looks much better.

[Oddbodkin]

I don't know what's changed but tabs started crashing a couple of days ago.

Infrequently at first but now far more often.

[wutongtaiwan]

I'd like to move the preference about privacy in about:config to the settings. For example,privacy.resistFingerprinting  and privacy.firstparty.isolate.  At the same time, it is necessary to inform the user what the effect of enabling these two features will be, so that the user can choose carefully

[AshleyT]

Thank you for the feedback. We'll add this as something to be looked at. The work shown here is focused on updates to the design of our existing settings.

[wutongtaiwan]

When I type text in the search box, it appears in the address bar, which I have to change in about:config, which is very inconvenient, and I hope to take this opportunity to move the switch of this function to the settings. In addition, Firefox allows different search engines for privacy windows, but this also needs to be changed in about:config, which is very inconvenient, and I hope to enable this feature in the settings in the future

[wutongtaiwan]

I also have a small suggestion that when I enable encrypted dns, Firefox will show "enabled" if it is successfully enabled. I'd like to see a slight change to show "ECS enabled" by the way. ECS is the Encrypted Client Hello

[wutongtaiwan]

I'd like to see the Protection Information panel in the Privacy section of the settings. Firefox's current protection information panel doesn't feel good enough. My suggestion is to show not only the total number of trackers blocked in a week, but also the number of times each tracker blocked, showing which trackers are blocked the most. And in the form of a graph to show the daily trend of the tracker, this protection information panel should be designed to be cool and advanced