A Separate Piece
I'm not sure when menu separators were invented. They could well have been dreamed up at Xerox PARC in the 1970s, although I can't find any definitive evidence of it. Apple included them in the design of the Lisa user interface; below you can see an example of menu separators looking pretty much as they do today in the Edit menu of LisaDraw, circa 1982.
LisaDraw running on the Apple Lisa, circa 1982
In common practice, a menu separator is used to break a menu into discrete chunks of related functionality. Usually drawn as a simple etched line, separators are thought to make menus easier to browse.
In Office 12, the Ribbon hosts controls which drop down menus. And many times we do still use plain old lines to separate sections in menus, just as designers did in 1982.
But we have another tool at our disposal that we use in certain menus as well: textual separators.
When a menu contains several discrete sections of loosely-coupled but related functionality, we use textual separators to show how the features in each section relate. The idea is that you should be able to scan the separators looking for the right section without needing to read every item in the menu. Here's an example of textual separators from a menu in the first tab of Excel:
We also use textual separators to categorize dropdown galleries for the same reason—to narrow down the set of choices you need to scan through. Here's an example from the new Office charting UI:
In places in which a textual separator would not be more helpful than a horizontal line, we do just use the line. In the LisaDraw menu above, for instance, putting a title "Editing Commands" over Clear, Duplicate, and Select All wouldn't really help to clarify the menu, so we would leave it off.
It's a judgment call when to use the textual separators, but we've tried to use them judiciously in Office 12 to clarify certain menus and galleries.
Comments
Anonymous
January 30, 2006
Great idea. Also, they don't take much more room than current divider lines do. I've always thought the dividers are too tall, but text dividers seem just right for what they do.Anonymous
January 30, 2006
This is the first thing I've seen in the new Office UI that I'm not struck dumb by. I can definitely see the value in using the separator titles for obscure command areas, but in the examples you've provided, it just feels like extra visual complexity. For example, in the chart gallery, I can see the kind of groupings into which the chart styles are separated. The titles just slow me down here. And in the menu example, I suspect I would ordinarily just scan the first menu item in each section and get similar results to scanning the separator text. Overall, I wonder whether the textual separators are always going to add enough value for the visual hit they're imposing. I know they're not used everywhere, but from the examples given, it looks like they might still be overused. I guess the proof of the pudding's in the eating, though, so I'll wait and see how it feels in the final product. :) P.S. Great blog - best thing on the web today.Anonymous
January 30, 2006
The comment has been removedAnonymous
January 30, 2006
Brandon -- It seems like the Visibility tag is there because otherwise the hide/unhide would be either "under" cell size, or would be orphaned with just a regular separator on the top of it... which might just look weird. it seems that once your menu has more than a few of these textual separators, you can't use regular separators as well...Anonymous
January 30, 2006
Textual separators are ok with menus composed of images, but when they are interspersed within a normal text menu the result is visually confusing especially when they are rendered in a font the same size/weight/color as the rest of the menu (the fact that they have a different background is not enough differentiation). At the very least textual separators should be dimmed to show they cannot be selected. Ultimately though they are unnecessary. In the example given all the items are fairly obvious and the further explanation is just more visual detritus. I would argue you don't even need them in the graph example.Anonymous
January 30, 2006
"I would argue you don't even need them in the graph example."
I will have to disagree completely. I think they are MOST VALUABLE in the graph example if for nothing else other than to simply name the choices for the purpose of verbalization.Anonymous
January 30, 2006
The comment has been removedAnonymous
January 30, 2006
"they are MOST VALUABLE in the graph example if for nothing else other than to simply name the choices for the purpose of verbalization."
Good call! I hadn't considered that. :)Anonymous
January 30, 2006
Jensen:
Why not have a Default Height under selection for Rows?Anonymous
January 30, 2006
Pretty cool, but I would agree that the visual design needs a tad more work. It seems these would be easier to scan if the labels were a tad closer to the group they label than to the next group. If you just glance at the middle of the menu or the gallery, it takes a second to realize they are labelling the items below (like a heading) and not the items above (like most captions). Part of the problem for me might be that the highlight color on the top scanline of the text separator matches the background color of the menu, making them feel more connected to the items above than the ones below. In the end, I think the labels will help with learning, but a user familiar with the menu will experience the labels exactly like traditional separators.Anonymous
January 30, 2006
Craig, It's because Excel doesn't have that feature. The default row height is calculated based on the default font used in the workbook.Anonymous
January 30, 2006
Adrian, Thanks for the feedback on the visuals, we're still working on them.Anonymous
January 30, 2006
By the way, if you haven't noticed, all of MSDN blogs has been upgraded to a new version of Community Server. There are a still a number of problems, including a lot of "access denied", RSS feed problems, comments with extra empty lines at the end of them, etc. Hopefully, people are working to help get the issues fixed behind the scenes. Keep trying if you can't get through!Anonymous
January 30, 2006
Don't think they are needed. Why does someone need to know a bubble graph is called a "bubble".Anonymous
January 30, 2006
Kim: Maybe, maybe not. When your professor tells you to use Excel to make a Surface plot, you'll be glad the label is there. In my mind, there are minor advantages and hardly any downside.Anonymous
January 31, 2006
When using some of these menus with galleries and very graphic-heavy options, the screen gets very cluttered (see some of the screens from the Excel blog with colorful pivot tables behind galleries).
Is there any chance that you can apply a filter to the document/spreadsheet when galleries and menus are accessed from the Ribbon which would fade or grey-out the document/sheet so that the menu and it's options are the focus. That way the graphics and options from the menus don't get lost.
For example: http://www.isamrad.com/dgainer/2_12-20-2005.png
Those little chart style options get lost. Now, maybe they fade into view or some other visual cue alerts the user where to look when the menu appears, but yikes, that little menu almost got lost.
What if you did something like:
http://img492.imageshack.us/full.php?image=212202005new7eo.png
That way the menus stand out more?Anonymous
January 31, 2006
Yeah, I think I have to give it the thumbs down. (I'm gonna guess that it'll still ship in Office despite my thumbs down, though.)
The problem is that I need to see what the menu items are, but the highlighted "textual separators" keep drawing my attention instead. And, as another person commented, once you use it once, you're kinda stuck using them for the whole menu. In the example you posted, there's no real reason for a "Visibility" separator for one menu item.
BTW, did anyone see that study a week or so ago about how people form an opinion of something within the first 50ms of seeing it? The first time I saw the contextual separator I knew I didn't like it, it just took a few minutes to come up with the reason why...Anonymous
February 06, 2006
You may remember that
last week
I described the textual separators that we use in Office 12 menus to...Anonymous
February 23, 2006
I would also make the header text half the size of the menu item text and have an option to switch them off and revert to lines.
Rational: These are great for newbies, but once you are familiar with the app you probably don't want them at all due to having extra fluff to read.Anonymous
October 27, 2008
PingBack from http://mstechnews.info/2008/10/the-office-2007-ui-bible/Anonymous
June 07, 2009
PingBack from http://greenteafatburner.info/story.php?id=3789
