Share via

Choosing the Contextual Colors

  • Article

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