Lessons in Making Better DNN Modules

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.

Great post! All module developers, especially those on the DNN Store, should take this seriously.

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.

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.

@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 dnndev.me 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 :)

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: http://www.mandeeps.com/products/dnn-modules/live-forms/demos/gallery/contact_us.aspx

I truly appreciate all feedback; especially the criticism which allows us to further improve our products. Thanks

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.

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. Dribbble.com, deviantart.com & behance.net are good design sites. elegantthemes.com makes beautiful WordPress themes. Many DNN modules use large busy forms. I suggest going to themeforest.com and check out some admin themes. They make good use of forms.

@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, 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.