SSW Rules to Better Interfaces

1. Do you realize that a good interface should not require instructions?

   The corner stone of good user interface design is that if your users need instructions, you haven't done a good job. Of course with particularly complex applications there will be exceptions to this rue, but all developers should aim to make your designs as self evident as possible.

   

   Figure: A good interface does not need instructions!

2. Do you realize that when it comes to interface design 'less is more'?

   How to make a user interface great:

   • Less is more - keep your design as simple and uncluttered as possible
   • Understand the importance of Defaults - Aim for 'Next', 'Next', 'Next'
   • Hide advanced options, but make them easy to find!

   Most developers think about user interface last. They spend their time worrying about class design, threading, and system architecture. All this is important, of course. But the user only experiences software on the surface level. It might be fantastic under the covers, but if the user interface is not intuitive the user will think the application is just hopeless. If the user interface doesn't afford an easy and simple understanding of how to operate the application, you'll get a lot of unhappy customers and unnecessary support calls. Do yourself a favour, take some time to think about UI first.

   

   Figure: Bad Example - An example of a poor UI

   

   Figure: Good Example - See the fly? (an example of excellent usability) Dutch manufacturers realized that a fly painted on the porcelain of a urinal nearly always became a "target" for men using the facility. And the fly is positioned in precisely the right place for minimal spillage or splashback. Clever people those Dutch!

3. Do you use a Wizard to help a user through a complicated set of steps?

   Though all software should be intuitive there are still times when you will need some extra guidance. Wizards are ideal especially for guiding through more complicated steps or when an application isn't going to be used regularly. e.g. SSW Code Auditor may only run once a month, and in between times the user may forget what are all the steps were. You can see all the relevant steps Code Auditor User Guide.

   Most importantly the first time a user tries out your program they should be able to step through the setting up process and a Wizard helps them see how your application flows, from beginning to end.

   To ensure a consistent user experience, make sure to include these visual elements:
   1. Page name. It is important for the user to know which page they are currently on.
   2. Page description. You should provide a short description of the task to be performed on the page.
   3. Instructions. Not required for every page, this is a short description requesting the user to perform a task, for example, entering some values into a text field.
   4. Company logo. This helps promote branding, however it should be inconspicuous and should not move visual focus away from the body of your application.
   
   

   

   Figure: Good Example - SSW Link Auditor Wizard's better flow of information

   Technical Note: To ensure visual consistency across applications, create a base form then set the properties in that form (application icon, menu structure, button names etc.) Add any logic in for switching pages with the "Next" and "Back" buttons. Then for all projects, add a reference to that one and inherit the customized form.

   In the forms in your application, instead of inheriting from System.Windows.Forms.Form (the Default), inherit from your new base form class.

   public class MyForm : System.Windows.Form.Form

   Figure: Default code in a Windows Form

   public class MyForm : Company.Framework.BaseCustomForm

   Figure: Change the form so that it inherits from your new base form class

   The "finish" button denotes the end of the Wizard; by clicking on it, the user closes the Wizard.

   For longer processes, the Wizard should implement "Start" and "Skip" features to guide the user through from start to finish.

   

   Figure: Good Example - SSW Code Auditor Wizard featuring "Start" and "Skip" options

   Here's some more information on the Microsoft Standard for Wizard Welcome and Completion Page art and Interior Page art .

4. Does the first form provide the user product information?

   How you present the product information depends on the sort of application you are developing.
   
   

   • If the application is wizard application :
     
     The first page of the utility should introduce the user to the application.

     Because the first two paragraphs of this screen and the first few paragraphs of the application's website often contain virtually identical information (i.e., describing the product) it may be a good idea to make both the same. The first two paragraphs of the screen can be copied from portions of the website.

     A "More" hyperlink can also be added at the bottom of the screen, which will direct the user to the website where they can read further information about the application.

     

     Figure: Good Example - This wizard has an information screen as the first screen

   • If the application is not a wizard application
     
     The main menu of the application should have a Help - About... menu item. When clicked, a new form should open up containing similar information as the page in the wizard application described above.
     

     

     Figure: Good Example - Help - About... menu item opening the product information

5. Do you add an introduction screen prior to settings?

   A brief introduction will give some idea about what will happen on this process and it may save user's time and effort. So, if you expect that not all users will be totally clear on what the settings do, add an introduction with a screen.

   • Add screen shot with red circle at the top of the screen
   • Put a description next to it

   

   Figure: Bad Example - This screen has no product introduction

   

   Figure: Good Example - This screen has production information before the settings

6. Do you visually indicate to the users the step where they are up to in the wizard?

   In a wizard, a visual indication about the progress should be provided so users know that where they are up to.

   

   Figure: Good Example - Microsoft FrontPage uses a progress bar to indicate where users are up to

7. Wizard - Do you let the user know where they are up to?

   Once you have more than a couple of steps, you should let the user know where they are up to, and how far to go.

   The best way to do this is use a left navigation bar with bold on the step they are currently at.

   

   Figure: Your wizard form has better show all steps.

8. Do you visually let the user know when they are finished?

   When a user reaches the last page of a wizard, a visual indication should be provided so that they know that the process has finished. We use a finish flag to do this.

   

   Figure: Bad Example - This is the last page of the wizard but it is not obvious because the finish flag is small and the "Next" button still enabled

   

   Figure: Good Example - Good quality Finish flag on the last page of a wizard.

