Rules to Better Interfaces (Controls)

Since 1990, SSW has supported the developer community by publishing all our best practices and rules for everyone to see. 

If you still need help, visit Website Design and User Experience​ and book in a consultant.​​

Hold on a second! How would you like to view this content?
Just the title! A brief blurb! Gimme everything!
  1. Controls - Do you include '-All-' option in your ComboBoxes?

    ComboBoxes are often used for filtering data. It is best to have an '-All-' option to give your user chances to select all data.

    It is important to understand the idea of visual text. In a list you could see either:
    • -None- or
    • No activity assigned
    They both have the same meaning, but the first one is immediately visible whereas the second one must be read.

    If the ID column in your database is a string data type, it ​is useful to add a constraint to limit the types of characters that it can contain. Adding a constraint can make it simpler to build your front-end, as you won't need to worry about encoding or escaping to handle special characters.

    In SQL Server, you can add a check constraint that limits your column to alphanumeric characters, a hyphen, or underscore using the following T-SQL:

    ALTER TABLE [TableName] ADD CONSTRAINT CK_String_Identifier​
        CHECK ([StringIdColumn] NOT LIKE'%[^a-zA-Z0-9_\-]%')​



    ComboBox without All
    Figure: Bad Example - No '-All-' option so the user cannot select all data
    ComboBox without All
    Figure: Good Example - Having an '-All-' option gives a user a chance to select all data
    Also, keep it simple!
    All Stores
    Figure: Bad Example - '-All Stores-' isn't needed
    All
    Figure: Good Example - Keep it as a simple '-All-'
    All
    Figure: Good Example - Keeping it simple makes it easy to spot (that there is no filter) when you have multiple fields.
  2. Controls - Do you include the number of results in ComboBoxes?

    When designing your form, you should try to help your user whenever it's possible. So it's a good idea to include the number of results in ComboBoxes.

    For Web Pages
    Combo-box with multiple columns
    Figure: Good example – combo-box with multiple columns
    Feel free to use our sample:
    1. Download and install Kendo UI Controls from Kendo UI
    2. HTML (Razor)
      Create a combo-box that has a custom template. Use a code bellow as an example:

      @(Html.Kendo().ComboBoxFor(x => x.EmpTime.ProjectID)
      .AutoBind(true)
      .Suggest(true)
      .Delay(300)
      .DataSource(source => source.Read(read => read.Action("ProjectNameAjaxBind", "Ajax")
      .Data("function() { return {clientId : getClientId()}; }")
      .Type(HttpVerbs.Post)))
      .Height(450)
      .DataTextField("DisplayText")
      .DataValueField("Value")
      .Filter(FilterType.Contains)
      .Template(@"
      <table class='comboBox-Projects'>
      <tr>
      <td class='projectName'>${data.DisplayText}</td>
      <td class='projectTotalCount'>${data.UsedCount}</td>
      <td class='projectLastUsed'>${data.LastUsedText}</td>
      </tr>
      </table>
      ")
      .HighlightFirst(false)
      .IgnoreCase(true)
      .Events(e => e.Change("projectChanged").Open("onProjectOpened"))
      )

    3. CSS
      Customize the look & feel to suit your needs.

      #projectsTableBorder {
      border-bottom: 1px solid rgb(217, 217, 217);​​​
      margin: 0 -2px;
      }
      .comboBox-Projects#projectsHeader {
      color: black;
      font-weight: bold;
      margin: 4px 16px 4px 4px;
      }
      .comboBox-Projects td.projectName {
      width: 400px;
      text-align: left;
      }
      .comboBox-Projects td.projectTotalCount {
      width: 70px;
      text-align: right;
      padding-right: 16px;
      }
      .comboBox-Projects td.projectLastUsed { text-align: left; }
      #projectNameHeader:hover, #projectTotalCountHeader:hover, #projectLastUsedHeader:hover {
      cursor: pointer;
      text-decoration: underline;
      }

    4. JavaScript
      Use JavaScript to change the combo-box's behaviour.

      // resize the drop-down list
      function resizeComboBoxList(comboBoxListId, width) {
      var list = $(comboBoxListId);
      list.width(width);
      var height = list.height();
      list.children("ul").height(height - 25);
      }
      function onProjectOpened() {
      resizeComboBoxList("#EmpTime_ProjectID-list", 600);
      }
      // execute sorting when a header column is clicked
      function onClick_ColumnHeader(senderId, comboBoxId, fieldName) {
      var column = $(senderId);
      column.unbind('click');
      column.click(function() {
      sortComboBoxBy(comboBoxId, fieldName);
      });
      }
      // sort any combo-box based on a field name
      function sortComboBoxBy(comboBoxId, fieldName) {
      var comboBox = $(comboBoxId).data("kendoComboBox");
      var sortDescriptors = comboBox.dataSource._sort;
      var direction = "asc";
      if (typeof(sortDescriptors) != "undefined") {
      var sortDescriptor = sortDescriptors[0];
      if (typeof(sortDescriptor) != "undefined") {
      if (sortDescriptor["field"] == fieldName) {
      if (sortDescriptor["dir"] == "asc") {
      direction = "desc";
      }
      }
      }
      }
      comboBox.dataSource.sort({
      field: fieldName,
      dir: direction,
      });
      }
      // prepare
      $(document).ready(function() {
      var projectsId = "#EmpTime_ProjectID";
      var projectsListId = projectsId + '-list';
      // prepend header to combo-box list. By default you only get <ul>
      $("

      Project Name</td>" +
      "<td id='projectTotalCountHeader' class='projectTotalCount'>Used</td>" +
      "<td id='projectLastUsedHeader' class='projectLastUsed'>Last Used</td>" +
      "</tr></table>" +
      "</div>")
      .prependTo(projectsListId);
      // register click events for each column
      onClick_ColumnHeader('#projectNameHeader', projectsId, "DisplayText");
      onClick_ColumnHeader('#projectTotalCountHeader', projectsId, "UsedCount");
      onClick_ColumnHeader('#projectLastUsedHeader', projectsId, "LastUsedValue");
      });
      });​

    For Windows Forms

    Options Form - ComboBox without Result Count
    Figure: Bad Example - You can't tell the number of results and there is a scroll bar
    Options Form - ComboBox with Result Count
    Figure: Good Example - The number of results is clearly displayed. Long text boxes > 30 entries, another approach can be employed - putting the common ones at the top
    Long Text ComboBox
    Figure: Bad Example - Firstly because it is manual, plus what about the 4th, 5th, etc most common used countries
    Sortable ComboBox
    Figure: Bad Example – This was a highly unpopular method of the sorting and counting above
    We believe all combos should be able to be sorted ascending/descending and by popularity asc/desc.
    sort-alpha-numeric.jpg
    Figure: Good Example - Is there a better way to sort this?
  3. Control Choice - Do you use GridView over the CheckedListBox?

    In Web we have:
    In Windows Forms we have a CheckedListBox. With a CheckedListBox you cannot:
    • Sort data - always useful when there are more than about 20 rows
    • Contain much information - can only show one field
    • DataBind - always costs heaps of code
    ​​
    CheckedListBox
    Figure: Bad Example - The CheckedListBox is limited
    DataGrid
    Figure: Good Example - The DataGrid can show much more information (and if you use a 3rd Party eg. Telerik, then it can be pretty too)
    In Windows Forms, the code of DataGrid databinding is easier than that of CheckedListBox.

    ProductsService.Instance.GetAll(Me.ProductsDataSet1)
    CheckedListBox1.DataSource = Me.ProductsDataSet1.Tables(0)
    CheckedListBox1.ValueMember = "ProductID"
    CheckedListBox1.DisplayMember = "ProductName"
    For i As Integer = 0 To CheckedListBox1.Items.Count - 1
    Dim checked As Boolean = CType(ProductsDataSet1.Tables(0).Rows(i)("Discontinued"), Boolean)
    CheckedListBox1.SetItemChecked(i,checked)
    Next ​

    Figure: 8 lines of code to fill a CheckedListBox

    ProductsService.Instance.GetAll(Me.ProductsDataSet1)

    Figure: One line of code to fill a DataGrid
    But the CheckedListBox is useful if only one field needs displaying.
  4. Control Choice - Do you use a GridView (over the ListBox)?

    A GridView provides much richer features than ListBox, you can easily add a checkbox onto the header to allow "check all" functionality, which is impossible for ListBox.

    ListBox
    Figure: Bad Example - Use the ListBox.
    GridView
    Figure: Good Example - Use GridView and add the enabled checkbox on the header
  5. Control Choice - Do you use ListView over GridView (was DataGrid) for ReadOnly? (Windows Forms only)

    Yes a ListView looks nicer than a DataGrid, but a Datagrid is better because it has more functionality (out of the box that is). With a ListView you cannot:
    • Copy and paste - although you can select a row of data in both controls, you can't copy and paste a whole row from the ListView
    • Sort data - always useful when there are more than about 20 rows
    • DataBind - always saves heaps of code
    So our old rule was to always use the ugly DataGrid (although we were never happy about that).
    DataGrid
    Figure: Bad Example - The DataGrid is ugly
    Sortable ListView
    Figure: Good Example - A beautiful ListView - a nicer look over the datagrid
    So the listview looks nicer? If you are not convinced here is another one:
    Datagrid and Listview
    Figure: Good Example - The appearance of DataGrid and ListView
    But another issue is how much code to write... For ListView you will need to write a bit of code to fill the list view...

    this.listView1.Items.Clear(); // stops drawing to speed up the process, draw right at the end. this.listView1.BeginUpdate(); foreach(DataRow dr in this.dataSet11.Tables[0].Rows) { ListViewItem lvi = new ListViewItem(new string[] {dr[0].ToString(),dr[1].ToString(),dr[2].ToString()}); lvi.Tag = dr; this.listView1.Items.Add(lvi); } this.listView1.EndUpdate();

    Figure: 8 lines of code to fill a ListView
    But the datagrid is nicer to code... this is because it comes with data binding ability.

    // bind it in the designer first. this.oleDbDataAdapter1.Fill(this.dataSet11);

    Figure: One line of code to fill a DataGrid
    But the SSW ListView (included in the .NET Toolkit) is nicer to code with as it comes with data binding ability.

    // bind it in the designer first. this.oleDbDataAdapter1.Fill(this.dataSet11);

    Figure: One line of code to fill the SSW ListView
    So what is this SSW ListView?
    It is an inherited control that how we implemented the ListView to give us what MS left out.
    • DataBinding
    • Sorting
    So now the rules are:
    Always use the SSW ListView.
    Exception: Use the DataGrid when:
    • When not read only - i.e. users will be editing data directly from the cells.
    • You need more than 1 column with checkboxes, or the column with checkboxes can't be the first column. E.g.:
      DataGrid
      Figure: One place when you choose a DataGrid over a ListView is when you have 2 checkbox fields
    So in summary, if you don't want users to edit the data directly from the cell, and only the first column need checkboxes, then the ListView is always the better choice.
    We have an example of this in the SSW .NET Toolkit.

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

    Note: We have a suggestion for Microsoft to improve the copy and paste format from a gridview
  6. Control Choice - Do you know when to use CheckBoxes?

    If the option only contains 2 choices, and the answer is a Boolean type value where the opposite value is clear (e.g. Enabled/Disabled, True/False, Yes/No, On/Off), it should always be a checkbox.
    Boolean options not using CheckBox.
    Figure: Bad Example - Boolean options not using CheckBox
    A CheckBox is used for Boolean type value.
    Figure: Good Example - A CheckBox is used for Boolean type value
    Only 1 CheckBox is used as the opposite value is clear, such controls are often CheckBoxes in a ListView too. E.g.:
    CheckBoxes in a ListView.
    Figure: Good Example - CheckBoxes in a ListView
    CheckBoxes are also suitable to use for enable or disable sections and to tell the user that these sections do not need configuring for the application to run.
    CheckBoxes are used to enable/disable sections.
    Figure: Good Example - CheckBoxes are used (although no opposite values), because they are clear when the CheckBoxes aren't ticked, the sections are disabled
    Not using checkboxes
    Figure: Bad Example - This screen implies that Configuring Credentials is required
    Good use of checkboxes
    Figure: Good Example - This screen uses a CheckBox to signify that Configure Credentials is optional
    If there are only two options available on the form (usually a yes/no answer), the use of a checkbox is more intuitive than radio buttons. Only use radio buttons if there are more than two options.
    Radio buttons are not appropriate when there are only two options
    Figure: Bad Example – Radio buttons are not appropriate when there are only two options
    These yes/no questions have a better representation with checkboxes
    Figure: Good Example – These yes/no questions have a better representation with checkboxes
  7. Control Choice - Do you use ComboBoxes instead of single-select List Boxes?

    ComboBoxes are better than List Boxes for data entry because:
    • They occupy less screen space
    • They are less trouble to scroll through, owing to the fact that you can afford to have more room for the list (as it's collapsed most of the time)
    • As you can see in the figures below, using a combo also makes the required field indicator (*) easier to see.
    Web Page with ListBoxes
    Figure: Bad Example - Using list boxes
    Web Page with ComboBox
    Figure: Good Example - Using ComboBoxes - takes up less screen space and the required field indication is easy to see
    Note: When are single-select list boxes OK?
    As mentioned before, there are exceptions to this rule. It would be hard to imagine the Include/Exclude boxes in the SQL Server Enterprise Manager's Server Registration Wizard being handled with ComboBoxes, for example.
    Register SQL Server Wizard
    Figure: Include/Exclude Listboxes are an example of a valid use for List Boxes
    We have a program called SSW Code Auditor to check for this rule.
  8. Control Choice - Do you use Checked List Boxes instead of multi-select List Boxes?

    Multi-select listboxes are the bane of a graphical user interface, they have a number of behavioral quirks that make it difficult for users to get used to them:
    • They require users to know that you select more than one entry by holding down the Ctrl key
    • They lose all selections if you click in the wrong place.
    • You can't tell if a Listbox is single-select or multi-select at first glance.
    Figure: Bad Example - List Boxes are impractical - try it and see

    Checked Listboxes are the ideal alternative. They're much more pleasant to use and are a good deal more intuitive - compare to the list above. Checked Listboxes tell users immediately that they have the ability choose multiple options.

    • In ASP.NET, use System.Web.UI.WebControls.CheckBoxList. If you're having problems with there being too many items in the list, use a scrolling DIV
    • In Windows Forms, use System.Windows.Forms.CheckedListBox
    Figure: Good Example - The beauty of the CheckListBox in ASP.NET

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

  9. Control Choice - Do you have a consistent look on your buttons? (Windows Forms Only)

    Question: What is wrong with this Picture?
    Inconsistent Button FlatStyles
    Figure: What is wrong?
    Answer: There are three different types of buttons in the Application:
    • Next > - Default Window Style
    • Preview - .NET Flat Style
    • Cancel - Window XP Style
    bad divider
    Figure: Even labels need to use FlatStyle.System. Can you spot the wrong label?
    See our Rules to Better Windows Forms to implement XP Themes in .NET.
    We have a program called SSW Code Auditor to check for this rule.
  10. Control Choice - Do you avoid using Group Box and use a line to organize your form?

    Group box should only be used when you want to notify the user the controls within it are really related, such as radio buttons.

    SSW Exchange Reporter Setup
    Figure: Bad Example - Inappropriate use of 'Group Box', there is nothing to be grouped
    SSW Exchange Reporter Setup - Line for Grouping
    Figure: Good Example - Use a line to organize different sections
    VS.NET 2003 Options Form
    Figure: Good Example - VS.NET 2003 Options form, appropriate use of 'Group Box', the radio buttons are related to each other
    Figure: Good Example - VS.NET 2012 Options form, also appropriate use of 'Group Box'
    Figure: Good Example - VS.NET 2012 Options form, also appropriate use of 'Group Box'
    In other cases, you should avoid using group box and replace it with a simple line, this will save you some space on the form and help you organize your form more easily.
  11. Control Choice - Do you use bold on the main options to make them clearer?

    Make the options clearer by using bold.

    SSW Link Auditor - Command Line
    Figure: Bad Example - Main options text not in bold
    SSW Link Auditor - Command Line
    Figure: Good Example - Main options text in bold
  12. Control Choice - Do you know when to use options group Radio Buttons instead of ComboBox?

    When the options are static items (not database driven) and they can fit on the screen (about 2-5 items), they should be radio buttons.

    For a ComboBox, user needs 2 clicks to change the value
    1. Click the little "v" button to see the available options.
    2. Then click the option to select.
    For an options group, user can see all the available options without clicking, and select the option with just a click.
    ComboBox is used for
    Figure: Bad Example - ComboBox is used for "Job Type" where it contains only 2 options
    Radio Buttons are used and aligned vertically.
    Figure: Good Example - Radio Buttons are used and aligned vertically
  13. Validation - Do you avoid capturing incorrect data?

    When asking for an opinion do you give people the option of having no opinion at all? If you only provide "Yes" or "No" as answers to the question "Do you like apples?" then you force people to make a decision which may not be correct.

    Do you like apples? Yes
      No

    Maybe they only like cooked apples not raw ones. When asking any question in which "Don't know." or "Don't care." is a valid response, always include an option to opt out of answering.

    Additionally, when the user don't answer the question at all, the response you would get would be determined by the browser the user was using. Give them an answer they can agree with and you'll reduce the chance of bogus responses.

    Do you like apples? Yes
    No
    Cannot say
  14. Validation - Do you put focus to the correct control on validation error?

    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.
    Centrix - Error Provider
    Figure: Good Example - Balloon tooltips to indicate validation errors
  15. Do you use SetFocusOnError on controls that fail validation?

    For Validation Errors, don’t rely on an error messagebox, instead automatically focus on the control.
    Figure: Good Example - Balloons also direct the eye
  16. Controls - Do you disable buttons that are unavailable?

    If a button is unavailable, or clicking it will generate an error message or should have no effect, then the button should be disabled. However, buttons should not be hidden simply because they are unavailable as it confuses the user.
    SSW Link Auditor - Ready to Scan
    Figure: Good Example - The Start button is disabled in SSW Link Auditor after the scan has started
  17. Controls - Do you make Option Groups and Check Boxes simple to understand?

    There are two aspects to this rule:
    1. Arrange Vertically
    2. If your user must choose from a variety of responses, or select from a number of items, using either radio buttons or check boxes, arrange the items vertically rather than horizontally as it makes the association much clearer. NOTE: You might want to disregard this rule if screen real estate is at a crucial premium.

      Do you like apples? Yes No Cannot say

      Do you like apples? Yes
      No
      Cannot say
    3. Text on the Right

      The Option Group or Check Box should always be on the left, with the text following on the right. Once again, this makes it easy for the User to work out what is going on.

      Interfaces Action Then Text
      Figure: Good Example - Action on the left, text on the right
  18. Do you know that the width of a control indicates what to enter?

    The widths of the fields indicate to a user the data that goes in it. Do not use a large width field when you know the entry will have only few characters (the same for small fields and large entries)

    Field width
    Figure: Bad Example - The 'Data Retention Days' field should be reduced
  19. Controls - Do you use a ToolTip to show the full text of hidden ListView data?

    ​When you can't see all the text for an item in a ListView you need to expose the full text via a ToolTip.

    ListView control without Tooltip.
    Figure: Bad Example - Users can't see all the text and the ListView doesn't use a Tooltip
    ListView control with Tooltip.
    Figure: Good Example - Users can't see all the text, but the ListView shows all the text via a Tooltip
    The code to do this is:

    private ListViewItem hoveredItem;
    private void listView1_MouseMove(object sender, MouseEventArgs e)
    {
    ListView lv = (ListView) sender;
    ListViewItem item = lv.GetItemAt(e.X, e.Y);
    int columnIndex = 1;
    if (item != hoveredItem)
    {
    hoveredItem = item;
    if (item == null)
    {
    toolTip1.SetToolTip(lv, "");
    }
    else
    {
    // Make sure the mouse hovered row has the subitem
    if (item.SubItems.Count > columnIndex)
    {
    toolTip1.SetToolTip(lv, item.SubItems[columnIndex].Text);
    }
    else
    {
    toolTip1.SetToolTip(lv,"");
    }
    }
    }
    }​

  20. Controls - Do you use the fonts recommended by Microsoft in your application? (Windows Forms Only)

    Some font are easier to read then others, at SSW we follow Microsoft's Visual Design Guidelines. This means we use Tahoma 8pt as our font of choice.

    At SSW, we use Code Auditor to ensure all fonts on our forms are set to Tahoma but we allow controls to use a different font. This is because certain information is better displayed in a different font. For example a Textbox to show code should use Courier instead of Tahoma.
    Form with Arial Narrow Font
    Figure: Bad Example - This form uses a non-standard font, and it is hard to read
    Form with Tahoma Font
    Figure: Good Example - This form uses Tahoma, and it is easy to read
    Form with Tahoma Font, and a RichTextBox with Courier New Font
    Figure: Good Example - This form uses Tahoma, and the RichTextBox displays source code using Courier New
    We have a program called SSW Code Auditor to check for this rule.
  21. Controls - Do you make the selected/enabled rows stand out in a datagrid?

    Many times you allow a multiple selection in a grid by using a checkbox. When you do this make it easy to see the distinction of a row that is selected and one that is not. Make it subtle by dimming the unselected text.

    Seleted rows not standard out
    Figure: Bad Example - Selected rows are not separate from others.
    Seleted rows standard out
    Figure: Good Example - Selected rows are separate from others.
    To make this effect in datagrid, you may need to edit the cellcontentclick event handler code.
    Example:

    private void DatagridviewRules_CellContentClick(object sender, DataGridViewCellEventArgs e)
    {
    if (DatagridviewRules.Columns[e.ColumnIndex] is DataGridViewCheckBoxColumn && e.ColumnIndex == 0 &&
    e.RowIndex != -1)
    {
    bool boolCheckBox = (bool)(DatagridviewRules.Rows[e.RowIndex].Cells[e.ColumnIndex].Value);
    DatagridviewRules.Rows[e.RowIndex].DefaultCellStyle.ForeColor = boolCheckBox
    ? SystemColors.WindowText
    : SystemColors.ControlDark;
    DataRowView objDataRowView = (DataRowView)DatagridviewRules.Rows[e.RowIndex].DataBoundItem;
    JobRule.DataTableJobRulesRow objDataRow = (JobRule.DataTableJobRulesRow)(objDataRowView.Row);
    updateRuleIsEnabled(objDataRow.RuleId, boolCheckBox);
    updateSelectAllCheckBox();
    updateRulesCount();
    }
    }

    Setting the ForeColor to different ones, like black and gray, can separate the selected rows from others.
  22. Controls - Do you extend the size of your ComboBoxes to show as many results as possible? (Windows Forms Only)

    ​​When designing your form, it's a good idea to help your user whenever it's possible. So it's a good idea to extend your ComboBoxes to show as many results as possible to save your user from scrolling. Also, you should extend the width of the dropdown in order to show the longest items.

    However, you should not extend your ComboBox without limit, normally the maximum number of items should be under 10 and the maximum width of the drop-down should be smaller than your hosting form.
    Options Form - ComboBox with text cut off
    Figure: Bad Example - You have to scroll to see all the result, and the long results are cut off
    Options Form - ComboBox with Extended Height and Width
    Figure: Good Example - The size of the drop down has been extended to allow user to see as much as possible
    Changing the maximum items is easy, just include the following code in your form:

    cbxOUList.MaxDropDownItems = cbxOUList.Items.Count;​

    Changing the drop down size is a bit of tricky

    Graphics g = Graphics.FromHwnd(this.Handle);
    SizeF stringSize = new SizeF();
    stringSize = g.MeasureString(longString, cbx.Font, 600);
    int adjustedSize = cbx.DropDownWidth;
    if ( adjustedSize<(int)stringSize.Width )
    {
    adjustedSize = (int)stringSize.Width;
    }
    cbx.DropDownWidth = adjustedSize;​

  23. Controls - Do you use Text Boxes for displaying data?

    Use Label controls to display static text of the application. Eg. "Customer ID:"
    Use Text Box controls to display data (results of calculations, information, records from a database, etc.).

    The reasons are:
    • users know it is data, not a label of the application
    • users can copy and paste from the field
    PS: One reason web UI's are nice, is that the information is always selectable/copyable.
    Long string cut off when you are using label
    Figure: Bad Example - Not only is the data cut off when you are using label, but you can't copy and paste the value
    Using Textbox is better practice
    Figure: Good Example - Using Textbox controls makes the data obvious to users
    As you can see you'll barely know the difference, so start using Textboxes for displaying data, that's good practice.

    More Information

    When using TextBox controls in Windows Forms, set them up like this:
    Using Textbox is better practice
    Figure: Having the 'BorderStyle' Property set to Fixed3D is the best choice visually
    Using Textbox is better practice
    Figure: Make the text box Read-Only (users copying data is OK, changing is silly)
  24. Connection Stream - Do you use a UDL when getting database settings?

    Why do people always invent ways of getting the same old server name and a database name? Look at this image from Speed Ferret - one of my favorite SQL Server utilities.

    Custom database connection screen
    Figure: Bad Example - Custom database connection screen in Speed Ferret
    While a nice form, it would have taken quite some developer time to get it right. Not only that, it is a little bit different than what a user has seen before. Now look at this UDL from one of our utilities SSW SQL Auditor:
    Standard Microsoft UDL dialog
    Figure: Good Example - Standard Microsoft UDL dialog
    Every developer has seen this before - so use it. Better still, it is only a few lines of code: B-Open UDL Dialog-DH.txt
     Visual Studio .NET 2005 Microsoft are yet to release an API
    Figure: Coming in Visual Studio .NET 2005 Microsoft are yet to release an API to do this

    Exception

    The above cannot be used when you want the user to create a new database. Microsoft does not supply an out of the box UI and there is no third party solution. Only in this case you have to create your own form.
    SQL Deploy uses its own custom form
    Figure: SQL Deploy uses its own custom form for "selecting" a database name
  25. Being Pedantic - Do you use balloon tooltip?

    The standard tooltip is a rectangle, so the tool tip for the control can be misleading. While, the balloon tooltip has an arrow pointing to the destination control, which is clearer for users.

    Standard tooltip
    Figure: Standard tooltip.
    Balloon tooltip
    Figure: Balloon tooltip.
    To implement you can:
    1. Set the standard Tooltip's property IsBalloon true or
    2. Use EdwardForgacs' balloon tooltip control.
  26. Being Pedantic - Do your buttons have a mnemonic?

    A mnemonic for a button is the letter which has an underscore, and the user can press the button using Alt-<char>.

    Browse Button
    Figure: Bad Example - All buttons without Mnemonic
    Browse Button
    Figure: Good Example - All buttons with Mnemonic - user can easily choose which button they want without a click
    In Windows Applications, it is quite easy to assign a mnemonic to a button with the "&" character.
    So for the case above, the text would be:

    btnAbout.Text = "&About"

    Tip: In Windows XP the mnemonic display effects can be hidden by Default and then shown every time the user presses the Alt key.
  27. Do you use an ellipsis (...) to indicate an action requiring more user input?

    In menus (including context menus) or buttons, there are generally two types of actions:
    1. ones that carry out an action without any further user intervention upon clicking;
    2. and those that require further user input before the action is carried out
    Microsoft applications use this technique to indicate whether or not the action will be carried out without any further user intervention. Your application should also follow this well-established standard, so users will not be caught off guard when an action carried out immediately after they click the menu item.
    Elipsis
    Figure: Good Example - Options menu in Outlook, with ellipsis
    Shows that it needs further input
    Figure: Good Example - Ellipsis on buttons that require further input
    Elipsis
    Figure: Good Example - Different ways of using the elipsis
    Shows that it needs further input
    Figure: Good Example - Elipsis being used on a button requiring user input
  28. Being Pedantic - Do you end labels text with ":"?

    Labels provide an easy way to show text in a form. It is better to consistently label a field ending the text with a ":".

    Bad Label
    Figure: Bad Example - Labels without ":"
    Good Label
    Figure: Good Example - Labels with ":"
  29. Controls - Do you include a "select all" checkBox on the top?

    ​​Do you have checkbox (on the top) that let users select or unselect all checkboxes underneath it? If you have a list of checkboxes, you are going to frustrate users unless you provide an easy way to select all. The best way to achieve this is to have a checkbox at the top.

    Hotmail
    Figure: Good Example - Hotmail does this
    Gmail
    Figure: Google have done it a different way to provide multiple methods (All, All Read, All Unread, All Starred, and All Unstarred)
    SQL Auditor
    Figure: Bad Example - SQL Auditor - No CheckBox for users to perform a "select all"
    SQL Auditor
    Figure: Good Example - SQL Auditor - CheckBox at the top of the column
    SQL Auditor
    Figure: Selecting all does this - selects all
    SQL Auditor
    Figure: Deselecting all does this - selects none
    SQL Auditor
    Figure: Selecting some should show the Indeterminate check state - aka customized selection

    Private Sub CheckBoxSelectAll_CheckedChanged(ByVal sender As System.Object, ByVal e As System.EventArgs) _
    Handles CheckBoxSelectAll.CheckedChanged
    'Select checkbox in each row
    For Each sDataGridViewRow As DataGridViewRow In Me.DataGridViewCustomer.Rows
    sDataGridViewRow.Cells(0).Value = Me.CheckBoxSelectAll.Checked
    Next
    End Sub

    Code: Code for selecting all checkboxes in a windows form
    Select all checkboxes in a web form
    Figure: Select all checkboxes in a web form

    <script type="text/javascript">
    function SeleteCheckBox()
    {
    for (var n=0; n < document.form1.elements.length; n++)
    {
    if (document.form1.elements[n].type == "checkbox" && document.form1.elements[n].name == "gridview")
    {
    document.form1.elements[n].checked = document.getElementById("CheckBoxAll").checked;
    }
    }
    }
    </script>​

    Code: Code for selecting all checkboxes in a web form
    We have suggestions for Visual Studio .NET about this at A top CheckBox to "select all" in windows forms and A top CheckBox to "select all" in web forms.
  30. Controls - Do you indicate when fields are "read only" or "calculated"?

    When you are not able to edit a field the field should be greyed out. This visually indicates to the user that the field cannot be changed.

    If you are using Word or Excel, actually locking cells or tables may not be what you require, but you still want to prevent people from directly editing calculations. So make the cells grey and the visual indication should prompt the users what to do.
    Grey Field
    Figure: Good Example - Read only fields should be greyed out
    Grey Field Excel
    Figure: Good Example - Calculated Fields in Excel should be in Grey
    Of course you should follow the converse, which requires making all editable fields white.
  31. Controls - Do you set row select mode as "FullRowSelect" for DataGridView if it is read only? (Windows Forms Only)

    If you use the DataGridView control which is read only, you had better set row select mode as "FullRowSelect". If the data cannot be modified we can let users select the whole row instead of one column.

    without FullRowSelect
    Figure: Bad Example - Row select mode is not "FullRowSelect".
    with FullRowSelect
    Figure: Good Example - Row select mode is "FullRowSelect".
    Set select mode as FullRowSelect
    Figure: Changed row select mode to FullRowSelect.
    What's the next step? It's even better if you enable multiple row selection and copying, see Do your List Views support multiple selection and copying on Rules to Better Windows Forms Applications.