Patrick Smacchia [MVP C#]

Sponsors

The Lounge

Wicked Cool Jobs

News

  • NDepend v3 is fully integrated in Visual Studio, and is now available for download! Software dependencies visualization, 82 .NET software metrics, continuous rule validations, assembly version diff, declarative code queries and more ! http://ndepend.com

Advertisement

Images in this post missing? We recently lost them in a site migration. We're working to restore these as you read this. Should you need an image in an emergency, please contact us at imagehelp@codebetter.com
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
  • 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: 


 

 


Posted Sun, Aug 12 2007 10:44 PM by Patrick Smacchia

[Advertisement]

Comments

Lex Mark wrote re: UI matters: Menus and ToolBars vs. Office 2007 Ribbons
on Sun, Aug 12 2007 9:52 PM

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

Cannot wait for the new version.

Thomas Williams wrote re: UI matters: Menus and ToolBars vs. Office 2007 Ribbons
on Sun, Aug 12 2007 10:54 PM

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

Mike wrote re: UI matters: Menus and ToolBars vs. Office 2007 Ribbons
on Mon, Aug 13 2007 3:21 AM

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.

Patrick Smacchia wrote re: UI matters: Menus and ToolBars vs. Office 2007 Ribbons
on Mon, Aug 13 2007 4:35 AM

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.

C-J Berg wrote re: UI matters: Menus and ToolBars vs. Office 2007 Ribbons
on Mon, Aug 13 2007 7:41 AM

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

Mr_Newbie wrote re: UI matters: Menus and ToolBars vs. Office 2007 Ribbons
on Mon, Aug 13 2007 11:27 AM

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.

Peter Ritchie wrote re: UI matters: Menus and ToolBars vs. Office 2007 Ribbons
on Mon, Aug 13 2007 2:57 PM

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.

entropia » Blog Archive » Removing vertical scrollbars when overflow is set to ‘auto’ wrote entropia » Blog Archive » Removing vertical scrollbars when overflow is set to ‘auto’
on Mon, Aug 13 2007 6:53 PM

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

ctodx wrote NDepend's UI: DXperience to the rescue
on Mon, Aug 13 2007 8:08 PM

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

Andres Aguiar wrote re: UI matters: Menus and ToolBars vs. Office 2007 Ribbons
on Mon, Aug 13 2007 8:40 PM

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

Danh wrote re: UI matters: Menus and ToolBars vs. Office 2007 Ribbons
on Mon, Aug 13 2007 11:44 PM

very good

Danh wrote re: UI matters: Menus and ToolBars vs. Office 2007 Ribbons
on Mon, Aug 13 2007 11:45 PM

Very good

Keith Hill wrote re: UI matters: Menus and ToolBars vs. Office 2007 Ribbons
on Mon, Aug 13 2007 11:52 PM

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?

Patrick Smacchia wrote re: UI matters: Menus and ToolBars vs. Office 2007 Ribbons
on Tue, Aug 14 2007 6:27 AM

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?

Andres Aguiar wrote re: UI matters: Menus and ToolBars vs. Office 2007 Ribbons
on Tue, Aug 14 2007 2:49 PM

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

Patrick Smacchia wrote re: UI matters: Menus and ToolBars vs. Office 2007 Ribbons
on Wed, Aug 15 2007 5:19 AM

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.

C-J Berg wrote re: UI matters: Menus and ToolBars vs. Office 2007 Ribbons
on Wed, Aug 15 2007 11:50 AM

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

Patrick Smacchia wrote re: UI matters: Menus and ToolBars vs. Office 2007 Ribbons
on Wed, Aug 15 2007 1:52 PM

Indeed, I misunderstood you.

Thanks for the tip.

Patrick Smacchia [MVP C#] wrote UI matters (Revisited): Menus and ToolBars vs. Office 2007 Ribbons
on Wed, Aug 29 2007 12:45 PM

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

All Night Coder - Today’s Top Blog Posts on Programming - Powered by SocialRank wrote All Night Coder - Today’s Top Blog Posts on Programming - Powered by SocialRank
on Mon, Oct 1 2007 5:08 AM

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

All Night Coder - Today’s Top Blog Posts on Programming - Powered by SocialRank wrote All Night Coder - Today’s Top Blog Posts on Programming - Powered by SocialRank
on Mon, Oct 1 2007 5:13 AM

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

All Night Coder - Today’s Top Blog Posts on Programming - Powered by SocialRank wrote All Night Coder - Today’s Top Blog Posts on Programming - Powered by SocialRank
on Mon, Oct 1 2007 5:14 AM

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

All Night Coder - Today’s Top Blog Posts on Programming - Powered by SocialRank wrote All Night Coder - Today’s Top Blog Posts on Programming - Powered by SocialRank
on Mon, Oct 1 2007 8:07 AM

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

All Night Coder - Today’s Top Blog Posts on Programming - Powered by SocialRank wrote All Night Coder - Today’s Top Blog Posts on Programming - Powered by SocialRank
on Mon, Oct 1 2007 8:10 AM

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

All Night Coder - Today’s Top Blog Posts on Programming - Powered by SocialRank wrote All Night Coder - Today’s Top Blog Posts on Programming - Powered by SocialRank
on Mon, Oct 1 2007 8:10 AM

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

All Night Coder - Today’s Top Blog Posts on Programming - Powered by SocialRank wrote All Night Coder - Today’s Top Blog Posts on Programming - Powered by SocialRank
on Mon, Oct 1 2007 8:10 AM

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

All Night Coder - Today’s Top Blog Posts on Programming - Powered by SocialRank wrote All Night Coder - Today’s Top Blog Posts on Programming - Powered by SocialRank
on Mon, Oct 1 2007 8:11 AM

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

All Night Coder - Today’s Top Blog Posts on Programming - Powered by SocialRank wrote All Night Coder - Today’s Top Blog Posts on Programming - Powered by SocialRank
on Mon, Oct 1 2007 8:11 AM

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

All Night Coder - Today’s Top Blog Posts on Programming - Powered by SocialRank wrote All Night Coder - Today’s Top Blog Posts on Programming - Powered by SocialRank
on Mon, Oct 1 2007 8:12 AM

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

All Night Coder - Today’s Top Blog Posts on Programming - Powered by SocialRank wrote All Night Coder - Today’s Top Blog Posts on Programming - Powered by SocialRank
on Mon, Oct 1 2007 8:12 AM

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

All Night Coder - Today’s Top Blog Posts on Programming - Powered by SocialRank wrote All Night Coder - Today’s Top Blog Posts on Programming - Powered by SocialRank
on Mon, Oct 1 2007 8:13 AM

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

All Night Coder - Today’s Top Blog Posts on Programming - Powered by SocialRank wrote All Night Coder - Today’s Top Blog Posts on Programming - Powered by SocialRank
on Mon, Oct 1 2007 8:13 AM

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

All Night Coder - Today’s Top Blog Posts on Programming - Powered by SocialRank wrote All Night Coder - Today’s Top Blog Posts on Programming - Powered by SocialRank
on Mon, Oct 1 2007 8:13 AM

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

All Night Coder - Today’s Top Blog Posts on Programming - Powered by SocialRank wrote All Night Coder - Today’s Top Blog Posts on Programming - Powered by SocialRank
on Mon, Oct 1 2007 8:15 AM

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

All Night Coder - Today’s Top Blog Posts on Programming - Powered by SocialRank wrote All Night Coder - Today’s Top Blog Posts on Programming - Powered by SocialRank
on Mon, Oct 1 2007 4:44 PM

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

All Night Coder - Today’s Top Blog Posts on Programming - Powered by SocialRank wrote All Night Coder - Today’s Top Blog Posts on Programming - Powered by SocialRank
on Tue, Oct 2 2007 1:53 PM

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

All Night Coder - Today’s Top Blog Posts on Programming - Powered by SocialRank wrote All Night Coder - Today’s Top Blog Posts on Programming - Powered by SocialRank
on Tue, Oct 2 2007 1:53 PM

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

All Night Coder - Today’s Top Blog Posts on Programming - Powered by SocialRank wrote All Night Coder - Today’s Top Blog Posts on Programming - Powered by SocialRank
on Tue, Oct 2 2007 1:53 PM

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

nader wrote re: UI matters: Menus and ToolBars vs. Office 2007 Ribbons
on Sun, Oct 28 2007 11:17 PM

it's vere good

Womens Discount Perfume » Not free perfume samples but still interesting… wrote Womens Discount Perfume » Not free perfume samples but still interesting…
on Tue, Oct 30 2007 7:24 PM

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

Womens Discount Perfume » Not marc jacobs perfume but still interesting… wrote Womens Discount Perfume » Not marc jacobs perfume but still interesting…
on Wed, Oct 31 2007 11:42 AM

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

Patrick Smacchia [MVP C#] wrote The Visual Studio Look and Feel
on Mon, Dec 10 2007 5:50 AM

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

Harold Hsu wrote re: UI matters: Menus and ToolBars vs. Office 2007 Ribbons
on Mon, Mar 3 2008 1:44 PM

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://nhibernate.codebetter.com/blogs/patricksmacchia/archive/2007/08/12/ui-matters-menus-and-toolbars-vs-office-2007-ribbons.aspx wrote http://nhibernate.codebetter.com/blogs/patricksmacchia/archive/2007/08/12/ui-matters-menus-and-toolbars-vs-office-2007-ribbons.aspx
on Thu, Mar 20 2008 1:53 AM
http://codebetter.com/blogs/patricksmacchia/archive/2007/08/12/ui-matters-menus-and-toolbars-vs-office-2007-ribbons.aspx wrote http://codebetter.com/blogs/patricksmacchia/archive/2007/08/12/ui-matters-menus-and-toolbars-vs-office-2007-ribbons.aspx
on Sat, Mar 22 2008 2:53 AM
office 2007 menus wrote office 2007 menus
on Tue, Apr 29 2008 2:05 PM

Pingback from  office 2007 menus

RibbonHater wrote re: UI matters: Menus and ToolBars vs. Office 2007 Ribbons
on Sun, Jul 27 2008 6:41 AM

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

Add a Comment

(required)  
(optional)
(required)  
Remember Me?
Devlicio.us