Rich UI enhancement : A case study

NDepend version 5 Release Candidate has just been released! Just-in-time to be sim-shipped with Visual Studio 2013. This release represents a big achievement for us because it comes with several flagship features, but also because the UI has been thoroughly revamped.

In this post I’d like to focus on some of these UI enhancements.  During the last 2 years, in the Visual Studio and .NET ecosystem we’ve seen emerging new UI standards, inspired from Windows 8 standards. With NDepend v5 we followed this trend and took a chance to make most features easier to be discovered, learnt and used.

Menu

First we redesigned the main menu. The motto was simple: one feature – one, and only one – word. Icons have been removed from the main menu. Not only because VS API forbids icons on parent menus, but because this would be information overload: words chosen to identify features should be meaningful enough to any professional developer. If for a feature several words make sense, the shortest word has been chosen (Diff/Change/Compare, Trend/Progress/Evolution…).

NDeoend v5 main menu

In feature menu, it is ok to use icons and multi-words captions. Icon are inspired  from the VS icon style, or even copy-pasted from the VS image library. I had a problem with B&W VS2012 icons, but hopefully VS2013 re-introduce color into the icons.

Below is the Rule sub-menu. We tried to limit as much as possible to one sub-level of menus. For the Rules sub-menu we by-passed this guideline to let the user discover and access the range of default rules, organized hierarchically.  Each menu ends up with an option menu (to directly open the feature related option), and one or several links to the related online documentation.

v5Menus

Branding and Logo

Clearly NDepend deserved a better branding and a nicer logo. We are a team of software engineers and I should have admit earlier that we needed this work to be done by a professional designer. Hopefully it is never too late to do things well and we asked the designers of Atomic Duo to do some work for us. I am pretty happy with their results, here are the new NDepend logos:

v5Logos

It is clear that in the Windows task bar it looks much nicer!

v5WndTaskbar

With this new logo and the new VS2013 guidelines, it has been easy to make a cleaner Start Page! Atomic Duo are also working on our web-site re-design. Here is the preview, the site will be updated soon.

v5StartPage

Ergonomy and User Experience

All dialogs and menus have been refactored to get a smoother user experience, compliant with new VS standards. For example the assemblies (to analyze) chooser dialog have new icons, new button style and new features.

It is important that the assemblies choosing experience is near to optimal, to let the  user spend more time browsing analysis result and discover interesting facts about his code base. With prior versions, user was already able to add assemblies from VS solutions, from folders (recursive or not) and by drag&dropping from Windows Explorer. Now we’ve added the possibility to filter assemblies with one or several positive or negative naming filters. Targeting an exact sub-set of assemblies to analyze, among hundreds or thousands of assemblies, is now an immediate task.

v5AsmSelect

VS style has been applied to all panels. Below is the rule editor panel. Not only we have a gain of a few V-pixels, but the overall impression is cleaner. Presenting the same amount of data with less screen area and by increasing the experience: wow, thanks to the VS designers!

We also implemented the idea of having a temporary panel with a violet header. This is a handy addition of VS 2012, that increases the experience when browsing multiple documents in general, and multiple rules in our case. Also the NDepend skinning is now adapted to VS2012 and VS2013 skinning and it gets updated automatically on VS skinning changing. Extra colored skinnings are also supported (VS 2012 only, but I guess they’ll be supported by VS 2013 soon).

v5RuleEdit

In the Queries and Rules explorer panel, clearly the VS2012/2013 large status icons are especially handy to summarize the rules status.

v5RuleExplorer

Here also we’ve added a useful UI facility: user can now choose to list all rules violated (or all rules not compiling, or all rules OK, or any sub-set of rules and queries depending on some others criteria):

v5RuleSelector

The shortcuts dialog that appear when hovering the bottom-right progress circle has been also enhanced with new VS 2012/2013 status icons. Listing all rules or queries according to a certain criterion is a matter of a single click on one of these shortcuts:

v5Control

All panels menus also support new icons. New sub-menus have been added to have a direct access to some advanced features that used to require several steps, only mastered by experienced users.

v5MatrixMenu

These advanced features sub-menus are also available from the main menu. Here are some examples of advanced actions, like exporting the namespace dependencies cycles to the matrix. We expect that with this ergonomy strategy, some users will discover already existing features that they didn’t know about.

v5MatrixMenu

New Report Experience

The report design has also been enhanced by the Atomic Duo designers. It is not just a skinning enhancement, but also new features appeared with the presence of a detailed Dashboard that summarizes diff, and some Trend Charts.

v5Report

Since almost a decade that NDepend exists, we had feedback and advices concerning the UI. We noted them all and hopefully v5 addresses most of them. Nevertheless we keep in mind that ergonomy trends are evolving quickly nowadays and we are committed to keep the product up-to-date, while adding new features.

This entry was posted in NDepend, UI, User Experience, UX. Bookmark the permalink. Follow any comments here with the RSS feed for this post.
  • Patrik

    Looks beautiful.

  • http://judahgabriel.blogspot.com/ Judah Gabriel Himango

    Looks great, Patrick!