Re-imagine Firefox on tablet

Yuan Wang

0

Nowadays mobile space is dominated by applications that are created for mobile phones. Designers often start designing an application for phones first and then scale it for tablets. However, people interact with tablets quite differently due to the unique context of use. For a browser on tablet, you may find people use it in a kitchen for recipes, on a couch reading or shopping, or at home streaming music and videos. How can Firefox innovate and re-imagine the experience for tablet users?

Reimagine-Firefox-on-tablet_banner

Design process

Beginning in January 2014, mobile Firefox UX designers started envisioning solutions for an interesting challenge: a Firefox browser that is optimized for tablet-specific use cases and takes full advantage of tablet form factor.

The team defined two main user experience goals as the first milestone of this project.

Questions.001 Questions.002

To quickly test our design hypothesis for these two goals, I came up with a 10-day sprint model (inspired by Google Venture’s 5-day sprint) for the mobile Firefox UX team. I prototyped a few HTML5 concepts (GIF version) using Hype and published them on usertesting.com to get initial feedback from Android users.

What we learned from the sprint testings:

  1. Desktop controls were familiar to participants and they adopted them quickly
  2. Visual affordance built expectations
  3. Preview of individual tabs was helpful for tab switching
  4. Tab groups met the needs of a small set of tablet users
  5. Onscreen controls required additional time to get familiar with

Based on what we have learned from design sprints[full report], I put together an interaction design proposal for this redesign[full presentation]. To help myself and the rest of the team understand the scope of this redesign, I divided the work into a few parts, from fundamental structure to detailed interactions. My teammate Anthony Lam has been working closely with me, focusing on the visual design of the new UI.

Design Solution

The new Firefox on tablet achieves a good balance between simplicity and power by offering a horizontal tab strip and a full-screen tab panel. Designed for both landscape and portrait use, the new interface takes full advantage of the screen space on tablet to deliver a delightful experience. Here are some of the highlights.

1. Your frequently used actions are one tap away

The new interface features a horizontal tab strip that surfaces your frequent browsing actions, such as switching tabs, opening a new tab, closing a tab.

Tablet Refresh Presentation.001

2. Big screen invites gestures and advanced features

A full-screen tab panel gives a better visual representation of your normal and private browsing sessions. Taking advantage of the big space, the panel can also be a foundation for more advanced options, such as tab groups, gestural actions for tabs.

Tablet Refresh Presentation.002

3. Make sense of the Web through enhanced search

The new tablet interface will offer a simple and convenient search experience. The enhanced search overlay is powered by search history, search suggestions, your browsing history and bookmarks. You will be able to add search engines of your choice and surface them on the search result overlay.

Tablet Refresh Presentation.003

4. You have control over privacy as always

Private browsing allows you to browse the Internet without saving any information about which sites and pages you’ve visited.

Tablet Refresh Presentation.004.png.001

Future concepts

Besides basic tab structure and interactions, I have also experimented with some gestural actions for tabs. You can view some animations of those experiments via this link. I also included a list below with links to Bugzilla. If there is a concept that sounds interesting to you, feel free to post your thoughts and help us make it happen!

  • Add a new tab by long-tapping on the empty space of horizontal tab strip [Bug 1015467]
  • Pin a tab on horizontal tab strip [Bug 1018481]
  • Visual previews for horizontal tabs [Bug 1018493]
  • Blur effect for private tab thumbnails [Bug 1018456]

 

The big picture

Many of the highlighted features above, such as enhanced search, gestural shortcuts, can be adopted by Firefox Android on phone. And you may have noticed the new interface was heavily influenced by the simple and beautiful new look of Firefox on desktop.

Based on screen-sizes, tablet is a perfect platform for merging consistency in between desktop and phone. Focusing on the context of tablet use, Firefox Android on tablet will establish itself as a standalone product of the Firefox family. We are excited to see a re-imagined tablet experience make Firefox feel more like one product — more Firefoxy — across all our platforms, desktop to tablet to phone.

Tablet Refresh Presentation.005

 

Currently the mobile Firefox team is busy bringing those ideas to life. You can check out our progress by downloading Firefox Nightly build to your Android tablet and choose “Enable new tablet UI” in the Settings. And stay tuned for more awesomeness about this project from Anthony Lam, Lucas Rocha, Martyn Haigh, and Michael Comella!

