On Thursday, I wrote about how Office 2003 renders the user interface using a table of several thousand colors.
Some of you commented that we're crazy to do so much work. Perhaps, but keep in mind that I'm not just talking about the menus and toolbars; every color used in the interface of every program, from Outlook to Visio, is contained in the color table. I believe there are 75 or so just for the Outlook calendar view.
Back to the Future
Today, the Office 2007 story. Flash forward to the lazy summer days of 2004, in which we were first developing a sense of what kind of visuals we wanted for the new UI to complement the interaction designs we'd been working on since the fall of 2003.
It was clear to our designers that in order to make a beautiful, rich, highly-detailed UI that we would need a lot more than just colors. We would need to render the UI based on images with alpha channels (per-pixel translucency), the ability to layer effects and images on top of one another, and the ability to crossfade and animate smoothly between images.
The graphics platform on which we built the Ribbon supported many of these capabilities already, so the developers went to work building the Ribbon and visuals architecture to allow us to fine-tune the look as we went.
As the first private beta test build approached (a pre-Beta 1 build we called "DF4"), we implemented the Beta 1 visuals as a proof-of-concept of the visuals architecture. We knew that those visuals weren't going to represent the final look, but we learned a lot about the effort required and pitfalls associated with creating a textured, graphics-based layered UI.
After we shipped DF4 to beta testers, we turned to figuring out what the real visuals would look like, targeting Beta 2 for their release. (In reality, we finished an initial version earlier and shipped it in Beta 1 Technical Refresh.)
Early in this process, we decided to make at least two different themes, and to make more if we had the time. We created blue as the first theme, and got it into the usability labs as quickly as possible to start measuring the effect of the visuals on the usability of the product vs. the Beta 1-style visuals.
Certain changes we made, such as moving group titles to the bottom of the Ribbon, warranted doing eye-tracker studies to help understand the different scan patterns created by the revised layout.
Black Is Always In Style
After we finished an initial version of blue, we wanted to do something more high concept, a bit more techy, and less mainstream--and thus Black was born. Each of the themes takes a team of designers several months; hundreds of hand-drawn PNG files comprise the core of the UI, many of them additionally rendered in 120, 144, and 196 DPI versions in addition to the standard 96 DPI version. And, of course, the 1500 colors have to be altered to match the new theme as well.
At this point, now that we had two themes, we had a decision to make. Should we allow people to choose any theme they want? Or should we use the theme that we think best matches Windows (like Office 2003) and remove the element of choice?
In the end, we decided to give you the choice as a tenet of the new UI; you pick how you want Office to look. If you want to match the OS, go ahead. If you prefer something different, you can have that too.
On the other hand, because the classic UI programs (Publisher, OneNote, Project, etc.) are still based solely on the color table (which is, in turn, based on system colors), the color scheme these programs use is still determined by the operating system's theme and color scheme.
The End Game and Choosing a Default
After Beta 2, we looked at the schedule and decided that we could get one more color scheme done before RTM. The next one on our list was Silver, and we worked on it for three months or so in late spring/early summer.
Now we had our full set of three color schemes for the new UI programs (Blue, Black, and Silver) as well as the ability for anyone to change their scheme in Options. All that was left to decide: Which color scheme should we ship as the default?
It was always our intent to ship Blue as the default when running on Windows XP. Blue was the first theme we made and it's the one most emblematic of the kind of visual design we wanted to create: optimistic, friendly, and approachable. Across the broad spectrum of skill levels, work environments, and different cultures around the world, the blue is a very good default choice.
The harder question: should we choose a different default color scheme when running on Windows Vista?
Initially, we thought about making Black the Vista default. (In fact, we shipped Beta 2 this way.) The black scheme was kind of inspired by the Vista taskbar and start menu, so it wasn't a totally crazy notion.
Unfortunately, it turns out that many monitors can't really display the black theme very well. On many LCD and CRT monitors alike, ugly banding occurs across many parts of the Office window in this scheme.
This is because these monitors can't display the many shades of very dark gray used in Black. We investigated what changes to the color scheme we could make to enable it to display better on more monitors, but it turns out that you need to either significantly flatten the UI (which made it look like Command Prompt) or lighten it up to the point where it's pretty much Silver. So Black as default was out of the picture.
This left Silver and Blue as options. After a lengthy series of discussions, we decided to make Blue the default on Vista as well as on Windows XP. We liked the default experience being the same regardless of the OS, and we also felt that the decision would allow us to push Silver even further towards being a totally neutral color scheme.
In the months since we made this decision, based on much user feedback, the Vista team changed their Windows Aero (glass) and Windows Basic appearances in Windows to move them from gray-ish to blue. One happy result of this change for us is that our Blue color scheme now matches the default glass (and non-glass) appearances in Windows quite well. So, I think the decision to go with Blue as default on Vista really did turn out for the best.
Here are two tables I put together to outline the different color scheme configurations and options for both new UI- and classic UI-based programs in Office 2007.
Office 2007 New UI Programs (Word, Outlook, Excel, etc.)
Office 2007 Classic UI Programs (OneNote, Publisher, etc.)