DotNetNuke 6: Refining the User Interface

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.

Comments

Comment Form

Only registered users may post comments.

NewsArchives


April 2014 (3)
March 2014 (3)
February 2014 (4)
January 2014 (6)
December 2013 (6)
November 2013 (2)
October 2013 (9)
September 2013 (10)
August 2013 (8)
July 2013 (4)
June 2013 (8)
May 2013 (13)
April 2013 (2)
March 2013 (7)
February 2013 (7)
January 2013 (10)
December 2012 (6)
November 2012 (20)
October 2012 (12)
September 2012 (27)
August 2012 (29)
July 2012 (22)
June 2012 (17)
May 2012 (23)
April 2012 (24)
March 2012 (27)
February 2012 (21)
January 2012 (12)
December 2011 (18)
November 2011 (20)
October 2011 (27)
September 2011 (17)
August 2011 (18)
July 2011 (45)
June 2011 (22)
May 2011 (23)
April 2011 (19)
March 2011 (36)
February 2011 (19)
January 2011 (22)
December 2010 (29)
November 2010 (37)
October 2010 (32)
September 2010 (43)
August 2010 (46)
July 2010 (37)
June 2010 (46)
May 2010 (29)
April 2010 (38)
March 2010 (27)
February 2010 (33)
January 2010 (34)
December 2009 (13)
November 2009 (20)
October 2009 (29)
September 2009 (18)
August 2009 (29)
July 2009 (19)
June 2009 (18)
May 2009 (23)
April 2009 (16)
March 2009 (13)
February 2009 (20)
January 2009 (25)
December 2008 (25)
November 2008 (29)
October 2008 (34)
September 2008 (33)
August 2008 (36)
July 2008 (31)
June 2008 (25)
May 2008 (26)
April 2008 (33)
March 2008 (31)
February 2008 (24)
January 2008 (18)
December 2007 (27)
November 2007 (51)
October 2007 (24)
September 2007 (32)
August 2007 (24)
July 2007 (20)
June 2007 (28)
May 2007 (27)
April 2007 (24)
March 2007 (47)
February 2007 (21)
January 2007 (41)
December 2006 (21)
November 2006 (16)
October 2006 (24)
September 2006 (36)
August 2006 (30)
July 2006 (31)
June 2006 (37)
May 2006 (13)
April 2006 (13)
March 2006 (18)
February 2006 (20)
January 2006 (13)
December 2005 (6)
November 2005 (15)
October 2005 (15)
September 2005 (16)
August 2005 (7)
April 2005 (1)
March 2004 (4)
February 2004 (6)
January 2004 (1)
November 2003 (4)
October 2003 (22)
September 2003 (22)
August 2003 (15)
July 2003 (14)

Copyright 2014 by DNN Corp | Terms of Use | Privacy | Design by Parker Moore Design