Click Here to Upgrade Your Starship

athornburgh

1

Stardate 53849.2 – the Delta Quadrant

Captain Kathryn Janeway of the Starship Voyager stands up from her chair, at the ready. Moments ago, the ship had lost warp power and the crew suddenly found themselves adrift. But before the Captain could request a status, a bright prick of purple light erupted on the main monitor, fading away into the strange, iridescent anomaly everyone now sees before them. Everyone has ceased their activity to watch the swirling cloud of unidentified origin or makeup, growing ever larger on screen.

“Tuvok, report!” Janeway commands with confident urgency.

The Vulcan looks down at his console. “Captain, it appears that we have entered a temporal distortion field caused by the object ahead, and…”

A new panel slides into view on his screen. In simple, futuristic type, a message appears:

Error 606: Offline Mode

It appears that you have temporarily lost connection. You may be outside of our Preferred Starship Network Coverage Area.

We are rapidly expanding in the Alpha and Gamma Quadrants, and hope to be in the Delta Quadrant by Q4 of next year. Until then, you will have limited access to the features equipped on your starship.

Click here to learn more about the offline services available on U.S.S. Starship OS 9!

“Commander?” Janeway snaps, hands now on her hips.

Tuvok taps a small, gray button to dismiss the message. “My apologies, Captain. Voyager’s systems appear to be in… offline mode.”

“What? That can’t be right. This starship came equipped with the latest interstellar communication devices, which have served us well this far.” The Captain looks back at the enormous screen – the spiraling clouds converge to form a glowing, periwinkle vortex. “Never mind.”

“Engineering, can you restore power to the primary warp coils?”

“No, Captain – not in offline mode,” Chief Engineer B’Elanna replies hurriedly. “But we do have access to our secondary thrusters,” she adds optimistically.

Janeway pauses for a brief moment. A small, impossibly black hole is emerging from the center of the vortex like an expanding pupil. She turns to Tom.

“Lieutenant Paris, can you alter our current position, or at least put some distance between us and whatever that is?” she says, pointing.

Tom taps furiously at his screen, “On it, Captain.” Just before he initiates the final command to engage the thrusters, a video layer appears. There is a brief, but interminable moment of silence.

“I’ll have thrusters shortly. I just need 15 seconds until I can skip this ad and–”

“We don’t have 15 seconds, Tom.” she says over him. The Captain walks urgently towards the other side of the bridge and steps down onto the lower platform to take control of a vacant console. The iris is almost fully dilated, an ever-growing abyss of nothingness.

Janeway activates the communicator pinned to her chest, “Seven, what is your analysis?”

Over the intercom, Seven of Nine replies matter-of-factually, “Captain, we have lost control over our propulsion and long-range communications. All other systems are stable. I still have access to our primary–”

There is an awkward pause. There are no more spinning purple clouds on the screen, or distant stars beyond. Only blackness.

“Captain, what is your User Name and Password?”

Everyone looks at one another, and then at the Captain. Irritation flashes across her face. Janeway inhales.

“Captain Kathryn Janeway of the U.S.S. Starship Voyager, Starfleet Authoriza–“

Seven interrupts, “No, not for Starfleet. I need your log in credentials for Starship OS 9 – Voyager’s native operating system.”

Just as Janeway opens her mouth to respond, a sudden, invisible shock-wave rips through Voyager – violently shaking the starship with such force that a few crewmen are knocked unconscious. While the hull quivers and moans from the force of impact, senior officers reach for a grip or attempt to stand. Rumbling continues to deafen everyone on-board, interrupted only by the metallic shrieking of large, structural objects. A few of the petty officers assume the fetal position beneath their stations. First Officer Chakotay yells something. Tuvok somehow steadies himself, only to loose his balance again. For a few moments more, all is chaos.

And then nothing.

Everything is absolutely silent, still and serene. The main monitor is black, but presumably still active. Objects of various size and mass are haphazardly thrown about the deck, lying motionless, as though placed on purpose long ago. Captain Janeway is up on one knee.

Chakotay fixates on the main monitor. “Captain, look!”

