Today I present guest writer Brad Weed, Product Design Manager of the Office Design Group. He leads the team of designers responsible for the new Office 2007 skins I introduced yesterday.

Today's Guest Writer: Brad Weed

Coming off the season finale, it seemed appropriate to lead with Beauty and the Geek to talk about the update to the new UI. Not because Josh is a museum critic or that Brittany likes the part of books that have pictures, but because those awkward exchanges and blank stares look so familiar to me.

It's that moment when a developer and a designer realize there was a reason they went to school on opposite ends of campus. "How could that dork be so smart but still need Garanimals to get dressed?" "How'd that designer get a job at Microsoft when they couldn't bubble sort their way out of a paper bag?" And with that you're probably already asking yourself, "Does Microsoft really have designers?"

We do. I started here as a designer many moons ago and now lead a team of user experience designers and researchers that are infinitely more talented than I could ever dream of being. We're the interaction design experts that Steven mention in his blog back in December.

As designers, we are pretty... geeky. We have some pretty developers too... pretty designy that is. Actually, the developer and designer relationship in Office is nothing like Beauty and the Geek at all. Maybe it's the mutual admiration of their respective craft. Maybe it's the recognition of how far the industry has to go toward bringing the beauty out of the geek. Maybe it's a shared acknowledgment that beautiful products go beyond the skin.

Somehow, some way, we've managed to establish and grow a pretty meaningful relationship over the years. It's a bond that has culminated in our most attractive release of Office ever. As it turns out, you can't have high design without deep engineering. That's right--you can't have beauty without the geek.

This is how we were able to make some pretty big design changes to the new UI fairly late in the development cycle. Let me walk you through a few of the bigger changes.

Blue is still the new gray

