Overview
Firefox's main browser settings (about:settings) enable users to customize their browsing experience. They're organized by different categories and features that can be adjusted or modified based on user need, such as privacy and security, accessibility, syncing, search, and password management.
Please note that the following guidelines and patterns should also be applied to settings beyond about:settings (e.g., Sidebar customization, New Tab drawer).
Overall best practices
Firefox settings should help users easily discover and find ways to personalize their browsing experience through intuitive navigation and recognizable UX design patterns.
Use progressive disclosure and display what's more important first.
Include descriptive text below the label of features that an average user may struggle to understand (e.g. Enhanced Tracking Protection).
Add any new settings within an existing category, whenever possible.
Categories and subcategories
Settings are organized by main categories named after browsing themes (e.g., search, privacy and security, languages). Within those categories you'll find actual sub-category (e.g., Default search engine, Search suggestions) settings contained within a card-like UI.
Search settings category and subcategories related to it: Default search engine and Search suggestions
Complete list of Settings information architecture
|
Main navigation category |
Sub-categories |
|---|---|
|
My Firefox Centralizes everything related to the user's personal experience, making it easy to manage all personal and account-related settings in one place. |
Import browser data Profiles Mozilla Account Sync Devices |
|
Home and Startup Provide users with a straightforward way to control their initial experience in the browser. |
Startup New windows and tabs Home |
|
Search Allows users to easily adjust how they search the web, streamlining access to search customization. |
Default search engine Search suggestions Address Bar – Firefox Suggest Search shortcuts |
|
Privacy and Security Ensures users can quickly find all protective settings in one place, reflecting the importance of safeguarding their online experience. |
Protection stats Cookies, history, and site data Enhanced Tracking Protection Additional protections Proxy settings DNS over HTTPS Connection and software security |
|
Autofill and Passwords Ensures users can quickly find all protective settings in one place, reflecting the importance of safeguarding their online experience. |
Passwords Addresses Payment methods |
|
Appearance Emphasizes customization, making it simple for users to adjust the visual aspects of their browsing experience. |
Website appearance Browser appearance |
|
Browsing Consolidates all settings that influence the core browsing experience, enhancing usability by keeping related features together. |
Sidebar Tab management and navigation Text navigation and interaction Downloads Applications Performance Media Features |
|
Accessibility Highlight the importance of accessibility and inclusion, making it easier for users with different needs to find and use these features. |
Website contrast Fonts Zoom Navigation Display |
|
Languages Ensures that users can easily set their preferred language at the browser and website level, as well as translation preferences. |
Firefox language Websites language Spell checking Translation |
|
Permissions and data Website and Firefox permissions under one section clarifies data control, helping users manage privacy and security effectively. |
Website permissions Content Firefox data collection Website advertising |
|
Firefox Labs Encourages user engagement of experimental features, while clearly separating such tools from stable ones. |
Browsing Webpage display Developer tools |
|
About Firefox Helps users know where to go for help and updates, potentially reinforcing their connection to the broader Mozilla ecosystem. |
Firefox updates Firefox support link |
|
More from Mozilla More product offerings by Mozilla. |
Firefox for mobile Mozilla Monitor Mozilla VPN Firefox Relay Solo |
When to add a new main navigation category
New settings should fall under an existing main navigation category, either as a new subcategory (card) or as a new configurable option within an existing subcategory.
There shouldn't be a need for new categories on the main page navigation level, as we have tried to capture most, if not all, overarching browsing themes.
You can propose a new main navigation category if a new setting's theme and purpose does not seem to belong under any of the existing categories or subcategories.
Housing a setting in-context vs. in about:settings
When to consider keeping a setting in context vs. in about:settings.
When to deep-link or copy settings.
Where is the action happening in relation to the setting interaction?
Settings will live either in:
- Context of a feature (e.g., add-ons)
- about:settings (e.g., Download settings)
- Both in-context and in about:settings, either as a carbon copy or extra settings (e.g., New Tab)
New Tab customization options within about:settings |
New Tab customization options in-context within a drawer |
Contextual settings are recommended when the action related to the result of the interaction with the setting is in proximity. i.e.:
- Sidebar settings ⇾ Move sidebar to the right ⇾ the sidebar moves
- Print ⇾ Scale: 80% ⇾ the PDF preview shrinks
Sidebar customization settings within the sidebar |
Browser layout settings containing sidebar customization settings |
The majority of customizations for overarching browsing features (e.g., Translations, Startup, Permissions) will then tend to live in about:settings under a parent category matching such feature.
There can be cases where keeping settings in-context as well as in about:settings can also be beneficial for feature discovery, since most users tend to look for customization options within main settings. (e.g., New Tab)
Deep-linking
Sometimes, setting categories feel closely related (e.g., Appearance and Accessibility). In such cases, we recommend including box links to the related category because users may end up looking for them there too.
Browser appearance settings link out to Extensions and Themes |
Layout
Cards and boxes
Use cards to contain settings categories. When there is a need to further visually separate information within cards, make use of a box group and/or box item(s).
Saved addresses' list uses the box group and item components |
Inline vs. block form UI elements
Avoid in-lining more than 3 form UI elements (e.g., label + text input + a button) as users tend to read and fill out online forms from top to bottom and to avoid weird visual truncation and wrapping.
Inline form elements should also always be categorically related (e.g., address + zip code, font family + font size)
Inline label, dropdown, and button |
Nesting
Nesting inputs is okay and may happen when a parent feature or customization has further customizable options.
More detailed customization options nested under Search suggestions settings |
Toggle vs. checkbox
When in doubt, use a checkbox for letting users pick their desired configurations within settings. Reserve toggles for moments when a user needs to turn a feature on or off. The trick to tell these needs apart is through the label. A toggle's label should be a fairly brief feature name (e.g., Search shortcuts → Google), whereas a configuration label tends to be a bit more of an explanation of what a user is about to configure / change (e.g., Startup → Open previous windows and tabs).
Nested recent activity customizations |
Progressive disclosure
When to hide or show certain settings based on user needs and complexity.
Use progressive disclosure (subpages, dialogs, collapsible content blocks/accordions) for settings' users “set it and forget it” or less frequently adjust.
Use progressive disclosure for complex settings in order to reduce cognitive load for users.
Progressive disclosure creates a simpler experience for most users, while advanced users maintain quick access to customization options.
We recommend a box button for any subpages flow (see right below).
Translations using box button for a subpage with more settings |
Subpages
A subpage is a lower-level page or pages used for more complex or rarely touched sub-settings that should not be surfaced on the main category page. Subpages will contain a breadcrumb, so users easily remember where they've navigated from.
More detailed translations settings under a subpage |
Dialogs
A dialog is interruptive for a purpose. Use dialogs if there is a need for users to take an action or confirm choices via a new flow.
A dialog for adding a custom search shortcut |
Iconography
We add iconography next to the setting category and feature names for better recognition. Not every category necessarily requires an icon, since it can be difficult to come up with a symbol for everything. Try to use an icon whenever possible.
Downloads settings' header includes a download icon |
Restoring defaults
Consider a “Reset to default” button addition next to settings that have many combinations and options to be modified. Users may forget the original state of a setting (e.g., ETP, website contrast colors).
Restore New windows and tabs default appearance |
Accessibility
- Clearly label your inputs and fieldsets.
- Fieldset legends should clearly relate a group of configuration options to one another.
- “Use the aria-label attribute to provide an accessible name for an element when no visible label exists…” Learn more.
- Use the aria-description attribute for longer explanations, it “can be longer as it is intended to provide more context and information.” Learn more.