A small pillar of tightly twirling, iridescent clouds appears in a moment on the deck directly below. Everybody recognizes the violet glow immediately. Nobody breaths. Then, just as quickly, the vaporous shapes collapse into a universally identifiable form: a human male. He is smartly dressed in a simple, charcoal suit and tie.

“Yes, even my tie is purple!” the man begins with bright smile and outstretched arms. “I hope it wasn’t overkill, Captain Janeway.”

The crewmen quickly head back to their various stations in a coordinated burst of nervous activity. The Captain looks stunned, yet she manages to stand tall, adjust her uniform, and speak.

“Explain yourself!” She nearly shouts. “Who are you, and what is the meaning of this?”

“First, let me assure all of you that no one is an any danger.” The man looks directly at Tuvok, and then Chakotay, who are training their phasers at him. “At least not insofar as it has anything to do with me,” he adds with a wink.

Janeway stands with one hand on her hip, jaw set. “Explain. Now.” She glances at her two senior officers.

Still smiling, the man continues, “Of course, Captain.”

“I am not so much a person, as I am the representation of the Starship Interstellar Travel and Communications Network, and its intergalactic subsidiaries, in holographic form. Think of me as your visual interface between you, Starship OS 9, and the parties that offer this amazing – free – software.”

The Captain blinks. She does not look pleased.

He turns his palms toward the crew and shrugs. “But you can call me Steve, if it makes things easier.”

“And Steve, are you responsible for the loss of our warp drive capabilities?”

“Yes,” he answers calmly. “I’ve also taken control of your startship’s primary and secondary functions – for your own safety, of course. More importantly, I’m not materially real or even ‘here’ aboard this ship, so you couldn’t harm me even if you tried.”

Janeway considers the intruder’s words. “Tuvok?”

“Confirmed, Captain,” the Commander replies as he glances down at his monitor, then back at Steve.

Without breaking eye contact, the Captain raises her hand, signaling her crew to stand down. Tuvok and Chakotay exchange doubtful glances before lowering their weapons. The other officers are frozen in a state of hyper-alertness while Janeway walks deliberately over to her Captain’s Chair. Turning to face Steve, she lowers herself into the sparsely upholstered seat and crosses her legs. With hands folded, Janeway resumes.

“Well, Steve, you have our undivided attention. Let’s get on with it so we can continue our journey back to Alpha Quadrant.” She pauses for effect, and then asks harshly, “What do you want?”

“Certainly, Captain. Perhaps the grand entrance was a bit much. The marketing guys always want to deliver a compelling, memorable experience. Anyway,” he stands up a little straighter. “–this starship, its operating systems, and transmission of all subspace communications throughout the Universe, are now the sole property and responsibility of the Starship Interstellar Travel and Communications Network.”

Before Steve could continue, Chakotay interrupts. “That’s impossible! We demand to speak with Starfleet!”

Steve smiles anew. “Starfleet was consolidated, along with numerous other well established Network Providers, into a single, new entity through an intergalactic inversion with the parent company, Interstellar Systems.”

“Wait. What?” The First Officer is genuinely confused.

“They bought Starfleet, Chakotay.” The Captain is holding her head in her hand, shoulders dropping slightly.

“Fascinating,” Tuvok states.

B’Elanna interjects, “That’s right, I recently heard some rumors about a merger with all the big players–“

“Inversion…” Steve corrects.

“-Starfleet, the Vulcans, Romulans, Klingons, Ferengi, Betazoids, Bajorans – even
the Borg. Pretty much everyone, I think.”

“Indeed” Steve says with a sense of endearment a father would bestow upon his first child.

Then, sitting back in her chair, Janeway places both her hands on the armrests at her side. “I’ve heard enough. You still haven’t told us what it is you want with Voyager or its crew.”

Standing in his original position, the hologram nods in agreement. “Right.” Steve looks over to the Vulcan.

“So, you lost warp drive and access to your devices because the area you’re currently traveling in – the Delta Quadrant – is outside the coverage area for Basic Access. Due to the substantial investment required to bring Extended Access to the most remote expanses of the Universe, access will be provided only to Premium Travelers who have upgraded from U.S.S. Starship OS 9 to Starship X.”

