New Community Website

Ordinarily, you'd be at the right spot, but we've recently launched a brand new community website... For the community, by the community.

Yay... Take Me to the Community!

The Community Blog is a personal opinion of community members and by no means the official standpoint of DNN Corp or DNN Platform. This is a place to express personal thoughts about DNNPlatform, the community and its ecosystem. Do you have useful information that you would like to share with the DNN Community in a featured article or blog? If so, please contact .

The use of the Community Blog is covered by our Community Blog Guidelines - please read before commenting or posting.

Lessons in Making Better DNN Modules

I have downloaded a lot of commercial DNN modules over the years and noticed many of them suffer from deficiencies such bloated screens with lots of text, confusing workflows, bugs, hard to discover options, many submodules, unclear UI divisions and other issues.

I consider myself a developer with a good sense of good design so here are my recommendations on how to improve the quality of your module.

- Polish the UI of your module and make it look professional. Make the UI elements look clean and polished. For example look at the Quform, a popular WordPress plugin. ( Clean beautiful buttons, beautiful tabs & lots of color contrast. Notice the amount of white space between the elements, the vertical and horizontal alignments. For example labels should be aligned together and their related textboxes, checkboxes.. etc should be aligned together. Good amount of margins and paddings.

- If you have to add lots of text to explain the purpose of a form element or option, you are probably doing it wrong. The text or caption of the element is probably not descriptive enough which forces you to add more text. Do not add a lot of static text which is always showing. Put the text behind a hovering tooltip or an info tooltip. Use an icon like a '?'. Once a user knows how to use the module, they have no need to be viewing that text any more. Static texts gets in the way, makes your screen look busy and is just plain annoying. Looking a QuForm, you will notice there's hardly any text when you start. Explanations and descriptions are hidden behind tooltips. Don't use redundant descriptions. If the label says 'First name' and its tooltip says 'Enter your First name', the tooltip is redundant and adds zero value. Not every form element needs a tooltip. Too many tooltip icons can also crowd the page.

- Divide the screen into sections with related functionality using UI elements like tabs, panels, treeviews, tab panel, fieldsets, multiview.. etc. A wall of options is confusing. In the QuForm app, they make good use of tabs to partition the app.

- Don't show everything at one time. A web page of more than 2-3 screenfuls is probably too big. Divide the screen into an easy to use workflow using tabs, pageviews, wizards or similar UI pattern. If your app has a lot of functions, put the mostly used ones at the forefront and the less common ones behind. Some desktop apps have layouts for beginners and layouts for advanced users. Usually advanced users can see more options. Put advanced features in a separate view. These options usually confuse beginners and they do not need to see these options during their first uses of the app.

- Test the module before releasing it. Test the installation on a fresh DNN installation and test the functionality. Click on all the options in a random fashion. Make sure options are disabled when they should be. A UI pattern which I personally like and which no one seems to use is to show on hover why an option is disabled if it's not clear why it's disabled. You will save a ton of time and money when you release a solid module which minimizes support calls. Many DNN module vendors went out of business because support costs ate all their profits and more! I personally get annoyed when I install a module and encounter issues because the developer didn't do the first simple tests and I have to spend (waste) time working with the vendor. It happened several times. Do you know the joke about releasing an app as soon as it compiles and builds!? Give the app to some friends and test and get their honest feedback. As the module developer, your field of vision is narrow and you're too familiar with your own work, you won't see the most basic issues. A person unfamiliar with the app is a great help.

- Consider any bug report as a gift and thank the person giving you feedback. Notice they took time of their busy schedule to help you. 

- Learn by looking at other popular well written software, plugins, themes & modules. ThemeForset and its companion websites is a great place to learn from. Notice why a particular product is selling very well. Quform is a beautiful app, easy to use and it does its functionality very well and it sold more than 15,000 times. I wish there are more DNN modules like it. I am aware that WordPress is a lot more popular than DNN and there's more competition. 

- Include proper and easy to read documentation. Documentation should to be updated and current with the latest app versions and changes. Don't make the docs point to an area which doesn't exist any more. Screenshots need to be updated if the UI changed. Video tutorials are great. Don't make them too long. I find 10 minutes or less a good amount. If you place them on YouTube, you will get free advertising and referrals.

- Make a trial version available for users to download so they can try it and kick the tires. Screenshots or videos only at the app store or your site are not sufficient. They don't show app's performance, stability, ease of use & discoverability. Apps get updated and these screenshots and videos may fall behind and look outdated which give a negative impression about your product.

- Have a site where users can browse your knowledge base, Q&A section or forums when they are looking for answers. This has many benefits. First it will lower your support costs because they can find answers themselves without using your time. Remember support costs are detrimental to vendors persistence. Users can find answers outside your support hours (think evenings, weekends and holidays) and don't have to wait for answers from you. An active community section in your site portrays more confidence that your product is alive and thriving.

- I know every software has bugs but apps which have bugs which could have been found from simple tests have no excuse.  Every developer should take pride in their work. 

- Use nice presentation in the app store. Use images, links to demos & comparison tables if there are multiple version. . Use bullet points or headers to highlight the best features. Don't use too much text. Make sure to have trial versions available for download and enough time before expiring them.

- Stay up to date with the latest technologies and updates coming out from Microsoft, the web and DNN software so that your modules make use of them and look more modern and fresh.

I hope these suggestions will help you in your module development. Good luck.


Willem Bonekamp
I totally agree! DNN Modules should have a clean, uniform interface that is in line with the core DNN admin interface.
As an example you mention the a Wordpress module (QuForm). I agree this is a good interface but why not mention the DNNSharp Actionform. I would be very happy if all DNN modules have this interface.

Willem Bonekamp Thursday, May 28, 2015 6:53 AM (link)
Will Morgenweck
Great post! All module developers, especially those on the DNN Store, should take this seriously.
Will Morgenweck Thursday, May 28, 2015 10:13 AM (link)
Joseph Craig
I would certainly like for "performance" to be a key items, particularly when it comes to giving modules an "approved" or "certified" status of any kind. Are they resource hogs? How to they run on sites with heavy traffic or lots of simultaneous users.
Joseph Craig Thursday, May 28, 2015 12:34 PM (link)
Bruce Chapman
I would add to this list an understanding that if you are going to build a commercial product, run by a diverse set of users on diverse versions for diverse problems, engineer the solution thoroughly. This means paying particular attention to install/uninstall, and being careful with database design and queries. While it is quick to throw a solution together from templates and simple to build techniques, this might not make the best architecture for the long haul. An example might be using Entity Framework for all SQL interface. It might run well and be fast to build, but customers who start building large systems may find intractable and insolvable performance issues.

Load testing systems are ubitiquos and cheap to use these days so throw up a cloud version of your module and run some load tests against it, and be serious about looking at the results. Also note the difference in load times for an 'empty' DNN page and one with your module on it. It shouldn't be slower.

I understand the need to be fast to market to test if there is a market, so it's OK for version 1 to be about proving the concept and the product. If it's selling, or even just a popular open source contribution, take the time to refactor it well to give it a long life, and that means using all the correct DNN Api calls, thinking about exception handling, upgrades, uninstalls and database performance and caching. All these will feed into your enthusiasm to keep it going over the years - whether for free or for money.

Finally, don't second guess the DNN Platform if you can't find an API or function to support what you need. Chances are you just haven't looked properly or asked anyone. There are very few paths that haven't been trodden before, and most things have a way which can be done and integrate well, and which won't leave your code as an obstacle between now and a future upgrade.
Bruce Chapman Thursday, May 28, 2015 11:34 PM (link)
Tony Henrich
@Willem I am going to be honest and bold in my critique here and the vendors I am going to mention here who might read this won't like what I am going to say, either because I am going to mention them or because they who they are based on private communication. So be it. This post might get long too because I have a lot to say.

First I like to mention I have a good eye for good design and sadly for others a good eye and sense for bad design and bad workflow flaws. I get persnickety. Maybe it's an OCD!

I have downloaded and checked out popular DNN modules and WordPress plugins. Just because I am curious to learn what made them popular and what they are offering. I choose Quforms because I just loved the interface. It's slick and clean and just works. It's almost perfect. When it starts, it's a simple UI interface. Some buttons which represent form elements which you can drag and place in the empty form. No boring explanatory text explaining what you should, what you can't do or if you do this, then do that.. etc. All you see is a big visual curly brace surrounding the buttons and a few words which tell you to drag from the buttons. I was able to create new elements in a matter of seconds and it was did simple. I did try Action Form like last week and after 5 minutes of using it, I got frustrated because I got lost in the many options and all the text on the screen I had to read. It was a turn off. Then I saw terms like PreInit which is from ASP.NET and wondered does a beginner need to know this now or even use it now. it's sounded too technical. Creating a complex app with an easy UI interface so that even a beginner can digest quickly is hard.. very hard. The stuff you need right away should be visible and easy to discover, the complex stuff should be delegated to the back. In my first form, I really do not want to put a regex anywhere .... however I want to use it if I want to. I am an experienced developer and I struggle with regex. For a beginner, regex is incomprehensible and won't even know what it is. I actually emailed Bogdan and told him about my concerns. So no I don't want other DNN modules to be like Action Form. I want them to be simple and beautiful to use like Quform. Quform also displays the settings options only when you hover an element. An important facet of good UI interface is hiding the actions which you don't use often but make them easily available when needed. Hover is a good way of doing this. That why Quform's interface looks simple. Because all the different options are hidden. Of course who have start with dragging an element and that's why all the basic ones are all visible. Things are done in a WYSIWYG way and it's very intuitive. Another DNN form builder is Mandeep's Live Forms which more resembles the drag and drop WYSIWUG way of building forms. Although it also has quirks and things which don't work quite well. For example, the labels and form elements alignments are off. They are not centered properly. Also when an element is required, I expected to see some kind of required icon or text. Usually it's a * or the text '(required)'. As I recall, they were missing. I could be mistaken. Note that I test modules quickly and don't take much time for testing because I don't have the intention of using them.

I tried installing the trial version of Action Form today to check it out again but the trial expired. This brings up an idea I came up with for module vendors. I suggest trial modules which run off domain names like localhost or should not expire. These are domain names wchih are used in development and not on a public site. While 30 days might seems enough, I tend to test quickly and move on. When I come back, 30 days have passed and the software doesn't work anymore. I suppose I can ask for an extension but as I said before, I am not planning to use it so I uninstall it and check out something else.

Last, I want to say I have seen some very nice mature WordPress plugins. They integrate nicely with WordPress's administration interface. For example Slider Revolution is a very slick slider. I even wanted to port it to DNN but I figured it's a huge amount of work for myself. I noticed some DNN vendors are porting some WordPress themes and plugins to DNN. I hope they bring along the same advanced UI features along. DNN's UI interface has gone a long way and has improved a lot. I would like to see more DNN modules use the more advanced features of HTML5 and Javascript.

Sorry for the long comment :)
Tony Henrich Saturday, May 30, 2015 3:53 AM (link)
Mandeep  Singh
Bruce, thanks for taking the time to test our Live Forms module. I would be extremely interested to learn more about the "labels and form elements alignments are off" and "not centered propertly". If you could contact me via our site and let me know which DNN Theme you were using to test. I would really appreciate that.

