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

This Soapbox has come and gone!

We hope to see you at the next Soapbox. We'll update this page soon with interesting tidbits about the event plus the podcast!

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.

Feel free to view Alex’s slides as you listen to the entire podcast below.

Listen to Alex Faaborg's Podcast

Subscribe:

Two approaches to design

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

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.

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.

Approach #1PROS

Approach #1CONS

Approach #2PROS

Approach #2CONS

Mitigate risk by acting on user feedback

If you’re not careful users can influence you in the wrong (complicated product with lot’s of features)

Has a potential for exponentially huge success (Apple is an example)

If the designers don’t know what they’re doing this could be a huge failure

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.

Trying to change the way we think about bookmarks.

“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!

Don't Miss Out on Our Next Soapbox

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.

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].