DNN Blog

DotNetNuke 6: Refining the User Interface

by Joe Brinkman on Thursday, June 02, 2011 9:49 AM

60DotNetNuke 6 has been a release experience unlike any in the history of DotNetNuke.  We have had more packaged releases, more visibility into the code, more discussions with the community and a greater iterative approach to development than at any point in our past.

The community has been able to follow along with us as we progressed from the early UI concepts to a much more polished and refined look.  If you were really adventurous, you could watch this transition on almost a daily basis as we kept up a steady stream of code updates on CodePlex.  Because we intentionally moved to a longer release cycle, we have been able to go through many iterations, getting community feedback all along the way.  With each release our community has told us what they liked, and what they didn’t.  After each CTP we have been able to incorporate some of the feedback to help arrive at a much better product.  As a result we have been able to progress to what we think is a much more contemporary look, even while taking into account the needs and desires of the overall community.   This is just not something that was possible when we were operating under shorter release cycles.

In order to truly appreciate how dramatic this transition has been I thought I would share the progression of one of the central UI elements for DotNetNuke – the login screen.

CTP1

In CTP 1 we had not begun any of the major UI changes and you can see the same login experience we have had since DotNetNuke 3.0.  There have been some changes to the way that logins work under the covers, but the UI appearance has been relatively static for a long time.   Notice the harsh contrast between the labels and the background as well as the blocky appearance of the login button.  The default red used for the link buttons is also overly harsh and distracts the user from what should be their primary focus.  Overall, this is not a very polished look and personally I will be happy to leave it behind.

CTP2

In CTP 2 we introduced the concept of modal popups as a key element of the new UI makeover.  Our first foray into the use of popups relied heavily on Telerik ASP.NET AJAX components.  This was ok but didn’t provide a very contemporary look.  We were also not overly excited about the HTML that was generated by the use of the Telerik window.  It made the page heavier than we liked, and was not as designer friendly as other alternative approaches. 

One of the great features of the Telerik window is that it allowed the user to resize and move the popup window.  It also allowed the window to resize itself to accommodate different pages that might be displayed in the window.  Other than the use of a popup, we didn’t spend much time on styling the login control itself.  CTP 2 was a good first effort but clearly needed a lot more work.

CTP3

CTP 3 saw a number of dramatic changes.  In this release we transitioned to the use of jQuery UI based popups.  We also started applying some new styling to the login form itself.  What is not apparent from this screen shot is that our popup forms were a fixed size.  Since there was no auto-sizing available with the jQuery UI, we had to pick a popup size which would accommodate many of the larger pages like Admin and Host settings.  This created a very unappealing experience on the login screen which looked very odd with all that extra white space.

In addition to the change in the popup style, we also started work on styling the rest of the screen.  Here we can see very preliminary work.  Colors are more muted, corners are a little less harsh and the page looks a little more stylish, however there was still lots of room for improvement (pun intended).

Beta1

In the upcoming Beta 1 release, you will see a much more polished UI.  The login screen is back to being sized more appropriately and the screen is now completely styled using the new DotNetNuke 6 design.  All of the harsh corners and sharp contrasts are gone and in their place are nice subtle gradients, soft edges and a color palette that doesn’t seem like it was designed by  the same people who created thebiguglywebsite.com.

We still have some additional tweaks coming before the final release but I think that most people looking at these screenshots would agree that the progression from DotNetNuke 5 to DotNetNuke 6 is like night and day.  We really have been listening to the community on this release.  We are interested in what you think of the new design and will certainly keep your feedback in mind as we work to finalize the 6.0 release.  I know I am personally very excited by this release and I’m extremely proud to have been a part of the DotNetNuke 6 release effort.

Joe Brinkman
Author

I am a co-founder of DNN Corp. My primary focus is on Engineering Operations and Support. I regularly blog on new DotNetNuke releases and technical tips to help you get the most out of DotNetNuke.

12 comment(s) so far...

Simon Phillips 6/3/2011

I agree. I have been downloading and evaluating all of the CTP releases myself, and I can confirm that the UI advancements are impressive. <br /><br />I would also like to personally thank all the community members that have contributed to the effort.

 
Pontus Osterlin 6/3/2011

