October, 2008


28
Oct 08

Polishing Firefox, Week n (Special Edition)

It turns out that publishing lists of polish bugs in small groups over time isn’t actually the most efficient way to draw attention to them, so here are some longer lists of polish bugs for your perusing pleasure.

If for some reason today is not October 29th 2008, you can use these handy bugzilla searches to view an updated list (and welcome to the future!):

Hard Polish Bugs (visual and interactive)
Easy Polish Bugs (visual and interactive)

If any of the bugs do not have enough information specified to move forward, just ping in my the bug comments and I’ll post clarifications so you can keep making progress towards Firefox being as pixel perfect as possible.

If you would like to add a bug onto these lists, please make sure it is filed, add the keyword “polish”, cc me to the bug, attach a screenshot of the issue, and use the appropriate whiteboard terms:

[polish-easy] – updating an icon, css changes, etc.
[polish-hard] – something that is not trival to fix (like rewriting the focus code)

[polish-visual] – something you would see in a screenshot
[polish-interactive] – something that you have to use the mouse or keyboard in order to encounter

[polish-high-visibility] – something that users could encounter multiple times a day

Here is a fun (or not so fun, depending on your perspective) game that you can play if you happen to be currently eating a bowl of cereal.

Findthemall

Here are the current polish lists. The first group of bugs in italics are considered high visibility.

Hard Visual Polish Bugs

25894 Keyboard accesskeys / mnemonics shouldn’t be displayed
413059 Bookmark Contextual Dialog: Tab like appearance
418521 Focus ring appears on mouse interactions (as opposed to only when tabbing through items)
426976 Remove favicon from “Getting Started”

376408 [vista] corners of tooltips not transparent (opacity wrong)
388553 can’t use skinnable favicons in FTP/File/Jar dir listings due to security restrictions
390734 Groupbox displays incorrectly on Vista
430613 The mysterious red dot icon
431646 Style full screen mode on Vista

Hard Interactive Polish Bugs

373266 Scrollbar doesn’t behave like other applications in Vista
392644 Widget Animation on Vista
413062 Bookmark Contextual Dialog: Fade out

418513 Notch on caret when RTL languages are present on a page is misinterpreted as a polish problem
434156 Make selected and not focused tree items more visible by implementing -moz-appearance: treeitem

Easy Visual Polish Bugs

413053 Bookmark Contextual Dialog: Align treeview and listview
423744 use platform-compatible styling for notification bars (luna, aero)
425999 Set background color of sidebars on Vista to match media collection apps
426712 Style nsIAlertsService alerts on Vista
426713 Style nsIAlertsService alerts on XP
426714 Style nsIAlertsService alerts on Linux
426727 Use gradients on selected items in richlist views on XP and Vista
426731 Use platform colors for the find bar
454338 Chevrons in bookmarks menu are no longer vertically aligned after landing of bug 433109

403151 In the bookmarks organizer preview pane change “more” from a button to a progressive disclosure control
416729 update notification could use an icon
418598 Fixed background image for selected item in Error Console
419231 Floating scrollbar in the toolbar customization palette is funky
420576 Invisible star while browsing a non-bookmarked non-encrypted page with High Contrast Inverse theme
421374 tab’s site icon for “new” page should match (be the same opacity) as it is in the location bar
424363 Customize Toolbar Restore Default Set uses gtk-refresh instead of gtk-revert-to-saved
429149 Profile image should have a Tango style
429725 Icons in the Applications Prefpane
429857 Don’t show entry divisor for last entry in location bar autocomplete
430257 Location bar auto-complete results divisors touch left border
430259 Location bar auto-complete results box has no bottom border
431023 Change the add-ons manager window dimensions to make it more usable
431627 Some icons have darker state on hover (the lighter state is incorrect)
431983 style :active states for the identity button, location dropdown button and search engine button on Windows
432355 Color border of site button to match gradients for SSL and EV states
432529 Left/Bottom padding of identity contextual dialog is a bit too wide
432848 Folder listbox in Bookmark Contextual Dialog doesn’t use special icons
432938 Use GTK stock icon for netError favicon instead of Windows icon
433055 Text fields in bookmark properties should have the same height
433477 Folder drop down in dialog “Add a Keyword for this Search…” does not use special folder icons
433484 Folder drop down in dialog “Bookmark All Tabs…” does not use special folder icons
436402 Alignment issues in the Windows bookmark contextual dialog
445639 Polish the Launch Application window

Easy Interactive Polish Bugs

421701 Don’t change Bookmark Contextual dialog width when clicking Folder/tags expander