9. Do you avoid doing an embedded add?

   You need to open a new form for any case of 'Add New'.
   For Example:

   

   Figure 1: The 'Add New' button changes from a view into a data entry form

   

   Figure 2: Bad Example - the 'Add New' button, shown in Figure 1, openned the page in the same window.

   You are better to open in a new form, reasons being:

   • It is better for 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

10. Do you avoid using plain textboxes for notes?

    Instead of using plain textboxes for notes, use rich textboxes. The main reasons for this is that it allows you to use links to URLs, have variations in formatting (including bold, underline, italics, font type and font size, etc.), use bullet points and numbering, as well as other features of rich textboxes that plain text boxes do not provide.

    

    Figure: Bad Example - use of a plain textbox limits the detail of the user's notes

    

    Figure: Good Example - with use of the rich texbox, the user is able to use added 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

11. Do you use bold text and indentation, instead of dividing lines?

    Many applications have a lot of content on each form. If this is the case there needs to be some way to separate certain sections. To achieve this separation Microsoft (and therefore most developers) use separating lines, but this UI is not perfect because:

    • It creates additional visual clutter
    • It is hard to maintain

    Note: This rule is a rare one which is different from Microsoft.
    Did they get it wrong? Well I think so?
    Are they consistent with the separation lines? Nope so maybe they aren’t so sure about it.

    We recommend using bold instead of dividing lines because:

    1. Bold stands out
    2. Indentation is more important
    3. Developers are not good at keeping the lines aligned - you could create a .NET custom control to do this - but Microsoft do not provide one
       • The diving lines create additional visual clutter (ever so slight)
       • Each line creates additional performance implications (ever so slight)

    

    Figure: Bad Example - This is the Tools - Options from Internet Explorer and it groups each section in a groupbox - busy UI.

    

    Figure: Bad Example - This is the Tools - Options from Outlook and it uses dividing lines for each section.

    

    Figure: Bad Example - This is an old screen from Code Auditor - the dividing lines are not required.

    

    Figure: Good Example - This is the new screen from Code Auditor - the bold title and indenting are the best way to show the sections.

12. Do you make graphs easy to digest?

    Graphs are a great way to display data in an easy to follow visual format. Some graphs, however, are easier to read than others. We recommend staying away from 3-D Graphs and keeping it simple! If you have complex data, it's also a good idea to display 2 or 3 simpler graphs rather than one complex one - the aim of the game is to make digesting the information as simple as possible for your audience.

    

    Figure: Are your graphs simple to understand?

13. Do you remember the user's last settings?

    The user's last settings should be saved and should be selected as the Default the next time a form is opened in many instances. For example:
    

    • Login forms - the last login name should be the Default selected and the cursor should be in the password box.

      

      Figure: Bad Example - Last Username is not saved

      

      Figure: Good Example - Last Username is saved

    • Report criteria forms - e.g. date start and date end fields should be automatically populated

    How do I store the settings?

    • .NET: Use the Configuration Block to store the settings.
    • Access: Use a local table called 'Control' with one record.

14. 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.
    • Close. This should only be displayed if no data has or will be changed in the form's current lifetime.
    • 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.

15. Do you keep Time formats consistent across your application?

    Time formats should be consistent across your application, to give the application a very professional and consistent look.

    

    Figure: Bad Example - Three screens with inconsistent time formats

    

    Figure: Good Example - Three screens with consistent formats

16. Do you keep Date formats consistent across your application?

    Date formats should always be kept consistent across your application, more importantly, it should be kept consistent with the operating system's regional settings otherwise this will cause significant confusing for your users.

    

    Figure: Operating System's Regional Settings

    

    Figure: Bad Example - Two screens with inconsistent date formats

    

    Figure: Good Example - Two screens with consistent date formats

    The best way to do this in your code is to grab the culture information from the application thread and use it to automatically format your Datetime data type. Do not use hard coded datetime formatting strings unless it's absolutely necessary.

    startTimeTextBox.Text = resultResults.StartTime.ToString("dd/MM/yyyy hh:mm:ss");
                        

    Figure: Bad Example - using hard coded formatting string

    'VB.NET
    'Initial CultureInfo settings for the application
    Public initialCulture As CultureInfo
    ...
    ...
    txtDateCreate.Text = CType(txtDateCreate.Tag, System.DateTime).ToString(initialCulture.DateTimeFormat)
                        

    Figure: Good Example - Using culture info to format datetime

17. Don't use OK button if it does one clear action

    Don't use "OK" if the button does one clear action. The button name must reflect the action that is going to happen by clicking the button. Examples of button names that are better than "OK" are:
    
    

    • Save
    • Move
    • Rename
    • Open
    • Select
    • Insert
    • Print
    • Process
    • Login

    

    Figure: Save button in action

    However, there is an exception when there are multiple settings being changed. Typical examples are Properties and the Tools - Options dialog. There are often many tabs with many options. It would make no sense to have "Save Settings" or "Save". This is where the "OK" "Apply" "Cancel" convention really applies.

18. Do you avoid dynamically labelling your form buttons?

    The buttons that a user will typically use should not have data driven across your applications.

    

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

    

    Figure: Good Example - Buttons are not dynamically labelled

