crm4 ux design guide
DESCRIPTION
CRM4 designTRANSCRIPT
�
November 2�, 2007Revision �.0
MICROSOFT DYNAMICS CRM 4.0 UI STYLE GUIDE
MICROSOFT DYNAMICS CRM UI STYLE GUIDEContents
Main WindowMain Window Regions ............................................................................................................................................................................................................................... �Main Window Dimensions ...................................................................................................................................................................................................................... 2Standard Tool Bar.........................................................................................................................................................................................................................................3Pulldown Menu ............................................................................................................................................................................................................................................4Navigation Pane ...........................................................................................................................................................................................................................................5Application Title Bar ...................................................................................................................................................................................................................................7Actions Tool Bar ............................................................................................................................................................................................................................................9
Form WindowForm Window Navigation Pane ...........................................................................................................................................................................................................�0Form Tool Bar ..............................................................................................................................................................................................................................................�2Form Window Dimensions .....................................................................................................................................................................................................................�4Form Window Icon ....................................................................................................................................................................................................................................�6Form Window Input Fields .....................................................................................................................................................................................................................�7Input Controls .............................................................................................................................................................................................................................................�8Form Window Tabs ....................................................................................................................................................................................................................................�9
Dialog WindowDialog Window ...........................................................................................................................................................................................................................................20Dialog Window Dimensions ..................................................................................................................................................................................................................2�Dialog Window Color and Type ...........................................................................................................................................................................................................22
Settings WindowSettings Window Dimensions ...............................................................................................................................................................................................................23Settings Window Color and Type .......................................................................................................................................................................................................24
MICROSOFT DYNAMICS CRM UI STYLE GUIDEContents (con’t)
Errors and AlertsError Dialog Window ................................................................................................................................................................................................................................25Error Dialog Icons ......................................................................................................................................................................................................................................26Alert Banner .................................................................................................................................................................................................................................................27Alert Banner Dimensions ........................................................................................................................................................................................................................28
WizardReport Wizard .............................................................................................................................................................................................................................................29
Other UI ElementsCalendar Specifications ............................................................................................................................................................................................................................30Buttons ...........................................................................................................................................................................................................................................................32Articles Window Pane ..............................................................................................................................................................................................................................33Knowledge Base Window Pane ............................................................................................................................................................................................................34Queues Window Pane ..............................................................................................................................................................................................................................35Quick Find.....................................................................................................................................................................................................................................................36
�
MICROSOFT DYNAMICS CRM UI STYLE GUIDEMain Window Regions
1
2
6
4
3
5
Standard Tool Bar
Navigation Pane
Application Title Bar
Actions Tool Bar
View Filter
List
1
2
3
4
5
6
2
MICROSOFT DYNAMICS CRM UI STYLE GUIDEMain Window Dimensions
39
27
27
58
Default 173, resizable
5 5
App Navigation Pane App Content Pane Resizeable
3
MICROSOFT DYNAMICS CRM UI STYLE GUIDEStandard Tool Bar
Mouse Over States
4
MICROSOFT DYNAMICS CRM UI STYLE GUIDEPulldown Menu
1 px border #7E7E7E
Margin width 25 pxbackground #E9E9E9
Icon 16x16px
7
Line 1 px #C5C5C5
Gap 1 px white
2214
14
46
#FFE6A0 #FFB74C
16 X 16 Icon
8
5
MICROSOFT DYNAMICS CRM UI STYLE GUIDENavigation Pane
16
17
14
3
Mouse Over
Highlight
List Item, 11pxTahoma, #000000
Section Title 11pxTahoma, Bold #15428B
16 X 16 Icon
14
22
11
155
188
23
6 4
6
Mouse Over States
MICROSOFT DYNAMICS CRM UI STYLE GUIDENavigation Pane
Tahoma 11px #15428B
Tahoma 11px #15428B
1 px #C6CEDC
Tahoma 11px #15428B
6 24
32
23
32
5
Mouse Over displays hyperlink underneath text
Selected Button
Mouse Over Button
7
Default 144, resizable
On Click/ On mouse down
On Hover highlight
88
5 2 2 4 3
2
22 28 2 8
Tahoma 14px, Bold, #15428B
Left border 1 px, White
MICROSOFT DYNAMICS CRM UI STYLE GUIDEApplication Title Bar
8
MICROSOFT DYNAMICS CRM UI STYLE GUIDEApplication Title Bar
9
MICROSOFT DYNAMICS CRM UI STYLE GUIDEActions Tool Bar
1px #6699CC1px #6699CC Row Highlight#6699CC
Row Border 1px #C4DDFF
Row Height 20px
�0
19
18 px,Line height
18
16 x 16 Icon Section Title, 11 px Tahoma, bold #15428B
List item, 11 px Tahoma, #000000
Highlight, 11 px, Tahoma bold, #000000
#D9EAFF
#FFDBB7 #FFBD69
Background
1 px shadow #B0C2D0
1 px border #6699CC
4
2
7
7
7 4
1 px shadow #B0C2D0
Nav page with scrollbar
Disable H scrolling
2
2
MICROSOFT DYNAMICS CRM UI STYLE GUIDEForm Window Navigation Pane
��
19
Hover Highlight background 16 px height
Collapsed section
MICROSOFT DYNAMICS CRM UI STYLE GUIDEForm Window Navigation Pane
�2
MICROSOFT DYNAMICS CRM UI STYLE GUIDEForm Tool Bar
�3
MICROSOFT DYNAMICS CRM UI STYLE GUIDEForm Tool Bar
�4
MICROSOFT DYNAMICS CRM UI STYLE GUIDEForm Window Dimensions
Fixed 170
Default 833, resizable
Default 565,Resizable
24 px
Navigation Pane
Content Pane
�5
MICROSOFT DYNAMICS CRM UI STYLE GUIDEForm Window Dimensions
160 782
57 25
43
48 x 66 Graphic Tahoma 11px, Bold, #000000
Tahoma 18px, Bold, #6699CC 10 10 7 7
8
38 27
9
�6
MICROSOFT DYNAMICS CRM UI STYLE GUIDEForm Window Icon
Icons for the Form Window are 66 X 48 pixel icons. They are three-dimensional and shown in perspective as solid objects. Three-dimen-sional objects are represented in perspective as solid objects, seen from a birds-eye view with two vanishing points as shown below. Use a shadow as shown to lift objects visually from the background.
The light source for objects within the perspective grid is above, slightly in front of, and slightly to the right of the object. The light source casts shadows that are slightly to the rear and right of the object’s base. All light rays are parallel, and strike the object along the same angle (like the sun). The goal is to have a uniform lighting appearance across all icons and spotlight effects. Parallel light rays produce shadows that all have the same length and density, providing further unity across multiple icons.
Background Color: #D6E8FF Perspective Grid
Drop Shadow
Faded Reflection
66 X 48 Icon
Drop Shadow Gradientfrom Color #AFBDD0 to Background Color: #D6E8FF
�7
MICROSOFT DYNAMICS CRM UI STYLE GUIDEForm Window Input Fields
15
81510
�8
MICROSOFT DYNAMICS CRM UI STYLE GUIDEInput Controls
�9
MICROSOFT DYNAMICS CRM UI STYLE GUIDEForm Window Tabs
14
10 10 10 10
20
#EAF3FF
1 px left border #FFFFFF
Tahoma 11px, Black
1 px Shadow #B0C2D0
1 px Shadow #B0C2D0 1 px border #898C95
20
MICROSOFT DYNAMICS CRM UI STYLE GUIDEDialog Window
22
44 3
84
30 302
5
10 43
Minimum: 12
Height: 50#6693CF
Height: 60
Background#E3EFFF
#A7CDF0
See FormSpecHighlight#EAF3FF
#6699CC
Tahoma 14pt Bold, #FFFFFF Tahoma 11pt Regular, #FFFFFF
Tahoma 11pt Regular #000000
2�
MICROSOFT DYNAMICS CRM UI STYLE GUIDEDialog Window Dimensions
50
74
8 10
36
10
1014
22
MICROSOFT DYNAMICS CRM UI STYLE GUIDEDialog Window Color and Type
Tahoma 14px Bold #000000
Tahoma 11px Bold #FFFFFF
Tahoma 11px #000000
Tahoma 14px Bold #FFFFFF
Tahoma 11px #FFFFFF
#EAF3FF
1px #6699CC
1px #A7CDF01px #898C95
1px #FFFFFF
23
MICROSOFT DYNAMICS CRM UI STYLE GUIDESettings Window
24
24 48
48
14
18
24 24 48 14
24
MICROSOFT DYNAMICS CRM UI STYLE GUIDESettings Window Color and Type
Font: Tahoma 14px Bold, Color: #000000
Font: Tahoma 14px Bold, Color: #466094
Font: Tahoma 14px Bold, Color: #000000
Font: Tahoma 14px Bold, Color: #FFFFFF
25
MICROSOFT DYNAMICS CRM UI STYLE GUIDEError Dialog Window
Effective error messages inform users that a problem occurred, explain why it happened, and provide a solution so users can fix the problem. Users should either perform an action or change their behavior as the result of an error message.
Well-written, helpful error messages are crucial to a quality user experience. Poorly written error messages result in low product satisfaction, and are a leading cause of avoidable technical support costs. Unnecessary error messages break users’ flow.
Width 55 characters
84
22
8 8
84
12 12
8
Background#E3EFFF
Body textTahoma 11pt Regular #000000
Opening textTahoma 14pt Bold #000000
24
Icon 32x32
26
MICROSOFT DYNAMICS CRM UI STYLE GUIDEError Dialog Icons
27
MICROSOFT DYNAMICS CRM UI STYLE GUIDEAlert Banner
Information
Warning
28
MICROSOFT DYNAMICS CRM UI STYLE GUIDEAlert Banner Dimensions
Inline
Tahoma 11pt Regular #000000
Height 26#FFFFAE
1 px border#C5C5C5
Icon 16 x 16Padding 5
Critical
Icon 16x16
Popup for Lookup auto resolve
Height 26#FFFFAE
Height 22#E9E9E9
1 px border#E9E9E9
1 px border#A0A0A0
1 px border#C5C5C5
Link Tahoma 11pt Regular #0000FF
Multiple Matches No Match - on hover message
29
MICROSOFT DYNAMICS CRM UI STYLE GUIDEReport Wizard
30
Tahoma 11px Bold, #15428B
Background color #C4DDFF
Background #D6E8FF
Border 1 px #6699CC
Border 1 px #6699CC
Line 1 px #6699CC
MICROSOFT DYNAMICS CRM UI STYLE GUIDECalendar Specifications
3�
Tahoma, 11px, Bold #15428B
Line 1 px #6699CC
Background #D6E8FF
Border 1 px #6699CC
MICROSOFT DYNAMICS CRM UI STYLE GUIDECalendar Specifications
32
MICROSOFT DYNAMICS CRM UI STYLE GUIDEButtons
Normal
Pressed
Disabled
33
MICROSOFT DYNAMICS CRM UI STYLE GUIDEArticles Window Pane
Border 1 px #BBD4F6
Background#D6E8FF
Border 1 px #6699CC
See Calendar Specformnav_header_back.gif
4
4
9
34
MICROSOFT DYNAMICS CRM UI STYLE GUIDEKnowledge Base Window Pane
Border 1 px #BBD4F6
Background#D6E8FF
Nav Background #FFFFFF
Border 1 px #6699CC
8
116
4
6
9
35
MICROSOFT DYNAMICS CRM UI STYLE GUIDEQueues Window Pane
Border 1 px #BBD4F6
Background#D6E8FF
Nav Background #FFFFFF
Border 1 px #6699CC
7
4
8
6
36
MICROSOFT DYNAMICS CRM UI STYLE GUIDEQuick Find