When an element is required, we follow the DNN Form Pattern and show a red left border on the field. Take a look at an example here:

I truly appreciate all feedback; especially the criticism which allows us to further improve our products. Thanks
Mandeep Singh Sunday, May 31, 2015 5:04 AM (link)
Ernst Peter Tamminga
Nice blog post. Although some of your advise sounds trivial, I have tried a fair number of commercial modules in the last 10 yrs and only a few stand out as being easy to use, adapting to the level of the user. An interface with less info seems more difficult to create than an interface with a lot of items. And there it makes a difference between a professional and good willing amateur.
Again: nice blog post. Thank you.
Ernst Peter Tamminga Thursday, June 4, 2015 2:42 PM (link)
Tony Henrich
In general developers are not good UI designers and designers are usually not developers. Very few can master both.

Hiding unimportant elements, yet be easily discoverable, is an art. Developers should be reading blogs and books on good UI design or at at least look and learn from good designs., & are good design sites. makes beautiful WordPress themes. Many DNN modules use large busy forms. I suggest going to and check out some admin themes. They make good use of forms.
Tony Henrich Thursday, June 4, 2015 3:56 PM (link)
Tony Henrich
@Mandeep, It was me who posted about your Live Module, not Bruce. I am going to give a few examples here and not on your site so that everyone, specially module developers and designers have an idea how to pay attention to detail. In Live Forms, the first thing I did is dropped a text box. Here's what I noticed: the description for 'Width' mentions the number of characters a user can enter. It's actually the size in pixels. If I enter 40, I can enter only 2 characters. The descriptions for 'Width' and 'Max length' both mean actually the same thing. That's because the description for width is incorrect. Text in descriptions don't end with a fullstop. Or at least it needs to be consistent, either none or all. That's my first observations. This brings me to my point below.