19. Do you know how to make message boxes user friendly?

    Message boxes should have consistent and informative titles and descriptions, and icons should be used appropriately.

    Title
    The title should contain the application name, so the user knows what application generated the warning/error. This is especially important when developing add-ins (e.g. Outlook add-ins or Smart Tags) as it can be difficult to know what caused the message box to pop up. Application.ProductName and Application.ProductVersion should be used to retrieve the data from AssemblyInfo. There is no need for the title to contain a brief description of the error because that information is readily available in the message box itself.

    

    Figure: Bad Example - Title contains brief description of error, which is already contained in the message box

    

    Figure: Good Example - Title contains Product Name ("SSW eXtreme Emails!") and Product Version ("12.56")

    We have a program called SSW Code Auditor to check for this rule. Note: The Version Number in the title should only contain the Major and the Minor version numbers (e.g. 11.28) and not the complete Major.Minor.Revision.Build Numbers (e.g. 11.28.92.1198)

    
     Description

    The description should explain what the error was, followed by the why it occurred. Information that is useful for debugging should be included with errors where possible be in a "Details" section. You should also avoid making the text unnecessarily wide. e.g.

    

    Figure: Bad Example - A message box that does not intuitively alert the user

    
    
    • This is confusing, because it uses different terminology to the title ("estimate" instead of "quote")
    • There is no punctuation
    • The word "Error" is meaningless
    • Line breaks are not present, so the message box is too wide and the text may wrap in the wrong spot

    

    Figure: Good Example - A message box that is clear, consistent and intuitive

    
    
    • Terminology is consistent
    • Punctuation is present
    • "Details" indicates that this information is useful for debugging
    • The text is split across three lines, and the technical information after Details is separated from the description of the error.

    Icon
    Including an icon is important because not only does it give the user a visual indication of the type of message, but without it only the Default beep sound is used. The icon should reflect the type of information being presented:

    Icon	Name	When to use
    	MessageBoxIcon.Information	Non-error information, e.g. Database connection test completed successfully.
    	MessageBoxIcon.Warning	A non-critical error, e.g. The input was invalid.
    	MessageBoxIcon.Error	Critical error in the program, e.g. Program file was not found
    	MessageBoxIcon.Question	NEVER use this.  According to Microsoft, the Question mark is being phased out, as any of the other three: Error, Warning or Information can easily be reworded into a Question, and Question does not show the user the severity of the issue that has just occurred. E.g.  If you want to ask the user whether they want to save a file before closing, you should use the Warning Icon.

    
    

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

20. Do you avoid giving an Error" message for validation purposes?

    If you do a search on the Australian White Pages www.whitepages.com.au and the search result is ?? it gives an Error" message. In actual fact, no error occurred; its just that zero results were returned.

    

    However, a user thinks that either:

    1. They have done something wrong (i.e. they are incompetent) OR
    2. The software is broken (i.e. your application is incompetent)

    Forcing the user into this opinion is a good way to make them avoid using your software in the future.

    Instead, use the term Information" when validation is required.

    

    Figure: Only use "Error" when appropriate

21. Do you use messages that are concise and informative?

    It is important to use terminology that your users will understand. Do not to use technical terms that may confuse your users. Use consistent words and phrasing for similar situations. For example, the following phrases have the same meaning which is the best one?

    • Not enough memory.
    • There is not enough memory.
    • There is not enough free memory.
    • Insufficient memory.
    • No memory was available.
    • Your computer does not have sufficient memory.
    • Memory resource is not enough.
    • Ran out of memory.
    • You may be out of memory.

    Microsoft use this one:

    

    Figure: Good Example - Microsoft error message is concise

    Some other message types that Microsoft use are:

    Message type	Sample message
    Not enough disk space	There is not enough disk space to complete the operation. Delete some unneeded files on your hard disk, and then try again.
    File not found	The program cannot find the file filename.
    Re-running setup	The filename file is missing. Run Setup again to reinstall the missing file. For more information about running Setup, press F1.

    Consider using or adapting them in your application in similar scenarios. Only include the information that the user needs and will understand.

