How was Firefox designed? What's next for Firefox?

About Alex Faaborg

The ZURBsoapbox with Alex Faaborg of Mozilla was absolutely hopping! We had so many folks show up that we had trouble piling into the brainstorm room this time around.

Alex started off sharing how design works in a large open source community as well as the challenges which Mozilla has faced as a company. He went on to talk about the future of Firefox as he showed us mockups of FF3.5, FF4 and FF5. A long line of questions followed from the audience at the event, as well as the Twitter stream and blog comments.

Two approaches to design

Alex started off with stating Don Norman’s two approaches to UX design.

1. User Research: user studies, focus groups. Study your users, how they behave, which features they want, what they do on the site. Microsoft is perfect example of this - they design against their user needs.



2. Vision Designer: Designer who has a vision of what they want to make. They are designing for the user they envision. Apple is a perfect example of this – it’s a team of designers working in secret, not interacting with users, focusing on core principles.

So which approach does Firefox take?

Alex paused before he said: “Most of the time we take the second design approach. We focus on core principles. The difference is that we’re doing it in the open source so people can join in the community. Hence we partially lean toward the first approach as well."

How does Firefox use the best of both approaches?

“Remember that Komar & Melamid painting where they sent out a survey asking people what they most enjoyed seeing in paintings and tried to incorporate all these elements into one painting? Take a look – it came out awful didn't it!” Alex said.

The lesson here is: Don’t add all the suggestions from your users into your product unless you want a painting such as this one above.

“In open source everyone throws in what they think the design should be influenced by. Even though it’s hard to come to a decision that pleases everyone it’s important for Firefox that people remain engaged because that’s how we fuel all of our work.” Alex says.

“We considering every feature suggestion by going back to the drawing board and focusing on core principles.” Alex mentioned. If a certain feature or functionality does not make it into Firefox the company asks people to create a Firefox extension for it.

Alex mentioned that great contributors from open source community can turn into people who steer Firefox in the direction we want it to go. A good example of this was the logo design for Firefox. The browser was called “Phoenix” originally. A couple of designer showed up and said that this logo will not work and that “We have something better." The Firefox icon was created by these folks, Jon Hicks rendered it, and now we see it everyday on our browser.

What’s coming in FF4 and FF5?

All of us want to see what Mozilla has in store for Firefox 4 and Firefox 5. Alex discussed this in detail. The slides and the podcast walk you through all the changes in discussion for the future versions. Here are a few teasers for you:

Thinking of putting tabs on top finally.

“Instead of hierarchical trees and folders we’d like to give folks an ability to use all of FF interface to navigate through all the bookmarks visually. We’ll also give people an ability to sync all their data to a central location so that they can access it from any FF browser."

Lot’s of great questions we answered as we discussed future versions of Firefox. The full set of slides can be viewed here as you listen to the podcast.

Alex - Thank you once more for giving us such a great talk!

Transcript

Alex: The downsides of the strong designer model, is that, if they don't know what they're doing, it is going to be a complete disaster.

They're not really designing as much for their user-base, as they're designing for their impression of the user they would like to have and what they think that user wants. What would you like this home on the web to be?

Moderator : Thanks for coming everyone. Alex. We are so fortunate to have Alex here talking about Firefox. I'll give you a quick bio. Alex went to MIT and got his Bachelor's in Cognitive Science. Then, went on and got his Master's and worked as a research assistant at MIT Media Lab.

He built a lot of artificial intelligence stuff. Basically, he was trying to take human factors that we all know about the world and teach computers these pieces of information. He got his Master's and then he went over to Mozilla and started working on Firefox UI.

He is here to share his experience at Mozilla and how he designed Firefox. Let's start by having you tell us how you started off with Firefox, the process and lessons learned from it. We have a whole bunch of questions on Twitter stream, as well as the comments for blog folks there.

Alex: Okay.

Moderator 2: We are going to try to keep this to about 20 to25 minutes. I know everyone has a jobs and things they're doing. Keep it focused so you guys can get on your way.

Moderator : Twenty to 25 minutes, 5 minutes questions.

Alex: Yes. I'll talk a little bit about the design philosophy that Mozilla employs. Then, show some Firefox 3 work which everyone is of course familiar with but I'll talk about some of the principles that came into play in making those decisions.

