Gordon Christie

gordonchristie.com

All-Caps Design

I recently spotted this post from Microsoft, on their choices on menu design in Visual Studio:

Using uppercase for the menus was not an arbitrary decision, and I think it will help the discussion to frame why we made this change.

We’ve chosen to use uppercase styling in the top menu for two main reasons: 1) to keep Visual Studio consistent with the direction of other Microsoft user experiences, and 2) to provide added structure to the top menu bar area.

1) is a bit worrying, if it’s due to be propogated through Windows 8 and beyond – the choice of a single background colour for the entire upper area of the window means that this kind of problem will crop up frequently in Windows 8 UI design.

The main problem with 2) is that it’s a hack, created to solve a problem which has been entirely created by the surrounding design. If you look at the screenshot in before, you’ll see that the menu items do indeed fade into the background. There are several reasons for this:

  • The top area of the window is very busy because of the icon toolbar directly below the menu bar – many click targets are concentrated in one area
  • The icons are the only non-monochrome elements in the area, distracting attention from the menu items
  • This is compounded by the lack of background colour anywhere in the area, which means that these distinct areas (window bar, menu items, toolbar buttons, and to a lesser extent editor tabs), visually blur together

This leads to the decision in after to use caps to emphasise the menu, so it doesn’t get lost. The “Quick Search” off to the right has been moved upwards as well, although this isn’t really the problem.

This choice is seemingly forced upon Microsoft in order to match a new unified Metro “style”, although I’ve been unable to find anything official on Windows 8 desktop UI guidelines. This choice leads to compromises that are worse in usability terms (and aesthetic terms!) than the elements they replace.

There are several alternatives that wouldn’t involve using ugly all-caps items:

  • use a different tone of grey in the background for the menu and window bar, emphasising the difference between the menu and the toolbar
  • remove the toolbar items, or move them to another area of the interface, reducing the visual clutter (e.g. move to the bottom of the editor area)
  • adding lines between at least one or two of these areas would help to differentiate between them

Crafting the UI for an IDE is a great opportunity for Microsoft. When creating new UI elements and styles, the OS provider has a strong obligation to lead by example, especially in a tool which all Windows developers will use. And an IDE gives a great opportunity to see how design guidelines hold up in the face of a complex, real-world UI.

There is a significant emphasis on Metro style apps in Windows 8, but I think that if there is going to be a desktop environment, it should be well thought through.

When the solution to a problem is to create something which is worse in both appearance and functionality, maybe this isn’t the problem they should be trying to solve.