He looks back to Captain Janeway. “Since your starship happened to be in the Delta Quadrant before this policy was enacted, we’re offering you the opportunity to upgrade to Starship OS X – for free! Only now, you’ll have a host of new features and tools to help you along your journey.”

The man’s smile softens into a disarming grin. His pleasant disposition is not enough to soften the Captain or put the crew at ease. Her eyes narrow as she leans forward, “And what do you get in exchange for our consent to this… upgrade?”

“That’s the easy part!” Steve exclaims. “The information you create, share or consume on Starship OS X will be collected by the Starship Interstellar Travel and Communications Network. This information will be shared with our partners so that we can continue to offer innovative new features that will make your voyage home a better experience!”

“In other words, you’ll know everything that we do?” Chakotay is finally catching on. “And you might share that information with your partners?”

Steve answers while adjusting his tie, “Yes. Technically.”

“…Partners which include the Klingons, Romulans and the Borg?” His voice now intensifies, “Our enemies?”

“Whoa there,” the man retorts. For the first time, the holographic image walks across the deck towards the crew. “First of all, your privacy is very important us. We would never share your personal information with anyone outside The Network; and even then,” Steve presses his hands together to gesture, “none of your sensitive information is personally identifiable. Thus, if any malicious third party somehow managed to ‘steal’ your data, it wouldn’t do them any good. Besides, we use the most sophisticated encryption available in the entire Universe.”

“I still don’t trust you!” Chakotay shoots back, pointing his finger squarely at Steve. “How can we be certain of anything you’re telling us?”

Steve shifts to one leg and folds his arms, “Commander, I think you’re missing the larger picture here.” Looking down, thoughtfully, he cocks his head to one side. “Consider the value you’re getting: In return for doing the very things you’d be doing anyway, your starship will finally be able to communicate with Earth. You’ll also be able to chart a more efficient course, navigate through uncharted territories with ease, and deploy your weapons more effectively.” Beaming, Steve adds, “Plus, you’ll have access to over 30,000 new recipes for your Replicator, from cultures all throughout the Alpha and Gamma Quadrants!”

Chakotay furrows his brow. “And you can’t get us home?”

The expression on Steve’s face turns blank. “No.” He purses his lips. “Unfortunately, The Network only supplies the equipment and the system which enables communication between approved devices. What you do with them is entirely your perogative and responsibility.”

“But you can get to us!?” The former Maquis leader shouts while pounding his console with one fist.

Looking back down at the deck with his hands clasped behind his back, the hologram says, slowly, “It’s… complicated. Particularly the special effects part.” Chakotay is about to say something when Steve raises his finger, “But remember, I’m not really ‘here’. I never ‘got’ to you,”  he gestures air quotes, “because my program has lied embedded within your starship’s mainframe since you installed Starship OS 9.”

“Dammit, I knew we shouldn’t have updated!” Ensign Harry Kim inadvertently exclaims.

The Captain takes two steps forward and interjects with stern clarity, “Gentlemen, this is ridiculous. Enough of the chit chat. We still have a long way to go before we reach home, and this is wasting precious little time.”

Janeway takes a moment to survey her crew, then faces the parasitic hologram. “What do you want me to do?”

Steve smirks, “I thought you’d never ask!” He reaches around his back and then walks towards the Captain with hands outstretched. He is holding a thin, glossy tablet displaying two lines of text and large, pill shaped button.

Hello, Voyager!

Accelerate your journey with the latest tools and features found only on Starship OS X:

Click Here to Updgrade Your Startship

“Assuming you agree to the terms and conditions, all you have to do it click this button. I will then automatically install Starship OS X.” He taps the edge of the tablet for emphasis. “Easy, right?”

Janeway steps closer to Steve, reaching for the tablet, and taps the tiny link labeled Terms & Conditions, just below the big, purple pill. A new overlay appears: a single column of inscrutable, tightly spaced lines of gray text against a solid, white background. An indicator shows ‘Page 1 of 97’. She sighs.

“Captain?” Tuvok asks.

Without looking up at the Vulcan, Janeway responds, “Yes Commander?” She begins to scroll through the pages, scanning for headlines or anything set in bold type.

“If I understand correctly, Captain: By pressing that button, you will effectively be handing over all of Voyager’s data transmissions to the Starship Interstellar Travel and Communications Network, a multigalactic corporation whose primary investors include our most ardent enemies, in exchange for a slightly better Operating System than we had before?”