Then, I'll show some Firefox 4 stuff, quickly. Then I'll try to take questions. If people want to try to come in, more? We're really at capacity.

All right. There are two approaches to UI's design. For the sake of attribution, I'm stealing most of this from Don Normon. The first approach that everyone's familiar with is basic user research and user studies. Things like focus groups, using one-way mirrors. Saying, these are my users, I need to study them. Right?

In this, you try to find out what features they want. What they find interesting. What they find confusing, try to understand their behaviors. We also see this outside of UI design with things like movies or your focus-grouping movies.

Then, in complete contrast to that approach, you have the designer who has a very particular vision of what they want to make. They are not really designing for their user-base as much as they are designing for their impression of the user they would like to have. What they think that user wants.

In the first case, we see this as the Microsoft model. Where you have companies like Microsoft that have these huge user-research groups. They'll do lots of user studies. They will bring people in and then they'll ask them what they want.

The second is sort of what you can call the Apple model. Where you have a team of designers that are basically working in secret, designing the thing that they think is perfect. Not necessarily with a lot of direct interaction with their users.

Of course, they get that as soon as the product is released. But, because they are doing things in such isolation, they really have to focus on core principles. They have to be really good at what they do.

You also see the same thing with movies. Where, like, with focus-grouping a move, you know the movie is going to do pretty well in the marketplace versus having a really strong director who is just making the movie they want to make. It may or may not do well in the marketplace.

You could argue that engaging a lot of users is a good way to mitigate risk. The other model having this strong designer or strong director, you can have huge successes and huge failures. You can be more successful than you would necessarily get from engaging with user-base.

If you look at these two on spectrum, the downsides of the strong designer model, is that if they don't know what they're doing it's going to be a complete disaster, because, they're not getting the sort of feedback they need.

The downsides of engaging the users directly, is that, if you're not careful, they can influence you in negative ways. You can average their favorite colors to gray. Everyone is going to want a particular feature. You can say, "Well, people want these features." You throw them on the products, now you have this really complicated thing.

Let's look at how Mozilla approaches this. We're more of a side of the group of designers that focus on principles and designing the thing they want to make for users as opposed to directly engaging. The difference, though, is we're doing it all in the open. We have this complete transparency where people can join in with the community.

This is a painting by Komar and Melamid. It's called "America's Most Wanted Painting." They sent out surveys to people. People might be familiar with this. For people listening to the audio podcast I'll post the slides so you can look at it. It's truly awful. They put out surveys to ask people what they enjoyed seeing in paintings and they did this, and it's awful. That was the overall point.

This is like the canonical example of design by committee, right? In open source you have the same thing, where you have everyone throwing in their opinion of what they think the design should be influenced by. But, it's really important that they remain engaged because that's really the power of our model and that's how we fuel all of our work.

The way we deal with this is by trying to focus on core principles, trying to basically get everyone around the same types of things that we're doing in our design and understanding what makes something good or what makes something bad.

Another way we deal with this is giving people a lot of freedom to explore. The phrase, "That would be a good extension," is sort of a happy way of saying, "There's no way we're going to put that in the main product, but it's sort of interesting so you can make an extension and then you and your friends can use it."

It's actually interesting that the extension model that Firefox has grew out of solving these debates where everyone wants to take the product in their own direction. That's why Firefox just initially had such a good extension infrastructure, was dealing with that, trying to make a very mainstream product.

Another important thing is to elevate contributors who know what they're doing. So, example of this: Here was the original logo for Phoenix, which was the first name of Firefox. It's okay, but it's not that great. Some visual designers showed up and they said, "Phoenix will never be a mainstream product if it looks like that." Everyone kind of knew this was the case. These guys were really awesome visual designers. Steven Garrity and Stephen Desroches wrote some blog posts about this.

We said, "Well, you clearly know what you're talking about, and you're right. Congratulations, you own the problem. It's now your job to fix this. Oh, and we have to change the name, as well." They came up with some sketches. Here's the original sketch of the Firefox icon. Then, pretty quickly after this, they put out an open call for people to try to render it. Jon Hicks did the rendering. Then we got the Firefox icon. Even something as central to the product as the application icon actually emerged out of this open source community.

