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

[wutongtaiwan]

This protection information panel should be at the front of the privacy and security area, and you will be able to see it as soon as you enter this area. I also want the protection information panel to show which extensions I've installed and run, what permissions I've given to which extensions, which sites I've given which permissions, and so on, and which sites I've set as exceptions in Enhanced Tracking Protection

[jules_s]

Hey there, thanks for this suggestion. I'm one of the designers working on settings and helping out answering some questions here 🙂

We're very interested in showing Protections info in settings too, and will be exploring how to integrate that in the UI. I love the idea of the graph, thanks!

[wutongtaiwan]

I hope you can design a sketch soon. You can also see in the chart whether encrypted DNS is enabled, as well as the mode in which Enhanced Tracking Protection is enabled

[wutongtaiwan]

I want this kind of website-style charts. I feel that the charts on this website have a very advanced feel

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

[wutongtaiwan]

Is there a sketch of the protection information panel at the moment? I'd like to see what the protection information panel looks like soon

[Mutzu]

I was doing some research for another project and found these graphs. Maybe it is some inspiration for the graphs in the dark theme. (But I think they feel a little bit too harsh.)

[jules_s]

Thanks for sharing some data viz inspirations for dark theme.

[wutongtaiwan]

Your picture is kind of like the stock market

[Mutzu]

You are right, I liked the colors somehow.

[azurite18]

Seems redundant, as most of that information is shown on the Privacy & Security list of options.    Also  not sure it's realistic to say any user of the internet is "secure", not unless Firefox is providing a true (legally binding) guarantee and provides a definition of "secure"  which probably isn't going to include a guarantee that FF is unhackable is it? 

[fuseteam]

secure doesn't mean "unhackable" it means protected, this is a standard feature of any internet connected software

[Erwan]

The idea is there, and there's a lot of promise!

On the other hand:
- I spend a lot of time setting up my blank browser so that I'm well protected.
- I set my mother's browser
- I set my grandmother's browser

The basic problem: we're not protected BY DEFAULT

People with low vigilance are always being fooled.

Why by default?
- sponsored content is enabled
- third-party cookies are accepted
- tracking is allowed
- allow advertising metrics

I'm annoyed, and it undermines all your fine promises.