428299 Vista main window text field hover and selection behavior
437296 Allow the user to tab to drop down boxes (combo boxes) and other form controls despite OS settings
438064 Create a new window if only the download manager is open and the user clicks on the doc icon

…Tell Them What They Might Win!

(Just in case making a better Web browser isn’t enough)

Anyone who fixes a high visibility hard polish bug will receive a bottle of wine (either shipped to your residence or hand delivered). Anyone who fixes a high visibility easy polish bug gets a free beer, to be delivered upon the next time you happen to be in an location that simultaneously contains both Faaborg and beer (developer day, Mozilla Summit, work week, labs night, or really any day at the Toronto office). Prizes will be fully subsidized by the Faaborg Against Polish Bugs action committee, and employees and relatives of the Mozilla Foundation or Corporation are fully eligible to win. Here are the tracking bugs for order delivery: beer, wine. If you see a bug that isn’t flagged as high visibility but still has a comment that it qualifies, that is just because I personally happen to find that bug very annoying :)

And finally, just to mess with Shawn’s ability to do semantic disambiguation:

Polishflag
Flickr photo credit: njum


27
Oct 08

Privacy UI

As many of you probably know, I’ve been a big proponent of adding a private browsing mode to Firefox ever since I joined Mozilla (technically I was even advocating for the feature while in the process of interviewing here). So after two years, you can’t imagine how pleased I am to finally be doing some design work as we prepare to ship the feature. We all owe a tremendous thanks to Ehsan for his awesome work and consistent determination to get the feature implemented.

Over the last two years I’ve also humorously found myself in a few of the actual stereotypical examples that we normally use to explain the broad and diverse range of use cases for private browsing:

-I had to load up Safari to research engagement rings
-I literally had a birthday present ruined for me thanks to seeing someone else’s browsing history

Thankfully I haven’t had to research a super embarrassing medical condition yet, but at this rate that’s probably up next.

Private browsing mode is actually just one of a number of privacy improvements that we are hoping to get into Shiretoko. Some of the other changes include:

-A “Clear Recent History” dialog, which is kind of like private browsing mode, but it works in reverse (all good interfaces support undo!)

-A refreshed Privacy preference pane that allows you to control what types of information appear in the location bar’s search results, and place Firefox into a permanent state of private browsing. The redesign also addresses some of the quirky things about the previous interface.

I should note that as always, nothing is ever guaranteed to make it into the next release, and shedules and feature sets are often in a state of flux. So with that said, here is the current set of mockups:

Privacy Features in Shiretoko (or a later release)

A New Metaphor for Privacy

Since we are hoping to roll out so many features related to privacy in one release, we felt it was a good time to update the metaphor we are using to represent the concept of privacy in Firefox. The new metaphor is a masquerade mask:
Mask
I think this makes a great icon, since it captures the concept while at the same time being recognizable, colorful, and fun. Credit for the inspired idea goes to mcdavis in a post back in May 2007 to dev.apps.firefox when we were still considering private browsing mode for Firefox 3.

Next Up: an Ambient Visual Cue

You might have noticed that there isn’t much of an indicator in the current iteration of the mockup to tell you that you are in private browsing mode. I’ll cover how we hope to provide an ambient cue (possibly in 3.2) in my next post.


24
Oct 08

Firefox Themes: The Contention Between Visual Hierarchy and Toolbar Customization

When we were receiving feedback during the development of the Windows themes for Firefox 3, one question tended to come up a lot:

Why are there three distinct visual styles of controls in the main toolbar?

This is a really good question, and something that I don’t think I adequately explained during the design process. Here are the current main toolbar icons:

Toolbaricons

And as you may have noticed if you customized your toolbar configuration, there are some intentional height differences in the set when using large icons:

Iconheights

So you might be wondering (or regularly emailing me):

How did we end up with those?

It’s kind of a long story. Going back to some of the very initial sketches of Firefox 3 about a year ago (before my post about the wireframes), we were interested in using the control layout shown below for the Windows theme. The very original design never got past the whiteboard stage, but here is a recreation of it using some of the final graphics for Firefox 3.

Protokeyhole

In my notes I was referring to this design as “Solar,” as a reference to the back button being the Sun and smaller controls orbiting around it. What I personally really liked about this design was that it structurally grouped controls like back, forward, reload and stop, with the contents of the location bar. This visual design made it conceptually clearer that controls like back and forward would effect the contents of the location bar, because they were physically joined. Some alternate designs that I also really liked by Mike Beltzner and Madhava Enros moved the stop button inside of the location bar, having it only appear during page load, along with some Safari-style progress bar feedback replacing the throbber.

