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.
Exactly Eric, that's how I feel, too.
The color splash in the bottom right of the Backstage view is the Office brand graphic which has been colorized with the application color to add interest to the Backstage view and also reinforces the application you are currently working in.
Thanks for your feedback about button outlines in the ribbon. At first the absence of button outlines might be a shock, but as you continue to use Office 2010 I’m curious if your opinion changes? There are a lot of applications and web sites that no longer draw borders and lines around buttons and controls until you mouse over them. We’ll continue to gather usability research on this change and keep it in mind for future releases. We hope your opinion changes, but please leave us feedback over time.
When you mouse over the ribbon in 2010 the group still lights up. It’s much more subtle than 2007 but it’s still there.
@joesixgig @cuz84d @Mark Bower
We are currently working on ways to add more flexibility to the Backstage view and I’m confident we can solve some of the spacing issues in the left navigation area in the next release.
Wow...y'all must be so embarrassed about those icons. What a hot mess. Design by committee never works, and these are proof. They are unintelligible, generic, ugly, and boring. I like the Office brand redesign. But those logos look fresh from 1998.
most of the post here are negative. dissatisfaction here and there. you people are never contented. so please stop using microsoft products.
some say vista and windows 7 is slow. well have a refund and stop complaining. and also stop posting about windows 7 and vista here. you should be aware that this is about office 2010.
I agree strongly with many of the comments here. I would particularly emphasize these:
- The loss of the borders around the ribbon elements actually detracts from the ability to discern and quickly find individual commands. Everything seems to run together at a glance and you must work harder visually to separate elements. Keeping the visual seapration while making boders and icons more subtle and "quiet" would be better achieved using tone-on-tone effects.
- Surfacing the ability to hide the Ribbon is nice--but it would be MUCH nicer if an option was provided to make it work like a traditional menu system, responding to hover rather than clicking
- When the Ribbon is open, by far the biggest usability issue in my experience is that the Ribbon changes unexpectedly due to context-awareness. Too frequently, clicking on a command that opens some document or form causes the Ribbon to switch to a different default group for that document. Often this behavior is unwanted, and it is work to switch back to your previous place. It can also cause confusion as new icons and commands appear seemingly at random and it is not always immediately clear what happened ("where did my commands go?"). This behavior is particularly common in Access 2010.
- The functionality of Backstage View is welcome and the overal concept is nice, but I strongly dislike how the File menu has been effectively overloaded by this feature. The problem is there is this huge and jarring context switch into... someplace else, with your work no longer visible, when you just want to save or create a new document. I realize that I can customize the Quick Access Toolbar to surface common commands, but really, 99% of users will never do this. Making File an actual Ribbon group or a menu as in Office 2007, having New, Open, Close, Save, Print, etc. along with the ability to ckick into Backstage View for more options would be better, IMHO.
Thanks for listening
Good job guys!
The ribbon is clearer, which makes it easier to see things. All the bulky borders from 2007 are gone!
again great job!
On Windows XP the contrast between Windows (in Outlook click on "New mail") is bad, because there are no shadows on the windows like on Windows Vista/7.
Don't mess the great layout of 2007 up. It looks like you are going to make 2010 Flat and ugly, and that doesn't make sense since you really did a great job on 2007?
I do like the new visual design and I think the backstage is a good idea. It is just not thought out well enough.
Please do away with all this different pop-up dialog boxes! You now have a fresh backstage view to populate. The current way is much too visually noisy. Sample: Save As
1. Click the File Menu (hard to hit, why not Fits Law upper corner? Large step back backward)
2. The whole screen changes to the back stage view
3. Click on Save As
4. Again the whole screen changes back to the document view
5. The Save As dialog appears just as it ways "years ago". This is just sooo last century ;-)
Why not allow the following flow:
1. Click & Hold on File Menu Square (double height to utilize Fits corner)
2. The Backstage appears
3. Release over Save As, the right part of the backstage shows the Save As area.
4. Change Filename & Path at will & click on the save button.
Alternative way (both ways should be supported):
1. Click on File Menu Square
3. Click Save as
4. Same as above
Other dialogs to be incorporated into the backstage are Help and Options (currently a little less awful than before, but still crazy). The New section needs to be changed to give direct access to the users own templates (and the organizations').
1. Make a drag source in the Information section of the backstage allowing to drag the current document to a new location (like mail attachment or similar).
2. The Save As backstage area should contain links into sharepoint.
3. All document properties should be accessible from the Information view, incl. cust. properties.
4. LRU list should be accessible with one click. Click & hold on file, hover Recently Used and release above selected file.
5. Could the LRU list contain Email locations? Would be great.
6. Windows 7 Jump List should include links to New documents with selected template.
7. Searchable option dialog. Allow a search field to find all that obscure settings that you can never group in a global understandable logic.
@ Keri: The group may light up, but my eyes do not pick that up on a laptop screen. But I do not miss that much. You should continue the path to less clutter, distracting display changes and others (animated splash screens???).
@Marc: Are you asking to see a video of the animated splash screen? Unfortunately we are not able to post a video to the blog at this time.
"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..." I agree with Davyd McColl that I would like the capability of disabling the Office themes, partly because they're different from the themes that all my other programs use, and therefore confusing; and partly because they're too pastel, and I can't tell at a glance whether that window has the focus or not.