September 16th, 2009
Firefox 3.7 & 4.0 design directions
Or; How the Sausage Gets Made.
I’d like to point you in the direction of the official wiki page where my colleague Stephen Horlander has done a bang-up job at describing what we’re planning for Firefox 3.7 and 4.0 on the user experience side. He also does a great job of describing why we are doing what we’ve outlined, a result of months of hard work, idea generation and amazingly productive discussions with the Firefox UX team and the rest of the people here at Mozilla.
Read it. It’s worth the time if you’re at all curious about how the next versions of Firefox will look and behave.
We also have another treat for the dedicated & curious among you. If you’re anything like me — and for own your sake, I hope not — you’re endlessly fascinated with backstage documentaries about rock bands and other “the story behind X” exposés.
Because Mozilla is dedicated to being open, we can share this video from the Firefox 3.7 and 4.0 design evolution with you.
We think you can get a lot of additional details out of our informal, prepared-on-short-notice session at the Mozilla all-hands on the upcoming Firefox UI evolution, if you’re willing to live with and accept the following:
- This talk was prepared with a only a few hours notice, and only has a couple of slides. It’s very much an informal chit-chat session with the Firefox team.
- I talk incredibly, ridiculously, sometimes unintelligibly fast. I’m passionate about this stuff, and sometimes I can’t stop myself. I’m also Norwegian, which means my pronunciation is weird at times. It all adds to the fun.
- There’s swearing, there’s mumbling, there’s ranting, there’s hand-waving, there’s political incorrectness.
- A lot of the great information comes from questions from the audience. Did I mention how much I love our team? Notice how all the questions are constructive and smart, and clarify matters a lot.
- There’s internal terminology here that might not make sense to you.
- Audio is only in the left channel because of the camera placement. Oh, and it’s very dark in there.
- Everything contained in the video is subject to change.
But enough excuses, if you’re willing to overlook the fact that it’s a rough production, and are interested in “how the sausage gets made,” here’s the presentation from the Design Lunch some weeks ago.
For the high resolution versions of the mock-ups if you want to follow along, open the Firefox 3.7 mock-up and Firefox 4.0 mock-up — they will open in new tabs.
The complete presentation is 45 minutes. A rough index is printed below if you’re interested in particular subjects. We have also planned a 5-10 minute screencast that will cover most of the below in a more succinct fashion, so if you want to pull a tl;dr on us, that’s OK too. You’ll get this information in a more digestible form later.
Firefox 3.7 & 4.0 design directions at the Firefox all-hands
Presenters: Alexander Limi and Alex Faaborg
You will need a browser that supports Ogg Theora and the video tag to view this video. At the moment, this means Firefox or Chrome. If you are using Safari, you need to add the QuickTime Theora plugin.
- Introductions (~00:00)
- Overview (~01:00)
- Pixel savings in 3.x vs 4.x (~02:30)
Firefox 3.7
- No menubar in 3.7 (~04:00)
- Firefox looks like it’s all about bookmarks (~05:30)
- Combined Stop & Reload button, how can we make it better? (~08:00)
- Home button becomes the home tab (~09:00)
- “Tricking” naïve users into learning how tabbed browsing works (~10:00)
- Why a home tab instead of just using the new tab? (~12:15)
- Bookmarks have a long history, there’s a lot of cruft (~13:45)
- The new page load progress bar on tabs (~14:30)
- The menubar isn’t gone on Windows, it’s hidden (~16:00)
- What happens to menus on Windows XP and Mac OS X? (17:30)
- Matching of open tabs in the location bar (~20:30)
- Recognition vs recall (~21:00)
- What we’re not doing in 3.7 (~21:30)
Firefox 4.0
- Tabs on top (~22:30)
- App tabs (~23:00)
- App tabs can be turned into desktop/dock-hosted apps (26:00)
- The home tab (~28:30)
- Why are we doing these UI changes over several releases instead of all at once? (~29:30)
- Why Glass is important for the Windows version (~31:00)
- Why is Vista/7 is really a new platform in terms of UI (~32:30)
- XP vs Vista/7 users and upgrades, transitions (~33:30)
- Internal consistency within the OS (~35:00)
- The initial UI design of IE7/8 was probably great (~36:00)
- The switch from menubars to toolbars in Vista/7 (~37:00)
- What do we do with page titles if we get rid of the titlebar? (~38:30)
- Stripping title similarities (~39:15)
- Why it’s important to be internally consistent (~40:30)
- Safari 4 did tabs on top in their beta, and ended up abandoning it, didn’t they? (~42:00)
- Weave integration and identity in the browser (~43:00)
- Add-ons UI (~44:00)
- Status bar URL (~44:15)
- 45:00 and onwards is other UI problems that people brought to the design lunch
Hope you enjoyed this little peek into the informal side of Mozilla. Let us know what you think in the usability discussion group, and whether you think we should make more of these informal videos available in the future.