Solar was modified to what eventually became the keyhole design primarily due to implementation considerations. We couldn’t create multiple versions of the same controls in the customization palette, so that made it impossible to provide users with both the combined control set of Solar, along with individual controls that would give users the flexibility to create any configuration they wanted (“Mr. Potato Browser, and his bucket of parts”).

Customizetoolbar

Another implementation consideration was that for performance reasons we couldn’t make modifications to the toolbar graphics based on the current control layout. This would have allowed us to draw the etch in the background on Solar, and to group reload and stop into a single visual form on OS X’s Proto theme (I should note this is now possible using adjacent selectors without the performance problems):

Osxstopreloadmerged

Ultimately we still wanted to ship the visual hierarchy aspects of the original Solar design in Firefox 3, as opposed to releasing a design with equally weighted controls (similar to Firefox 1 and 2). However, we had to make several modifications and compromises that hurt both the original design and user’s ability to customize their control scheme in Firefox 3:

-We dropped the etch that was grouping the controls on Windows
-We shipped the keyhole shape for the navigation controls, but we unfortunately made it impossible for users to separate the back and forward buttons when customizing their configuration
-We kept the size of controls like reload and stop a little smaller to maintain the visual hierarchy of controls, but not so small that they would look incredibly strange when the user customized their control scheme
-We returned the home button to the main toolbar (it had been placed on the bookmarks toolbar), due to some negative feedback from beta testers who didn’t like us modifying the traditional core set of browser controls.

That’s the long answer for why the icons on windows are currently different heights, they allow us to have some visual hierarchy in the default control scheme, without totally breaking customization in the process.

What’s so special about visual hierarchy anyway?

Visual hierarchy is a term more often used in the context of static design work, like print and some forms of Web design, however it also can bring some real benefits to interactive interfaces. To create a visual hierarchy a designer uses various visual variables like color, contrast, texture, shape, position, orientation and size to draw the user’s attention to some elements, while simultaneously drawing the user’s attention away from other elements. The designer can also choose to visually group related controls together.

To move the discussion to a more theoretical level, let’s consider both physical interfaces like remote controls and stuff that Apple makes, as well as software interfaces like a Web browser.

Here are two extremes when it comes to visual hierarchy in a physical interface, the TiVo remote vs. the PS2 remote (or really the TiVo remote vs. any number of remotes designed by a variety of consumer electronics companies for several decades). The TiVo remote designers went through literally hundreds of design iterations, while the PS2 remote’s design appears to be primarily based on the most logical layout for the underlying circuit board.

The two remotes are similar in that they both avoid an extensive use of color, however they differ greatly in the way that they leverage the shape, size, and location of different controls.

Tivoversusps2

This is a stupid comparison, physical interfaces are totally different from software!

Well, yes and no. A good physical interface will not directly translate well to a good software interface, but I believe a lot of the underlying principles of what makes any interface good or bad are still the same. For instance, Fitt’s law is applicable in a variety of different physical environments, using different limbs (or eyes), and different types of input devices, as long as you adjust the constants a (start / stop time) and b (speed of the device). Similarly, when it comes to creating a visual hierarchy, there are a few underlying principles that if applied can improve any interface, regardless of if it is a remote control, or a Web browser toolbar. These properties are universal, and here are four benefits that come to mind:

1. The Ability to Create a Lighter and Simpler Appearance (Better Visual Design)

By combining shapes and visually grouping related components, you can create interfaces that are simpler. For instance, the view of the TiVo remote above and the section of the Sony remote from the play / pause / stop controls on up both contain 28 controls, but the Sony remote seems more overwhelming. Or to look at a more specific example, the directional pad on the TiVo remote looks like 1 control, while the directional pad on the Sony remote looks like 4 controls. We see this visual collapsing together of controls in Apple products like the iPod and the new MacBook Pro trackpad, as well as in other Web browsers.

Mergingcontrols

2. The Ability to Give Dominant Controls More Weight (Better Interactive Design)

Something I heard pretty often in comments and message board posts when we were proposing design work for Firefox 3 was:

I’m not dumb, I know where the back button is, it isn’t like I’ve had any trouble finding it in the past.

That’s true, but how many milliseconds does it take for you to visually target the control you want to click on? Can you find it with very early visual processing? Making the most important control visually dominant still makes the control easier to locate, even if you already know where to look, and makes the interface as a whole feel simpler because you can more effectively ignore all of the other controls every time you are on your way to hitting the most important one.