So, saying we're kind of following the Apple model, but it's really a lot of people engaged in this. It's not the case that anyone can impose the product, but if you have really good ideas, and are able to prove your ideas are good, you can get into the community of people that are steering Firefox in the direction that we want it to go.

I'm going to show a couple quick things about Firefox 3. The first concept I want to talk about is flow. This is a psychological concept by Csikszentmihalyi, I believe. People will laugh at me listening to the podcast if I got that wrong. It's kind of hard to describe. The best way to describe it is that it's a cognitive state that you get in. So, the best way to describe it is to tell you about it. You'll probably remember yourself being in it.

Imagine you're driving a car. You're driving pretty far and there's a lot on your mind. Over time, the interface with the car will kind of blur out and you sort of forget that you're driving. You start thinking about all these creative things that are in your mind. You're still driving very safely, you're still operating the car fine, but you're not actively, consciously focused on driving the car.

This effect happens all the time. This is one example. Musicians get this effect when they're playing their instruments. They're not really thinking about the instrument, the instrument just becomes an extension of themselves. We also see this playing video games. You don't really think about the game controller after a while, you just get engrossed by the game.

This cognitive state is called flow. It also can apply to software applications. We were thinking as the user is moving between various applications in Windows and iOS10 and other operating systems, you know, "How can we create an environment where really the interface of Firefox is going to fade away in the same way that those other things fade away and the user's going to enter this state where they're not really focused on actively thinking about the interface, but they're focused on the tasks that they're doing?"

One of the ways we tried to approach this is meshing with the surrounding operating system in terms of its aesthetic and its interaction design. If you do anything that's too different, even if its different in a good way, you're going to start pulling users out of flow and they're going to start thinking about the product instead of thinking about what they're doing. The opposite side of that is to try to be uniquely Firefox, which is completely contrary to trying to mesh with everything else. This was the big problem we were facing. How do we create something that isn't going to draw attention to itself, while at the same time being uniquely Firefox.

Looking at the seven visual variables, what we did was we chopped them in half. Value, color and texture were assigned to integrating a threatening operating system. Whereas j-position, orientation and size were assigned to being uniquely Firefox. In terms of the shape, we came up with this as almost like an ideogram. The shape that you see, when you recognize the pattern, you know what product that is. We applied that with the various materials that the operating systems are made out of. So, in OS 10 it was made out of metal, Vista was glass, and XP it was some form of plastic. Although, we later made it more shiny because people were complaining.

The idea was that it's recognizable, but it also fits with everything else you're using. We did some minor things, looking at the various types of arcs you seen in operating systems, and applying that into the design as well. What we got was basically a product that was passing the test of, if you see it in low definition on television, you can still say, that's Firefox. So, it's not drawing too much attention to itself, but it's still identifiable. Here are some images of Firefox 3. Everything pretty much lines up, but it's styled to match.

The next thing I want to talk about is visual hierarchy. One of the best examples of this is the TIVO remote, which is a fabulously designed thing. The most common actions get the most prominent treatment. Things are grouped very nicely and really all flows together in a really good way. Of course, Pause, being one of the things you do most often, is the main control. By contrast to this, the Playstation 2 remote, where the buttons are aligned in a grid. If we had one in real life, it would be equally hard to see. Because the buttons are aligned in grid, you don't really have this notion of visual hierarchy. Someone said the play button is larger, but you don't have any way of remembering things.

There are really only two aspects to this. One is physical, how quickly can you visually target this thing that you're trying to find. The second is cognitive. If you don't have a remote, but you're on a whiteboard, can you draw where the button is that you're trying to hit. Can you remember where the button is. In terms of the physical, if you actually blur out the TIVO, you can still see the pause button. This is called the squint test, trying to model really low level human vision.

What's the first thing you're going to see so you can acquire that target. Here's one more of Firefox with the back button. Again, it's passing the squint test. The second part, in terms of cognitive. Can you remember where the control is? This is the notion of landmarks, where you're defining the control positions relative to other control positions. Because the layout is not uniform, you can think of those landmarks.

