Microsoft Office 2010 Engineering

The official blog of the Microsoft Office product development group

Office 2010: Visuals and Branding

Office 2010: Visuals and Branding

  • Comments 76
  • Likes

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.

Philosophy

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.

RibbonCompare 
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.

Office2007_2010compareLarge

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.

image

You’ll find the control for switching themes by clicking on the File tab > Options > General > Color Scheme.

optionsDialog

Consistency across Platforms

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.

 platform_compare

Alignment with Brand Strategy

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.

OfficeBrand_compare

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.

ProductIcons

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.

FileTabCoreSet

Backstage_all

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.

 splashsequence

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.

Comments
  • This image in very low quality...

    Could You upload bigger image, please.

    http://blogs.technet.com/blogfiles/office2010/WindowsLiveWriter/Office2010VisualsandBranding_BEDE/Backstage_all_2.png

  • Most of the interface work has definitely been an improvement. However on first glance the left side menu in the backstage view looks unrefined. The vertical spacing between the 'iconized' items is completely different than between the other 'non-icon' lines. The 'options' icon is narrower than the other icons, which adds to the feeling of 'misplacement'. Have you tried using a fixed vertical spacing and left-aligning the text, rather than the icons?

    Another issue I recently ran into: on low-res displays, a long QuickAccess toolbar can make it uncomfortable to move the window: very little 'grabbing area' remains. Additionally the document title becomes largely obscured. Either allow users to click and drag a window even when grabbing on to toolbar icons (should be OK, right?), or choose a larger 'minimum title width' condition.

    Otherwise, nice work - cleaner is better!

  • I've always wondered why the 'themes' for Office can't be changed on a per-program basis. Which is to say, why can't I use the 'black' theme for Outlook whilst using the 'Silver' theme for Word and Excel?

    On the whole, I love the new visuals, though.

  • Good work...

    but...

    The icons don't look good. They look too "American" (which is a real pity compared with the Expression Icons which have taken a similar approach). I really don't like the font that those initials use...

    Also +1 for the Backstage view looking inconsistent within and between Office apps.

    Are you planning to do some usability work on some of the dialogs in the apps in the next version? some of them look *very* inconsistent and puzzling. I'm thinking of the drawing tools shape properties dialogs and paragraph/styles dialogs. They're horrible. It seems like a lot of this work is all about the (admittedly 80% used) functionality, but the rest is being left to look a bit ugly...  

  • Agree, back stage is shocking, hate having to go there, sort that out fast - what's the colour splash in the bottom right for?!

    Also amimated splash screens, please!

    Apart from that, improvements overall from 2007, well done.

    thanks

    Ross

  • I definately prefer the old icons and logos from Office 2003 or Office 2007.

    Infact I even prefer the Office 2000 icons to the new icons, they were extremely simple and high contrast.  The new ones have too much colour and emphasis on alphabetical letters as oppossed to program function.

    The new icons can look nice if your viewing them as larger icons, but since I usually see them from the quicklaunch as smaller versions (yes I put back my quicklaunch in Windows 7!)..I don't really think they're as attractive as the older versions.

    Having said that attractive icons do not make a good or bad application and can easily be changed.

    The coloured file menu button being specific is a nice touch.

  • Thank you for the article. One thing I'd like to mention is, that using Office 2010 Public Beta it is problematic for me to see unread e-mail count in Outlook using the themes. In 2007 it was easier to spot. Is this something that will be worked on?

  • Yeah I think if I was redesigning the new Office 2010 logo it would have had a ribbon in it.

    I really liked the old Logo colours: red, blue, yellow and green, it makes you think of the Office suite as something creative.

    The new colour scheme just doesn't stand out as much.

    I would either keep the new colour scheme and make the whole logo pattern shape a ribbon, or go with the old colour scheme and logo but add a subtle ribbon to it, perhaps in the same shade as the new Access or Infopath icons.

  • My 2 cents:

    • The lack of button outlines on the ribbon looks awful. This seems like change for the sake of change. Button outlines are useful to users because they show the hitzone for the button in question.

    • The removal of the orb in favour of a File tab is a mistake. I expected the Home tab to be leftmost and it is annoying that this is no longer the case. Please consider removing the file tab.

    • The color of the file button/tab is distracting. It should be the same as all the other tabs and not stick out so badly.

    • When mousing over the ribbon in 2007, the group would light up. This does not happen in 2010 and mouseovers only happen when you hover over a button. The old style was clearer in my opinion.

    • The groupings of buttons on the ribbon (clipboard, font, paragraph and styles on the home tab for instance) is a step back from 2007. In 2010 they are just dividers whilst in 2007 they were properly boxed off and metaphorically grouped. The new style means the groups "run in" to one another.

    • The contrast between active and non active tab is not sufficient to be clear.

    • The ribbon and colors of 2007 are far cleaner, better defined and more inviting than 2010 (color, button outlines, more rounded corners)

    • The buttons below "Customise the Ribbon" on the options screen are badly placed and need aligning. They look very haphazard at the moment.

    • You should be able to maximize the options window. There is no reason why this should be a set size

    • The exit button on the backstage view looks like it is used to exit backstage - not the application! This could be clearer

    • The help icon on the ribbon does not match

    the one on the help window that pops up! The one on the ribbon looks flat whilst the one on the dialogue is much better looking.

    The new colour scheme and look is truly anaemic, the lack of borders on the buttons on the ribbon is a pointless and backwards step and the fact you have not made any real enhancements is a shame.

  • Interesting post, thank you!

    I agree with most of what you have done with the UI and see the improvements but to be honest I'm not as excited with this release as I was with the 2007 version.

    There are a few things I don't get or didn't like. For example that the user has to click on the items in the new backstage view instead of just hover over "New", "Recent" and so on. Or the rendering of the new Ribbon Tabs is just too simple, the border is just a single grey line, I do miss a subtle soft shadow and a fade out when you change a Ribbon Tab, that really "feels" great on Office 2007! (Sometimes it is difficult to see which Tab is active on a bright background, see your screen shots)

    Some things that bother me:

    - the height of the Ribbon is still different than the Scenic Ribbon in Windows 7. Old menus and toolbars always had the same size in every app...

    - there is still this ugly gap between the Ribbon and the underlying "paper" in Word when you scroll down

    - 90 % of the different mouse pointers in Office are from the Word 1.0 ages without a shadow! Come on, please! That's such a terrible experience!

    - the Dialog Box Launcher buttons on the bottom of the Ribbon are too small. Why can't they be as wide as the whole group in the Ribbon?

    - the colored titles for Contextual Tabs are way too prominent!

    - the splash screen animation is pixelated and too long - or the apps do start too fast ;) And the start of this animation looks terribly chaotic (see your first screenshot of it)

    - letting users customize every Ribbon Tab is a very bad idea. Really. It's not necessary for home users and too risky in an enterprise environment! I was really shocked as I saw it the first time. Isn't it a huge step back to the bloated monster that was 2003? I would prefer to have one single user Tab I can enable and fill with options I need (maybe even via drag&drop of buttons and groups onto it). That single user Tab would belong to the Windows user account.

    Just my 2 cents ;)

    And finally I'm curious about how "final" the UI and branding is in the beta? Maybe you can tell use if you plan to make some final changes to the look and feel? Thank you very much for the conversation!

  • Maybe now is the time to change the colors on a few of the applications, to avoid confusion.

    For example, both Word and Visio are blue.  Project and Excel are both green.  Etc.

    Also, users unfamiliar with the icons might easily  mistake Project, Publisher, and PowerPoint.  I think the illustrations need to be *very* different, or maybe it's time to rename Publisher and Project to something that doesn't start with a letter that's already used.

    I'd also like to ask that more UI consistency be enforced between the Office apps and Expression (not to mention a lack of compatibility between Expression Design and Publisher).

  • Yes, all very cool. But the Box Art Office 2010 leaked weeks ago. When in Microsoft Presspass or Microsoft Store?

  • Totally agree with the poster above:

    "• The lack of button outlines on the ribbon looks awful. This seems like change for the sake of change. Button outlines are useful to users because they show the hitzone for the button in question."

    Button layouts give a visual structure for the "complete" ribbon that helps find individual buttons.

  • Three "P" Icons? Two of which are slightly different shades of green. Wow that's going to be confusing.

  • Even being a long time Office user, I had a hard time figuring out the difference between the three P icons also, the icon illustrations should be clearer.

    I don't have a lot of gribs about it, and I think its refreshing after 10 years of the same thing.. I hated 2002-2003 icons..

    I think the backstage color tab is too bright, and the active tab color is not dark enough.  I would also try changing the 1 pt borders around the items to be 2 pt instead.

    I agree it would be nice if the individual panes the bottom dialog would be activated by clicking the any part of that footer area, not just the corner.

    I like the less stimulating themes, that is a much needed change, and very hard to develop or work with applications when they are hard on the eyes.  Its like when we switch to black monitors as the default standard, beign is just terribly hard on the eyes to stare at.  So kuddo's for the switch to lighter theme colors!

    The backstage view, left menu should allow hover to switch panes and better layout consistency I agree.. much needed, right now just looks hacked together.

    The Save, Save as, Open Close don't mesh with the rest of the items like Print, New, Recent..   Also, Exit is confusing, I want to exit backstage view or Close App.. not Exit App, it doesn't let you know what your exiting but feels better if it was Quit.

    I too wonder if File Menu should be renamed to Home, and Home should be renamed to Style or something because File and Home feel like it should be the same thing.

    I'm also not sure Office Orange Star Logo fits yet.. maybe the Logo could be more ribbon like a garment, flowing, instead of like a flower look.. I would add a touch of the 4 office colors inside the middle to give it some pizazz.. Than it would look like a colorful flower..

    I didn't like the Office Orb in 2007 just didn't fit in with the rest of the UI design.. So I like backstage view, but fix the left hand menu to look clear and consistent, because it just doesn't look right, and lessen the color brightness of the file tab and backstage color.. I know vibrant is nice, but too much color is not a good thing either when u have to stare at it.

    Also try making the Ribbon tab text darker so they stick out more.. since its hard for people to read, more black for the silver theme, then grey or washed out looking.

    Thanks.. over all good work, its coming along nicely, much more pleasant to use but needs some tweaks.  

Your comment has been posted.   Close
Thank you, your comment requires moderation so it may take a while to appear.   Close
Leave a Comment