I might sound nitpicky when I report such issues. I love and appreciate good design and attention to detail like others who appreciate fine art. It's design in anything in real life, architecture, cars, things we use at home, clothes, watches, appliances, gadgets, etc.. In reporting issues I get zero benefits, actually it's minus because it took time and energy from me and the receiving end gets free tips in making their software better. I always say that a bug report is a gift and it surprises me that many of them go unappreciated or even acknowledged. That's why I am thinking about starting a professional side business for analyzing software and websites in terms of UI design and usability and give my advice on how to improve them. I get paid for what I am good at.
Tony Henrich Friday, June 19, 2015 2:56 PM (link)
Mandeep  Singh
@Tony, Thank you for your feedback. The incorrect tooltip has been fixed and should be part of next update.

I truly appreciate you being "nitpicky". As a matter of fact, we believe that's almost always required for ongoing improvement of any product. We rely on our customers to provide feedback: both positive and critical, so we can continue to improve our products.
Mandeep Singh Wednesday, June 24, 2015 2:10 PM (link)

Comment Form

Only registered users may post comments.


Aderson Oliveira (22)
Alec Whittington (11)
Alessandra Daniels (3)
Alex Shirley (10)
Andrew Hoefling (3)
Andrew Nurse (30)
Andy Tryba (1)
Anthony Glenwright (5)
Antonio Chagoury (28)
Ash Prasad (37)
Ben Schmidt (1)
Benjamin Hermann (25)
Benoit Sarton (9)
Beth Firebaugh (12)
Bill Walker (36)
Bob Kruger (5)
Bogdan Litescu (1)
Brian Dukes (2)
Brice Snow (1)
Bruce Chapman (20)
Bryan Andrews (1)
cathal connolly (55)
Charles Nurse (163)
Chris Hammond (213)
Chris Paterra (55)
Clint Patterson (108)
Cuong Dang (21)
Daniel Bartholomew (2)
Daniel Mettler (181)
Daniel Valadas (48)
Dave Buckner (2)
David Poindexter (12)
David Rodriguez (3)
Dennis Shiao (1)
Doug Howell (11)
Erik van Ballegoij (30)
Ernst Peter Tamminga (80)
Francisco Perez Andres (17)
Geoff Barlow (12)
George Alatrash (12)
Gifford Watkins (3)
Gilles Le Pigocher (3)
Ian Robinson (7)
Israel Martinez (17)
Jan Blomquist (2)
Jan Jonas (3)
Jaspreet Bhatia (1)
Jenni Merrifield (6)
Joe Brinkman (274)
John Mitchell (1)
Jon Henning (14)
Jonathan Sheely (4)
Jordan Coopersmith (1)
Joseph Craig (2)
Kan Ma (1)
Keivan Beigi (3)
Kelly Ford (4)
Ken Grierson (10)
Kevin Schreiner (6)
Leigh Pointer (31)
Lorraine Young (60)
Malik Khan (1)
Matt Rutledge (2)
Matthias Schlomann (16)
Mauricio Márquez (5)
Michael Doxsey (7)
Michael Tobisch (3)
Michael Washington (202)
Miguel Gatmaytan (3)
Mike Horton (19)
Mitchel Sellers (40)
Nathan Rover (3)
Navin V Nagiah (14)
Néstor Sánchez (31)
Nik Kalyani (14)
Oliver Hine (1)
Patricio F. Salinas (1)
Patrick Ryan (1)
Peter Donker (54)
Philip Beadle (135)
Philipp Becker (4)
Richard Dumas (22)
Robert J Collins (5)
Roger Selwyn (8)
Ruben Lopez (1)
Ryan Martinez (1)
Sacha Trauwaen (1)
Salar Golestanian (4)
Sanjay Mehrotra (9)
Scott McCulloch (1)
Scott Schlesier (11)
Scott Wilkinson (3)
Scott Willhite (97)
Sebastian Leupold (80)
Shaun Walker (237)
Shawn Mehaffie (17)
Stefan Cullmann (12)
Stefan Kamphuis (12)
Steve Fabian (31)
Steven Fisher (1)
Tony Henrich (3)
Torsten Weggen (3)
Tycho de Waard (4)
Vicenç Masanas (27)
Vincent Nguyen (3)
Vitaly Kozadayev (6)
Will Morgenweck (40)
Will Strohl (180)
William Severance (5)
What is Liquid Content?
Find Out
What is Liquid Content?
Find Out
What is Liquid Content?
Find Out