Cutting Room Floor

Design is a very lossy process, and there are a lot of good reasons why a piece of design work might not be released to users.  Sometimes a design is cut due to the natural triage process of focusing on top priorities and trying to ship on time.  Sometimes a design is cut because in retrospect, it really isn’t the best solution to a problem.  And sometimes a design is cut because it was only intended to be a conceptual exploration, like all of the concept cars that are created to help shape the design of future products.

This post features some of the crazier concepts that we never rolled out, and highlights some of the stranger scenes that we have on the cutting room floor.

Nightly Build Icon

I provided art direction for this 2009 candidate aspiring to be the new nightly build icon.  It was humorously rejected by the other product drivers for being “too dramatic.”  I continue to contend that the planet is definitely forming as opposed to exploding, but as a still image, the trajectory of the continents is arguably up for debate :)

Visual design was done by Joy-Vincent Niemantsverdriet of Sofa.  The objectives I gave them were to create an icon that visually conveyed danger and an incomplete product (at the time Minefield was still full of mines).  I also wanted them to base the work on paintings like Castle of the Pyreness by Rene Magritte, or this image from the French anime Skyland.

Stealth Theme for Private Browsing

This is one of my favorite design ideas, but as a low priority feature it has also now missed every major release (Firefox 2, Firefox 3, Firefox 3.5 and Firefox 4).  As an ambient, peripheral, and constant indication of being in private browsing mode (or ideally opening a private window), Firefox transitions to a dramatically darker theme.  This is meant to invoke connotations of day/night, or for the more militaristic, a stealth fighter.

Visual design by Stephen Horlander.  You can also view an updated mockup based on the Firefox 4 theme that he created as well.

Fluffy Pie Menu

Interactively this pie menu does what pie menus are good at, it provides visual feedback for a mouse gesture (in this case browser navigation).  But what I really like about this particular pie menu isn’t what it does, but how it feels.  It’s fluffy, it’s soft, it’s friendly.  It’s like interacting with a happy cloud.

I provided art direction, and the visual design was done by Mozilla intern Wei Zhou.  This design work was purely conceptual.

Immersive Full Screen Mode

Again purely conceptual design work, this was an immersive full screen mode, where the site’s aesthetic dominates the entire browsing experience.  Visual design was done by Mozilla intern Wei Zhou.  To correctly build this type of overlay various Web sites would of course need to be expecting it, which is a technical challenge.  This design work did however later inform how we approached overlaying the browser’s control scheme on top of personas in Firefox.

Bugzilla Theme Refresh

I spend a significant part of each day living in bugzilla.  As you can imagine, I’ve had some time over the years to daydream of a more elegant and streamlined interface that is easier for users to very quickly visually parse.

As an advanced tool for organizing software development, bugzilla isn’t meant to be simplistic.  It’s like a DLSR camera, consisting of a dense set of controls meant to be quickly and easily accessible to highly trained users.

But that doesn’t mean that users (including the highly trained ones) should arrive at a bug, and have absolutely no idea what is going on.  This redesign of bugzilla uses color exclusively to represent value (positive, negative, in transition).  This makes it easy to figure out the current status of a bug (status, assignment, commitment) at a broad glance, including peripheral vision.

Additionally, while it keeps controls in a mostly consistent position for the thousands of users already acclimated to interacting with bugzilla, this design provides enough visual structure to organize areas of UI around the core journalistic questions (what, who, when, how).  This makes it easier for users to answer specific questions about a particular bug.

The design focuses on clean stark lines, and emphasizes data (like bug summaries) over metadata (like bug numbers).

View the full mockup

Many of the same design principles were also used to redesign the interface of HTML bugmail messages.

View the full mockup

Command Blocks

This was an exploration of how we could turn the location bar into a sort of modern graphical command line, building on the work of Mozilla Lab’s Ubiquity project.  We explored exposing the selection of various commands through both mouse and keyboard input, and providing rich results based on the activated command block.

This is a visual design for the command blocks that I worked on with Stephen Horlander:

Graphical Keyboard User Interfaces