Great work!<br />Here are some more tips about a better login experience, I like the questionmark and large login button tip the best:<br /><br /><a href="http://uxmovement.com/forms/innovative-techniques-to-simplify-sign-ups-and-logins/" rel="nofollow">uxmovement.com/forms/innovative-techniques-to-simplify-sign-ups-and-logins/</a>

 
Ian Marlow 6/3/2011

Read with interest and Thank you for the Uglywebsite link.

 
Hans Zassenahaus 6/24/2011

I am hoping that you will include something like the Mega 1 menuing system that is part of the DDR menu samples. I particularly like the concept of being able to have all levels under a tab displayable and active with a single click...much more user friendly.

 
brian 6/24/2011

I think it's time to get rid of the '?' all over the place and the existence is for no valid reason.<br /><br />Especially when User Name ? gives you Enter User Name. This is 2011. I've never seen ? in any application development team I've been a part of (16 years). Not sure why it's not gone but consider it as it's not useful and clutters the UI.

 
Jay Mathis 6/24/2011

While your at it, would it be possible to add a portal setting to hide all the popup help "?" things. Alot of module developers don't bother to fill these in at all. And those that do exist usually aren't really that helpful at all.<br /><br />I mean really, on the log form, how help is "Enter you username below" and "Enter your password below"? That's just silly and insulting to the user.

 
Joe Surfage 6/24/2011

Question:<br /><br /> Will this effort bring DNN's UI up to modern SEO standards? <br /><br />i.e.:<br /> a) fewer CSS files - say 1-3 (rather than 6-18)<br /> b) fewer JS files - say 1-4 (rather that 9-26)<br /> c) option for HTML5<br /><br />Thanks!

 
Justin Jovic 6/24/2011

Looks great. I hope there is a lot of work going on to make sure that DNN sites will look and operate great on Mobile devices. This next gen DNN should treat Mobile as a first class citizen.

 
Tony Valenti 6/24/2011

DNN6 is the most exciting release since DNN3!<br /><br />I am extremely excited about the UI investment you are making in 6.0.<br /><br />Keep up the good work!

 
Yener Adal 6/24/2011

I think DNN 6 should have a skin based on the big ugly - just for kicks!

 
Patrick Ryan 7/23/2011

I'm actually having a little difficulty. I haven't researched it extensively but after upgrading one of my websites to DNN 6, and I click "login" the new login appears, but after entering in the credentials and clicking login it just sits there. It took me a few tries to realize that it did in fact log me in, but I had to close it out before it refreshed the page and logged me in correctly.<br /><br />Perhaps there's an upgrade issue somewhere, not sure. Does anyone have any advice on this?<br /><br />Thank you.. And DNN 6 is absolutely gorgeous.

 
Joe Brinkman 7/23/2011

@Patrick - Are you using the final releaase version of DotNetNuke 6? Also, I would recommend entering your issue in the forums where the entire community will see your question and can answer appropriately. DotNetNuke is a large system and there are lots of issues which I just never run into. I am sure if you are seeing the problem that there is someone in the community who has seen it and can provide assistance in resolving the problem.

Attend A Webinar
Start  Professional Edition Trial
Have Someone Contact Me

Like Us on Facebook Join our Network on LinkedIn Follow DNN Corporate on Twitter Follow DNN on Twitter

Advertisers

Sponsors

DotNetNuke Corporation

DotNetNuke (DNN) provides a suite of solutions that make designing, building and managing feature-rich sites and communities fast, easy and cost-effective. The DotNetNuke Platform CMS is the foundation for more than one million websites worldwide. DNN Social, our newest solution, enables businesses to create immersive, interactive communities. Thousands of organizations like True Value Hardware, Bose, Cornell University, Glacier Water, Dannon, Delphi, USAA, NASCAR, Northern Health and the City of Denver have leveraged DNN to deploy highly engaging business- critical websites. Our rapid growth in product sales and deployments resulted in DotNetNuke Corp. being named one of the fastest growing private companies in America by Inc. Magazine in 2011 and 2012.