Module Patterns

Developer
Oct 8, 2010 at 5:43 PM
Edited Oct 8, 2010 at 6:39 PM

Here are the patterns that we find our modules using on a consistent basis, as well as some ideas that we'd like to use more:

  • Front End
    • Primary, secondary, tertiary/delete button styles
      • When to use Button vs LinkButton vs ImageButton vs plain hyperlink
    • Labels/fields in forms
    • Prefer markup to DNN CSS (<h4> vs .SubSubHead, make use of fieldset/legend)
      • Why in the world do we need a Normal class?
    • Grouping
      • SectionHead
      • Tabs
      • fieldset/legend
    • Validation (inline, validation summary)
    • Confirmations 
    • User messages vs. Skin Message
      • Info
      • Warning
      • Error
      • Success
    • Tooltips vs. help icon vs. intro text vs module help
    • Animations (slide/fade)
    • Templates
  • Navigation
    • Global Navigation for each module (duplicate, prominent action menu)
    • Module Isolation used in extreme moderation
  • Settings
    • Only page admins can view built-in settings, therefore we only put security-related permissions in here
    • Separate "options" control
    • Separate admin/host page (a la Bruce Chapman's modules)
  • First Experience (when dropping a module on a page)
    • Default intro content?
  • Module Connections
    • Satellite modules (mode definitions vs. desktop modules) vs. Settings
  • Module/Product Naming
    • Group modules in module drop down list (i.e. alphabetical)
  • Controls
    • Date Picker (Telerik)
    • Grid (Telerik/GridView)
    • Modal (SimpleModal, fancybox, lightbox)
    • CAPTCHA
    • Tabs (jQuery UI/Telerik)
    • Numeric Up/Down (Telerik)
    • Masked Textbox (Telerik)
    • Pager (DNN/hand-rolled)
    • Upload
    • Link Chooser
  • Friendly URLs

What about you?

Coordinator
Oct 15, 2010 at 3:00 AM

I generally agree with the majority of the items noted.  Therefore, I will only speak to a few of them with arguments for or against:

  • Primary, secondary, tertiary/delete button styles
    • I believe we are on the same page here. These buttons are generally associated with actions and often use verbs for naming. 
  • Group: SectionHead
    • Personally I feel the SectionHead has been abused over the years. It still has its place but I think most modern UI's would generally shy away from this today. 
  • User messages vs. Skin Message
    • I really hate the skin messages. The original concept behind them was great but after a few years of experience with them I think they only confuse end users for a number of reasons.
  • First Experience
    • I try to have default values set for settings. This allows a user, in most cases, to drop a module on the page and start going. I know this doesn't work all situations (form and list module, for example) but I think this type of behavior should be the norm more so than the exception. 
  • Module/Product Naming
    • I still think the MyCompany.MyModule naming convention is solid for namespace and actual project naming. This, along w/ using DesktopModules\MyCompany\MyModule for the path helps group things on the file system. 
    • As for the 'friendly names' that show up (in the module drop down, for example) I like to slim this down a bit if it makes sense. For example: Forum - Latest Posts, which is a companion download for the Forum module
  • Controls:
    • There is a style guide document the DNN Corp UX employee wrote that covers these in depth. I will see if I can get some info on where this is stored for public consumption.