File Under: Browsers, UI/UX

Firefox Ditches the Dialog Box

Get ready to say goodbye to Firefox’s multitude of dialog boxes. Recent design mock-ups show Firefox moving toward an “in-content” look where settings, the add-on manager, themes and other “things which formerly appeared in dialog boxes” will now become just another tab in your browser.

The mock-ups were posted by Mozilla designer Stephen Horlander, who calls them a “work in progress” and notes that the final versions may differ significantly. At this point, the designs have a natural feel. To navigate through the various preference setting in Horlander’s mock-ups, you simply use the back and forward buttons as you would on any other web page.

While the final look may change, the move to in-content displays is already well under way. The recent alpha testing release of Firefox 4 already has a tentative design for the new in-content Add-ons manager. Firefox has also long used in-content views for session restore, about:config, network error pages and phishing/malware warning pages. Horlander says that “future possibilities for integration are things like preferences, the library, home tab, tabcandy and about:firefox.”

Whether or not Horlander’s designs for the preferences panel and other UI elements make it in time for Firefox 4 remains to be seen, but the future of Firefox, and possibly browsers in general, is looking free of dialog boxes.

Firefox isn’t alone here. Google Chrome displays its history pages, bookmarks, add-ons and other information with in-content tabs. Opera has long had similar designs. Other desktop apps are moving that way, too — recently Photoshop CS5 removed a couple of dialogs in favor of what Adobe calls “non-modal” windows.

While this trend has its detractors, the move is motivated by a desire to make software easier for beginners to use. It’s also evidence that designers are being influenced by the newer types of human interactions we’re seeing on new devices like the iPad and phones with touchscreens. Particularly, in-content designs are vastly preferable for tablets and mobiles, where the primary method of interaction is touch. Browsing on netbooks and other devices with smaller screens gets cluttered and confusing very quickly once you start opening additional windows and dialog boxes.

Even if you have a big screen, there are still advantages. In the browser anyway, in-content designs eliminate annoyances like the need to close a dialog box before interacting with the web page. And, it requires less brainpower from the user if the software maker can easily replicate the same design on all devices. So when you’re moving from Firefox on your 27-inch iMac to browsing with Firefox Mobile on your Android phone, it’s much more pleasant of a jump if all the controls and dialogs are in the same places on both platforms.

If you’d like to see more screenshots of the mock-ups, check out Horlander’s blog post which showcases several looks for both Windows and Mac OS X. As Horlander notes in the comments, “designing something that will fit into a variety of Linux environments takes a little more thought” than Windows and Mac. For the time being, Linux users will have to use their imagination.

See Also: