Let’s
explore how the user experience (UX) and user interface of some of the most
prominent online services have changed over the years. We will be examining how
Mozilla’s open-source browser Firefox has evolved since version 1.0 launched in
2004.
Firefox has gone through many changes (60 versions to be precise), and one of the most recent ones, Firefox Quantum, has been widely seen as one of the most significant refreshes, and heralded as a comeback to compete with Google Chrome.
We talked to Stephen Horlander, principal designer for Firefox at Mozilla, about evolving the UX of the browser, the role of user research and prototyping, and what’s next for Firefox.
What was Firefox’s user experience like at the very beginning?
Firefox
(initially called Phoenix) was an intentionally pared-down experience. The goal
was to distill the complex Mozilla Suite into only the essential components
needed to browse the web.
The
result was a more accessible and faster browsing experience. The flipside was
that this meant a lot of the features that had evolved over the years were
either discarded or reverted to more basic functionality.
While
this meant that some features people were used to were no longer available, it
also allowed for new opportunities. It created the space to add new things that
could make the modern web more manageable and enjoyable, like pop-up blocking,
tabbed browsing, and a search bar for directly using a search engine from the
browser toolbar.
How has the UX changed over the years?
While
many things have been added (and removed) over the years, the core
functionality and focus on navigating the web have remained consistent. Most of
the changes have been in building features and functionality to support that
foundational experience.
Since
Firefox started off as a reimagined take on what a web browser could be, many
of the pieces could be rebuilt based on current needs and changes to how people
used the internet. This resulted in key user experience changes, like a more
expansive library for storing and retrieving the things you find on the web;
the ability to restore your browsing session, making it easier to pick up where
you left off; and the “Awesome Bar,” an improved location bar that adapts to
your behavior and surfaces the most relevant item — whether that is a URL, a
history item, a bookmark, or a currently open tab.
The
web has changed a lot over the 15 years since the first release of Firefox.
Websites have gotten larger and more complex, and we have seen the rise of more
(and more prevalent) forms of tracking users’ behavior online.
Firefox
has adapted to these changes in the environment with tools like the Private
Browsing Mode and Tracking Protection to help protect people both on their
local machines and online from website trackers.
Over
the same period of time, the amount and types of devices that people use to
access the web have changed dramatically. Smartphones as we view them today
didn’t even really exist at the time Firefox was released. Now smartphones are
nearly ubiquitous and the internet is on your TV, your wrist, in your
lightbulbs, and a variety of other devices. This has made syncing your data
between your devices, including your browsing data, an important means of
keeping track of information and tasks.
We have also had to adapt to changes in the underlying operating systems that Firefox runs on. Many interaction and visual changes have occurred from Windows XP, to Windows 7, to Windows 10, with a similar and comparable level of changes on macOS, Linux, Android, and iOS. Firefox now incorporates system-level functionality like system notifications and adaptive interface changes for hybrid devices that have touch screens and keyboards.
The
visual look and feel of Firefox have also changed several times throughout the
years to reflect both the ever-changing aesthetics of OS environments, as well
as expressing its own brand and aesthetic values.
Most
of last year was spent working on Firefox Quantum, which is probably our most
extensive refresh ever. It comes with an entirely new visual look and feel,
more system integration, new UI surfaces that highlight the sending, saving,
and retrieving of your data, and perhaps most importantly an updated rendering
engine that is much faster and more responsive.
What are the main considerations in evolving the UX of the browser?
One
of our main considerations when evolving the UX of Firefox is trying to make
sure we are addressing what people need in the constantly and rapidly changing
landscape of the internet. Reducing the interaction cost that users face while
they work with Firefox is one of the main goals that we have. Let’s take a
typical example – sending an email. Many websites display their contact email
addresses as mailto: links. When the visitors click or tap on such links, it is
causing the launch of their default mail client or web-based email service. But
Firefox users that have Gmail accounts can modify the browser’s settings so
that it automatically goes to their default configuration whenever a mailto: link
is clicked.
A
lot of this effort involves carefully balancing the adding of new things that
we think will be meaningful, with the removing or changing of things that are
not as relevant or as useful as they should be.
Web
browsers serve an important function for people: they are the view into the wider
world of the web, they are a user’s agent in accessing and displaying a vast
amount of variable content. Firefox needs to help users navigate the web, but
should only help as much as a person wants it to help or needs it to help.
What role does user research play in the design process?
User
research serves different roles at different stages in the design process.
Early in the design process, we do research to try and figure out how people
use the web, what role browsers currently play, what their goals are, and what
obstacles they are encountering with their available tools. We consider what
other technologies and systems they are currently using to solve these
problems.
Then we ask ourselves if there is an opportunity for us to solve these problems more directly, or whether we can elevate the tools people are already using to solve their problems. A good example of this for us is the Screenshots feature we recently added. Our research showed that people use screenshots as a way to remember, share, and save information. So we enabled that directly in the browser as an easier way for people to capture and share that information.
Later
in the design process, we use user research to evaluate how close to the mark a
solution is.
How do you prototype and test the user experience at Mozilla?
We
use different levels of prototyping at Mozilla. For early-stage ideas, we use
low fidelity wireframe prototypes to get a feel for whether something
seems promising and do some user testing on those. When things are further
along, we occasionally use higher fidelity HTML/CSS/JS prototypes to communicate a more realistic level of
functionality.
What’s next for Firefox’s UX?
We
are currently focusing most of our efforts on continuing the work we started in
2017 with Firefox Quantum — which means continuing work on enabling faster and
more responsive web experiences. A lot of the enjoyment and utility people get
from the web is related to how fast it works for them. As websites get larger
and more complex, things tend to bog down. Doing everything we can to make
those experiences be faster, and feel faster, is important.
In
conjunction with that, we are always working to improve Firefox’s ability to
increase privacy and to shield people from increased levels of web tracking.
This means making our Tracking Protection technology more robust and powerful
so that people can have a cleaner and faster browsing experience.
Another thing we’re focusing on is increasing options for customization. This includes expanding the capabilities available to browser extensions, like enabling more extensive tab management options. We are also expanding the capabilities of themes to include more UI surfaces and options. This will enable users to take Firefox beyond the default experience and make it look and act exactly how they want.
Read more UX evolutions for Netflix, Medium, Dropbox, Etsy and Gmail.