The ZURBlog is where we discuss interaction design and strategy.

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. You can download the podcast on iTunes.

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.

Approach #1 PROS	Approach #1 CONS	Approach #2 PROS	Approach #2 CONS
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!

Highlights from our past ZURBsoapbox lectures are available online at ZURBlog:

• The Cat, The Dog, and Web 2.0 by Mrinal Desai
• Tapping a Vein: Lessons from an iPhone App Startup by Bart Decrem
• Product Excellence Principles by Luke Wroblewski
• Lessons Learned: Technorati to Offbeat Guides by Dave Sifry
• Van Halen, Marriage and Crucial Mistakes by John Marshall
• $250,000 Site Sale on eBay, Killing Goats for 6 Hours, & Healthy "No" by Rich White
• Justin.tv: One camera broadcast to a website with 35 million users by Justin Kan

Sign Up! Don't Miss the Next ZURBsoapbox!

Every few weeks (or so) ZURB invites one of our friends or colleagues to step up on their soapbox and get something off their chest, put a stake in the ground, and engage a smart group of people in a conversation. Sign up here to get updates of upcoming soapboxes:

Name:

Email:

Subscribe!

At ZURB we're fans of what we call the ZURB framework — really just a lightweight global CSS file containing a global reset, some basic typography styles, structural elements like a body container, and the grid. The way we say the grid is no accident — it's an evolving entity that we use frequently and that generally makes prototype and site construction quite a bit faster and easier on us. However: there's a catch.

The grid is a 940/960 grid; 940 pixels of usable space with 10px padding on both sides, broken up into 16 columns. Each columns is 40px wide with 20px of gutter space, and we can break the content up into any subset of those columns. What we've found, however, is that our designs don't always map to the grid. Sometimes we need less space, sometimes we need an alternate column count. Modifying the grid isn't rocket science but it's time consuming, so we often work around it — which of course is almost the exact opposite of why we have a grid! I know. Fail.

Meet the ZURB CSS Grid Builder

To help ourselves out (and by association, help you out) we've created another addition to the ZURB playground: the ZURB CSS Grid Builder. This playground page lets you enter in the number of columns, column size, and gutter spacing to generate the CSS you need to quickly implement our grid system. You can even check the grid you've created against common screen sizes to make sure you're designing for likely use cases.

Well, go build something!

The grid isn't everything — it's nothing as robust (or heavy handed) as YUI and it won't solve all your problems, but it can be a big help when it comes to rapid prototyping and implementing on a grid based layout. Feel free to grab the grid you need, use it where you want, modify it as you need to. And hey if you want to tell everyone how great the grid is and how awesome ZURB is well, we won't stop you or anything.

Check out the ZURB CSS Grid Builder »

---

P.S. While you're out there gridding up a storm, don't forget that there's great value in breaking the grid. Compelling designs, moments of interest, sweet interactions and psychological motivators can all rely on breaking the grid and doing what you need to with your design. Here's a great article on techniques to break the grid, and why you should use them.

Go Directly to the Demo and Code →

We've all seen the basic file upload form for uploading avatars, images, memes, etc. The problem with these is that once you upload your image it's hidden from you. It's the same issue with masked passwords, you enter some data and then poof, it's gone. And not gone like sexy was gone, this is the kind of gone that not even Justin Timberlake can fix.

The file input is going to look something like this:

Did I upload a new picture of my face? Or maybe something less professional. It's like buying food at the grocery store, except you can't see what you have in your cart. Wait, did I just buy the diapers or the case of Tantrum (read highly caffeinated beverage)?

The solution is to use a little bit of JavaScript to upload the image as soon as it's selected and display a thumbnail so we can easily review the form before we submit it.

Head on over to the ZURB code playground to see a complete demo and breakdown of the JavaScript we use to accomplish this. The code playground is where we do crazy awesome stuff with JavaScript, HTML, and CSS.

This coming Friday you will have an opportunity to meet and learn from Alex Faaborg the principal designer behind Firefox! We'll have a catered lunch and some hang out time with the man after which we'll jump into the discussion. How cool is that? What more can you ask for?

Every day Firefox is used by 120 million people as their window into the Web. The browser has a 25% market share, is the second most popular browser worldwide after Microsoft's Internet Explorer, and is the most used web browser independent of any one operating system.

What makes Firefox so remarkable is not its success but the way a distributed global community of contributors have organized to effectively compete with corporations like Microsoft, Apple and Google.

Ever wanted a chance to meet the principal designer behind your favorite browser?

Alex will share with us:

• The design philosophy at Mozilla
• The unique process of coordinating user experience design in
  an open source environment
• The future of Firefox's user interface

Alex Faaborg focuses on the visual and interactive design of Firefox. He also contributes to Mozilla Labs, which explores the next stage in the evolution of the Web and its long term future. He has extensive experience in artificial intelligence, user interface design, and cognitive science and is a graduate of the MIT Media Laboratory.

ZURB's kicking off the new year with some brand new ZURBians. The one and a half additions to our team are Tanya Breshears, designer extraordinaire, and Dave Gamache, aka Intern Dave.

Meet Tanya

Tanya's a California native who spent most of her life in San Diego before moving to the Bay Area to go to Stanford, where she earned both her Bachelor and Master's degrees in Symbolic Systems.

One month after applying, Tanya was gearing up for her first day as a ZURBian. We put her straight to work and she's just completed the whirlwind that is the ZURB five-week ramp up plan.

"ZURB doesn't slow down, I don't have to worry about getting bored, and I end up laughing a lot at work" Tanya Breshears

Tanya was drawn to ZURB's "creativity, eagerness to learn new skills, enthusiastic people, sense of humor, and impression that everyone is part of a team," everything she was looking for in an awesome workplace.

This is Dave

Dave is ZURB's most recent Design Intern. He's been working everyday at ZURB between his classes at Santa Clara University, where he's earning a degree in Marketing.

"ZURB is the elusive crossroads of work and fun." Intern Dave

He's another California native who grew up in Woodside. He discovered ZURB while looking for "ballin' web design studios in the area." Currently he's working with the team on several internal projects and just had a hand in implementing the new recap site for ZURBwired 2009.

Join Our Team

Interested in joining the ZURB team? Think you've got what it takes to be ZURB's next intern? We're always looking for talented, T-shaped people who can help us build great things.

To get a hold of us, just shoot us an email to jobs@zurb.com and tell us what your top three skills are and why you want to work at ZURB.