DotNetNuke Tips & Tricks

Monday, July 18, 2011 by Cuong Dang

Brief Overview of DotNetNuke 6.0 UI Changes

Filed under: Elsewhere, UI and UX, DotNetNuke

Over the years I have been a strong web standards advocate and implemented most of my projects using its foundations. Since I joined DotNetNuke Corp. in mid-March, I was lucky to be part of the transformation of the administrative user interface (UI) to a modern standard. This effort brings many benefits to the platform for both business and end-users.

If you are not familiar with many benefits web standards have to offer, I suggest reading a few helpful posts by the folks at Web Standards Project and the Mozzila Wiki before continue reading this post to understand why DotNetNuke has gone through a major overhaul of UI changes.

Probably your first impression about DotNetNuke 6.0 when logged in is a major change in its UI. The effort was to create not just a user-friendly interface for people who build websites everyday, but it also provide a modern and simple design.

dotnetnuke 6.0 ui changes

DotNetNuke is built in a modular approach when it comes to managing websites and its functionalities. Since 5.0 released, you see most of the admin features are broken down in pages with modules installed. Each module allows users to perform certain tasks if they have permission. So if you look at them closely, they are just forms that enable users to accomplish tasks. We then looked at it and applied best practices for form UI.

Here are just a few things we did among many others:

  • Re-organized form elements (tabs and panels) to allow better management of its features and provide task-oriented workflow to prevent mistakes
  • Provided inline and responsive notifications such as warning, informative, success, and error message to speed up the form completion with minimal or no mistakes
  • Restructured label alignment and tooltips to allow at-a-glance users are able to recognize elements quickly
  • Defined and separated primary action vs. secondary action to avoid miss-click
  • Provided modal pop-up behavior to drive user focus on a specific task and eliminate noises on the page. Modal pop-ups also provide ability to resize and maximize its windows for larger real estates while working with long forms.
  • Applied friendly concepts for form messages throughout the entire application for informative, warning, success messages and so on.
  • Re-engineered the control panel and module actions for a more user friendly interface

One of the most important things we did to the UI is the improvement of its markup. All forms have been converted to using XHTML compliant. This effort significantly helps improving its performance and prepare for future adoption of mobile devices. A tremendous amount of work has been put on the conversion of almost all of the controls in the framework to using the new UI.

My favorite part of the new form patterns implementation is that module developers can take advantage of the patterns we created and applied to their current modules and future projects.

I will be blogging about converting current modules using the new form patterns in the near future. For now, enjoy this post and hope to see more of you giving us feedback on the new experience of 6.0 once it’s released.


blog comments powered by Disqus