UI matters: Menus and ToolBars vs. Office 2007 Ribbons

Posted by Patrick Smacchia on August 12, 2007

 Update: This blog entry has been revisited here.

We are
currently refactoring the NDepend UI and we hope to make it simpler. Everything
started from a simple, yet judicious, remark from my friends and colleagues Bob Powell and Fabrice Marguerie:

 

When you
target .NET developers, the closer to VisualStudio’UI, the better your UI is.

 

I then
realized that NDepend UI has room for improvement to abide by this simple tenet
and decided that the next feature will be a refactored UI. The UI will be
delivered in two phases:

 

NDepend 2.4
(scheduled for September) will have:

  • Docking
    windows
  • Menus
    and ToolBars
  • A
    new Options Window
  • Super
    tooltip (with pictures when relevant and 2 levels of explanations)
  • The
    possibility to choose the skin (the default will be the VisualStudio 2008 one,
    but we’ll propose also Office 2007 Blue/Black/Silver, Office 2003 and many
    others)
  • Automatic
    saving/restoring of layout.
  • Enhanced
    help categorized by use-case (metric, dependencies browsing, build comparison
    etc..). For each use case a starter will be proposed

 

NDepend 2.5
(scheduled for October) will have:

  • Integration
    of NDepend.Project.exe into VisualNDepend.exe (a la VisualStudio Project
    Properties)

 

  • Start
    Page
  • Colorful information about Code Elements.

 

This way we
expect that .NET developers will more feel at home when using NDepend which
should result in a less steep learning curve. We needed more than default WindowsForm 2.0 controls. Following Wesner Moise (from NStatic) advice, we will rely on the DevExpress’ DXperience
controls suite (free for MVPs by the way). We already tinker a lot with
DXperience and I’m completely satisfied with it. Good object model, full
integration with VisualStudio Windows Form editor, nice rendering and good
runtime performances. The only drawback is that the NDepend redistributable zip
file will grow from 1.7 to around 6 MB because of the weight of DXperience DLLs.
I like to keep things small when possible but here we had no choices.

 

We had to
take a decision. On one hand VisualStudio.NET (all versions) heavily relies on Menus
and ToolBars. On the other hand, since Office2007 Microsoft claims that Ribbons
represent a better way than Menus and ToolBars to organize features of a
product. I suppose that completely refactoring the UI of their second flagship
product was a big challenge for MS and that they thought about it very
carefully.

 

In order to
abide by the ‘closer to VS UI, the better’ tenet, we first decided to choose Menus
and ToolBars. After all, Ribbons are good for beginners but NDepend users are
experienced developers. Here is what the Menus and ToolBars UI looks like:

 

 

 

This
setting is automatically saved and will be restored for future use and it can be
changed at anytime.

 

The main
drawbacks of this approach is that it gives 2 appearances to the product and it adds a button. On the
other hand, we expect that experienced developers are used to configure their tool
appearance.

 

 

However,
when starting using NDepend, experienced developers are NDepend beginners and
we then thought that Ribbons could be a good choice also. We did a UI try and here
is what the Ribbon UI looks like: 


 

 

