Crm4 Ux Design Guide
Transcript of Crm4 Ux Design Guide
![Page 1: Crm4 Ux Design Guide](https://reader037.fdocuments.net/reader037/viewer/2022103013/54669cb3b4af9fce288b4589/html5/thumbnails/1.jpg)
�
November 2�, 2007Revision �.0
MICROSOFT DYNAMICS CRM 4.0 UI STYLE GUIDE
![Page 2: Crm4 Ux Design Guide](https://reader037.fdocuments.net/reader037/viewer/2022103013/54669cb3b4af9fce288b4589/html5/thumbnails/2.jpg)
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
![Page 3: Crm4 Ux Design Guide](https://reader037.fdocuments.net/reader037/viewer/2022103013/54669cb3b4af9fce288b4589/html5/thumbnails/3.jpg)
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
![Page 4: Crm4 Ux Design Guide](https://reader037.fdocuments.net/reader037/viewer/2022103013/54669cb3b4af9fce288b4589/html5/thumbnails/4.jpg)
�
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
![Page 5: Crm4 Ux Design Guide](https://reader037.fdocuments.net/reader037/viewer/2022103013/54669cb3b4af9fce288b4589/html5/thumbnails/5.jpg)
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
![Page 6: Crm4 Ux Design Guide](https://reader037.fdocuments.net/reader037/viewer/2022103013/54669cb3b4af9fce288b4589/html5/thumbnails/6.jpg)
3
MICROSOFT DYNAMICS CRM UI STYLE GUIDEStandard Tool Bar
Mouse Over States
![Page 7: Crm4 Ux Design Guide](https://reader037.fdocuments.net/reader037/viewer/2022103013/54669cb3b4af9fce288b4589/html5/thumbnails/7.jpg)
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
![Page 8: Crm4 Ux Design Guide](https://reader037.fdocuments.net/reader037/viewer/2022103013/54669cb3b4af9fce288b4589/html5/thumbnails/8.jpg)
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
![Page 9: Crm4 Ux Design Guide](https://reader037.fdocuments.net/reader037/viewer/2022103013/54669cb3b4af9fce288b4589/html5/thumbnails/9.jpg)
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
![Page 10: Crm4 Ux Design Guide](https://reader037.fdocuments.net/reader037/viewer/2022103013/54669cb3b4af9fce288b4589/html5/thumbnails/10.jpg)
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
![Page 11: Crm4 Ux Design Guide](https://reader037.fdocuments.net/reader037/viewer/2022103013/54669cb3b4af9fce288b4589/html5/thumbnails/11.jpg)
8
MICROSOFT DYNAMICS CRM UI STYLE GUIDEApplication Title Bar
![Page 12: Crm4 Ux Design Guide](https://reader037.fdocuments.net/reader037/viewer/2022103013/54669cb3b4af9fce288b4589/html5/thumbnails/12.jpg)
9
MICROSOFT DYNAMICS CRM UI STYLE GUIDEActions Tool Bar
1px #6699CC1px #6699CC Row Highlight#6699CC
Row Border 1px #C4DDFF
Row Height 20px
![Page 13: Crm4 Ux Design Guide](https://reader037.fdocuments.net/reader037/viewer/2022103013/54669cb3b4af9fce288b4589/html5/thumbnails/13.jpg)
�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
![Page 14: Crm4 Ux Design Guide](https://reader037.fdocuments.net/reader037/viewer/2022103013/54669cb3b4af9fce288b4589/html5/thumbnails/14.jpg)
��
19
Hover Highlight background 16 px height
Collapsed section
MICROSOFT DYNAMICS CRM UI STYLE GUIDEForm Window Navigation Pane
![Page 15: Crm4 Ux Design Guide](https://reader037.fdocuments.net/reader037/viewer/2022103013/54669cb3b4af9fce288b4589/html5/thumbnails/15.jpg)
�2
MICROSOFT DYNAMICS CRM UI STYLE GUIDEForm Tool Bar
![Page 16: Crm4 Ux Design Guide](https://reader037.fdocuments.net/reader037/viewer/2022103013/54669cb3b4af9fce288b4589/html5/thumbnails/16.jpg)
�3
MICROSOFT DYNAMICS CRM UI STYLE GUIDEForm Tool Bar
![Page 17: Crm4 Ux Design Guide](https://reader037.fdocuments.net/reader037/viewer/2022103013/54669cb3b4af9fce288b4589/html5/thumbnails/17.jpg)
�4
MICROSOFT DYNAMICS CRM UI STYLE GUIDEForm Window Dimensions
Fixed 170
Default 833, resizable
Default 565,Resizable
24 px
Navigation Pane
Content Pane
![Page 18: Crm4 Ux Design Guide](https://reader037.fdocuments.net/reader037/viewer/2022103013/54669cb3b4af9fce288b4589/html5/thumbnails/18.jpg)
�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
![Page 19: Crm4 Ux Design Guide](https://reader037.fdocuments.net/reader037/viewer/2022103013/54669cb3b4af9fce288b4589/html5/thumbnails/19.jpg)
�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
![Page 20: Crm4 Ux Design Guide](https://reader037.fdocuments.net/reader037/viewer/2022103013/54669cb3b4af9fce288b4589/html5/thumbnails/20.jpg)
�7
MICROSOFT DYNAMICS CRM UI STYLE GUIDEForm Window Input Fields
15
81510
![Page 21: Crm4 Ux Design Guide](https://reader037.fdocuments.net/reader037/viewer/2022103013/54669cb3b4af9fce288b4589/html5/thumbnails/21.jpg)
�8
MICROSOFT DYNAMICS CRM UI STYLE GUIDEInput Controls
![Page 22: Crm4 Ux Design Guide](https://reader037.fdocuments.net/reader037/viewer/2022103013/54669cb3b4af9fce288b4589/html5/thumbnails/22.jpg)
�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
![Page 23: Crm4 Ux Design Guide](https://reader037.fdocuments.net/reader037/viewer/2022103013/54669cb3b4af9fce288b4589/html5/thumbnails/23.jpg)
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
![Page 24: Crm4 Ux Design Guide](https://reader037.fdocuments.net/reader037/viewer/2022103013/54669cb3b4af9fce288b4589/html5/thumbnails/24.jpg)
2�
MICROSOFT DYNAMICS CRM UI STYLE GUIDEDialog Window Dimensions
50
74
8 10
36
10
1014
![Page 25: Crm4 Ux Design Guide](https://reader037.fdocuments.net/reader037/viewer/2022103013/54669cb3b4af9fce288b4589/html5/thumbnails/25.jpg)
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
![Page 26: Crm4 Ux Design Guide](https://reader037.fdocuments.net/reader037/viewer/2022103013/54669cb3b4af9fce288b4589/html5/thumbnails/26.jpg)
23
MICROSOFT DYNAMICS CRM UI STYLE GUIDESettings Window
24
24 48
48
14
18
24 24 48 14
![Page 27: Crm4 Ux Design Guide](https://reader037.fdocuments.net/reader037/viewer/2022103013/54669cb3b4af9fce288b4589/html5/thumbnails/27.jpg)
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
![Page 28: Crm4 Ux Design Guide](https://reader037.fdocuments.net/reader037/viewer/2022103013/54669cb3b4af9fce288b4589/html5/thumbnails/28.jpg)
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
![Page 29: Crm4 Ux Design Guide](https://reader037.fdocuments.net/reader037/viewer/2022103013/54669cb3b4af9fce288b4589/html5/thumbnails/29.jpg)
26
MICROSOFT DYNAMICS CRM UI STYLE GUIDEError Dialog Icons
![Page 30: Crm4 Ux Design Guide](https://reader037.fdocuments.net/reader037/viewer/2022103013/54669cb3b4af9fce288b4589/html5/thumbnails/30.jpg)
27
MICROSOFT DYNAMICS CRM UI STYLE GUIDEAlert Banner
Information
Warning
![Page 31: Crm4 Ux Design Guide](https://reader037.fdocuments.net/reader037/viewer/2022103013/54669cb3b4af9fce288b4589/html5/thumbnails/31.jpg)
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
![Page 32: Crm4 Ux Design Guide](https://reader037.fdocuments.net/reader037/viewer/2022103013/54669cb3b4af9fce288b4589/html5/thumbnails/32.jpg)
29
MICROSOFT DYNAMICS CRM UI STYLE GUIDEReport Wizard
![Page 33: Crm4 Ux Design Guide](https://reader037.fdocuments.net/reader037/viewer/2022103013/54669cb3b4af9fce288b4589/html5/thumbnails/33.jpg)
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
![Page 34: Crm4 Ux Design Guide](https://reader037.fdocuments.net/reader037/viewer/2022103013/54669cb3b4af9fce288b4589/html5/thumbnails/34.jpg)
3�
Tahoma, 11px, Bold #15428B
Line 1 px #6699CC
Background #D6E8FF
Border 1 px #6699CC
MICROSOFT DYNAMICS CRM UI STYLE GUIDECalendar Specifications
![Page 35: Crm4 Ux Design Guide](https://reader037.fdocuments.net/reader037/viewer/2022103013/54669cb3b4af9fce288b4589/html5/thumbnails/35.jpg)
32
MICROSOFT DYNAMICS CRM UI STYLE GUIDEButtons
Normal
Pressed
Disabled
![Page 36: Crm4 Ux Design Guide](https://reader037.fdocuments.net/reader037/viewer/2022103013/54669cb3b4af9fce288b4589/html5/thumbnails/36.jpg)
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
![Page 37: Crm4 Ux Design Guide](https://reader037.fdocuments.net/reader037/viewer/2022103013/54669cb3b4af9fce288b4589/html5/thumbnails/37.jpg)
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
![Page 38: Crm4 Ux Design Guide](https://reader037.fdocuments.net/reader037/viewer/2022103013/54669cb3b4af9fce288b4589/html5/thumbnails/38.jpg)
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
![Page 39: Crm4 Ux Design Guide](https://reader037.fdocuments.net/reader037/viewer/2022103013/54669cb3b4af9fce288b4589/html5/thumbnails/39.jpg)
36
MICROSOFT DYNAMICS CRM UI STYLE GUIDEQuick Find