[Article] 1. How to make a better default Firefox UI

[Article] 1. How to make a better default Firefox UI

Disclaimer: This article covers Firefox v89, and there are some improvements today.

After the release of Firefox v89 in 2021, there was a tremendous amount of controversy(reddit, HN) over the UI, and this repository quickly gained popularity for addressing most of the issues.
Waterfox and Floorp browsers also set my theme as the default.

Between writing that last post and hesitating to write it, time has passed, it's 2023, and Mozilla has decided to end support for Windows 7 and Windows 8. Firefox v115 is the last version to support legacy Windows and will be available until September 2024.

Of course, mozilla has cleaned up a lot of legacy code, and this project also required me to do a lot of work and remove features related legacy Windows. So it seems like a good time to write this post.

Since this article also covers UI on legacy windows, I don't think it should put it off any longer than that.

What was better than the Proton UI in version 89?
Let's dive right in.

Principles

For me, there are 3 big and 16 small criteria for UI/UX design.
I don't have the data or the environment to do A/B testing, so I have no choice but to predict user behavior, which is very important.
I had to think deductively, using various theories.

• Intuitiveness: Be easy to understand and use.
  • Simplicity: Remove unnecessary things or make it simple to reduce cognitive burdens.
  • Visibility: Key features are visible for ease of operation.
  • Accustomably: Reduce the amount of learning to adapt quickly.
  • Consistency: Reduce the exception for easier remembrance.
  • Predictability: Reducing anxiety by making you think it's controllable.
  • Affordance: Provides clues how to manipulate.
• Efficiency: The goal should be achieved quickly and accurately.
  • Clearly: The distinction shuold be well-recognized.
  • Proximal: Close enough to move quickly.
  • Bulky: Large size is easy to recognize or move.
  • Snappy: Smooth and no janky for responsive
• Flexibility: Accepting requirements and minimizing mistakes
  • Accessibility: Accommodate a wide range regardless of age, disability, etc.
  • Functional: Accommodate a wide range of features to meet needs.
  • Contextual: Exist naturally in each situation.
  • Harmonious: Exist naturally in each elements.
  • Pleasure: Pursue satisfaction for fun or creatively.
  • Compatibility: consider lower version APIs, higher version roadmaps, upstream or OS, RTL, etc.

Problems

I'd write down what the problem was that made me start this project and made people uncomfortable.

Firefox v88 Photon UI	Firefox v89 Proton UI

When I tried the developer edition of version 89, I was in for a big shock.
This is because, despite the neat first impression, it was just too uncomfortable.

There were three main issues.

• Tab: Tabs that look like buttons
• Padding: It's too big
• Icons: It's hard to read on its own

Why Tab(Accustomably, Affordance)

Accustomably

Often referred to as Jakob’s Law, when they encounter a new app, they expect it to behave the same way as the traditional UX they already know.

Certainly, Firefox's new tab UI seems like a difficult adjustment.
But saying that you shouldn't change your UI simply because you're not used to it can stifle progress and lead to decisions that only follow trends.
You can be a fast follower, but you have to be careful because it stifles innovation.

Affordance

Okay, so it makes sense to provide another rationale.

I can use Gestalt psychology to describe the problem.

• Law of Proximity: Off the toolbar, so feel it's a different group

• Law of Similarity: Different color from the toolbar, so feel it's a different group

Case Studies: Apple Safari

Apple has announced at WWDC that macOS 12 Monterey is getting an all new Safari browser.

However, after many complaints from users, Apple came up with a compromise in Beta3 tabs that look like buttons.

• macOS Monterey Beta 3: Apple Redesigns Safari Tab Interface Following Complaints
• macOS Monterey beta 3 brings redesigned Safari tab interface to address complaints

But it still failed, and Apple eventually declared a complete rollback to classic tabs.

• Apple Releases Safari 15.1 for macOS Big Sur and macOS Catalina
• Apple reverts to more traditional Safari tab design in macOS Monterey RC following controversy

Apple isn't necessarily right, but the "button-like tab" can be criticized, given that it's not easy to roll back to the beginning many times.

Why is too much space bad? (Visibility, Proximal, Bulky, Contextual)

Visibility

