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 (23)

  1. Nate says:

    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.

  2. Mal Ross says:

    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.

  3. I love this idea, but I noticed that the “Visibility” section only has one element: “Hide & Unhide”

    It seems like the heading is a waste here. I have to read one line of text in order to summarize another single line of text?

    It just seems sort of redundant. I’m not sure what is inside the Hide/Unhide submenu, but I would assume that if they were placed on the base menu, it would be cluttered. Maybe separators could have submenu arrows as well?

  4. Dave Solimini says:

    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…

  5. raul says:

    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.

  6. "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.

  7. Lars Jensen says:

    I can remember people asking Apple for these in 1984; maybe now they will get off the stick… 🙂

    However, it would be nice if they could be made less visually complex. Perhaps this is an opportunity to visually simplify menus in general. If you make the separator text grey, remove the colored backgrounds (including the stripe down the left side) and removed the lines (both the existing separators and the "3D" at top and bottom of text separators), you get something pretty clean-looking.

  8. Mal Ross says:

    "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. 🙂

  9. Craig H. says:

    Jensen:

    Why not have a Default Height under selection for Rows?

  10. Adrian says:

    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.

  11. jensenh says:

    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.

  12. jensenh says:

    Adrian,

    Thanks for the feedback on the visuals, we’re still working on them.

  13. jensenh says:

    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!

  14. kim says:

    Don’t think they are needed. Why does someone need to know a bubble graph is called a "bubble".

  15. jensenh says:

    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.

  16. kevin.ulland says:

    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?

  17. Dan McCarty says:

    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…

  18. You may remember that
    last week
    I described the textual separators that we use in Office 12 menus to…

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