22. Do you follow the control size and spacing standards?

    Introduction

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

    

    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.

    

    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...
       • Margins must be consistent (see Microsoft's diagram illustrating this)

    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 y'all 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 Interfaces page

    
    

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

23. Do you strike-through completed items?

    Learn how to add "Strike-Through" to your toolbar.

    When you're giving an update on progress on a task list or a schedule, STRIKE OUT the items that have been completed. Not only does it visually explain where you are, it also gives you a great sense of satisfaction...

    

    Figure: Good Example - Completed items are struck-through

24. Windows Form should have a minimum size to avoid unexpected UI behavior

    If windows form does not setup a minimum size, user could have unpredictable form behaviour as below image shown:

    

    Figure: Bad Example - Unexpected window form

    Therefore, a standard has been built to ensure windows form have a minimum size. This will always keep application to have user friendly windows form(see below):

    

    Figure: Good Example - User friendly window form

25. Do you clearly show a pass, fail or warning?

    When a user looks at a test result, they want to be quickly informed. Therefore, you must make it clear weather the test has passed or failed, or is there any warning.

    • For a pass, the message should be green in colour, and a tick next to the message
    • For a fail, the message should be red in colour, and a cross next to the message.
    • For a warning, the message should be yellow/orange in colour, and an exclamation mark next to the message.

    

    Figure: Bad Example - Pass and fail are not clear

    

    Figure: Green text and tick for pass, red text and cross for fail (Better)

    

    Figure: Good Example - Status on windows forms

    

    Figure: Good Example - Microsoft Update uses 3 icons to indicate different status, and good quality of Images too

26. Does your application's interface fit in the screen under any resolutions?

    Each user prefers to have their own resolution. You must check if your controls will fit on the user's screen. Think about on which computers your application will run, and what devices will display it. To be on the safe side, it is advisable to fit your controls on an 800 by 600 screen. Our projector has that resolution and it may well be used for presenting your application to the client.

    

    Figure: Bad Example - Form is too large to fit inside 800x600 resolution

    

    Figure : Good Example - Form fits inside 800x600 resolution

    The Potential Solutions are:

    1. Reorder and move the controls around on the form.
    2. Implement Tab pages.
    3. Use a wizard type interface, with Next, Back and Finish.
    4. Create multiple forms each containing a subset of the controls.
    5. Create a menu based form where the items are categories that some form controls fall under.
       Similar to VS. Net's Tools -> Options .

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

    
    

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

    

    Figure: Good Example - Read only fields should be greyed out

    
    

    

    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.

28. 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, were the user not to 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

    
    

29. Do you put the company URL in the title bar?

    When advertising and promoting your application using screenshots, you will want to have the URL for your company website displayed. This makes for good, free publicity.

    If you want the URL to be shown as often as possible, you can place it in the title-bar of your form. That way, your URL will be visible in all screenshots that show the title-bar.

    

    Figure: Good Example - The company URL appearing in SSW SQL Auditor

    Note: Through certain coding tricks, it is possible to have the URL on the title-bar right aligned. This isn't a good idea, however, as it can produce undesirable results under certain conditions. For example, when the use hovers the mouse pointer over the form's button on the taskbar, the resulting tool tip looks somewhat distorted.

    

    Figure: Bad Example - Bad caption in SSW SQL Deploy

30. Do you know the first word of your Title Bar should be the current document (or selected project)?

    Too many developers never change the Title Bar. The Title Bar for should reflect the current document in the same way that Microsoft Word, Notepad etc work. Imagine for a second, if every email that Microsoft Outlook opened didn't change the title bar. When you were to open a few emails and then take a look in the Taskbar, they would all look the same.

    Therefore change the Title Bar to reflect the current document/customer/job/project/product that the user is working on. It should be in the format "Document - Program Name", i.e. 'Northwind - SSW Data Renovator'

    

    Figure: Good Example - Application with a standard title bar caption

31. Menu - Do you have a link to your application's user guide?

    Users who are finding your application a little hard to use will always look for a user guide. The first thing they would do is to reach for the help menu. The About form provides a link to the product website, but this is not very handy and obvious for a user who needs quick help. A link to the user guide must be in the help menu.

    

    Figure: Good Example - User Guide link in the Help menu

32. Menu - Do you have a standard 'Help About' form?

    Every application you build should have the same Help About form. The form should always display the following information:

    1. Version number
       
    2. URL
       
    3. Description of the product and what it does.
       Tip: This should be consistent with your standard description on the product box, website homepage, product page etc
       
    4. Contact details (especially a phone number)
       
    5. Branding (logo)

    

    Figure: Bad Example - This About dialog does not provide enough information about the product and/or company

    

    Figure: The old SSW Standard Help >About form across all our products (Better)

    

    Figure: Good Example - The new SSW Standard Help > About form across all our products

33. Menu - Do you know the seven items every Help menu needs?

    A good help menu should have these seven items in it:

    1. Online User Guide
    2. SSW Knowledge Base
    3. Make a Suggestion
    4. Report a Bug
    5. Check for Updates ?[Product Name]
    6. Check for Updates - All Programs
    7. Run Unit Tests...
    8. About [Product Name]...

    

    Figure: Bad Example - Example of a Help menu with only About

    

    Figure: Good Example - Example of a Help menu with all seven items

    We have an example in the SSW.NET Toolkit.

34. Menu - Do you have a standard 'Tools' menu that includes a way to Validate data?

    We always add a "Tools > Validate Data" to our apps.

    When we add business rules to the middle tier, we are always worried about developers importing data and side stepping the business rules. Therefore we always make validate queries that if they return records, they must be fixed. Examples are:

    • For SQL Server we use vwValidateClient_MustHaveACategoryID, or procValidateClient_MustHaveACategoryID
    • For Access we use qryValidateClient_MustHaveACategoryID

    We then have a procedure that runs all these. The user should keep this list to 0.

35. Menu - Do you have a Training Videos item?

    Training Videos provide a straitforward way to help the user look into your product and help them have a good understanding. It's better to have a "Training Videos..." item in the help menu.

    

    Figure: It's better to provide such a "Training Videos..." menu item

    See our suggestions Provides "Training Videos" menu item in the help menu

36. Sound - Did you know that a message box automatically plays a beep?

    There is no need to manually put a beep right before a message box pops up. A message box automatically provides this functionality.

            Dim Message As String = "You did not enter a server name. Cancel this operation?"
            Dim Caption As String = "No Server Name Specified"
            Dim Buttons As Integer = MessageBoxButtons.YesNo
            Beep()
            result = MessageBox.Show( Me, Message, Caption, Buttons)

    Figure: The sound on the button is hardcode in this code snippet

            Dim Message As String = "You did not enter a server name. Cancel this operation?"
            Dim Caption As String = "No Server Name Specified"
            Dim Buttons As Integer = MessageBoxButtons.YesNo
            result = MessageBox.Show( Me, Message, Caption, Buttons)

    Figure: The code is not present in this example as it is automatically done

37. Sound - Do you realise the importance of sounds to User Interface?

    Sounds are important to an interface. Sounds provide an extra level of feedback to the user. For example, in Outlook, you can enable sounds, which notify the user when text is copied or pasted, or mail items are received, moved or deleted. Important situations where sounds should be used include:

    • Message boxes - every message box should be accompanied with a sound, depending on the type of message box
      Error Warning Information (I'd still like to give the apps their own personality)
    • Long process - there should be a sound at the end of every long process to notify the user that it has finished
    • Deleting records
    • Application opening / closing
    • Copying and pasting text

    However, not everyone likes sounds, so we think it is also important to have an option to disable sounds in your application.

    

    Figure: Good Example - Turning on Feedback with sound in Outlook

38. Do you provide a warning before the program exits?

    A product should not exit without providing a warning. We use the following message box to warn the user before closing a program:

    

    Figure: Good Example - Standard warning before a program exits

            private void OnExit(object sender) 
                 { 
                    EventHandler handler = ExitRequest; 
                    if (handler!= null ) 
                    { 
                       handler(sender, EventArgs.Empty);
                       return;
                    } 
                    string closeTitle = string.Format("Exiting{0}", Application.ProductName);
                    string closeMessage = string.Format("Are you sure you want to exit {0}", Application.ProductName);
                    DialogResult result = MessageBox.Show(closeMessage,closeTitle, MessageBoxButtons.YesNo,MessageBoxIcon.Warning);
                    if (result == DialogResult.Yes)
                    { 
                       Application.Exit();
                    } 
                 }

    We have an example of this in the SSW .NET Toolkit.

    
    

39. What's the difference between Close and Cancel?

    When it comes to wizards, there are basically two types of application you are likely to design:

    • An application with its own user interface, which allows you to optionally begin and end a wizard from within that interface
    • An application that is entirely composed of a wizard interface, where ending the wizard also means ending the application

    This is where the difference between using Close and using Cancel buttons within the wizard comes into play. The term 'cancel' is OK to use when the result will simply be closing the wizard, without the rest of the application being shut down.

    

    Figure: Bad Example - Cancel button for a wizard as part of a process

    The term 'close' is more appropriate when we are dealing with a wizard that, when closed, ends the entire application.

    Example:

    

    Figure: Good Example - Close button indicates the application will exit

40. 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 favourite SQL Server utilities

    

    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:

    

    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

    

    Figure: Coming in Visual Studio .NET 2005 Microsoft are yet to release an API to do this

    Need extra information?

41. 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: ones that carry out an action without any further user intervention upon clicking; and those that require further user input before the action is carried out.

    Microsoft developed applications uses 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.

    

    Figure: Good Example - Options menu in Outlook, with ellipsis

    

    Figure: Good Example - Ellipsis on buttons that require further input

42. Do you use Calendar controls effectively?

    In Outlook, the Calendar control has a number of important features:

    • Saturday and Sunday are displayed at the end.
    • Days that have data associated with them are bold
    • The current day is highlighted with a box

    Users are familiar with the Outlook calendar control. When the calendar control is used it should incorporate all of these features of the Outlook calendar control.

    

    Figure: Bad Example - Calendar Control - Sunday is at the front, today's date is not highlighted, items with data are not bolded

    

    Figure: Good Example - Calendar Control - Monday is at the front, today's date is highlighted, items with data are bolded

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

43. Do you know that popup/modal forms should never have ShowInTaskbar=True

    Question: What is wrong with this Picture?

    

    Figure: What is wrong with this Picture?

    Answer: The 2 SSW SQL Auditor windows are bad, because one is just a modal form.

    Note: We don't check for this in Code Auditor because making a form display as popup, is done at runtime via the ShowDialog method.

    Dim frm as new frmCustomer frm.ShowDialog

    Figure: Bad Code

    If your form is designed to be used modally (and thus be called using ShowDialog) then ShowInTaskbar should be set to false in the form designer.

    Dim frm as new frmCustomer frm.ShowInTaskBar = False frm.ShowDialog

    Figure: Bad Code (because this should be set in the form designer)

    Dim frm as new frmCustomer frm.ShowDialog

    Figure: Good Code (ShowInTaskbar is set in the form's InitializeComponents method instead)

44. Do you avoid "Data Junk"?

    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 and the fact that when you search google they default to remove PORN.

    

    Figure: Default search tick box in TimePRO.NET

45. Do you include the number of results in ComboBoxes?

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

    

    Figure: Bad Example - You can't tell the number of results and there is a scroll bar

    

    Figure: Good Example - The number of results is clearly displayed But about long text boxes > 30 entires, this is another approach - puts the common ones at the top

    

    Figure: Bad Example - because it is manual and what about the 4th,5th etc most common used countries

    

    Figure: Good Example - We prefer a combination of the sorting and counting above

    We believe all combos should be able to be sorted asc/desc and by popularity asc/desc.

46. Do you have '-All-' option in your ComboBoxes?

    ComboBox is used for filtering data normally, it will be useful to have '-All-' option to give your user chances to select all data.

    

    Figure: Bad Example - No '-All-' option, user cannot select all data

    

    Figure: Good Example - Having '-All-' option, user gets chance to select all data

47. Do you extend the size of your ComboBoxes to show as many results as possible?

    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.

    

    Figure: Bad Example - You have to scroll to see all the result, and the long results are cut off

    

    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;

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

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

    Q:\	Why dont we put a panel on the form and set the form DockPadding property which does a similar thing?
    A:\	Adding more panels docking to a form reduces the performance significantly because of the extra SuspendLayout and ResumeLayout calls. 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.

50. Do you have a top CheckBox for users to perform a "select all"?

    Do you have a top checkbox that lets 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 is a good way to let user easily select all and it is clear.

    

    Figure: Good Example - FYI Hotmail does this by putting a CheckBox at the top that lets you select all CheckBoxes underneath it

    

    Figure: FYI Google have done it a different way to provide multiple methods (All, All Read, All Unread, All Starred, and All Unstarred)

    

    Figure: Bad Example - SQL Auditor - No CheckBox for users to perform a "select all"

    

    Figure: Good Example - SQL Auditor - CheckBox at the top of the column

    

    Figure: FYI selecting all does this - selects all

    

    Figure: FYI deselecting all does this - selects none

    

    Figure: FYI 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

    

    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.

51. Long Process - Do you know how to make long-running processes user-friendly?

    

    Figure: Bad example of Progress bar (can't skip + Progress Bar stuck at 100%)

    When you have a long-running process you have to allow the user to:

    • Skip the processing (when appropriate).
    • Cancel the process.
    • Show a progress bar with a detailed description of the progress above it.

52. Long Process - Do you know that long-running processes should allow to 'Skip' the processing (when appropriate)?

    Give users the chance to skip a lengthy process

    When your wizard has a lot of processing, do you allow the user to skip that processing when appropriate? It may be that the user simply wants to see the results of the last time the wizard was used, or is interested in seeing what comes after the processing step before deciding to run the process.

    

    Figure: Good Example - Options for skipping a long process in SSW Diagnostics

53. Long Process - Do you know that you should show a progress bar and allow users to cancel

    The last thing a user wants is to be stuck waiting around for a long-running process to finish that they accidentally started in the first place. This heightens frustration with the application because
    • They do not know how long the process will last (adds uncertainty to the user experience)
    • They cannot stop the process (creates lack of control in the user experience)

    Instead, keep users happy with your application by

    • Showing status description information above the progress bar
    • Allowing the user to stop the process at any time by clicking "Cancel" (or as a minimum, prompt for confirmation before the long running process is started)

    

    Figure: Good Example - Progress Bar with description and Cancel Button

    
    

    

    Figure: Good Example - Progress Bar with description and status, and Cancel Button

    We have a product called SSW .NET Toolkit which includes these controls. SSW .NET Toolkit - Using Progress bars/Status forms.

54. Long Process - Do you know that you should provide a detailed summary, play a sound and hide the progress bar at the end

    Whenever a long process is churning away (e.g. about 10 seconds) users will usually tune out and do something else, either make a coffee or switch to another window. By playing a sound, hiding the progress bar and showing a message box at the end of the long process it will alert the user and flash the taskbar, reminding the user to go back and check on it.

    When using Message Box to indicate user a process is done, always includes detailed summary of the process. Don't just say "Process completed."

    Bad:
        Process completed.
    Good:
        Manual extraction process completed.
    
         Mailboxes scanned: 8
         Mailboxes skipped: 2
         Total mailboxes: 10
         Time Taken: 10 minutes, 15 seconds

    This is just like standing at a set of traffic lights listening for the beep to speed up to know when to walk, rather than constantly looking at the red and green men.
    

    

    Figure: Good Example - A completed progress form

55. Long Process - Do you show the status of progress bar on winform's title?

    The importance of having the status of progress bar on winform's title:

    • Users can clearly see the progress status.
    • If the winform is minimized to taskbar, users still can see the progress status.

    The form title should take the form of "[XX]% Completed - [Task Description] - [Product Name]".
    There is another relevant rule about the winform title.

    

    Figure: Bad Example - The winform's title does not contain the progress status

    

    Figure: Good Example - The winform's title contains the status of progress bar

    

    Figure: Good Example - You can clearly see the progress status from taskbar when you have the windows minimized

56. Sample - Do you supply a sample database?

    If you are shipping a product that makes use of a database backend, then you should also supply and option to automatically populate the database with some sample database. This is particularly important if you are offering your software as a trial license and need to have data in the database to show off your application's ground breaking functionality.

    We typically script the data in our sample database into an .sql file with a lot of INSERT statements and then use a product such as SSW SQL Deploy to manage the safe execution of our .sql file.

57. Sample - Do your sample databases have good Naming Conventions?

    Sample databases should be named in the following way:

    • SSWSQLAuditorNorthwindSample
    • SSWSQLTotalCompareNorthwindSamplePub
    • SSWSQLTotalCompareNorthwindSampleSub

    Sample Access database are named similarly:

    • SSWLookOutNorthwindSample2000.mdb

58. Sample - Do you avoid dropping a user's database when you attempt to create a database?

    If you have an SQL script that runs as part of your install you should always make sure that it does not drop the database first. When you typically auto-generate a script file from some of the SQL applications (such as Enterprise Manager) it will automatically attempt to drop a database if it already exists. This is bad practice as a company may already have a large investment in the data already in the database and dropping it may cause them to lose this investment.

    If you know which machine the database is going to be installed from within your application you should first check that it doesn't already exist and prompt the user accordingly to let them know that they should first manually delete the database. For example the install of the SQL Reporting Services setup handles this problem in an appropriate and simple manner (although some additional help could be provided).

    

    If you cannot be sure of the machine that the database is going to be installed on then you should make use of third party .sql script execution managers such as SSW SQL Deploy to ensure that when you attempt creation of databases where the database already exists then things will run smoothly.

59. Reports - Do you have a standard Report footer?

    When designing custom applications you want to include branding on reports. There are two ways to design a standard footer. As a minimum, you can have a line "Generated from [e.g.] SSW SQL Deploy - www.ssw.com.au".

    Or, even better, you can detailed information about the report and your company:

    

    For more details about how to generate such a footer, check our Rules to Better SQL Reporting Services.

60. Reports - Do you keep Reporting criteria simple?

    1. Have Selection for filters e.g. Date Ranges
    2. Have Selection for chart options e.g. Show Legend
    3. Don't have selection for chart groupings e.g. By Month or By Product
       • Crystal and Access these are built into the report and it is very complex to have a generic solution.
       • Also it is disorientating for the user to have this as a selection

       

       More Options for Reporting

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

    

    Figure: Bad Example - All buttons without Mnemonic

    

    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.

    We have a program called SSW Code Auditor to check for this rule. Note: We have an exception for (OK, Cancel, Close, and Apply) buttons because they should be associate with Accept and Cancel buttons.

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

    

    Figure: Good Example - The Start button is disabled in SSW Link Auditor after the scan has started

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

       

       Figure: Good Example - Action on the left, text on the right

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

    

    Figure: Bad Example - Users can't see all the text and the ListView doesn't use a 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,""); 
                         } 
                      } 
                    } 
                 }