The first is intuitively understandable.
The web browser is a web content viewer and should not interfere with showing content.

But Proton UI is losing out due to a lot of padding.
This is fatal on devices with small screens, such as 13-inch laptops.

Proximal & Bulky

There is a logical way to explain this.
It's Fitts's Law.

The Fitts's Law predicts that the time required to rapidly move to a target area is a function of the ratio between the distance to the target and the width of the target.
The formula and explanation for Fitts's Law is as follows:

$$\begin{eqnarray} MT &=& a + b \cdot ID \\ &=& a + b \cdot \log_{2}(\frac{2D}{W}) \end{eqnarray}$$

• $MT$(Movement Time): Average time to complete the movement
• $a$, $b$: Constants that depend on the choice of input device
• $ID$: Index of difficulty
• $D$: Distance from the starting point to the center of the target
• $W$: Width of the target measured along the axis of motion

$a$ and $b$ are constants, so they don't matter.
In other words, $ID$ is what matters, and the $\log_{2}$ can be omitted, as can the constants.

The ratio of $\frac{2D}{W}$ that is left over is important here.

1. $2:1$, so reducing the distance is the first step
2. Maximize the width, but not the distance
3. Fill in the extra space, to prevent padding from getting too large

Now let's compare which UI is easier to click.

As you might expect, Photon(v88) is easier to press.

1. The $W$ in the Amazon icon is larger
2. The $W$ in the menu is a little smaller, but the $D$ is much smaller.

Especially for the Amazon icon, the loss makes the clickable area look smaller than it actually is.
It's a good idea to fill in the padding area to make the icon look bigger.

Contextual

In this situation, Mozilla deprecated the compact UI.

But there was something even worse..
Try to spot the difference in the following screenshot.

That's a little hard, isn't it? The answer is that the tab bar and toolbar are slightly different heights.

In v89, these were Compact UI, Normal UI, and Touch UI, respectively. Indeed!!!
The difference between each UI was almost meaningless.

Case Studies: Google Chrome

It's also interesting to compare this to the UI spacing in the most popular browser, Chrome.

Do icons help? (Clearly, Accessibility)

Clearly & Accessibility

Content design considerations for the new Firefox and wondered if it would be a good idea to remove the icon.

I did a quick search and was able to find Nielsen Norman Group's study of icons.

The results of the study confirmed my suspicions.
Text-only was the worst result.

Lower bars are better	Lower bars are better	Higher bars are better

Case Studies: 2023 Chrome Design Refresh

Chrome's new UI, rolled out this year[reddit thread], includes icons.
Although I don't like the shape of the icon.

Redesign Tabs

There's more to creating tabs than just how they look.
Here we'll take a look at some of the Lepton Theme tab design choices.

Tab states

• Simplicity, Consistency, Predictability, Affordance, Clearly, Functional, Harmonious, Compatibility

What is the states of the tabs you know?

1. Selected
2. Multiple Selected
3. Hover (Mouse up)
4. Text overflow
5. Tab overflow (Tab scroll mode)
6. Reaching tab resizing
7. Sound & Muted
8. Autoplay Block
9. PIP(Picture In Pictuure)
10. Pinned
11. Container
12. No favicon
13. Changed title
14. Loading
15. Unloaded
16. Crashed
17. Shared
18. Theme
19. UI Density
20. ...ETC

All of this needs to be presented consistently within 36px to 240px.
This seems like a complicated problem.

Let's take a look at some common mistakes in the Proton UI.

Which tab is the selected tab?

The correct answer is to the left.
The first(Photon) and third(Lepton) are easy to recognize because they are connected to the toolbar.
To reduce visual overload, Lepton shortens the container indicator's in the background tab to make them shorter.

But secondly(Proton), it's hard to tell which tab is selected between the highlighted background color and the bar at the top.
The top bar is the container tab indicator, which feels similar to the selected tabs in predecessor UI, Photon.

But what about when it's Selected, Multiple selected, Hovered, or General?

1. Photon:
   • Connected with a toolbar to recognize Selected
   • Easily distinguish between Multiple selected and Hovered with the color of the top context line
   • Multiple selected's background color is distinct from Selected, and Hovered's background color is closer to General.