For example, I know the slow on the TIVO remote is directly south of the pause button, but on the Playstation True remote it's somewhere in the grid. You can think in terms of maps, where it's really easy to find a country in Europe, versus trying to find a congressional district in Wyoming. As soon as you have that kind of non-uniform thing, you have something dimensionally to grasp onto. Seeing the ideas applied to web browsers, where we've taken the glyphs off of the controls and replaced them, you still know what various controls are in Firefox, even with out the additional help of a glyph, versus having uniform button images.

The final big thing with Firefox 3 was the notion of efficiency of use. I was actually working on the filtering interface of the bookmark sidebar, which is as minor as you can get in terms of design work. I was thinking, 'Why am I working on this. No one is ever going to use it. It's really hard to use. It's not that efficient.' That night I was listening to a podcast, This Week in Tech. Leo Laporte was talking about how he loves Quicksilver. Of course, everyone loves Quicksilver, it's the best thing ever. I know the guy who made Quicksilver, he was CMU when I was working there briefly.

Then it dawned on me. Quicksilver is really a unique application, because it's one of the few cases I can think of, where it molds its behavior based off of user behavior in a way that's good. So, when we see this done incorrectly in some cases, for example, Office tried this with their menus, where various menu commands in Office would fade away over time. Most people find that frustrating, but what Quicksilver does is it associates the letter that you type with the result that you chose. So, over time it gets more and more streamlined to your particular interactions.

Basically, I just stole this, and I put it in the location bar in Firefox 3. Designers should not necessarily feel bad about taking good ideas that they see elsewhere and bringing them into their products. Since I knew [Nicholas 15:30] as well, maybe that makes it slightly more appropriate but either way.

The credit for what was later dubbed the Awesome Bar by one of the developers working on it, and the BBC says it's a childish name which I think, yes, it's a childish name. That was the point. It's weird, joking. The genius of the Awesome Bar is that it really meshes with user behavior, and it becomes faster and faster over time, and all of those principles come straight out of Quicksilver.

Here are original mock-ups. You can see where actually I stole the Firefox 2 UI when we were doing this, and one of the principles that we brought into Awesome Bar design is this notion of select a visual variables. When you look at a range of visual information here, I'll ask you to do a couple of tasks and just go ahead and say "done" when you've completed it.

So, find all of the Ks.

Audience Member: Done.

Alex: Okay. Find all the red letters.

Audience Member: Done.

Alex: So, you see how that was a lot faster, or find everything on the left.

Audience Member: Done.

Alex: Done. So, going back to those earlier visual variables, some of them are what we call selective. Basically, what this means is you can process all of the information as single glance as opposed to having to do a very linear search as you move your glance around to try to find things.

What's nice about using color as a selectable visual variable is you can select on it; yeah, just say I want to look at red things, and then everything else kind of falls away, and now you're just seeing the red things. We brought this into the design of the results.

We also see similar things with the Google home page where they're using different color for different types of information. As soon as you select the thing that you're looking for, then you can filter on those and scan through them pretty quickly. This is particularly important because we're putting both title and URL in line in the display.

Moving on quickly-I know we're short on time here. 3.5, I didn't really do anything to 3.5 at all. We tried browsing mode which was great. I said we that we'd use the masquerade mask. That was my contribution. I didn't even try it. I just said we should use one. I was working on a lot of other things. Also, we did an update of the Firefox icon to 3.5, streamlining it and modernizing it.

3.6, a similar deal. This actually hasn't been pushed out to 3.6 users yet, but we're doing add a process plug-ins. So, if one of your plug-ins crashes, you'll see a plug-in generic interlocking brick with a sad face which is my contribution, the same issue, the sad face. Which one did people like? I'm thinking probably the sort of 8-bit one, but we'll see.

Audience Member: I like the one with the tears.

Alex: The tears. Isn't that going a little bit far though? I don't know.

Audience Member: I like the animated tears.

Alex: Animated tears. We can totally do that. So, that's 3.6. Moving on to design of Firefox 4, which people probably find more interesting. I've been doing a lot of work with matching visual interactive design of Vista and Windows 7. We're also thinking about finally putting tabs on top which is something that we've been going back and forth on for many, many years and somewhat matches the interactive design of Windows in that we're seeing similar controls with the ribbon although in that case it's the control strip that has the tabs in that position.

In here, it's a combination of the control strip and the actual content. The control strip doesn't change. In a structural sense it kind of meshes better than the previous operating systems.

