Hello, I’m Keri Vandeberghe and I work in Microsoft’s Office Design Group (ODG) as a User Experience Designer. I would like to share the story behind the visual approach and brand integration for Office 2010. I’ll give you a behind the scenes look at the philosophy that led us to the current design direction.
Office 2010 is not a complete makeover but a visual refresh to refine surfaces and remove unnecessary visual elements so the focus is on users’ content and less on the borders and widgets that frame the content part of a window (this frame is also known as the “chrome”). In order to achieve this we’ve reduced the number of borders, boxes, and horizontal banding which gave 6 extra pixels of vertical space back to the content area. By adding more white space, and carefully placed visual elements, we strove to create an interface that appears less intrusive, lightweight, and leaves more room for the self-expression of those using it.
For Office 2007 the Ribbon was a new UI paradigm and the visual styling was emphasized to expose features, show the relationship of controls, and bring forth functionality that was buried in menus and dialogs. Boxes and borders around each control and Ribbon group acted as “visual cues” to guide the user. The Office 2007 Ribbon used a high gloss glass surface, which aligned with the Windows Vista aesthetic, and added an additional “WOW” to a new interface.
Comparison of Office 2007 and Office 2010 Ribbon
In Office 2010 we feel the UI has matured and taken on a more refined appearance without sacrificing the overall structure of the Ribbon and its functionality. A major change for Office 2010 visuals is that the default theme is no longer blue. We chose a neutral palette to minimize sensorial overload when creating documents and we also made a departure from flashy finishes. The Ribbon is still the most prominent UI piece and sets the pace for all that follows. The user interface below the Ribbon is more subdued. The soft gradients and the use of light and color are meant to call attention to or draw the users’ eye to a specific area. There is a visual rhythm defined by white space and a few highly contrasted elements like the Office brand orange to indicate selection and the individual product colors in the File tab.
We’ve continued the tradition of shipping three UI themes; Silver, Blue, and Black. All of the text in the Silver theme now has a 5:1 contrast ratio (the perceived difference in a color that occurs when it is surrounded by another color) with its background. This is a common request from our users with low vision and we’ve found that most users also benefit from the enhanced readability and improvements.
You’ll find the control for switching themes by clicking on the File tab > Options > General > Color Scheme.
Consistency in the overall visual styling across Office applications, SharePoint, and Web Applications was a major goal this release. We wanted the experience to feel familiar and consistent when moving from one product to the other. The neutral color palette in SharePoint provides a platform for individual company branding to shine with much less effort. Carrying over the neutral color palette to the Web Apps pairs well with a variety of host chromes and ties the experience back to the full service Office applications.
The Office Design Group worked closely with Microsoft’s brand team to evaluate, refine and identify the in-product branding opportunities. This collaboration ensured that the brand was infused in the product in a relevant and distinctive way.
With Office 2010 we’ve unveiled a new Office brand system. The logo has evolved, moving from the original four colors that signified Word, Excel, PowerPoint and Outlook to a mark that fully embraces the Office orange brand. The logo also completes the evolution from the puzzle pieces last seen in Office XP to a mark that conveys energy, impact, and connection.
The application icons have been re-designed for the release of Office 2010. The new icon designs respond to research that informs us that users can more easily associate icons by letter and color than by abstract design. We’ve adopted an alphabet system to bring a more uniform approach to the wide variety of Office family products.
We’ve also chosen to play up the individual application colors this release and have updated the spectrum of colors to use a more vibrant and pure color palette. We’ve added the product color to the File tab and a few select elements in the Backstage view to make it easier to quickly identify the Office application you are working in. Think of the application colored File tab as a sneak peek into the Backstage view.
The new Microsoft Office brand gesture and updated orange color palette is showcased in the animated splash screen. The animation adds energy, expressiveness, and an element of delight to the product launch experience.
It’s not just a pretty picture Designing and implementing the visuals for Microsoft Office goes beyond the icons and the age old desire simply to “make it look pretty”. It’s about bridging the gap between the familiar and the unknown, conveying and building on a brand, and helping users complete their daily tasks without getting in the way. Hopefully this quick overview has given you a better understanding of the visual refresh you’ll see in Microsoft Office 2010.
More themes please beside Black, Blue, and Silver.
Earlier in Office 2007, when I used to add the table icon( to add border on all sides to a table) to the quick access tool bar, if the theme selected is black, then i wont be able to see the icon unless I hover the mouse over that location. Reason being: black theme is not gradient based at the quick access toolbar and it merges with the icon. I believe with the office 2010 UI, the black theme is little gradient and will show the users the icons that are present in the quick access toolbar vividly.
What?? No, button borders? Come on! Saving 6 pixels for that beautiful ribbon of 2007?
I always liked the idea of having groups, so giving more focus to them is needed... and i agree the buttons for dialog boxes could've been more prominent.... i almost forget that there's more to fonts and character spacing, for example, than given on the ribbon.... so please, make it more prominent - bigger size, brighter shade etc.
and i agree that too much customizing can add confusion. there should be an option of changing the home tab, add more tabs... but other default tabs should remain as it is.
the icons are not at all great. the idea to use first letter is great but 3 P's!! It's too much... You can do it like creative suite ;) Like Ps, Dw etc
And I would suggest to either upgrade the Publisher app. It is useless. Either drop it or make it wortk it. The only thing it does is add another P to the array of office icons. Make it better and give it another name, my request.
Definitely agree - the ribbon must have button borders.
And perhaps the default theme should be blue? It looks so washed out in grey.
Agree with all the comments about Backstage view. It is a mess :(
Inconsistent sizes of items on the menu are a problem scanning for the item I want. But worse than that. Everything is in the wrong order. Microsoft have conditioned us for years in the correct oder of the file menu. New first, then Open, then Save, then Print. I get confused everytime I go there.
Backstage View is really annoying. Ouch! All always get lost when searching for what I want. And the difference between the tones of the pressed and unpressed buttons are very low, I'm almost unable to see it.
I doubt it would have any influence, but anyway:
- Removing button and group borders is the worst change. All just looks like heap of icons, absolutely unorganized. I don't know if it is some internal rule that all teams must make their software clearer (Windows and especially Live suite too), but removing lines as much as possible is lowering the usability. Like a supermarket without shells, just dump of bread here, dump of meat there.
- Interesting how it actually made the Ribbon require more width (see your first image). Increasing space between dumps does improve the feeling that they are more of them instead of single one, but does not help you when you need something.
- The logo. Visual Studio, now Office. What's up? Why is everybody giving up the colors? Some other internal rule? Seems so unbalanced now. Or perhaps we are going to leave out the names in the future. It will just be the orange product, the blue one, etc.
- File instead of the office logo: step back. A big one. Perhaps not for the < 2007 users, but what's the point of returning to the obsolete elements? Should I expect menus and toolbars in the next version?
- Also, moving it from the left right corner, to a bit down and bit left from the corner makes it unpossible to throw your mouse to the left right corner and click. Together with introducing "File" tab, this makes 2007 users just to click the application icon every time.
- Backstage: will not comment on this one, except that I really hate that the file recent list is not available upon switching there. Slows down and there is so much space avaialable.
- Icons: sorry, but terrible too. Oh, I forget we are going back in time, not only to one-color but also text-only world. Aren't they Microsoft guidelines to not include letters there? They are so cluttered that the applications are hard to find in the start menu. But everybody is using start search, so why bother.
- On the other side, I don't mind having three applications begining on P. And if you actually didn't put letters on the icons, nobody would complain either. Also interesting that you are changing things backward, likely to confuse users less, but introducing new product logos on the icons...
- Splash sreen: this one looks good... ...the pre-public beta one I mean, of course. Not sure why the saturated yellow-orange color needed to be change to this..one.
As for the options as somebody mentioned, search would help much more than the ability to maximize. Just like you can search Control Panel.
Why cannot be the colors or shading of ribbon be fully customized, like the aero?
Seems the 2007 design was simply too good.
I'm not at all liking these new icons... Personally, I see nothing wrong with the current ones.
I think what should have been done is keep the current icons (it doesn't take a genius to figure out that the little picture of the brochure might mean things like brochures) but change the colour of the ones that are similar in colour. I'm red\green colourblind, so I am a bit biased, but Access, OneNote and Publisher look awfully similar to me on my Quicklaunch bar (This is Office 2007, by the way). Heck, even from a distance, Publisher and Word look similar!
Please MS make it easy for users to get OUT of backstage view once they get. I am shocked some of the Office apps open IN Backstage view!! In Office 2007, clicking anywhere out the menu produced by the Orb made it go away. Now you MUST click on the File button to come out of Backstage view. This is not right. It should go away if users click on the title bar or Taskbar. Also, provide a more accessible key like Backspace or Space bar instead of Esc to come OUT of Backstage view. Unlike Office 2007's Orb, this File button doesn't even support Fitt's law (ideally it should be located at the topmost corner so coming OUT of backstage view is very annoying).
Two more usability and accessibility improvements you can make is:
1. Allow the ribbon tabs to be activated by mouse hover instead of mouse click.
2. Make the title of the application appear to the left like all Windows applications when the Quick access toolbar is shown below the ribbon because otherwise the Language bar overlaps the title.
Really forgot to reiterate what has been said in the comments:
1. In Backstage view, clicking should not be necessary, hovering should be enough. Please make it at least an option.
2. Huge UI regression: For commands on the Backstage view that bring up another dialog, they should say "Save As..." instead of "Save As" or "Options..." instead of "Options". For those that extend into the right backstage view, there should be an arrow or indicator. Did you forget the basics of menus/UI?
I dunno what stage Office 2010 is at for this for be accepted but before RTM, for goodness' sake make it follow Fitt's law! In 2010, MS is releasing its flagship application software that does not follow Fitt's law (File tab?)? Seriously, I need to reconsider buying. Imagine the headache if the Start menu didn't follow Fitt's law!
Is this branding and icon colour going to be the same as the upcoming Mac version of Office?
I much preferred the 2007 ribbon - 2010 makes it much harder to differentiate between icons.
Also, highlighting the File tab in such a contrasting colour makes me think that my mouse pointer is hovering over it.