2. Proton:
   • Selected and Multiple selected look almost exactly the same
3. Lepton:
   • Connected with a toolbar to recognize Selected
   • They all have different background colors to distinguish them

By comparing the results of setting many states arbitrarily, you can see how simple, consistent, and affordance Lepton is.

Muted	Muted + Hover	Muted + PIP	Muted + Hover + PIP

1. Photon:
   • Muted is indistinguishable from Muted + Hover.
   • When the PIP indicator is present, Muted's position changes significantly.
2. Proton English:
   • Muted, display only as text
   • PIP is only known when you are in hover.
3. Proton Korean:
   • Surprisingly, different display languages result in different UIs
   • Muted to hide the favicon
   • No indication is obtained when PIP
4. Lepton:
   • All the information is known, and the positions of Muted and PIP are constant
   • When hover, it gives a clear signal that it is controllable

Let's look at more cases.
Proton was nearly impossible to use in Korean.

Muted + Loading	Muted + No favicon + PIP	Muted + Pinned	Muted + Pinned + Hover + Titlechanged

1. Photon:
   • Useless icon when Muted + No favicon + PIP
   • Muted + Pinned + Hover has a different effect than Muted + Hover
   • There is a lot of information overload in Muted + Pinned + Hover + Titlechanged
2. Proton English:
   • Useless icon when Muted + No favicon + PIP
   • Muted + Pinned + Hover is indistinguishable.
3. Proton Korean:
   • Loading indicator to hide the Muted icon
   • No indication is obtained when PIP
4. Lepton:
   • Always represent all information
   • If No favicon, replace it by increasing the size of Muted.
   • The position is always the same, even when Pinned
   • If the locations overlap, like Container and Titlechanged, combine them to display.

Utilizing space

Lepton also has a smart and efficient behavior based on the width of the tab.

1. Like Proton, it shows all the close buttons when there is enough width.
2. If the tab reaches the end and runs out of width, similarly hide the close button on the background tab.
   The size of the close button has been reduced to reduce accidental clicks.
3. You can still close it by hovering over the background tab.

Adjust the padding and gradient so that the tab titles are also effectively visible.

1. Lepton sees the New text on the last. By using an optical illusion to save space.
2. Lepton is a wiki with the words clearly visible. (Adjust only when width is insufficient)
3. Lepton shows more of web contents
4. Photon and Lepton have tab separators

Distributions

There are certain criteria for what constitutes a good UI for each person, but it's also a matter of "taste" to some extent.

The following are all good examples:

1. Lepton with common tabs to match Proton
2. Photon tabs with context lines at right angles
3. Original proton tabs

So I've picked three cases to match the concept of distributions.

Lepton, Photon, Proton like tabs

My theme in particular is known for its support for Photon tab UI.

Add icons and adjust padding

Panel and context menus

Icon and adjusting the padding eliminated the previous complaints.

There was an issue with unbalanced strokes, but our great contributor @zapSNH fixed it and now we have a top-notch set of icons that are consistent and recognizable across browsers.

Edge	Chrome	Lepton

1. Edge
   • Menu whose icons are blank for no particular reason
   • They are consistent, but they look too much the same throughout and are difficult to scan
   • The metaphor of some icons is confusing, like New InPrivate window. (It took me a long time to realize it was a person)
2. Chrome
   • The icon style is not modern
   • The icon style is angular compared to the rounded UI
   • The icon looks too small for the size of the text
   • The icon size is disproportionate
3. Lepton
   • The icon style is modern
   • There is a consistent set of appropriately sized icons
   • Filled icons increase the likelihood of scanning (Only for important icons)
   • Metaphors distinguish the appearance of icons

The same goes for context menus.

Edge	Chrome	Lepton

• Edge: I don't know why there is no icon for Add all tabs to favorites.
• Chrome: The icon doesn't exist at all.
• Lepton: The icons are laid out in a way that makes them clearly distinguishable.

In the context menu for web pages, only Firefox has a group of shortcuts at the top.
It achieves some quickly accessible effects like the pie menu.

Shortcut group vs Pie menu

More cases

The following image is a set of icons before they were updated, so the quality is poor, but it should serve as an example.
The global menu and various panels have icons, and you can see them change as folders are opened.

