Secret ingredients to quality software

SSW Foursquare

Rules to Better Interfaces (Forms) - 25 Rules

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

  1. Do you avoid having unnecessary labels?

    Thinking about UI, we want to make them as clean as possible...and you do that by removing noise. One of the most common ways to remove noise is to remove or de-emphasise labels.

    Learn more on Labels are a last resort.

    avoid labels
    Figure: Users know what things are without all the unnecessary labels

  2. Labels provide an easy way to show text in a form. It is recommended to consistently keep labels as clean as possible, without having them ending a colon [ : ], which is a common thing to do in Windows Forms.

    Figure: Bad Example - Labels with ":" at the end

    Figure: Good Example - Clean labels without ":"

  3. Do you know how to align your form labels?

    There are different ways to align your form labels and each has its own pros and cons.

    Top aligned

    label top aligned


    • Easiest to process
    • Fastest completion times
    • Good for multiple languages


    • Takes up a lot of vertical space!
    • Makes a long-form look even longer!

    Left aligned

    label left aligned


    • Easy to scan labels, especially if you have a lot of optional labels
    • Takes a little more attention to fill in, so useful for complicated forms that require accuracy


    • Horizontal space, unlike vertical space, is not limitless, and an unintended horizontal scrollbar is the first sin of web development.
    • Slowest completion times
    • Poor multilanguage support
    • Not even very good responsive support

    Right aligned

    label right aligned


    • Best at linking label and form
    • Good completion rates on small, common forms (i.e. Login, Sign up)


    • Hardest to read and scan
    • Poor multilanguage support
    • Poor responsive support

    Material labeling

    Alternatively, we can use Material labeling which places them inside the form and slides up on focus.

    label material labeling


    • Best for readability
    • Best for visual connectivity
    • Best for completion rates
    • Decent multilanguage support
    • Decent responsive support


    • Extremely time-consuming to implement. Need to consider the cost/benefit.
    • Not necessarily available on 3rd party platforms, like Wufoo or Microsoft Forms.
  4. 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.

    Figure: Bad Example - This form places the Add and Delete buttons in the top right.

    Figure: Buttons aligned vertically, however they cut off useful information in the datagrid (Better)

    Figure: Good Example - Buttons align horizontally at the bottom right of the grid which provides plenty of room for then needed information

  5. When there are too many choices always Default to the most common ones. Then add a checkbox to allow the advanced users to turn off the common choices.

    [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:

    Figure: Default search tick box in TimePRO.NET

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

  6. 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.

    Figure: Bad Example - Different entities are combined

    Figure: Good Example - Different entities are separated

  7. Do you avoid doing an embedded 'Add'?

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

    Figure: The 'Add New' button changes from a view into a data entry 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.

    Figure: Good Example - the 'New' button in Outlook opens a new form for you to construct your email

    sharepoint add table
    Figure: Adding a table in SharePoint have a popup with dimmed background

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

    Figure: Bad Example - Buttons are dynamically labeled "Build ..." and "Edit ..." depending on text in the text box

    Figure: Good Example - Buttons are not dynamically labelled

  9. 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.

    Figure: Bad Example - Menu driven ComboBox maintenance form

    Figure: Good Example - Use ellipses to drill down into a ComboBox maintenance form

  10. 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.

    Rule 2formbetter bad 1
    Figure: Bad Example - ListView with data entry fields in one form

    Rule 2formbetter good 1
    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.

    Rule 2formbetter good 2
    Figure: Good Example - Separate form with all the data entry fields

  11. 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.

    Figure: Bad Example - use of a plain textbox limits the detail of the user's 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.

  12. 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.

    Figure: Bad Example - Edit controls and main UI are messed up.

    Figure: Good Example - Use a popup form to do edit.

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

    Figure: Bad Example - See below what is wrong with this form

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

    1. The fonts used are non-standard
    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.

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

    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

    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.

  14. 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:

        <legend>Your Details</legend>
            <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" />

    Figure: Example code of FieldSet

    fieldset browser
    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.
  15. 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).

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

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

        <asp:Label ID="EmailLabel" runat="server" Text="Email Address" AssociatedControlID="EmailAddress"/>
        <asp:TextBox ID="EmailAddress" runat="server"/>

    Tip: For a nicer user experience, consider using adaptive labels and inputs with a UI Library like Material UI.

  16. 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.

    Figure: Street Address in Outlook.

    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

    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.

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

    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.

    Figure: Good Example - Outlook opens multiple instances of the data entry form (email message)

    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:

    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.

    Figure: Good Example - Save Changes Dialog must appear when form is dirty

    3. Searching on the data entry

    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.

    Figure: Bad Example - This implementation of a search utility is on the same form

    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.

    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

    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.

    Figure: Bad Example - Action and Tools are irrelevant on this form

    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) 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 Figure: Code - Code for Handling Parse and Format Events for Data bound Control

    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.

    Figure: Bad Example - This form has no information to indicate who created this entry and who last modified it

    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 Figure: Code - Code for Setting values for User Control

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

    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.

  18. 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.

    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.

    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.

  19. 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.

    textarea small bad
    Figure: Bad example - Can't see the whole query

    textarea big good
    Figure: Good example - Text area expands showing the entire message as it is typed

    More info:

  20. 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

  21. 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!).

    red error
    Figure: Good example - Provide red errors next to the field

  22. 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

    Figure: Use named buttons to navigate around the application (Preferred)

    1. Double click the control
    2. Use buttons with three dots - an ellipsis (...) character

    Figure: Good Example - Use ellipses to navigate around the application

    1. Use hyperlinks

    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.

  23. 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.

    Figure: Bad Example - This is suitable for first view, but not for a return view

    Figure: Good Example - Instead, save the users last selection

  24. 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.

  25. 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.

    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:

    Figure: Bad Example - Controls placed very near to the border and not aligned correctly

    Figure: Good Example - All controls are in the border protection area and aligned correctly

    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); 
                                23, 0, 23, this.Height); 
                                e.Graphics.DrawLine(pen, this.Width - 23, 0, this.Width - 23, this.Height); 


    (Why don't we put a panel on the form and set the form DockPadding property which does a similar thing?

    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.
We open source. Powered by GitHub