Janeway closes the window and returns to the original screen. “Yes, Tuvok” she responds with utter resignation.

“And if we don’t upgrade, then we will be stranded – perhaps indefinitely – in the Delta Quadrant?” the Vulcan asks with his eyebrows pinched together.

“Ostensibly, Commander,” she states impatiently, nodding to Steve, who is watching the exchange with great amusement.

“That is illogical, Captain,” Tuvok retorts.

“Agreed.” Janeway takes a deep breath in, smooths the sides of her perfect bun, and pivots to face the well-dressed figure of diffracted light. “But we have no other choice.”

Steve extends his arms to present the brightly lit screen. “Done with the chit-chat, Captain Janeway?” he teases.

She looks squarely into his holographic eyes, unsmiling, and presses the purple button.

Promptly after tapping the screen, another shock-wave rips through Voyager, knocking the crew onto the deck of the bridge one more time. Tremors continue for a few more moments, reanimating objects that had previously fallen. On the main monitor, stars reappear as the black void collapses, pulling the spiraling fingers of luminous, purple vapors inward like an enormous drain. The aberration quickly shrinks, much faster than it had appeared, until the hole itself closes into a pinprick, culminating in a brief flash of violet light. As the crew stands to their feet and regain their composure, Steve is still standing in his original position.

With an apologetic tone, he breaks the silence, “So sorry – I’ll have to talk to the User Experience Team about that.” Then, flashing a toothy grin and raising his hand to wave, he bids farewell. “Thank you, Captain Janeway! It’s been a pleasure!” Steve’s form bursts into a spinning vaporous tower, before collapsing onto a single point of light. He is gone. Abruptly, all the displays on-board flicker, producing new, beautiful interfaces. A message appears above on the primary screen:

Welcome to Starship OS X

Nobody says a word at first. Ensign Kim raises his fist and coughs, once.

The image on screen dissolves into the familiar canvass of black, punctuated by endless stars in all directions.

Janeway stands tall before her chair, relieved and confident once again. She looks intently into the deep of space and begins to command, “Lieutenant Paris–”

“Captain?” Tuvok interrupts, again. He cannot let the conversation go.

Without blinking, Janeway answers, “Yes, Commander?”

“I still do not understand why everyone in the known Universe would allow their activity to be broadcasted to opaque, corporate entities — which will now have control over our starships and communication systems — in the name of cheap, abundant access to the latest technology.”

The Captain closes her eyes, but otherwise remains completely still. “Rational or not, it’s the reality we have apparently created.”

Tuvak raises a skeptical eyebrow. “Then it is unfortunate that we failed to consider whether this is the reality we really wanted.”

Janeway opens her eyes, looks over to her Lieutenant, and concludes the discussion.

“Tom, resume our previous course. Warp 9.”

“Aye Captain,” he responds happily.

Kathryn turns to gaze at the image of space on screen. It no longer seems so infinite.

“Engage.”

[ROLL CREDITS]

India Firefox OS User Research

Gemma Petrie

4

India Photo

Bangle shop & mobile phone break in Jaipur, India. (Photos by Gemma Petrie)

This research was led by Cori Schauer & Gemma Petrie.

Last month, Mozilla traveled to India to conduct user research on mobile usage. We are grateful to our talented research partners Dear and Tazurba International for their expert local knowledge, to the amazing Delhi and Rajasthani Mozilla communities who provided critical logistics and translation support, and to the many Mozilla staff members that took time out of their busy personal and professional lives to join us in the beautiful (and blazing hot!) Indian summer.

Field Team

The Mozilla User Research team believes it is important to bring a wide variety of colleagues into the field with us for research. We know that first-hand experience does more to build empathy and understanding than a presentation ever will. This trip marked our largest field team to date and included:

  • Jared Cole, Design Strategist
  • Francis Djabri, FxOS UX Designer
  • Peter Dolanjski, FxOS Product Manager
  • Sandip Kamat, FxOS Product Manager
  • Bruce Huang, FxOS Product Manager
  • Juwei Huang, FxOS UX Designer
  • Elizabeth Hunt, Marketplace UX Designer
  • Jane Hsu, FxOS Go-To-Market Strategy/Partnerships
  • Rina Jensen, Content Strategist
  • Amy Lee, FxOS Visual Designer
  • Peiying Mo, L10N Program Manager
  • Arky, L10N & Community Rep
  • Rob Rayborn, User Advocacy