65. Controls - Do you use Microsoft Recommended Font in your Application?

    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.

    

    Figure: Bad Example - This form uses a non-standard font, and it is hard to read

    

    Figure: Good Example - This form uses Tahoma, and it is easy to read

    

    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.

    
    

66. Control Choice - Do you use ListView and DataGrid appropriately?

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

    

    Figure: Bad Example - The DataGrid is ugly

    

    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

    

    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 cant be the first column. Eg:

      

      Figure: One place when you choose a DataGrid over a ListView is when you have 2 checkbox fields

    So in summary, if you dont 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.

    
    

67. Control Choice - Do you know when to use CheckBox?

    If the option only contains 2 choices, and the answer is a Boolean type value where the opposite value is clear (eg: Enabled/Disabled, True/False, Yes/No, On/Off), it should always be a checkbox.

    

    Figure: Bad Example - Boolean options not using CheckBox

    

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

    

    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.

    

    Figure: Good Example - CheckBoxes are used (although no opposite values), because they are clear when the CheckBoxes aren't ticked, the sections are disabled

    

    Figure: Bad Example - This screen implies that Configuring Credentials is required

    

    Figure: Good Example - This screen uses a CheckBox to signify that Configure Credentials is optional

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

    

    Figure: Bad Example - Using list boxes

    

    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.

    

    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.