One way to tell how visually dominant a control is, is to blur the design (or close one eye and squint) in order to roughly approximate early visual processing. If a control passes this test the user should be able to visually target it at a very quick glance.

Here are a few examples. You can still see the navigation controls in Firefox, and the pause button on the TiVo remote.

Squinttest

So I, like you, am not dumb. I know exactly where the pause button on my PS2 control remote is. However, the graphics card in my brain has to devote far more resources to helping me to target and hit it compared to when I am trying to hit the pause button on my TiVo remote. The same goes for OK buttons on dialogs in Windows compared to OS X, or when choosing which Web browser to open.

3. Easier Control Differentiation (Better Interactive Design)

When it comes the slow and fast forward buttons on my PS2 remote, I actually am dumb. I can never remember exactly where they are, and the glyphs look similar enough in low light that I regularly hit the wrong one accidently. But it’s very different with my TiVo remote, even without looking at one or holding one, with just picturing the remote in my mind, I can quickly recall where the slow button is — it’s directly south of the pause button (which is sort of the capital city).

Landmarks

We mentally encode locations based off of directions from memorable landmarks. In the case of the PS2 remote, the nearest major landmark for the slow button is the play button, which is large and pretty easy to both remember and find. But from there on in, there aren’t any more landmarks, was the slow button in the first row or second row? On the TiVo remote, literally every single control is in a memorable direction from a major landmark (with the exception of the numeric keypad). The result of this is that after learning all of the button positions, you can pretty effectively use the remote without ever actually looking at it, but instead just by feeling the shapes of the controls and moving from known landmarks to the more obscure controls like Mute or Info. It isn’t impossible to both learn and remember the position of all the controls in the PS2 remote’s grid, but it is considerably harder.

So how do varying control shapes and memorable landmarks effect Web browser design? Now, unlike a remote control, you probably aren’t going to try to use a browser without directly looking at it, as that would kind of defeat the purpose. But what if we tested a browser design by taking away a key visual cue: the glyphs or symbols drawn on the controls:

Controldifferentiation

With the glyphs removed as a possible indicator, the shape of the keyhole can still be used to identify back and forward. Also, landmarks like the keyhole and the location bar can be used as a reference point for more obscure controls like reload and stop. Reload can be mentally encoded as “east of keyhole” instead of “third from the left, or second from the right.” Even merging reload and stop together helps a little bit since it causes them to each have a more unique shape. When merged, stop and reload can even use each other as landmarks.

4. Creating an Iconic Form (Better Branding)

This final consideration isn’t related to improving visual or interactive design but rather the larger realm of product design. Creating a visual hierarchy based on things like size, shape, position and color results in more memorable and recognizable products. For instance, the TiVo remote is incredibly iconic, it’s shaped like a peanut and has a large bright yellow button in the middle. The PS2 remote in contrast looks very similar to other remotes by companies like JVC, Philips, Panasonic, Pioneer, Onkyo, Samsung, and the many others that have a tendency to place small black buttons in a grid.

We decided to use the keyhole shape for our navigation buttons because we wanted to have a visual element that made Firefox consistent between different operating systems, and also to visually differentiate us from other browsers on each system.

Iconicform

One final question I’ve gotten a lot:

Aren’t Asymmetrical Forms Ugly and Symmetrical Forms Innately Beautiful?

Yes. But, there is an important caveat: this only applies to anthropomorphic forms. For instance, a good way to design a disturbing looking robot is to make one eye larger than the other (and believe me, we also seriously put a lot of thought into robot design here).

Laputarobot
Laputa Robot by Hayao Miyazaki

While not related to symmetry, it also helps if the robot is very tall.

…Back to Toolbar Customization

Ok, so maybe there are a few reasons why you can build a better interface if you use visual hierarchy, but I want to be able to totally customize my toolbar and not have my icons appear at all sorts of different shapes and sizes that look really silly when you move them into a completely different order!

I totally agree (with that statement that I just wrote to myself), designing a great default user interface that leverages visual hierarchy, and also letting users completely customize the configuration of their toolbar should not be mutually exclusive goals. Unfortunately, kind of like how the user interface design of the PS2 remote was based on the most logical configuration of the underlying circuit board, our platform doesn’t (currently) allow us to do things like placing multiple instances of the same control in the toolbar customization palette, or a group of related controls. We also are somewhat limited in our ability to adapt the visual style of controls based on their placement relative to other controls.

Toolbar customization is really important, and so is visual hierarchy, so we need to start fixing the limitations of our platform.