Also, this notion of an application button, we're seeing that become more prominent. This idea of a very saturated colorful thing that can change menu commands, like saving and printing and things like that. So, that's Firefox on Windows. Here, we see it on older versions of Windows. We'll probably actually just keep the menu bar, but it will be customizable. So, here we have the Apple one as well on Mac.

One of the new features that we're thinking about is we're going to have a locally Moderator ed home tab in Firefox. This will allow us to do a lot of things that we wouldn't otherwise be able to do with the web page, that would otherwise violate privacy. The browser obviously knows a lot about your usage patterns. So, we can do things, like show you RSS feeds from sites you visit more often just automatically, things like that, which we couldn't really do pushing that information to the web. Also, it's just a lot faster to load if everything is local.

So, not a great mock-up. Everything is blank at the moment because we're actually doing a design challenge right now through Mozilla Labs, for you to come up with ideas of, what would you like this home on the web to be? And what should sort of the users dashboard of the web look like when they first load the browser? And I think there's a lot of really interesting space here for people to have creative ideas. Like one of the things that came to the design challenge that I really liked was, you know we had geolocation built into the browser. We're using it for things like show me exactly where I am on a map, as opposed to sort of more context sensitive like, here's the configuration that I want to have when I'm home versus at work, and just have the browser just sort of seamlessly you know mesh it's interface for the home tab based on your location, things like that.

So, I'm really excited about this. Unfortunately can't show you more details yet but it's something we're actually working on. We're also looking into having app taps. Basically you just take one of your tabs and you drag it over to the home tab and it becomes this little persistent thing that will stay open all the time. And doing sinking of all of your browser data online so that things are locally encrypted and then we send that big block of encrypted data to our server. And then you can basically log in to your browser and have all of your bookmarks and history and your entire browser experience from any machine.

So one of the things was trying to completely reframe how we think about bookmarks in history. So right now they're sort of given like a file system model which is really kind of weird. Like everything is a little 16 x 16 icon. They're in hierarchical folders in various trees on the side. You can drag them back and forth. This doesn't seem to really make any sense. Because like we have this entire interface with the web browser which is designed for browsing, right? We have all these great controls like back and forward in the location bar.

But we're not using those specifically for the task of, like you can go directly to a bookmark but you can't go to like a container of bookmarks. So this notion of typing in something like bills which is say a folder of bookmarks, and then actually navigating it to it and seeing everything. When you click on something, you can get forward, and click back you get back to sort of the meta page. I think in the past there's been some reason, because this, you're sort of browsing something that isn't the web. I mean it's going to be built using web technologies but it's not like anyone can go to this place. But as we get something like Weave where you can then log into the browser on any machine, these places do become sort of more universal. They actually authenticate. You can now sort of navigate this personal web that you've made.

Audience Member: How did you [inaudible 22:17]

Alex: Oh, is that one of your clients?

Audience Member: [inaudible 22:23]

Alex: Oh, there. That's because I knew that and was trying to [inaudible 22:27]. Actually, I use them to pay my rent. So, we have personas. Here's just an image of driving the percentage of the title bar. It's just something that we try to do but haven't for technical reasons. Personas in Firefox. Can't really see that one. It's Lady Gaga apparently. So, and this also goes against this kind of notion of you're really blending and meshing with this training operating system. Like this is super distracting. But it's distracting in like a happy way because like the user chose that garish thing to put on their browser and they really identify with it and things, right? So, people really love personas which is great. For, yeah guys, I was figuring this one wouldn't quite work on the projector, so.

From private browsing mode, we're actually working on darkening the theme. So you have this nice very ambient cue that you're in private browsing mode. People have had various approaches. Chrome does this a little bit with the title bar. Most people, I don't notice the change, and just a little guy. But I really like this because it provides a sort of constant sort of sense that you're in this mode, so you don't have mode errors. Where you forget you leave it in private browsing mode and you're not capturing all this great awesome bar data, that kind of thing.

So, I think we're probably going to move on to questions since we're nearly out of time. Although, if people are interested in staying, I can go through this set of slides. So, shall we alternate between internet questions and people in the room?

Moderator : Do you want to start with an internet question?

Alex: Sure.