69. 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 behavioural 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 glace.

    Item 1 Item 2 Item 3 Item 4 Item 5 Item 6 Item 7 Item 8 Item 9 Item 10

    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

    Item 1

    Item 2

    Item 3

    Item 4

    Item 5

    Item 6

    Item 7

    Item 8

    Item 9

    Item 10

    Figure: Good Example - The beauty of the CheckListBox in ASP.NET

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

70. Control Choice - Do you have a consistent look on your buttons?

    Question: What is wrong with this Picture?

    

    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

    

    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.

    
    

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

    

    Figure: Bad Example - Inappropriate use of 'Group Box', there is nothing to be grouped

    

    Figure: Good Example - Use a line to organize different sections

    

    figure: Good Example - VS.NET 2003 Options form, appropriate use of 'Group Box', the radio buttons are related to each other

    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.

72. Control Choice - Do you use bold on the main options to make them clearer?

    Make the options clearer by using bold.

    

    Figure: Bad Example - Main options text not in bold

    

    Figure: Good Example - Main options text in bold

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

    

    Figure: Bad Example - ComboBox is used for "Job Type" where it contains only 2 options

    

    Figure: Good Example - Radio Buttons are used and aligned vertically.

74. Data Entry Forms - The 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. This is a standard we adhere to when developing in SSW.

    

    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 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 Forms - 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. 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 show 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 these placement of validations is because these events handled 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)
                   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 visual designer in VS.Net, the Binding is created and added to the Data-Bindings of the Control all in one line. Do not use the 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 is 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
                   

       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.

