CodeBetter.Com
CodeBetter.Com
RSS 2.0 via Feedburner
           Do you Twitter? Follow us @CodeBetter

Patrick Smacchia [MVP C#]


UI matters: Menus and ToolBars vs. Office 2007 Ribbons

 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
  • Colorfull 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:

 

 

 

 

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: 

 


 

 

 

Here is what it looks like with Office2007 blue skin:

 


 

 

 

Instead of choosing between Menus and ToolBars or Ribbons, we decided to choose both. When running NDepend for the first time, the user will get the Ribbons UI. A 32x32 commented button will allow her to switch to Menus and ToolBars UI version. She could then go back to Ribbons UI by clicking a toolbar button or by using the first Options panel:

 

 

 

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.

 

Please, tell us what you think.



Comments

Lex Mark said:

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

Cannot wait for the new version.

# August 12, 2007 9:52 PM

Thomas Williams said:

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 16x16 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

# August 12, 2007 10:54 PM

Mike said:

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.

# August 13, 2007 3:21 AM

Patrick Smacchia said:

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:

blogs.msdn.com/.../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.

# August 13, 2007 4:35 AM

C-J Berg said:

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: nsis.sourceforge.net/Main_Page

7-Zip: http://www.7-zip.org/

Inno Setup: www.jrsoftware.org/isinfo.php

# August 13, 2007 7:41 AM

Mr_Newbie said:

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.

# August 13, 2007 11:27 AM

Peter Ritchie said:

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.

# August 13, 2007 2:57 PM

entropia » Blog Archive » Removing vertical scrollbars when overflow is set to ‘auto’ said:

Pingback from  entropia  » Blog Archive   » Removing vertical scrollbars when overflow is set to ‘auto’

# August 13, 2007 6:53 PM

ctodx said:

Following on from my post on automated refactoring tools , I was going to talk a bit about how modern

# August 13, 2007 8:08 PM

Andres Aguiar said:

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

# August 13, 2007 8:40 PM

Danh said:

very good

# August 13, 2007 11:44 PM

Danh said:

Very good

# August 13, 2007 11:45 PM

Keith Hill said:

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?

# August 13, 2007 11:52 PM

Patrick Smacchia said:

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?

# August 14, 2007 6:27 AM

Andres Aguiar said:

If you read the posts about the new Office UI (blogs.msdn.com/.../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 ;).

# August 14, 2007 2:49 PM

Patrick Smacchia said:

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.

# August 15, 2007 5:19 AM

C-J Berg said:

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

# August 15, 2007 11:50 AM

Patrick Smacchia said:

Indeed, I misunderstood you.

Thanks for the tip.

# August 15, 2007 1:52 PM

Patrick Smacchia [MVP C#] said:

My post about our current work in enhancing the VisualNDepend UI with Ribbon Office 2007 style got a

# August 29, 2007 12:45 PM

All Night Coder - Today’s Top Blog Posts on Programming - Powered by SocialRank said:

Pingback from  All Night Coder - Today’s Top Blog Posts on Programming - Powered by SocialRank

# October 1, 2007 5:08 AM

All Night Coder - Today’s Top Blog Posts on Programming - Powered by SocialRank said:

Pingback from  All Night Coder - Today’s Top Blog Posts on Programming - Powered by SocialRank

# October 1, 2007 5:13 AM

All Night Coder - Today’s Top Blog Posts on Programming - Powered by SocialRank said:

Pingback from  All Night Coder - Today’s Top Blog Posts on Programming - Powered by SocialRank

# October 1, 2007 5:14 AM

All Night Coder - Today’s Top Blog Posts on Programming - Powered by SocialRank said:

Pingback from  All Night Coder - Today’s Top Blog Posts on Programming - Powered by SocialRank

# October 1, 2007 8:07 AM

All Night Coder - Today’s Top Blog Posts on Programming - Powered by SocialRank said:

Pingback from  All Night Coder - Today’s Top Blog Posts on Programming - Powered by SocialRank

# October 1, 2007 8:10 AM

All Night Coder - Today’s Top Blog Posts on Programming - Powered by SocialRank said:

Pingback from  All Night Coder - Today’s Top Blog Posts on Programming - Powered by SocialRank

# October 1, 2007 8:10 AM

All Night Coder - Today’s Top Blog Posts on Programming - Powered by SocialRank said:

Pingback from  All Night Coder - Today’s Top Blog Posts on Programming - Powered by SocialRank

# October 1, 2007 8:10 AM

All Night Coder - Today’s Top Blog Posts on Programming - Powered by SocialRank said:

Pingback from  All Night Coder - Today’s Top Blog Posts on Programming - Powered by SocialRank

# October 1, 2007 8:11 AM

All Night Coder - Today’s Top Blog Posts on Programming - Powered by SocialRank said:

Pingback from  All Night Coder - Today’s Top Blog Posts on Programming - Powered by SocialRank

# October 1, 2007 8:11 AM

All Night Coder - Today’s Top Blog Posts on Programming - Powered by SocialRank said:

Pingback from  All Night Coder - Today’s Top Blog Posts on Programming - Powered by SocialRank

# October 1, 2007 8:12 AM

All Night Coder - Today’s Top Blog Posts on Programming - Powered by SocialRank said:

Pingback from  All Night Coder - Today’s Top Blog Posts on Programming - Powered by SocialRank

# October 1, 2007 8:12 AM

All Night Coder - Today’s Top Blog Posts on Programming - Powered by SocialRank said:

Pingback from  All Night Coder - Today’s Top Blog Posts on Programming - Powered by SocialRank

# October 1, 2007 8:13 AM

All Night Coder - Today’s Top Blog Posts on Programming - Powered by SocialRank said:

Pingback from  All Night Coder - Today’s Top Blog Posts on Programming - Powered by SocialRank

# October 1, 2007 8:13 AM

All Night Coder - Today’s Top Blog Posts on Programming - Powered by SocialRank said:

Pingback from  All Night Coder - Today’s Top Blog Posts on Programming - Powered by SocialRank

# October 1, 2007 8:13 AM

All Night Coder - Today’s Top Blog Posts on Programming - Powered by SocialRank said:

Pingback from  All Night Coder - Today’s Top Blog Posts on Programming - Powered by SocialRank

# October 1, 2007 8:15 AM

All Night Coder - Today’s Top Blog Posts on Programming - Powered by SocialRank said:

Pingback from  All Night Coder - Today’s Top Blog Posts on Programming - Powered by SocialRank

# October 1, 2007 4:44 PM

All Night Coder - Today’s Top Blog Posts on Programming - Powered by SocialRank said:

Pingback from  All Night Coder - Today’s Top Blog Posts on Programming - Powered by SocialRank

# October 2, 2007 1:53 PM

All Night Coder - Today’s Top Blog Posts on Programming - Powered by SocialRank said:

Pingback from  All Night Coder - Today’s Top Blog Posts on Programming - Powered by SocialRank

# October 2, 2007 1:53 PM

All Night Coder - Today’s Top Blog Posts on Programming - Powered by SocialRank said:

Pingback from  All Night Coder - Today’s Top Blog Posts on Programming - Powered by SocialRank

# October 2, 2007 1:53 PM

nader said:

it's vere good

# October 28, 2007 11:17 PM

Womens Discount Perfume » Not free perfume samples but still interesting… said:

Pingback from  Womens Discount Perfume » Not free perfume samples but still interesting…

# October 30, 2007 7:24 PM

Womens Discount Perfume » Not marc jacobs perfume but still interesting… said:

Pingback from  Womens Discount Perfume » Not marc jacobs perfume but still interesting…

# October 31, 2007 11:42 AM

Patrick Smacchia [MVP C#] said:

In a previous post this summer I mentioned what has been one on the best advice I got this year (from

# December 10, 2007 5:50 AM

Harold Hsu said:

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?  

# March 3, 2008 1:44 PM

office 2007 menus said:

Pingback from  office 2007 menus

# April 29, 2008 2:05 PM

Leave a Comment

(required)  
(optional)
(required)  

Enter the numbers above:
Add

About Patrick Smacchia

Patrick Smacchia is a Visual C# MVP involved in software development for over 15 years. After graduating in mathematics and computer science, he has worked on software in a variety of fields including stock exchange, airline ticket reservation system as well as a satellite base station at Alcatel. He's currently a software consultant and trainer on .NET technologies as well as the lead developer of the tool NDepend which provides numerous metrics and caveats on any compiled .NET application. He is the author of Practical .NET2 and C#2, a .NET book conceived from real world experience with 647 compilable code listings. Check out Devlicio.us!