Moderator : Well here's, let's do this one. How do you see user behavior changing as interaction on the web matures? A good example of this is the change in behavior around the use of the back button now, the tabs are so common.

Alex: Sort of, introducing tabs in many ways kind of broke the back button. Because if you create a new tab and hit back, like, it doesn't uncreate the tab for you. That kind of serves as like a universal undo, the browser. But it doesn't undo certain things. So if you close the tab accidentally you can't hit back. So I think some of those issues, despite browsers having tabs for so long, still haven't totally been sorted out yet. And also I don't think browsers really support undo well enough at the moment.

In terms of overall user behavior, like, we're seeing the web really mature into a full application platform. If it's not there yet, it's definitely heading there, where web applications have access to things like your camera and geolocation and all these sort of things that used to be at the operating system level access. So I think we're going to see more people just completely reliant on web applications moving forward. And a lot of our design work has been kind of tailored to that with the app tabs and a project called Prism where you can take various applications and put them into your dock on OS 10 or your start button on Windows. All right, in the room question.

Audience Member: Where did you remove from Firefox [inaudible @25:29]

Alex: Have we added it yet? What would I like [inaudible @25:35]. There's lots of stuff I'd like to remove. In general I think we were a little bit too gung ho with preferences. People will get into debates. They'll say, okay, the interface should work this way or it should work this way. And unless you have everyone really grounded in principles so they can identify which one is the better way, it kind of falls down to, oh everything is personal preference. I want A, you want B. Neither of us is right. Or often in Firefox people will say oh my Mom wants A or my Mom wants B. Because they're the novice user, right? So everyone is sort of arguing by proxy. But this is kind of like more uncertainty. Where you can't say no. Like A is good and B is bad. Like we need people grounded in principle so they can make that choice.

But if that doesn't happen and people are saying, well it's all personal preference, then the big solution to everything is we'll just give these for the option. You know, like I'll choose A, you'll choose B, everyone's happy. Then the downside is create this super complicated product that has too many options, people can't really wrap their head around all of it.

So in terms of pulling things out, I would like to pull a lot of options out. Otherwise, so it's controversial, but I was never really happy with extended validation, because it kind of creates this two tiered web where you have, yeah, like real companies get to be green, and startup companies, that don't have all the infrastructure in place who don't want to pay the huge fees, don't get to be green. But it's a hard problem, because you can't necessarily tell the difference between someone just getting on their feet on the web and someone being a scammer. So extended validation does serve a very important, very real purpose. But it's kind of tough. One of the great things about the internet is like no one knows you're a dog, that famous comic, right? And that dog's doing business, you know, so

Audience Member: Yeah, my dog made a lot of money that way.

Alex: Yeah right, but anyway. I take more of the ideological approach where I like this sort of fact that knowing it's your dog or not. Validation is kind of going against that.

Audience Member: So with reference to touch. Everything's changed thanks to the iPhone [inaudible 27:44]. How does the whole design implementation work? A lot of these things are not applicable to the mobile web. I don't care about a [inaudible@ 27:54], multi touch. The whole experience is very different than having a mouse [inaudible@ 28:01]. And Firefox's mobile web relatively [inaudible @28:07] Firefox, and the Android or maybe on other devices. Are you guys looking at continuing a way to design products for these touch devices or smart phones? Does this paradigm still work [inaudible @28:22]?

Alex: Some aspects of it work. So like introducing the notion of navigating to your bookmarked folders works everywhere. It's not very sort of literal with the interaction. We have a project team, the code name's [inaudible @28:34], which maybe you've seen some of their work. Currently we're running on Mimo and reporting to Android and then Windows phone 7 series will be after that. And you know like with the desktop Firefox you know you saw this how we're trying to sort of mesh with the interactive and visual model of all the different platforms.

Well, they're all pretty similar. You have a mouse and things like that. So it gets a little bit more interesting on mobile, where you try to really make Firefox mesh with the operating system of that device while still keeping a couple of things that are uniquely Firefox. And trying to do things where it feels moderately familiar. But in general we're pushing more on the side of just meshing with the device, yeah. And unfortunately yeah, Apple of course has their rules for what they'll accept in the App store which prevents anyone that's like building their own platform, like say the web, from getting in there, so.