75. Data Entry Forms - 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

       

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

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

       

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

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

76. Data Entry Forms - 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.

    

    Figure: Bad Example - Menu driven ComboBox maintenance form

    

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

77. Data Entry - 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.

    

    Figure: Bad Example - This form places the Add and Delete buttons in one line

    

    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

78. Data Entry - 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

79. Data Entry - Do you avoid using one form for data entry and find navigation?

    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.

    

    Figure: Bad Example - ListView with data entry fields in one form

    

    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.

    

    Figure: Good Example - Separate form with all the data entry fields

80. Do you use Text Boxes for displaying data?

    A Label control is always used to display static text. If your application is displaying data (results of calculations, information, records from a database, etc.), you should use a TextBox control.

    Using TextBox controls is a better practise and setting the "ReadOnly" property and the "BorderStyle" property will make your Text boxes looks like a label. Also using Textbox makes copying data easier than using labels.

    

    Figure: Border Style Property

    

    Figure: Read-Only Property

    

    Figure: Bad Example - Long message cut off when you are using label

    

    Figure: Good Example - Using Textbox is better practice

    As you can see you'll barely know the difference, so start using Textboxes for displaying data, that's good practise.

81. Do you 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 show 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 these placement of validations is because these events handled 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.

82. Do you use green tick, red cross and spinning icon to show the status?

    Use a clear information icon to show the current status is very important, and the icon should be consistent the actual status.

    

    Figure: Bad Example - The icon is not consistent with the actual status

    

    Figure: Good Example - Use spinning icon to show the checking status

    

    Figure: Good Example - Use red cross icon to show the wrong status

    

    Figure: Good Example - Use green tick icon to show the correct status

    We have another similar rule for Web application - Do you use icons in web pages to indicate status directly?

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

    If you want to edit a single item in your form we suggest you popup a form to do this. This makes each form has 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.