India 2

The mausoleum of Sufi saint Nizamuddin Auliya in Delhi & a colorful truck on a Rajasthani highway. (Photos by Gemma Petrie)

Research Plan

We aimed to answer the following questions with our research:

  •     Who are the people in our target market(s) in India?
  •     What motivates someone to purchase a mobile device?
  •     What can Mozilla enable people to do with a Firefox OS device?
  •     How can Mozilla make a difference?

India is a vast and varied country and it was difficult to design a research approach that would cover multiple regions with adequate depth in the time we had available. We decided early on to focus this initial phase of our India research program in the north, specifically in Delhi, rural Rajasthan, and Jaipur.

This research used a variety of methodologies to gather data. We conducted one-on-one interviews in Delhi and Jaipur and worked with community members and local researchers to meet with local families, shopkeepers, and visit rural villages. In addition, we also conducted informal ethnographic observation during our two weeks in India.

India 3

Pre-loaded content & mobile usage in rural Rajasthan (Photos by Gemma Petrie)

Ethnographic Observation

One of our primary goals was to immerse our field team in Indian daily life and culture. Our large group and broad geographic research area presented some initial challenges during our planning stage. We made the decision to engage dscout to bring some order to our data collection and help field team members that were new to research think about how to capture and analyze their experiences.

We split each day into two modules with different themes like phone stores, mobile content, or family. We then divided our field team into small groups, accompanied by Mozilla community members, to explore different areas. Each group added photos, videos, and answers to a few short questions to dscout, allowing us to quickly gather a large amount of structured information on each theme. This data, combined with our team’s first-hand field experiences, provided a valuable contextual foundation for our research.

Mobile Open Houses

We conducted one-on-one interviews with 55 recruited participants at “Open House” events in Delhi and Jaipur. The interviews were split into four main topic areas: Current phone and technology usage, phone purchasing process, mobile content, and Firefox OS device user testing.

We’ll be sharing our findings from the Open Houses and our other research activities soon. Stay tuned!

UX Book Club: UX for Lean Startups

mhanratty

Get your carving knife, its time to trim the fat and start working lean. With the success of Eric Ries’s book The Lean Startup minimum viable product, A/B testing and validated learning are on the lips of every 23 year-old CEO and product manager in Silicon Valley. But what is the philosophy behind lean development and how do UX designers and researchers fit in? Laura Klein, author of UX for Lean Startups, joined us on Tuesday, May 28th at the UX Book Club San Francisco to discuss her book and her experiences designing lean.

WHAT IS LEAN?

Come up with a hypothesis. Test it. Repeat until you have a product people will buy/use. Lean methodology at its core is the scientific method we all learned in grade school. So how do you start applying this approach to product design? Klein suggests the following:

1. Identify the riskiest assumption of your product or feature.

2. Design an experiment that will validate (or invalidate) your assumption.

3. Release your experiment to your customers.

An example used in the book is Dropbox. The riskiest assumption for Dropbox was their belief of a consumer desire for personal cloud storage that synced across devices. To test this assumption the Dropbox team created a video of how the service would work. If you watched the video and liked what you saw you could sign-up to get the product when it was released. Thousands of people signed up and the team knew there was a need for their product before committing the resources to build the service for real. Figuring out the smallest thing you can build to test your assumption is key–you don’t want to write a bunch of code for something that no one wants. As Klein said to us, “The question usually isn’t, ‘Can you build it?’ The question is, ‘Should you build it?'”

HOW IS THIS DIFFERENT THAN USER-CENTERED DESIGN?

Lean is a lot like user-centered design. It advocates for what we as designers and researchers have been screaming about for years–test with your customers before you release your product. Klein believes however that while user-centered designers are skilled at testing the usability of a solution, we often fail to validate the usefulness of a solution. Usefulness is tied to your business objectives. Does the feature increase customer acquisition, improve retention, increase profits, etc.? You can design and implement a fantastic commenting feature, but if commenting doesn’t lead to growth or profits then it isn’t particularly useful is it? There is a strong emphasis on quantitative data and analytics in lean. To understand if what you have designed actually has an impact on your product’s bottom line you need to identify and track the metrics that tell you whether you are headed in the right direction or are veering off track.