These mockups are a series of explorations into creating graphical keyboard driven interfaces.  Designed as accelerators for advanced users, these mockups re-imagine functionality that exists elsewhere in the browser.  The resulting interaction is fast, transient, and provides keyboard users with a level of visual exploration and feedback that is uncommon to standard keyboard shortcuts.

Detailed post about the common tradeoffs between mouse driven and keyboard driven interfaces

Searching the Web:

Bookmarking and tagging a page:

 

Browsing your Personal Web

This is a conceptual redesign of bookmarks and history in Firefox that focuses on leveraging the core browser controls (location bar, navigation controls, content area), to blend navigating bookmarks and history with browsing Web content.

In this model, users can navigate to an existing collection of bookmarks using the location bar, just as they would navigate to a Web site:

These bookmarks then are displayed in the content area of the browser:

Read an extended discussion in a blog post about the idea.

 

Isometric Pixel Art for Prism Apps

Mozilla Lab’s Prism was created to frame Web applications as equals in the desktop environment. This quickly introduced a problem for the project: most Web applications only have a 16×16 favicon, and desktop applications, particularly on OS X, require icons that are at considerably higher resolutions.

Leveraging a nostalgia for the 8-bit age, I embraced the low resolution nature of favicons, and converted them into isometric pixel art.  The image below is an actual screen shot as opposed to a mockup.

This was also one of the very few times I sat down and wrote some code to get an idea across.  While a cool idea, the apps team at Mozilla is now defining a manifest file for applications to package their own high resolution icons, so the overall problem of only starting with 16×16 icons now no longer exists.

Conclusion

Those are the highlights of the design work that didn’t make the cut.  In each case there were good reasons for us not to move forward, or just not to move forward yet.  Even if these concepts never get deployed in Firefox, ideally they’ll spark even better ideas in the future.

17 comments

  1. Nice! I haven’t seen a couple of these, and it’s fascinating to get a peek into the creative process.

    Also, I’m sure Bob Ross would have been a big fan of the Fluffy Pie Menu.

  2. Has the dark private browsing theme definitely hit the cutting room floor, or could that one still make it into Firefox if someone championed it? Because I really love it, and I think having a browser-wide indication more visible than the title bar text would rock.

  3. I do really like the idea of the command blocks. I hope, that Mozilla works on this idea again…

  4. I love the Immersive Full Screen Mode, it is something I have been thinking, just the basic controls and browse, nothing more for the average user.

  5. Dominic Spitaler

    Could you release this incredibly sexy Nightly icon?

  6. I’m guttted we’re not gonna get to see some of this stuff but at the same time I’m simply grateful to you for sharing. Keep up the good work.

  7. Your amazing mockups are making me want to pick up the HTML emails patch again. Sorry that languished so long :-(

  8. wow, love the fluffy pie menu and the ff4 mockup for the stealth theme!

  9. Nice preview. Thanks.

    Here is my note..

    With browsers stuffed with highly interactive apps these days and a few as a suite (Google, Zoho), I am looking forward for interfaces that breaks the existing tabbed interface into multi windows within the same browser instance, similar to desktop OS interfaces. This will help in terms of multi-tasking.

    For instance, I can minimize a browser tab, drag a picture from one app and paste into another. If the app vendors are supplied with necessary APIs to interact within their/cross domains running across tabs, app integrations with easier interactions would be a deal.

    Jayakrishnan

  10. The nightly icon is very nice, perhaps you could release the SVG for it. I like the dark theme for firefox, I’d make it my default theme. The command blocks were a good idea, but it seems DuckDuckGo (new search engine) pretty much eliminates the need for that.

  11. these designs is very nice , why mozilla did not apply it , that’s sad

  12. I’ve made a userstyle based on the private browsing theme, if anyone would like to try it. Windows only though… I don’t have a mac. Its here: http://userstyles.org/styles/55792/stealth-firefox

  13. افكار رائعة لكن للاسف لم تطبق

  14. I like most the ‘Immersive full screen mode’ & the ‘Command blocks’. However, I don’t use FireFox!. Wish to see them in Chrome <3

  15. The bugzilla theme looks awesome!

  16. The blog contains NO pictures!

  17. I like what I see so i am just following you. Look forward to exploring your web page yet again.