Audience Member: Yeah, what I felt, and this is personal experience, that the browser really does not [inaudible @29:27] than in mobile. I want full screen space as much as possible and the buttons and all are not really that important. I've got another android browser on my phone and they're trying to do the tab stuff which is hard to see. The design element to me is driven more by just the way I navigate the web rather then the buttons interface off the browser itself.

Alex: Yeah, I think that's mostly true. Although you could make the argument that browsers are pretty similar structurally in the desktop environment. So it's really sort of the little things about like how does the password manager prompt you for remembering a password. All these tiny interactions with the browser, that you get a product that's really superior to another product. That's a long tail of getting everything right on the small interactions, which I think also applies to mobile. If we had an environment where people were allowed to be highly competitive in mobile, obviously it's a very complicated ecosystem, I think you could see a lot of competition there with products being much better than others.

Audience Member: I have a competition question. If a marketer, yourself, and an engineer, all at the same level in the organization, who wins the argument at the end of the day?

Alex: Everyone's obviously on board with the shared goal of building the best thing. Can I know what the argument is?

Audience Member: If you look at Google, it's a more engineer driven business. If you look at Apple, it's more marketing in design [inaudible @31:00], it's holistic in its approach. I'm just curious about your organization, when you're making decisions, there's usually a group that's driving the first part of something.

Alex: That's an interesting question. In terms of engineering and design, because Firefox is so widely used around the world and it has to be a really mainstream product, the engineers, through good intentions, want to design something that is really easy to use. Sometimes that will come into conflict with what is really easy to use, and what principles we're trying to follow. In general, there isn't much conflict there.

In terms of marketing entering into that mix, obviously we want to promote the brand of Firefox and everything we stand for. We also want to create a product that doesn't get in the user's way that often, which is the opposite of promoting our brand. I wouldn't say they get in the way with us as much as they get in the way in other organizations . . .

Audience Member: Do you think marketers get in the way.

Alex: I wouldn't say they get in the way with us, but they get in the way of other organizations. So, to trash all of my other competitors, which I shouldn't be doing during a podcast. We're talking about flow, and how Firefox tries to be the best browser and seamlessly mesh with everything else that you're doing. In both Chrome and Safari 3, and particularly in Windows, they're just basically injecting the brand into the interface. Chrome is very Google. Safari was looking like an Apple application on Windows.

Steve Jobs said that it was like a glass of cold water in hell. Well, that would really interrupt your hell experience, in a bad way, because we're really focused on getting work done in hell. For a while Safari was trying to sell you an iPod every time you opened their home page. I think, if you push the brand to heavily in something that is supposed to be the user's window onto the web, imagine you got into a car, and you turned the car on, and the radio started talking to you about how great the brand of car was that you were driving.

Web browsers are like cars in that they take you to lots of places, and you're in them all the time. Something that Mozilla does well, is that we don't necessarily push our brand as much as we could, which is literally more user centric. Even though users love Firefox, they don't want to be constantly hearing about how great Firefox is everyday, because they're trying to get stuff done on the web.

Moderator : We're almost out of time, so we're going to let folks who have to leave, let them go, but people who have questions can stick around can ask Alex questions. I know folks are on a lunch break, so if you really need to go.

Alex: We should take some more internet questions for the podcast.

Audience Member: You mentioned the iPhone as a good example of an open process design. You said the home page was blank right now, how do you see that process working to create a really good home page experience by opening up to the crowd? Do you see that as a serious part of your design process going forward in designing applications, or is it a fun thing to engage the community?

Alex: It's definitely not just fun. It's fun, but not in a trivial way. The ideas that people come up with will likely be in the product, and people will directly influence the product in that way. But, it's not as though we're going to average everyone's ideas together, like the Komar and Melamid painting.

Audience Member: Are you going to focus on the four principles that you talked about?

Alex: In the case of trying to decide between two options that have already been presented or already in the product that corporate feels is really important, like the home tab it's just pure creativity. And it's always the case that a large crowd of people will be more creative than you are. Before you realize this it's frustrating, because you're like, "Well, I've got a good idea so I'm going to take on all the contributors." And then, no, they always win. Because they're just so smart and there's so many of them that the role of the designer in open source organizations is more to facilitate that communication than to be solely responsible for all the good ideas.

