ISV User Interface Guidelines, Etc.

This section will give you pointers and guidelines for developing UI’s that “play nice” in the Microsoft CRM space. This will help your user’s interact with your add-on more efficiently and will help you give your add-on that “professional lookup”.

Note: A lot of what you see below are guidelines and principles. Rules of course are meant to be bent on occasion, and in the interest of time and ship dates we had to bend some. You will have to use your best judgment when it comes to putting these guidelines to work for you.

Note: Some of this stuff is going to change in v2.0…

 

1.)      Interface Principles and Overview

Keywords to describe the MSCRM User Interface:

 

Clean

Having no imperfections or blemishes; Free from clumsiness; Devoid of restrictions or encumbrances;

 

Elegant

Characterized by or exhibiting refined, tasteful beauty of manner, form, or style.

 

Simple

Not involved or complicated; easy; not overly complex;

 

2.)      Core User Interface Standards

Regardless of which User Interface you are designing for, here are some standard guidelines to follow. Most of this is provided for you by standard style sheets, but no matter where you are build (web or otherwise) these standards should be followed.

a. Standard Font Information:

1. Tahoma (Verdana in v1.0)
2. 11px
3. Normal Weight
4. Do NOT use Italics

 

b. Buttons:

1. The OK Button is always the left most button
2. The Cancel / Close Button is always the right most button
3. OK is always all uppercase
4. Buttons should always be 80 pixels wide, by 19 pixels high; with 8 pixel padding on all sides and 4 pixels padding between buttons
   

 

c. Accessibility:

1. All functions should be accessible via the keyboard
2. Tab order should be logical and complete
3. Be careful not to rely on color too much, as color blind individuals may have a hard time discerning what you mean.
4. Items should have tool tips when possible; this helps with screen-reading software.
   

 

d. Links:

1. Hyperlinks should always be bright blue (#0000FF), underlined and show a “hand” cursor when the user hovers over it.
   

 

e. Screen Size / Color Depth:

1. Our application is designed to run acceptably at 800x600 and well at 1024x768
2. Administrative Tools are designed to run at 1024x768 and should (if possible) work at 800x600
3. Our application is designed to look “OK” with 8-bit (256) color and look great with (15-bit +) high color.
   
   

3.)      Application User Interface Guidelines

a. Forms
Forms are used throughout the application and whether they are customizable or hard-coded, they should all follow the following guidelines:

1. Adaptive UI… if the user can’t do it; the user shouldn’t see the option to do it
2. There should ALWAYS be a blue status bar at the bottom of the screen, even if there is no content to be presented there. This is for consistency and balance.
   

 

Details of a properly formatted Application Form:

 

 

White space is import for a screen’s layout. Here are some guidelines:

 

• Tabs get 10 pixels of outer padding
• Tabs get 14 pixels of inner padding
• Menu Bars are always 23 pixels high
• All forms always have a dark blue status bar that is 23 pixels high
• If a form has an Navigation Bar (Area Bar) then it is gradiated and 140 pixels wide
• Area icons are always 18x18, Menu bar and lookup icons are always 16x16
• Spacers should be used in the tool bar to logically group menu options

 

Color Table for Forms:

 

Swatch	HEX Color	RGB Color	Description
	7288AC	114, 136, 172	Menu Bar Base Color
	ABC0E7	171, 192, 231	Menu Bar 3D Highlight Bevel
	00377A	0, 55, 122	Menu Bar 3D Shadow Bevel
	365484	54, 54, 132	Status Bar Color
	EEEEEE	238, 238, 238	Form Background Color
	FFFF00	255, 255, 0	Form Title Text Color (Bold)
	990000	153, 0, 0	Form Required Field (Bold)
	000099	0, 0, 153	Form Recommended Field (Bold)
	7B9EDB	123, 158, 189	Form Control Border (1 Pixel)
	FFFBFF	255, 251, 255	Tab Color
	DE8E29 FFC739	222, 142, 41 255, 199, 57	Tab Highlight Color
	E5E3D5 C9C7BA	229, 227, 213 201, 199, 186	Navigation Bar Vertical Gradient

b. Dialogs

Dialogs appear throughout the application and should follow the following guidelines:

1. Dialogs should always be modal
2. The ESC key should always behaved the same as the User clicking on the Cancel Button
3. Dialogs should follow the UI paradigm set forth below.
4. Dialogs “OK” button should be disabled until a change is made.

 

Details of a properly formatted Application Dialog:

White space is import for a screen’s layout. Here are some guidelines:

 

• Dialogs should always be modal and should not have minimize or maximize buttons
• Tabs get 10 pixels of inner padding
• Dialogs get 20 pixels of inner padding
• The bottom area of a dialog is always 35 pixels high
• The bottom area always has a 2 pixel divider line, dark gray (#CCCCCC) on the top and white (#FFFFFF) on the bottom.
• Buttons are always aligned right and follow the standard Button formatting rules
• The cancel button is always the right most button
• The OK button is always the left most button
• The dialog’s header always has two parts. The Title and the Description. The title briefly describes what the dialog does, while the description provides more details and may instruct the user what to do.

 

 

Color Table for Dialogs:

 

Swatch	HEX Color	RGB Color	Description
	7288AC	114, 136, 172	Banner Bar Base Color
	ABC0E7	171, 192, 231	Banner Bar 3D Highlight Bevel
	00377A	0, 55, 122	Banner Bar 3D Shadow Bevel
	EEEEEE	238, 238, 238	Dialog Background Color
	CCCCCC	204, 204, 204	Bottom Area Divider Color (Top)
	FFFFFF	255, 255, 255	Banner Bar Text / Bottom Area Divider (Bottom)
	CECFDE	206, 207, 222	Dialog Button Gradient Color from pure White

 

Forms contained within Dialogs should follow the standard Form Interface guidelines as listed above.

 

c.  Tools

The tools section of Microsoft CRM, provides “Power Users” with access to WYSIWYG (What You See Is What You Get) administrative functions and features. Tools forms should follow the Form and Dialog guidelines presented above.

 

Details of a properly formatted Tools Page:

 

 

White space is import for a screen’s layout. Here are some guidelines:

 

• The Top bar is 46 pixels high and has 14 pixel inner padding
• The bottom status bar is 23 pixels high
• Tools pages use 48x48 pixel Icons
• Details of fonts sizes and style are provided by the picture above

 

 

Color Table for Forms:

 

Swatch	HEX Color	RGB Color	Description
	8E9CBB	142, 156, 187	Title Bar Color / Status Bar – Note this is not the standard Menu Bar Blue
	6699CC	102, 153, 204	Status Bar 3D Highlight Bevel
	00377A	0, 55, 122	Title Bar 3D Shadow Bevel
	FFFF00	255, 255, 0	Status Bar Active Text (Bold)
	FFFFFF	255, 255, 255	Title Bar / Status Bar Text
	EFEFEB	239, 239, 235	Tool Page Background Color
	0000AA	0, 0, 170	Sub-Title Font Color
	999999	153, 153, 153	Sub-Title Bottom Border (1 Pixel)
	444444	68, 68, 68	Sub-Title Description Font Color

 

---

Aaron Elder
Microsoft Customer Relationship Management
Core Application Development Team

---

 

Note:

All images and content are the property of Microsoft Corporation.

This posting is provided "AS IS" with no warranties, and confers no rights.