Rules to Better Interfaces (Forms)

​​For specific Windows Forms rules, go to Rules to Better Windows Forms Applications​.​​

Hold on a second! How would you like to view this content?
Just the title! A brief blurb! Gimme everything!
  1. Do you align your Add/Edit/Delete buttons horizontal and bottom right?

    Usually there are problems fitting buttons next to datagrids or listboxes when trying to imply that those buttons add functionality to the datagrid or listbox.

    SSW Code Auditor - Select Job
    Figure: Bad Example - This form places the Add and Delete buttons in the top right.
    SSW Code Auditor - Rules Definition
    Figure: Buttons aligned vertically, however they cut off useful information in the datagrid (Better)
    SSW Code Auditor - Select Files
    Figure: Good Example - Buttons align horizontally at the bottom right of the grid which provides plenty of room for then needed information
  2. Do you avoid "Data Junk" (data not manually entered by yourself)?

    When there are too many choices always Default to the most common ones. Then add a check box to allow the advanced users to turn off the common choices. E.g.

    [x] Only include common choices

    Likewise in a contacts database where you have entries from all around the world it is good to add a check box on the search screen similar to the following:

    [x] Only include customers that have been updated by employees (not directly entered from the web)

    A good example on that the checkbox on the search screen of TimePRO.NET.

    Options Form - ComboBox without Result Count
    Figure: Default search tick box in TimePRO.NET

    Read our rule on Validation - Do you avoid capturing incorrect data?

  3. Do you avoid combining different entities?

    If the form controls are different entities, they usually have different data and different validation, thus they should not be combined.
    Having the controls separated also make the form easier to read.

    Different entities are combined.
    Figure: Bad Example - Different entities are combined
    Different entities are separated.
    Figure: Good Example - Different entities are separated
  4. Do you avoid doing an embedded 'Add'?

    For any case of 'Add New', choose to open a new window (popup) for entering data.

    The 'Add New' button should open a new form
    Figure: The 'Add New' button changes from a view into a data entry form
    The 'Add New' did not open a new form
    Figure: Bad Example - The 'Add New' button, shown in Figure 1, opened the page in the same window

    It is better to open in a new form, reasons being:

    • It is better for the user in terms of clarity. The change of view to data entry form can be a surprise
    • It is better to code e.g. if you are using this control in a couple of places you may need to show or hide 'Save' buttons etc. Otherwise, it is a pain to make it behave differently in different contexts.

    However, you do need to call back on save and requery it.
    Use a modal form and requery it (DON'T use JavaScript, instead use the Modal Popup Form Example)
    An example of this is in Outlook with the 'New' button.

    The 'New' opens a new form
    Figure: Good Example - the 'New' button in Outlook opens a new form for you to construct your email
    Adding a new table in SharePoiny
    Figure: Adding a table in SharePoint have a popup with dimmed background
  5. Do you avoid dynamically labeling your form buttons?

    The buttons that a user will typically use should not be dynamically labeled across your applications.

    OLEDB Connection String
    Figure: Bad Example - Buttons are dynamically labeled "Build ..." and "Edit ..." depending on text in the text box
    OLEDB Connection String
    Figure: Good Example - Buttons are not dynamically labelled
  6. Do you avoid using menus for ComboBox maintenance?

    Using a separate menu to maintain ComboBoxes is never a good idea. A better solution is to use an ellipses button to drill down into the menu.

    Menu driven ComboBox Maintenance System
    Figure: Bad Example - Menu driven ComboBox maintenance form
    SSW eXtreme Emails! - Add Incident
    Figure: Good Example - Use ellipses to drill down into a ComboBox maintenance form
  7. Do you avoid using one form for data entry?

    Combining data entry and find navigation is a mistake. I think 2 forms are better than one. I prefer a list box on one form with "Add", "Edit" and "Delete" buttons to a popup form. Rather than a listbox and the data entry fields on one form.

    ListView with data entry fields in one form
    Figure: Bad Example - ListView with data entry fields in one form
    ListView with only 'Add' 'Edit' 'Delete' buttons
    Figure: Good Example - ListView with only 'Add' 'Edit' 'Delete' buttons

    When you want to create a new entry or edit one, just click the buttons and open a new form with all the data entry fields.

    ListView with only 'Add' 'Edit' 'Delete' buttons.
    Figure: Good Example - Separate form with all the data entry fields
  8. Do you avoid using plain textboxes for notes?

    Instead of using plain textboxes for notes, use rich textboxes. It allows you to use links to URLs, formatting (including bold, underline, italics, font type and font size, etc.), bullet points and numbering.

    Use of a plain textbox for notes
    Figure: Bad Example - use of a plain textbox limits the detail of the user's notes
    Use of a rich textbox for notes
    Figure: Good Example - with use of a rich textbox, you can use features such as bold, underline, highlighting and hyperlinks.

    See our page on The Best 3rd Party Web Development Tools and you will find the FreeTextBox Demo.

  9. Do you create a popup form for editing details?

    If you want to edit a single item in your form we suggest you use a popup form. This gives each form a definite function and neat UI design.

    without popup form
    Figure: Bad Example - Edit controls and main UI are messed up.
    with popup edit form
    Figure: Good Example - Use a popup form to do edit.
  10. Do you follow the control size and spacing standards?

    Introduction

    Despite seeming trivial, the most subtle elements of your form can have the greatest impact on your users.

    SSW SQL Auditor - Choose Data Source
    Figure: Bad Example - What's wrong with this form?

    The form shown in this screenshot is an example of bad control placement:

    1. The fonts used are non-standard (see: Do you use Microsoft's Recommended Font in your Application?)
    2. The controls have no consistency in terms of margins, spacing or even control alignment. See, for example:
      1. The navigation buttons at the bottom of the screen having uneven margin space on the right and bottom sides. They're also the wrong size.
      2. The dimensions of all input controls and buttons do not follow standard convention (see below)
      3. The right side of the "Build..." button is not aligned with the right of the "Connection String" text box
      4. The left margins inside the two frames are inconsistent.
      5. The space surrounding the logo in the top right corner is uneven

    This detracts from the visual appeal of the user interface, and results in an uneven user experience. After looking at all of this you may be thinking "do I really need to work out exactly what spacing and dimensions I want to use for every detail of a form I make?"

    The good news is that you don't need to: Microsoft have gone to a great deal of effort to define standards for exactly how your form controls should be laid out, and these standards are worth taking into consideration. By all means, if you have disagreements with anything listed here then please discuss it with us and we'll consider changing our own standards (Microsoft have changed theirs over the years, after all), but we recommend using the following as a guide.

    These examples assume that you are using the standard system font as defined in the rule mentioned above. Please note that although Dialog Units (DLUs) are better suited for generic (font independent) use, they are not available in the Visual Studio designer.

    SSW SQL Auditor - Choose a Data Source
    Figure: Good Example - The form follows Standards of good form design discussed below

    The Rules

    1. Buttons must be...
      • Spaced apart by 6 pixels from other buttons except in the case of wizards where the < Back and Next > buttons may be closer together
      • Spaced 6 pixels from the inside border of a form on the sides closest to it
      • usually 75 pixels wide
      • 23 pixels high
    2. Single-line textboxes and most controls must be...
      • 21 pixels high (width depends on content)
      • Aligned correctly with any related controls
    3. In a form...

    These are some of the more common examples. Please read Microsoft's Visual Design Guidelines for more information and greater detail.

    Ultimately the goal of all of this is to ensure consistency. Keeping these ideas in mind at all times while doing user interface design will give users a better overall experience and will boost the professionalism of your products.

    One From The Good Guys

    Here's a good example for you to take inspiration from. This dialog is from Microsoft Outlook. Let's check out some points:

    1. Consistency across wizard pages is very good
    2. Spacing and sizing of buttons is precise
    3. The logo has been positioned evenly
    Outlook - Email Accounts
    Figure: Good Example - Microsoft have defined to exacting measures what spacing should be used in their Microsoft Outlook wizards

    Read more about control size on the Rules to Better Windows Forms page

    We have a program called SSW Code Auditor to check for this rule.

  11. Do you group related fields by using FieldSet?

    ​FieldSet element allows you to group thematically related controls and labels. Grouping controls makes forms more accessible and easier for users to understand the purpose of filling the forms.

    See the example below using "Your Details" and "Event Details".

    Figure: Good example - Use FieldSet for grouping

    Here's an example of how FieldSet works:

    <fieldset>
        <legend>Your Details</legend>
        <p>
            <label for="FirstName">First Name: </label>
            <input id="FirstName" type="text" /><br />
            <label for="LastName">Last Name: </label>
            <input id="LastName" type="text" /><br />
            <label for="EmailAddress">Email Address: </label>
            <input id="EmailAddress" type="text" />
        </p>
    </fieldset>
    Figure: Example code of FieldSet
    Figure: How that code will look on the browser

    ​ Things to remember:

    1. Wrap logical control groups in a <fieldset>.
    2. The first child of a <fieldset> should be a <legend>, so the user knows what to expect in that section.
  12. Do you have a label tag for the fields associated with your input?

    When adding input boxes to collect data, please always have a <label> tag associated with your <input> tag to link the labels with their respective edit controls. This improves accessibility and gives nice focusing stuff (when you click the label).

    <p>
        <label for="EmailAddress">Email Address</label>
        <input id="EmailAddress" type="text"/>
    </p>

    Tip: To do this in ASP.NET use the AssociatedControlID parameter on your <asp:Label /> controls.

    <p>
        <asp:Label ID="EmailLabel" runat="server" Text="Email Address" AssociatedControlID="EmailAddress"/>
        <asp:TextBox ID="EmailAddress" runat="server"/>
    </p>
  13. Do you have consistent way to store a same field?

    In Outlook the Street Address is stored as 1 Multi-Line field (with an intelligent Address Checker - nice but not essential), yet in Microsoft CRM the Street Address is split out across 3 separate single line text fields, they should be consistent.

    Street Address in Outlook
    Figure: Street Address in Outlook.
    Street Address in CRM
    Figure: Street Address in CRM.

    We consider Outlook is friendlier, because:

    1. The wrong data is entered often when you have Street 1, Street 2, Street 3.
    2. Often Street 2 and Street 3 is not needed so it is extra clutter for no reason.
    3. What do you do when you have Street 4.
    4. It is the same as http://local.live.com/

    Of course, we might be wrong, because:

    1. Basically, it's not worth the effort - because it goes across multiple places in CRM like Leads and Opportunity (see test results from Adrian).
    2. Printing labels might be simpler - sizes would be fixed.

    We have a suggestion for CRM about this at CRM and Outlook should be consistent with regards to Addresses.

  14. Do you know the correct way to develop Data Entry Forms?

    Data Entrees should be able to use your data entry form with ease. It should follow the flow that they are familiar with.

    Access - Clients Form
    Figure: Bad Example - New button should open another form, and Delete button should be on that new form
    1. Multiple Form Instances

      Imagine, while the Sally is entering a Quote on the Quote Form, they receive a Phone call from a client needing a new Quote. The user will not want to close the current Quote, because they are 1/2 way through it.

      As we saw in the example above, Sally needs to open multiple instances of the same form. A reputable example for this is Microsoft's Outlook. When you are 1/2 way through an email, and you chose to start writing another, Outlook makes it convenient by placing every email you open in the taskbar. The figure below illustrates this.

      Outlook - Multiple Emails
      Figure: Good Example - Outlook opens multiple instances of the data entry form (email message)
      Outlook Taskbar
      Figure: Good Example - Each form instance is shown in the taskbar, and easily opened again

      A method of implementing this is through New and Delete buttons on the form.

      New and Delete buttons should appear, in a toolbar for example, docked to the top.
      The figure in Data Entry Drill Downs below illustrates this.

      SSW Time PRO .NET -  Time Sheets
      Figure: Good Example - New and Delete buttons docked in the Toolbar providing easy data entry for new Timesheets

      The Delete button resides there to make sure that Sally has seen the record before she deletes it. The New button should instantiate a new data entry form in add mode (as compared to "edit"), leaving the current one in the background.

      It can be argued that navigation is required in a data entry form. As an option, a good navigation system will navigate through a subset of records (ideally records which are search results). The idea of navigating through all records can be tedious, and most of the time useless.

      However there is a problem

      Do you open the same record with two different instances of the form? For example, if attempt to open a form instance for editing a Quote from the database, then while editing you open up another form instance for the same Quote. Besides the fact that there will be loss of data, and dirty reading, this is a very confusing interface.

      A possible solution for this issue is to implement a form manager.

      The "form manager" will keep track of every instance opened. So in our example, the second time we try to open the same Quote for editing, the "form manager" will recognize that there is a form currently being edited that Quote, and would select that form.

    2. Form states and how to respond to them

      The form is to be aware of the data state. If the data is dirty:

      • The Apply button would be enabled until the record is saved
      • The OK button would simply save the record and close the Form
      • The Cancel button would pop up a dialog (shown in the figure below) asking to save changes;
        If the user decides to save, it should save the record and close the form.
        If No, then close the form without saving.
        If Cancel, then return back to the dirty form.
      Centrix - Save Changes
      Figure: Good Example - Save Changes Dialog must appear when form is dirty
    3. Do not add buttons for searching on the data entry form, create a new form for search, through which you can open new instances of the form. The convenience of the search capability on the form will be overlooked as it makes the form more crowded. Another issue which can arise is if Sally searches for a criteria which returns multiple records, she cannot look at all those records. She can only open one at a time, navigating through them. The solution to the search dilemma is to create a new search form, which is shown in the figure below. The search form will allow multiple criteria, will not over crowd the data entry form, and will show you all the results that your search has retrieved.

      Integrated Search
      Figure: Bad Example - This implementation of a search utility is on the same form
      Separate Search
      Figure: Good Example - This implementation of Search feature is on a separate form
    4. No Delete Button for sub forms

      When including a sub form in your main form (as shown in figure below), the only options the user should have are "New" and "Edit". When "Edit" is clicked, another data entry form is opened to edit selected record. In this data entry form, you will have a "Delete" button on the toolbar. This saves the user from making mistakes and forcing them to see the record before deleting.

      Centrix - Loan Estimate Details
      Figure: Good Example - No Delete button for Sub forms
    5. Validation

      Most fields required validation. There are three types of validations:

      • Required Field - the field should be filled in
      • Formatting - the field must be in a correct format. e.g. currency or date
      • Logical - the field needs to pass some validation tests in the business layer

      To show an error, display an error provider icon next to the field on the right. An example of this is shown in the figure below.
      Validation must not be done on TextChanged, this may chew the processor if it is a logical validation. It can also give unpleasant results, e.g. when entering -6.00, as soon as the '-' is entered the validation control would turn on.

      Validation for Required fields must be done in the validating event.
      Validation for format should be done in parse/format methods.
      Validation for Logic should be done in Validated, since it must be entered if required, and in correct format.

      The reason for the above validation placement is that these events run in the following order:

      • Validating
      • Parse/Format
      • Validated
      Centrix - Error Provider
      Figure: Good Example - Error Provider Icon next to a required field

      Do not show a message box after every error in validation. You may show a message box as an error summary when an OK or Apply is clicked. Make sure you warn the user that there is an error on the form when they attempt to save.

    6. Relevant Menus

      Make sure that the menu items are relevant to the current form. The main idea is that we don't want to show the user any dummy menu items. However, this may become complex when a base form (containing the menu) is inherited. Access to menus in the base form must be granted (maybe through properties), so that each menu can be customized according to each child form.

      Centrix - File, Action, Report, Tools & Help Menus
      Figure: Bad Example - Action and Tools are irrelevant on this form
      Centrix - File, Report & Help Menus
      Figure: Good Example - Menus are relevant

      In the above example, there are a couple of unused menus that have been inherited from the base form and not set to invisible.

    7. Field Formatting

      Ensure that the data is displayed in correct format. For example, when presenting a percentage data in a field, make sure it is displayed as '% xx.xx'.
      To accompany formatting, you must also create a parse function for putting the correct value back in the database.

      Note: This can be difficult for data bound fields, and in that case you will have to handle the parse and format event of the Field's Binding object. An example of handling these events is shown below.

                  Dim controlBinding As Binding = New System.Windows.Forms.Binding(propertyName,dataSource, dataMember)
                  AddHandler controlBinding.Format, AddressOf DecimalToCurrencyString
                  AddHandler controlBinding.Parse, AddressOf CurrencyStringToDecimal
                  controlToBeBound.DataBindings.Add(controlBinding)
                  Private Sub DecimalToCurrencyString(sender As Object, cevent As ConvertEventArgs)
                  ' The method converts only to string type. Test this using the DesiredType.
                  If Not cevent.DesiredType Is GetType(String) 
                  Then
                      Exit Sub
                  End If
                  ' Use the ToString method to format the value as currency ("c").
                  cevent.Value = CType(cevent.Value, Decimal).ToString("c")
                      End Sub
                  Private Sub CurrencyStringToDecimal(sender As Object, cevent As ConvertEventArgs)
                  ' The method converts back to decimal type only.
                  If Not cevent.DesiredType Is GetType(Decimal) 
                  Then
                      Exit Sub
                  End If
                  ' Converts the string back to decimal using the static ToDecimal method.
                  cevent.Value = Decimal.Parse(cevent.Value.ToString, NumberStyles.Currency, nothing)
                  End Sub
                  
      Code: Code for Handling Parse and Format Events for Data bound Controls

      The Binding is created and added to the Data-Bindings of the Control all in one line in Visual Designer in VS.Net. Do not use Visual Designer to data-bind if you will be handling the Parse and Format events. You will have to create the handlers yourself.

    8. Created/Last Updated By Fields

      With all database entries, there are always some fields that are used over and over again. For example, these fields may be created date, created by, last updated date, updated by, etc.

      A common UI to use for these fields can be seen in the example below. What we do is create a user control that is identical across all projects/UI.

      SSW Time PRO .NET - Time Sheets
      Figure: Bad Example - This form has no information to indicate who created this entry and who last modified it
      SSW Time PRO .NET - Time Sheets
      Figure: Good Example - This form contains Created by/Updated by fields used in a standard control which is put into all forms

      An example of how to set the values for this user control is shown below.

                  updatedBy.CreatedDate = .DateCreated
                  updatedBy.CreatedBy = .EmpCreated
                  updatedBy.UpdatedDate = .DateUpdated
                  updatedBy.UpdatedBy = .EmpUpdated
                  
      Code: Code for Setting values for User Control

      Databinding is also available to be used with this user control.

      User Control - Data Binding in the Designer
      Figure: Data Binding using the Designer
    9. Minimum Defaults

      In many situations, there is a need for field Defaults. These Defaults can be extracted from the Database for example. When a new form is opened ensure that only necessary Defaults are loaded. By Default some decimal fields will become 0.0, but make sure they are set to blank because they may be required fields.

    10. Resizing

      Is the form resizable? What happens if the user resizes and/or maximizes the form?

      Data entry forms, and forms containing List View controls, should be resizable. Use either anchoring or docking, or a combination, to handle window resizing. Restricting the user from resizing or maximizing the form is not recommended.

  15. Do you label your form buttons consistently?

    ​The buttons that a user will typically use to close a form should be named consistently across your applications.

    Broker Details - Save & Close Buttons
    Figure: Bad Example - Unclear labels on the buttons
    • Save button could possibly update the fields but keep the form open.
    • Close could save the fields, then close the form, when the Cancel button may be more appropriate.

    We recommend the age-old standards of:

    • OK. Close the form and save any changed data. This should be referenced by the form's AcceptButton property.
    • Cancel. Close the form without saving. This should be referenced by the form's CancelButton property.
    • Apply. Save data without closing the form.
    Outlook Contact Properties - OK, Cancel & Apply Buttons
    Figure: Good Example - This form uses the standard button naming standards (and has the Default buttons set!)

    We have a program called SSW Code Auditor to check for this rule.

  16. Do you make text boxes show the whole query?

    Text boxes are often limited in size. When the user have a large ammount of text, the field should grow bigger to show the whole query.

    text area bad example
    Figure: Bad example - Can't see the whole query
    text area good example
    Figure: Good example - Text area expands showing the entire message as it is typed

    More info:

  17. Do you provide hints for filling non-common fields?

    If you have form fields that require some further information, you can provide a hints column next to the fields so users know what the purpose of the data is.

    field hints
    Figure: Good example - Field hints can make the user more comfortable​
  18. Do you provide red errors next to the field?

    Too often error messages are a summary at the top or the bottom of the page. Instead please provide an error message per validation error, next to the field (and in red!).​
    Figure: Good example - ​Provide red errors next to the field
  19. Do you provide the user Drill-Downs and Drill-Arounds?

    Users should be able to navigate around your application without having to return to the main menu to open a related form.

    Think about a summary report - users should always be able to "drill-down" to track a transaction to its original source.
    Think about a data entry form - users should always be able to "drill-down" to the look up table

    There are four ways to provide drill-downs:

    1. Preferred - Use buttons to navigate around the application
      SSW Timesheets - Add Timesheet Entry
      Figure: Use named buttons to navigate around the application (Preferred)
    2. Double click the control
    3. Use buttons with three dots - an ellipsis (...) character
      SSW Code Auditor - Path to Scan
      Figure: Good Example - Use ellipses to navigate around the application
    4. Use hyperlinks
      Asset Form
      Figure: Drill-downs implemented as links (an interesting alternative but a bit too much of a visual impact)

    Another handy thing to add for users is "drill-around". This is implemented by using a right mouse-click to activate context-sensitive links between related screens.

  20. Do you save the last user's selections?

    Below is a report screen that is fairly common that developers create, they will make it so every time the page is loaded the user will have to reselect their options. To make it simpler the options should be stored in a cookie or database and be already pre-selected once the page is reloaded, as it is likely they will want to use the same or slightly modified query. If they don't then they can simply select what they are after anyway.

    Sample Select
    Figure: Bad Example - This is suitable for first view, but not for a return view
    Sample Select 2
    Figure: Good Example - Instead, save the users last selection
  21. Do you use the concept of drafts?

    Your form should prompt to save the record when the user leaves a page that has been modified. Alternatively, you can prompt the user when they log back on that they have drafts. E.g. mail.google.com

  22. Do your Windows Forms have border protection?

    Border protection helps us design Windows Forms properly without placing controls too near to the border. Maintain a consistent alignment makes the Windows Forms look better, especially on designing wizard forms where all forms have the same size.

    Designing border protection.
    Figure: Good Example - Good border protection on a form at run time. The only problem is you would have to imagine these blue lines to get consistency

    Border protection in action:

    SSW Link Auditor - UI without border protection.
    Figure: Bad Example - Controls placed very near to the border and not aligned correctly
    SSW Link Auditor - UI with border protection.
    Figure: Good Example - All controls are in the border protection area and aligned correctly
    SSW Link Auditor - UI with border protection.
    Figure: Design mode

    The way to implement border protection (the 2 vertical red lines) is implement it in the base form or base user control, and all other forms and user controls inherit the base class to get consistent border protection lines.

                private void BaseForm_Paint(object sender, PaintEventArgs e)
                {
                    // Draw border protection lines 
                    if (this.DesignMode) 
                    { 
                       Pen pen = new Pen(Color.Red); 
                       e.Graphics.DrawLine(pen,
                                23, 0, 23, this.Height); 
                                e.Graphics.DrawLine(pen, this.Width - 23, 0, this.Width - 23, this.Height); 
                    } 
                }
                
    Q: Why don't we put a panel on the form and set the form DockPadding property which does a similar thing?
    A:
    1. Adding more panels docking to a form reduces the performance significantly because of the extra SuspendLayout and ResumeLayout calls.
    2. In certain cases we might really want a control to stick at the border, if we use DockPadding Property, we can't make any exceptions. And still, these red lines actually just act like a ruler to help us easily see whether the controls are aligned nicely.