This entry was posted in Uncategorized. Bookmark the permalink. Follow any comments here with the RSS feed for this post.
  • http://no@nomail.com RibbonHater

    I have to admit that I absolutely hate Ribbons, they take up to much of the screen, and are uncustomisable and confusing!

  • Harold Hsu

    I just have a comment about DevExpress having a “good object model”. I’m using the DevExpress Grid and have found the API/object model a bit strange. For example, if you have a grid with multi-select turned on, then you can handle the SelectionChanged event, which is what I expected. I have changed a selection, so I should be able to handle the SelectionChanged event. But when the grid is in single select mode, the SelectionChanged event is not raised. Instead, the FocusedRowChanged event is raised instead. DevExpress differentiates between a row that’s in focus vs. a row that’s selected. According to their support, “In SingleSelect mode, the selected row is always the same as the focused row. Please handle the GridView.FocusedRowChanged event.” But still…I’m changing a selection…most people will expect a SelectionChanged event, don’t u think?

  • http://home nader

    it’s vere good

  • http://www.NDepend.com Patrick Smacchia

    Indeed, I misunderstood you.
    Thanks for the tip.

  • C-J Berg

    >Concerning the better cmpression algorithm, we unfortunatly cannot use something else than zip because it would force the user to download the others library.

    I think you misunderstood me. What I tried to suggest was that you could almost effortlessly create a GUI-based setup—a single, easily downloadable, highly compressed EXE-file—using NSIS or Inno Setup. Once developed for WinAMP, NSIS is today used by many well-known software makers, and renowned for its configurability and ease of use (see http://nsis.sourceforge.net/Users). Inno Setup is equally well-established. Both are far from being as complex as Microsoft’s “enterprisy” Windows Installer (which also is very slow in comparison to NSIS/IS).

  • http://www.NDepend.com Patrick Smacchia

    Thanks Andres for your remark.
    Here is my point of you:

    As said, NDepend’s users are VisualStudio expert but at first they are also NDepend beginners. Ribbon are good to avoid burried commands but they are also great at making your buttons more verbose.

    Anyway, if the user find the amount of screen real estate taken by Ribbon overkill, they still have the possibility to revert to VisualStudio mode at any time.

  • http://weblogs.asp.net/aaguiar Andres Aguiar

    If you read the posts about the new Office UI (http://blogs.msdn.com/jensenh/archive/2006/11/10/the-office-2007-ui-bible.aspx, look for the posts on the Ribbon), the use was that there was a lot of commands that the Office users did not know about, and couldn’t find. It does not look like your scenario.

    Additionally, most NDepend users will probably be avanced users of Visual Studio, and won’t need that much help. Looking similar to Visual Studio is definitely a good thing.

    So, from an outsider point of view, I’d say that the Ribbon is overkill. Anyway, I know it looks cool and you already did it ;) .

  • http://www.NDepend.com Patrick Smacchia

    We talked with the ‘Microsoft Office 2007 UI design guys’ and indeed we have to refactor the UI to abide by their rules, by adding an Application Menu, a QuickAccessToolbar and eventually grouping Ribbons.

    It adds some work but I don’t consider it as a burden as long as it will improve NDepend user experience. I’ll blog more about this once it’ll be done.

    If we still propose menu & toolbars, it won’t be a ‘hot switch’ but more likely a ‘your changes will take effect the next time you lauch NDepend’, for technical reasons.

    Concerning the better cmpression algorithm, we unfortunatly cannot use something else than zip because it would force the user to download the others library.

    >I think you are just transferring your indecision to your users ;)

    Ribbon seems to be definitely a better choice than menu (most of comment goes this way). But the idea of being close to the VisualStudio UI Experience is also appealing, so it is hard to choice and indeed, you can see as transferring our indecision to our users.

    This doesn’t sounds as a bad thing to me however since it avoids disapointing anybody. If menu and toolbars in Office 2007 would have been an option, who would have used it?

  • Keith Hill

    I prefer the Ribbon UI. However as an aside, can you display the assembly info somewhere else besides the title bar? How about a yellow info bar (or something like that) at the top of the client area that displays this info?

  • http://vietstuxp@yahoo.com Danh

    Very good

  • Danh

    very good

  • http://weblogs.asp.net/aaguiar Andres Aguiar

    The Ribbon looks nice, but I’m not sure if it’s a good idea.

    First, I’m not sure if you can ship it that way, because of the ‘Office UI Guidelines’ that you need to adhere if you use the Ribbon. They let you use it if you follow the guidelines, and I’m quite sure there should only be one Ribbon per application. That’s the whole idea of the Ribbon, having one place where to find all the commands. In this case I think you should use the Contextual Tabs in the Ribbon to show both ribbons in one.

    Second, I think you are just transferring your indecision to your users ;) . If you want it to be easier for novices, add labels to the buttons and that will be probably enough.

    Kind regards,

    Andres

  • http://www.peterRitchie.com/blog Peter Ritchie

    The trickiness of the ribbon UI in Office is that it supports all the Office 2003 menu commands (accelerators) like Alt+E,P for paste. I don’t know what ribbon library your planning on using, but that sounds like a lot of work to support for those of us who have been using the “Common” windows menu keystrokes for 15 or so years.

    But, I vote for keeping the option of menus or ribbons.

  • Mr_Newbie

    I dont own NDepend but have looked at the product several times. Just chompin at the bit to plop down my bucks when I have a few extra for tools instead of shoes for the kids.

    I would definitely start with the ribbon interface and work myself to the toolbar as the ribbon would ge me off and running ASAP!

    Just my two cents.

  • C-J Berg

    I think you’ve made a great investment in improving the user interface. I’ve been evaluating NDepend for a short while, and the only thing that I felt was a bit quirky was the GUI. The core of NDepend is just like everyone describes it: awesome! I’m buying it in a few days. Keep up the good work!

    By the way, I think you should have a look at the free NSIS and create an installation package using it. It features LZMA-compression (of 7-Zip fame), which shrinks your distribution quite a lot (you almost have to see it to believe it). And it’s fast and it won’t bloat your registry or anything.

    If you for some reason don’t like NSIS, you could also check out Inno Setup. It’s free as well , and it also features LZMA-compression.

    NSIS: http://nsis.sourceforge.net/Main_Page
    7-Zip: http://www.7-zip.org/
    Inno Setup: http://www.jrsoftware.org/isinfo.php

  • http://www.NDepend.com Patrick Smacchia

    Great, I’m glad that the facilities to choose between Toobars & Menus or Ribbon sounds not choking.

    For Ribbon, there is a royalty-free license:
    http://blogs.msdn.com/jensenh/archive/2006/11/21/licensing-the-2007-microsoft-office-user-interface.aspx

    If you select the 3 preferences, you’ll simply have the 3 controls, which can look weird but DXperience allows this seamlessly so why not allowing it?

    If you don’t select any of the 3, the preference will go to the Ribbon.

  • Mike

    It looks great, but I wonder what happens if you select all three preferences (menu, toolbar and ribbon)…

    Also, did you do that whole licence thing for the ribbon? Microsoft seems to think that because they put so much effort into the ribbon idea that you need a licence from them to use ribbons in your application. I don’t know if that’s really necessary, so I’m curious what you think about that.

  • http://dotnetjunkies.com/WebLog/thomasswilliams/ Thomas Williams

    Wow Patrick, you’ve put a lot of thought into having the UI both ways.

    I read this post with interest, caught by the title “UI matters”…I agree!

    I also agree that MS must have put a lot of work into “Ribbons” and IMO “Ribbons” done properly have clear advantages over nameless 16×16 icons on a toolbar, and cascading menus several layers deep.

    I’m only a casual user of NDepend, not very familiar with the product, but the difference in the 2 screenshots above is remarkable. You might have guessed that I favor the “Ribbon” approach. Just looking at the screenshots, it seems a lot less intimidating.

    Good luck with your UI development,

    Thomas

  • http://lextm.blogspot.com Lex Mark

    I have to confess you created a wonderful UI for NDepend.

    Cannot wait for the new version.