WHY SHOULD I READ THIS BOOK?

Even if you don’t work at a startup you will find useful lessons and a powerful framework for product design in UX for Lean Startups. For designers and researchers I suggest skipping Eric Ries’ book The Lean Startup and reading this book instead. It’s shorter and you won’t have to muddle through chapters geared toward MBA students. Note: UX for Lean Startups doesn’t get much into the nitty gritty of analytics. To learn more about what metrics you should be tracking pick up Lean Analytics by Alistair Croll and Ben Yoskovitz.

(Re)Designing Firefox

Stephen Horlander

6

Update — 2014/05/28
I added a slideshow of some of the design iterations we went through from Firefox 4 to Firefox 29.

Warning: It’s image heavy, might take a while to load on a slow connection.


So, we launched a thing. You may have noticed it. We called it Australis. Now it’s just called Firefox.

We spent a lot of time on it.

Dedicating yourself to a project can become an intense experience. You think about it all the time: in the morning, at dinner, when you are trying to watch a movie, in the shower, in your sleep, when you should be sleeping…

But then you set it free, because it’s finally mature enough for that. It’s exciting. But it’s also really scary. You are never sure if you made the right decisions along the way. I like to take some time in the post release glow for some reflection.


History

Left: Firefox 4, Right: Firefox 29

So how did we get from there to here?

We launched Firefox 4 in March 2011. It was a big change from Firefox 3. It introduced the Firefox button, revamped the add-ons manager, removed the status bar, combined the stop, go and reload buttons and included a comprehensive visual update—all while still having time to prototype and discard some other features along the way.

And yet it wasn’t perfect. It had a lot of the rough edges that projects accumulate in the process of going from being designed and built to being shipped.

Firefox 4 was our last monolithic release before we moved to a rapid release cycle. Six week cycles seemed like the perfect timeframe to iteratively smooth out the rough edges. So I created a project to do just that.


Philosophy

The project that I had created for iterative refinement however quickly transformed into a significant overhaul.

People in the frame: Sinchan Banerjee, Alex Faaborg, Brian Dils, Trond, Stephen Horlander (my legs), Jennifer Boriss, Frank Yan, Alex Limi
Taking the picture: Madhava Enros

At the beginning of June the UX team met up for its first post Firefox 4 team offsite. On the agenda was figuring out “What’s next?”. The entire team gathered in a room to pitch ideas and talk about problems unresolved—or that had been introduced—during the development of Firefox 4.

One theme that had been floating around for a while rose to the surface— Firefox is about customization, it should feel like it’s yours.

What would this mean for the interface we had just shipped? A lot of ideas were tossed around. Eventually one guiding principal stuck—make the best core experience we can and allow users to add and change the things that matter the most to them.

Building a fun easy to use Customization Mode—along with a more flexible Firefox Menu—would become the foundation of the new Firefox.


Visual Profile

So Curve, Such Aerodynamic

The offsite also sparked a set of other ideas that would make up what became known as Australis. Primarily: unifying the disparate bookmarking elements in the main window, refining the visual design, consolidating related or redundant features and streamlining the tabstrip.

While the redesigned customization mode would be core to the experience—the redesigned tabstrip would change the entire profile of Firefox.

“Make it look faster. No, no! It needs more air vents!”
Firefox 4 Aerodynamic Sketch — 2010

We had explored the idea of adding visual cues to Firefox to make it feel faster and smoother before. Yet some of the ideas were a little over the top.

Curvy Tab Sketch — June, 2011

This sketch from the design session—inspired by a previous mockup from Trond—had a curvy tab shape that immediately resonated with everyone.

It also had one important additional design tweak—only render the tab shape for the active tab. Highlighting the active tab reduces visual noise and makes it easier to keep your place in the tabstrip.

The early curve shape tried on a few looks. At first it was too angular, then it was too curvy, then it was too short, then it was too tall and then (finally) it was just right.

Design ideas for background tabs on Windows — October 2011

