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.