84. Do you use icons in menu?

    Plain menu items make your application look normal and less expressive.

    

    Figure: plain menu

    While icons can make your application look good. A brand new control MenuStrip is introduced in .NET 2.0 to support using icons in menu items without any manual code.

    

    Figure: menu with icons

    

    Figure: menu item properties

    MenuStrip supersedes the previous MainMenu control in .NET 1.x which does not support icon. If you have to use this old control and want to add icon support with it MenuExtender by Eugene may help. A sample looks like this:

    

    Figure: MainMenu with icons

                Me.MenuExtender1.SetExtEnable(Me.mToolsOption, True)
                Me.MenuExtender1.SetImageIndex(Me.mToolsOption, 8)
                Me.MenuExtender1.SetExtEnable(Me.mProcessAll, True)
                Me.MenuExtender1.SetImageIndex(Me.mProcessAll, 9)
                

    Code: Code for using MenuExtender with MainMenu

85. Do you make login state clear?

    Make login state clear will help user know the current state.

    

    Figure: Bad Example - Logged in state - web form.

    

    Figure: Bad Example - Logged in state - win form.

    

    Figure: Good Example - Logged in state - web form.

    

    Figure: Good Example - Logged in state - win form.

    

    Figure: Good Example - Logged off state - web form.

86. Do you set row select mode as "FullRowSelect" for DataGridView if it is read only?

    If you use the DataGridView control that is read only, you had better set row select mode as "FullRowSelect", becaue if the data can not be modified we can let users select all row instead of one colume.

    

    Figure: Bad Example - Row select mode is not "FullRowSelect".

    

    Figure: Good Example - Row select mode is "FullRowSelect".

    

    Figure: Changed row select mode to FullRowSelect.

    What's the next step? It's even better if you enable mutiple row selection and copying, see Do your List Views support multiple selection and copying on Rules to Better Windows Forms Applications.

87. Do you make the selected rows standard 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.

    

    Figure: Bad Example - Selected rows are not separate from others.

    

    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.

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

    

    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 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 simplier - sizes would be fixed.
    We have a suggestion for CRM about this at CRM and Outlook should be consistent with regards to Addresses.

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

    

    Figure: Standard tooltip.

    

    Figure: Balloon tooltip.

    To implement you can:

    1. Set the standard Tooltip's property IsBalloon true or
    2. Use EdwardForgacs' balloon tooltip control.

90. Control Choice - Do you use CheckedListBox and DataGrid appropriately?

    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

    

    Figure: Bad Example - The CheckedListBox is limited

    

    Figure: Good Example - DataGrid can show much more information

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

    
    

91. Control Choice - Do you use GridView instead of ListBox?

    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.

    

    Figure: Bad Example - Use the ListBox.

    

    Figure: Good Example - Use GridView and add the enabled checkbox on the header.

92. Do you end your labels text with ":"?

    Labels provides an easy way to show text in a form. It is better if it is consistent to label a field with ending the text with a ":".

    

    Figure: Bad Example - Labels without ":"

    

    Figure: Good Example - Labels with ":"

93. Text - Do you use "Taskbar" instead of "Task Bar"?

    

    Figure: use the spelling "taskbar" over "task bar"

94. Text - Do you use "Try Again" instead of "Retry"?

    They are similar but "Retry" is a more computer jargon like.

    

    Figure: Internet Explorer uses "Try Again" instead of "Retry"

95. Do you use bar graph rather than pie graph?

    Bar graph provides an easy way to pick the top size items and group the rest.

    

    Figure: Bad Example - Use Pie Graph

    

    Figure: Good Example - Use Bar Graph

Links

• http://www.asktog.com/basics/firstPrinciples.html
• http://msdn.microsoft.com/library/Default.asp?url=/library/en-us/dnwue/html/ch09f.asp

Acknowledgements

Adam Cogan
Edward Forgacs
David Klein