Solution:
on installation, a menu should open and propose these different security choices and their real consequences.
For example, the message would say: “Do you want to enable sponsored content? (this content helps Mozilla's financial autonomy and helps fund the company)”.

For my part, everyone around me, both personal and professional, uses Firefox (often at my urging), but fewer than 1/4 set it up correctly. This is also the case for the absolutely necessary extensions.

So Firefox must protect people BY DEFAULT, even from itself if need be.

Translated with DeepL.com (free version)

[Gnomasz]

I wanted to suggesting something softer, although about the same configs: I'd like to see an explanation as to why some defaults are the way they are. When someone mentions e.g. Betterfox on Reddit, a reply often appears that "there are reasons the defaults are the way they are", but I've never found actual reasoning.

So, to stay on the Privacy and Security settings, I'd like to see the reasoning why:

• "do not track" is off,
• "automatically refuse cookies" is off

either in the settings or on the first page when clicking "learn more".

Aside from Privacy & Security, I'm glad to see Extensions and Themes in the settings. I often look for them there.

[jules_s]

Thank you for this suggestion. We've been thinking through how to be able to better explain why things are on by default and how things may change if you turn certain settings on, which is something we're not doing a good job at either and some changes could result in a broken experience.

[wutongtaiwan]

If you can, Do Not Track and Require Sites Not to Sell Shared Data are turned on by default. These two functions are enabled by default and will not affect the normal browsing experience of users

[jules_s]

Thank you for the suggestions. I replied to a reply to your post below about better consequence explanations for defaults or even setting changes. I really like the example you've given on using messaging and providing different security choices with proper consequence explanations.

We want to make sure users actually understand the options they have been given, and are confident with the options they've chosen and empowered to make changes to better suit their experience.

[AshleyT]

Thanks for sharing the feedback on which options you'd like to see on by default and the idea to bring these settings forward into onboarding.

[gdfsgdfg]

Please add a setting for disabling disk cache about:config setting keeps resetting "browser.cache.disk.enable" every single firefox update for me lately.

[fuseteam]

Hi i've been packaging firefox for ubuntu touch and with vertical tabs and a few minor tweaks it is surprisingly usable so far

would it be possible to make the settings page responsive so that it can adapt it's layout to fit on mobile screens as well?

[jules_s]

Hey there,

We've been designing with responsiveness in mind and focusing on layout. Happy to hear it will benefit Ubuntu Touch users.

Here's an early mobile responsive layout exploration of hiding the nav behind a hamburger menu, which could then slide in on click.

Please feel free to give any ideas or thoughts that could improve the responsive experience. I really appreciate it.

[fuseteam]

awesome! that looks great~

I assume the focus here is more for the settings page?
Another part would for it to work with touchscreens, tho that isn't quite related to design—

[jules_s]

Thanks! Yes, the responsiveness would be focused on settings for now to stay within the scope of the project.

[fuseteam]

yes totally makes sense, looking forward to it 😄

[kywarai]

Please move these options from about:config to the settings page:

browser.search.openintab (opening a new tab for search bar)
browser.urlbar.openintab (opening a new tab for url bar)
browser.tabs.closeWindowWithLastTab
browser.tabs.closeTabByDblclick (close a tab by double click)
browser.tabs.loadBookmarksInTabs (opening a new tab for a bookmark)

these features are really useful

[AshleyT]

Thank you for sharing which settings you find useful from about:config!

[00FF00]

two unrelated things on this topic:

1. not even really on this topic specifically, probably, but i hope you dont plan to remove the settings for custom colors for websites and custom fonts. i use firefox for many reasons, but this is the one that initially got me to start using firefox as my main browser. (also dont you dare switch to chromiums terrible themes)

2. lol okay now thats outta the way the main reason i was going to comment here was because i happened across this thread and this comment reminded me of an issue i noticed with the vertical tabs experiment, which is if you have vertical tabs turned on and then right click to customize your toolbar there is no intuitive way to get out of that screen, because the sidebar disappears on the customize toolbar tab. sorta off topic i suppose but it is what it is lol. thanks for all the hard work you do making firefox great!

[AshleyT]

Thanks for your response. I'll pass along your feedback on the vertical tabs.

[Jack95]

I’ve never really taken the time to take a deep deep dive into the settings. Do they include the toolbar? If not, i think they should. For example, i want to keep the home button in the toolbar. I also want to have the headbar or omnibar, i mean the strip with the menu button, back button, forward button, show tabs button, reading mode button, reload page button and the actions related to the adress field on the bottom of my iphone screen. That’s because i use the screen reader voiceover. And if i put my finger on the bottom right angle, it lands on the menu button, and from there, it’s just a few leftswipes to the adress field

[milenhh]

Hello Dears,
Can be reduce space gap between firefox bookmarks?

[ThePillenwerfer]

Yes, with Custom CSS; there's plenty of information on-line about enabling it.  The code you need is:—

.toolbar-menupopup :is(menu, menuitem) {padding: 0 !important;}

Whilst Firefox's claim to be "Highly customisable" is true, it certainly isn't easy.

[ffffff]

Looks very pretty. I'm glad to hear the preferences page is getting some love. It does the job, but isn't the easiest to navigate, nor does it inspire all that much confidence. I really like the cute fox ❤️

Some thoughts:

- Splitting pages into more manageable ones with clear limits seems like a good idea. I dig the breadcrumbs
- Hopefully you folks can do something about the old sticky header which covers up content as you scroll
- Any information on whether these design guidelines will also be applied to the extensions page?