It turns out that designing background tabs without a tab shape is a lot easier if you have a stable background to work with. Windows 7 has translucent windows of variable tints and Windows 8 has flat windows of variable color. This meant we needed to create our own stable background.

We went through several variations to ensure that the background tabs would be legible. First we tried creating a unified background block, but it seemed too heavy. We even thought about keeping background tab shapes and highlighting the active tab in some other way.

Eventually we decided on a background “fog” that would sit behind the tabs and in front of the window. Think of it as an interface sandwich—glass back, curvy-tab front with a delicious foggy center.

We also made sure that adding curves didn’t increase the width of the tabs taking up precious tabstrip real estate. And we removed the blank favicon placeholder for sites without favicons. A small tweak that frees up some extra room for the title.


Menu Panel and Customization

Redesigning the Firefox Menu

One size really doesn’t fit all with something as complex and personal as your web browser. Add-ons have always made Firefox a thoroughly customizable browser, however arranging things has never been a great experience out of the box.

But before we could tackle the customization behavior, we had to rethink the Firefox Menu.

The main toolbar is the primary surface for frequently used actions; while the menu is the secondary surface for stuff you only use some of the time. We wanted users to be able to move things between these surfaces so they could tailor Firefox to their needs.

For the updated layout we started with the idea of a visual icon grid. This grid nicely mapped to the icons already found on the toolbar and would ideally make moving things back and forth feel cohesive.

Larger 3×3 Grid with Labels—by Alex Faaborg<

The first grid we designed was wider, with smaller icons and no labels. This quickly changed to a three column grid with larger labeled icons. The updated layout served the same goal but was more clear and also less cramped.

Not everything we currently had in the Firefox Menu would translate directly to the new layout. We had to add special conjoined widgets—also known as “Wide Widgets”—for Cut/Copy/Paste and the Page Zoom controls. We also added a footer for persistent items that can’t be customized away. We did this to prevent users from getting into a broken layout with no escape hatch.

We had some serious debates about whether to use a an icon grid or a traditional menu list. The visual grid has some drawbacks: it isn’t as easy to scan and doesn’t scale as well with a lot of items. But the icon grid won this round because it was more visual, more inline with what we wanted out of drag-and-drop customization and had the side benefit of being touch friendly.

Some items from the Firefox Menu had submenus that could’t be easily reduced to a single action: Developer Tools, History, Bookmarks, Help and Character Encoding. Nested submenus hanging off of a panel felt pretty awkward. We had several ideas on how to handle this: inline expando-tray™, a drawer(interactive mockup—click History) and in-panel navigation.

We settled on what we call subviews(interactive mockup—click History). Subviews are partial overlays containing lists that slide in over the menu. Click anywhere in the partially visible menu layer to get back to the main menu—or close the entire menu and reopen it.

With the new menu layout Firefox should hopefully work just fine for most people out of the box. But by using the new Customization Mode you can really tailor Firefox to your needs. If you are interested in knowing more about why what is where Zhenshuo Fang wrote a great post about it.


Customize All the Things!

Now we needed to figure out how update Firefox’s aging customization experience. Things started off a little ambitious with the idea that we could combine toolbar customization, themes and add-ons into the same UI. This led to an early interactive demo (it does some stuff, hint: tools icon –> plus sign) to try and see if this would work.

This demo surfaced a few issues: 1) including add-ons was going to be complicated 2) we needed a direct representation of the menu panel instead of a proxy. This led to a bunch of mockups for a flatter interface sans add-ons integration. Eventually I made a second demo without the theme selector that is closer to what we ended up shipping. Then Blake Winton turned that into an awesome prototype that actually did something.

Final Customization Mode

The demos and prototypes helped us quickly get feedback from people on the idea. One of the complaints we heard was that it wasn’t obvious that you were entering a mode. We mocked up a lot of ideas for various ways to give visual feedback that you were in a mode and could now rearrange your stuff. We eventually settled on a subtle blueprint pattern and Madhava suggested we add some kind of animation with padding.


Wrapping it up

Thank you to everyone who dedicated so much time and effort into making this happen.

If you want to know more about the people and process behind Firefox 29, Madhava has a good post with an overview.

I think the post-release glow is over now. Time to get back to making Firefox better.

Cross-posted from here.