This is the first thing you'll probably notice. After living with gray for awhile we (and many of you) felt like that was just a tad too retro. Here's a major shift in our user interface with a color scheme that dates back to skinny ties and stirrup pants (although, mark my words, stirrup pants will be on the runway in the '07 spring collections.)

We went to blue to provide a little more continuity with the last release while also blending with the XP surroundings. We'll have an answer when the surroundings switch to Vista. A darker answer. If you end up hating one or both of the schemes, you're part of the 1/3 that also hate it. If you love one or both, you're part of the 1/3 that also love it. If really you don't care, you're part of the 1/3 that don't care. I predict the same division with the stirrup pants revival as well.

Tabs: The menus of the new millennium

You'll notice that, unlike in Beta 1, there are no more of the strange hybrid button-tabs to navigate the Ribbon.

That whole experiment was largely my fault. You see, my name is Brad and I have a tab problem. I was really hopeful that we could innovate in this area. Tabs just seem so... 90's.

But with a lot of therapy, countless sketches, prototypes and Beta 1, I've accepted a tab for what it is--a tab. There's no denying the usability win. There's no better way to draw a connection between the selected item and its related contents. I guess that's why they're so ubiquitous! Best of all, it's a little island of familiarity in a turbulent sea of UI change.

I hold hope that there's another mechanism out there that pushes us beyond the now conventional tab, just as the Ribbon pushed us beyond the conventional menu. I guess if it took 20 years to challenge old-school menus it will take at least another five or 10 years to challenge the tab. For now, I really like where we ended up.

Are we there yet?

How did we end up here anyway? As you might imagine, and as you've already read in Jensen's numerous entries, the process for arriving at the final design is arduous. There are so many factors to consider. I like to divide them into the basic principles of any product design: useful, usable, desirable and feasible. Jensen's covered in pretty great detail the utility, usability and utility aspects of the new UI, so we thought it would be good to talk about the desirability aspects. I'm sure there will be more in feasibility as well at another date.

Desirable products are more than just eye candy. There's something sublimely beautiful about a product that is useful and usable without even getting into aesthetics. (If you want to learn more about that realm of product design, pick up most any book by Henry Petrosky.) By this account of desirability, Office has done very well in the past. We have a rich heritage in shipping useful and usable products, and that's a beautiful thing.

But there's increasing attention being paid to aesthetics in product design these days and this release of Office is testimony to that. We have a long tradition in Office of maintaining an aesthetic that aligns with our utilitarian heritage. Part of that was derived from the available technologies. There was only so much you can do with 16 colors--four of which were black, white, gray, and grayer. Over the years we've been conservative (to say the least) in introducing more color and animation into our product. Either it didn't fit into the theme of a given release, or we just weren't that comfortable letting go our utilitarian past. Things have changed now and here we are. A bold new look.


PowerPoint 2007 - Click to enlarge picture


Going Dark in Office 2007 - Click to enlarge picture

All of our visual design decisions were made to both distance ourselves from our old utilitarian aesthetic while ensuring the visuals were helping make the product as usable as possible. These are difficult tradeoffs. Take, for example, the placement of the chunk labels. We moved them to the bottom to distance them visually from the tab labels. While this move was motivated largely by aesthetics, there were wins for tab readability as well. The connection between the selected tab and the contents of the tab are not obscured by a label and the chunk labels are not competing for attention with the tab labels. What results is a visual design that appears a little cleaner and a bit easier to read. (Again, 1/3 of you will agree, 1/3 will not and the rest of you don't care--but if you do care, take solace in the fact that we did do actual eye tracking studies and tons of yummy usability research.)


Before and After - Click to enlarge picture

Other things we changed were to bring the design more in line with some of our brand tenets while also providing more continuity from the last release. For example, the orange glow when you hover the controls. It's less obvious in Office 2003, but believe it or not that subtle orange rollover glow sparked the orange gradient glow that is a major part of the Office brand today. It gets trumpeted a bit more in this release with a richer glass material, bigger controls, and richer gradient (thanks in large part to some great technical achievements from our dev team).

Glowing glass is actually a big part of what holds our visual design together. We wanted to show the 'power within' Office by illuminating the glass controls from behind. This is most evident in the rollover state of the tabs (especially in the black theme), but virtually every control in the new UI has this element. Here again, we're also giving a nod to Vista where glass is a dominant part of their visual design. We're becoming increasingly aware of the importance of unifying elements of our design with our brand and with other products from Microsoft. There's still a lot of work to do here, but this release marks a huge step in the right direction.

When you get your hands on the real deal, you'll also notice some really nice rollover animations. They appear on the controls as they always have (albeit with a lot more finesse), but they also appear when you roll over a chunk. This allowed us to knock back the 'chunkiness' of the chunks until you actually intend to interact with the controls in the chunk. This means when you're working in the app, you don't have these big globs of chunks screaming for your attention. After all, we all have important things to get done in these apps. Why have UI screaming for attention? Well, ok. It's screaming more than in the past. But contrary to popular belief, the overall size of the new Ribbon is just about as tall as two toolbars stacked. And unlike toolbars, you have all that you need in that one place. We're very mindful of real-estate concerns and are doing our best to give you as much room to work as possible.

This attitude shows we're still rooted in some form of utilitarianism. We fundamentally believe there's just not a lot of room for gratuitous graphics and animation when you're building productivity tools. Sure some of our icons are bigger, but only because we believe some controls deserve a bit more attention that others. Despite the virtues of utilitarianism, there's always room to make utilitarian design just a tad more approachable and comfortable. Look at office chairs. Office chairs today aim to be utilitarian, comfortable and visually appealing at the same time. But that wasn't always the case. In the industrial age office chairs were to be uncomfortable so that workers wouldn't get too lazy. Crazy talk. But it wasn't that long ago that I recall similar things being said about our own UI. Just the introduction of colored icons in the early 90's was considered heretical by devout utilitarians.


Word 2.0, Word 6.0 - Click to view full pictures

Just look how far we've come.

Well that's just a quick skinny on the 'skin.' It's funny how skin gets diminished to visual fluff when skin is actually the biggest and one of the more complex organs of the human body. Have you ever tried to change your skin? It's hard.

Well, it's not that much easier with Office. We have an amazingly talented set of designers that spend inordinate amounts of time camped out with passionate developers devising clever ways to pull off these beautiful visual designs. And every decision intended to make the product more desirable impacts the usability and utility of the product in some crazy unpredictable way. This only complicates the process, yielding even bigger collaborations.

Without forcing a big group hug, let me just say we couldn't have pull off this amazing advance in design without great designers working hand in hand with great engineers. And as the show often reveals, the beauties and the geeks really do have more in common than they'd like to admit. The beauty of our geeks is they geek out on beauty.

As a design team, we could be so lucky.