Audience Member: Right. But then how do the decisions all happen and what's the relationship like with the people who contributed those ideas? Do you need to get them bought in or what do you feel like in terms of responsibility to them?

Alex: They'll be bought in if it's already their idea.

Audience Member: Oh, right.

Alex: This is also something that's really unique about an open source environment. It's not top-down where the designer says, "This is what we're doing. Hope you like it." It's very much more bottom-up. It crosses all open sources from people who are working on the things they find interesting. So to steer the product you have to get people really excited about something better. So that makes evangelism of all the various design work you're considering really important. So it's kind of part being university HTI lecturer as you try to explain the principles to people; and also just getting people excited about the work, and then also knowing the direction we should be going in.

Audience Member: Many for-profit, non open-source organizations practicing what their competitors are doing, getting a lot of cues from their teachers and stuff. I was looking at the slides you showed earlier and I saw a lot of stuff that seems to be very Chrome-esque and I was wondering to what extent that sort of [inaudible 36:46] Chrome's doing should we do this, entering the conversation and use that code from open source. Does that come from open source, does come from the organization, or is it just a good idea how we should do it?

Alex: So, these ideas that you see in the interface aren't super new. Anyone who looks at the physical folder will see that the tab is placed on top. So in terms of consideration of that it's really about how we want to position our product. Going back to the usability principle, if you look at Jakob Nielsen ten heuristics, what I think is really interesting about them is that some of them are opposed to each other. So you have recognition over recall as an important principle, but then you have minimalism as an important principle. And it's really hard to achieve both, right. You have a constant tie.

Also, internal consistency and external consistency is a really important principle. But that's against being innovative and doing great new things. So you got to have each organization choosing which UI principles they want to put their chips down on, and how do they want to craft the best thing. In the case of Chrome, they chose a different set. So we see them breaking consistency which will hurt them with adoption, but also allows them to do what everyone knows is right, like placing tabs on top. Well, it has a couple of efficiency problems we're concerned about. Conceptually it's right. When you hit the back button you're navigating . . .

Audience Member: Does anyone in the organization or the open source community say, "Look, Chrome has got these little app tabs. We should have these app tabs."

Alex: The reason it doesn't is because we've all seen these set of ideas in extensions and talked about before. So, there have been a few cases where I saw something in a browser that was just like, "Wow. That's a really, really good idea. Why haven't we thought of that." But often it's, "Well, we had that debate before and here's the conclusion we came to. We were right to come to that conclusion previously." So it's not like, "Well, Chrome did tabs on top, time to copy them." It's more like, "Chrome is for minimalism because they moved the title from the window, choosing this path. We were focused on consistency and adoptability. Is it worth us changing our strategy to make that decision?' As opposed to, "Oh, hey, I hadn't thought about that. Let's copy it." So . . .

Audience Member: I was wondering what sort of pressures you guys [inaudible @39:18]

Alex: So that was a very interactive design answer. So then you have a larger notion of brand and product, where Chrome being the most recent major release has great attributes. It's very fast, it's very new. And it's tabs happen to be on top. So people then attribute these structural things in the interface to those aspects of the product. So then for that notion of newness you'd want to maybe put the tabs on top instead of a symbolic gesture of, "We are now just as fast and just as new for our next major release." Which is kind of illogical, but it's a very emotional, brand-focused notion of why you do these structural changes. That's going to get misquoted in the press wonderfully, though. I just want to say thank you to the reporter who takes that bait.

Moderator : All right, one more internet question.

Alex: Okay.

Audience Member: HTML elements like video, whether Firefox will be providing browser controls, and whether you'll be designing them, or if the video element and audio will rely on the operating system or face specific styles for controls.

Alex: Yeah. We have a set of browser provided controls because that's the lowest bar for people to put video up. We were very simplistic in the design. It's all monochrome colors because we didn't want to impose our aesthetic on the page. But then the great thing about HTML 5 videos, people really have access to the entire terminology stack, from simply scanning the controls to doing super innovative things like face recognition with the video feed. We'll give you ours and if you don't like them, you can make really cool ones yourself just like you would make any other [inaudible @40:55].

Moderator : Well, thank you very much.

Alex: Thank you.