1. Menus and panels will definitely shrink in size.
   The start of the text is aligned.
2. The global menu also have icons.
3. Add icons to the menu of each bookmark library folder and responds when it is opened.
4. Add icons for different case layouts.

Theme

System default theme

Lepton provides a UI that adapts to different OS and their settings.

1. Windows 7: Follow the aero window design closely
2. Windows 8.1: Just like Windows7, I've made sure that the title board blends in nicely.
3. Windows 10 Light: I followed Windows 10's Legacy Edge colors to make it look the best for Windows 10.
4. Windows 10 Dark: Same as above
5. Windows 10 Dark + Accent titlebar: Windows 10 has a titlebar accent color setting. If it is enabled, you should follow it.
6. MacOS Light: On a Mac, it should follow the color of the Mac.
7. MacOS Dark: Same as above

If you're using Windows 11, you can use the userChrome.compatibility.os.win11 option to use Windows 11 colors similar to Edge.

It works well on Linux, of course, and fixes color issues and non-native titlebar button issues.

Linux color issue

Linux titlebar button

Speaking of which, there are times when you need to make space for a titlebar button in the toolbar, like in Tabs on bottom or One Liner.

Each OS has different values and locations.

1. Win7,8: 105px, right
2. Win10: 138px, right
3. Mac: 72px, left
   • Fullscreen uses native UI and should be treated as 0px
4. Linux: 84px (May vary by system theme)
   • Can be positioned on both left and right
   • May or may not have three buttons

Improvement proton theme

I've shored up the shortcomings of the Proton theme and filled in the details.

Fixed accessibility issues caused by the lack of color contrast in the Proton theme itself.

Improved color contrast and outline shadow for bundled themes

I've applied the proton theme to the parts that don't have it.
It was a process of creating more uniformity.

Proton theme apply

I also applied dark mode to the parts that weren't applied.

More darkmode

Finally, I've made sure that the colors apply well if you're using a custom theme rather than the default theme.
It would be great if you could infuse enough of your personality into the products you use.

Colorful components

In tables and lists, I've added a different color for even rows to make them easier to read.

Even row background color for table and list

Finally, audio player has curved borders to follow the Proton design, and the video player has made the content more visible.
I've also modified the icon to make it look better.

Media player(Audio, Video)

Interactions

There are interactions to help you understand what's going on, as well as interactions to entertain users.

Helpful interactions

Changes in mouse pointer when hovered over, or changes in the elements, provide appropriate hints that something is being done.

1. If the action is different in nature and appears smaller than other actions, such as a zoom command in a panel, it helps to change the mouse pointer.
2. It's intuitive when the mouse is over a field and it has a border to indicate that it can be pressed.
3. The text of active items has accent color.
   Make the deleted items grayscale icons as if they were disabled, and stroke the titles. However, if you hover, you will see the title without strokes.

Animations

Animations make the UI feel smoother and more natural.
But sometimes it also makes the behavior feel "slow".

Therefore, I designed it like this:

Easing curve of photon

1. Follow the easing curve of photon, accelerating rapidly at the beginning and decelerating smoothly at the end
2. Follow the above principle and shorten the duration of the starting animation to make it feel like it's reacting "fast".
3. Follow the above principle and lengthen the duration of the exit animation to make it feel like a "soft".
4. Larger objects have a longer duration than small
5. The duration inside the nested object should also be long

The limitations of the GIF format make it look choppy, but it's actually smoother

Background Color

Arrow rocate

Container Tab

Sound & Pinned Tab

Sidebar

The same applies for optional features that are not default.

Autohide Back Buttonr

Autohide Page Action

Autohide Tab Bar

Illustrations

Photon's friendly illustrations reduced the embarrassment of the error.
So I restored it.

Of course, it's great for a welcome

Welcom back

DNS error

Session restore

Search result

Conclusion

This theme takes into account customs, psychology, and research findings and inherits the best of the existing themes.
It also supports OS, dark mode, custom themes and interactions to suit your situation.

Of course, there are some things we can't do due to the limitations of CSS, like page action button behavior.

Now, you should have a better idea of the goal of my theme:
"🦊 I respect proton UI and aim to improve it."