Choosing the Contextual Colors

Tonight we spent a few hours finalizing the contextual tab colors for Office 2007.

As you may have seen in pictures of the new UI, each set of contextual tabs has a color associated with it. This helps to uniquely identify each tab set for familiarity's sake as well as to group related tabs when you're using two sets of contextual tabs at once (such as a picture in a table.)

We have seven colors to distribute among the many contextual tab sets: yellow, orange, red, green, purple, blue, and teal. Because we have far more than seven sets of contextual tabs, certain objects have to share colors. In addition, certain colors (such as yellow and purple) stand out more than others (blue, teal), so we want to ensure that the most popular objects have recognizable colors. In early testing, we found a strong correlation between visible contextual tab sets and discoverability/usability of the tools.

Choosing colors for Contextual Tab sets

To avoid duplication in practice, we have a grid of object types vs. applications that we use to figure out which objects can be used in conjunction with one another. Then, we ensure that the objects that are most commonly used together don't share a common color.

We used data from Beta 1 and Beta 1 Technical Refresh to inform the decisions about the contextual tab sets that were most frequently used. For instance, it turns out that "Header & Footer Tools" in Word is used a lot more than we thought, so the fact that in Beta 2 these tools use the blue color is probably not the right thing.

The contextual tab headers up in the title bar are called "flags" by the way. I can't remember why now, but that's what we call them.

Comments

• Anonymous
  May 10, 2006
  Jensen,
  
  Can you talk more about what types of "context" we have? Maybe take Word for example. I've seen context changes when working with a table, picture, object?, and equations (side note, equations tab is awesome with the galleries /w filters, etc). Any other context that word or other Office 07 apps have that would then bring up a different piece of UI (contextual tabs or others)?
  
  Btw, the idea of having these contextual UIs is excellent. No point in showing these tabs or commands when they are not really applicable. The trick is to not hide/show the tabs as to hurt the user's eyes... but in Office's case its just the tabs that are contextual... Also you mentioned way back in your posts about how you remember the previous context of the user and jump to that tab (was a picture object example I think). That was also nice to have.
  
  - Keeron

• Anonymous
  May 10, 2006
  Good idea, but the problem here is the same as the problem with Outlook 2003's calendar labels: not enough colors to choose from.  Outlook 2007 expands on this a little bit, but the user should be able to specify any RGB value and thus have virtually unlimited customization options.  
  
  It's not quite as bad a problem with these contextual tabs, but the Office dev team's persistence in giving the user few or no customization options is the bigger issue here.  That criticism aside, there is clearly advancement in this area in Office 2007, particularly with the ribbonx stuff we're hearing about.  And VBA is the greatest gift to heavy excel users.

• Anonymous
  May 11, 2006
  One thing I've always wondered after seeing how the context tabs float up into the title bar is, how does Office handle display large titles when context tabs are visible?  All the screenshots I'm seeing have small titles like 30-40 chars total (example: Marketing Strategy - Microsoft Word").  But what happens when the titles are really long like in normal use, for instance 150 chars long?  Since the context tab really cuts down the available room in the title bar, does the title shrink to the available area and use ellipses?

• Anonymous
  May 11, 2006
  Can't work!! Where is my morning shot of Jensen's?!?!

• Anonymous
  May 11, 2006
  The contextual colors are nice, but the way that the program/document title jumps around in the title bar is horrible. Why isn't the title left-aligned like it is in every other Windows program?

• Anonymous
  May 12, 2006
  TC, "jumps around in the title bar" is imho better than left-aligh.
  How many space you have between QAT (it may be bigger if you add some icons) and the contextual tab? Ther is more space after contextual tab, and if you change screen resolution you have even more. Especially, when there is a trend for widescreen displays.
  Look how it works with 1920x1200 resolution:
  http://img139.imageshack.us/my.php?image=word071920x12004cz.png

• Anonymous
  May 12, 2006
  I check out different resolutions and document title is always there, where is more space and is align to be as close as possible to screen center. I think it works very nice.

• Anonymous
  May 12, 2006
  I agree that they seem to have done what they can with the situation, but personally, I can't stand it that some of the flagship programs on Windows will no longer use a standard Windows title bar. Most people probably won't even notice, but I'd think a UI team would care about this.

• Anonymous
  May 12, 2006
  Yes, centered label on title bar is't standard UI :). Whole Office 2007 is diffrent from other windows applications, but I like it. Non standard Office's title bar is designed to take less space.
  QAT take place, where user expect program/document name and anyone, who use office first time, must search entire width of screen for doc's name. With name aligned to left - search will be faster, but if You will have 20 icons in QAT and context tab open You will see only "Docu..." ;)
  Centering title is little strange, but I'm not see better solution, without moving QAT.

• Anonymous
  May 13, 2006
  I think using different colours for the tabs is a great idea.  I would suspect, that due to the easier visual segmentation, it might reduce  the time taken to visually search for a UI element, a user can quickly focus attention to an area of the UI based on colour.  Has there been any user feedback in this regard?

• Anonymous
  May 24, 2006
  PingBack from http://kapustein.com/blog/?p=278

• Anonymous
  June 16, 2006
  Jensen:  Yet one more example of what I'm considering the arrogance of the ribbon.  Green on blue (a common version of color blindness will make this illegible for some people)?  Once again, why is there no real user customization?  More importantly, why does Microsoft refuse to even consider providing user customization for the ribbon?  
  

• Anonymous
  October 27, 2008
  PingBack from http://mstechnews.info/2008/10/the-office-2007-ui-bible/

• Anonymous
  May 28, 2009
  PingBack from http://paidsurveyshub.info/story.php?title=jensen-harris-an-office-user-interface-blog-choosing-the-contextual

• Anonymous
  May 31, 2009
  PingBack from http://woodtvstand.info/story.php?id=10221

• Anonymous
  June 18, 2009
  PingBack from http://barstoolsite.info/story.php?id=1340