5. Graphic Design Guidelines
5.1 Screen Resolution
When you build windows, use a screen resolution of 800 X 600. Users can work on this resolution and higher.
When you define forms, make sure the window size is not more than 800x460 pixels (so that it fits within a 800x600 screen).
5.2 Fonts
The default font in the system is Tahoma. There are several usages of font style and color for different elements.
Typical font usage:
Element Font style and color Sample
Text in fields Font: Tahoma, 7, Regular Color: black
Labels (fields, buttons) Font: Tahoma, 7, Regular Color: gray (RGB=74,77,74) Group Label Font: Tahoma, 7, underlined
Color: gray (RGB=74,77,74) Main Menu category Font: Tahoma, 9, Bold
Color: black
Main Menu item Font: Tahoma, 7, Bold Color: black
Window Title Font: Tahoma, 9, Regular Color: Light Gray
(RGB = 192,192,192)
The user may choose another font style and size. Changing the font is performed in:
Administration > System Initialization > General Settings > Fonts & Background tab After changing the font size, the whole window is resized automatically to fit the new font.
Note: As a result of selecting a larger font, the whole window gets larger. In extreme cases, the resulting window may be too large to fit on screen. Therefore window’s scroll bars will be added.
The only exceptions are the main menu and drop-down menus and the window’s title, for which the system (Windows) font is used. See details in Menu Bar And Drop-Down Menus and Window Title Bar.
5.3 Colors
All colors used within the SAP Business One application must be taken from the standard SAP palette, which is specified below.
* Entries marked by “x” are not to be used.
Index RGB Color Used For
1 255,255,255
2 253,253,243 Background color of a read / write field. 3 247,247, 239
4 252,252,237
5 245,244,231 Background color of the drop-down menu.
6 239,239,222 Background color of module in the main menu.
7 235,234,216
8 239,235,222 Read-only list box, Read only field.
Background color of the data area in a wizard. 9 222,223,206 Window background color. Background color of
the icon strip in the drop-down menu. Background color of a status bar. 10 222,215,198
11 222,222,200 12 222,222,198 13 214,214,189
14 206,203,189 Empty space on the side of the table. 15 198,198,181 16 206,206,173 17 206,206,181 18 198,198,173 19 198,198,165 20 201,197,149 21 209,192,153 22 189,189,165 23 189,189,156 24 181,181,148
25 173,173,140 Main menu: Module’s frame + Module’s strip color in rollover mode.
26 165,165,132 27 165,165,123 28 156,156,115 29 148,148,107
30 140,140,99 31 132,132,90 32 123,123,90 33 115,115,74 34 107,107,74 35 99,99,66 36 82,82,24 37 0,64,0 38 33,74,8 39 90,123,0 40 132,132,0 41 99,132,0 42 0,132,0 43 34,137,2 44 74,165,24 45 18,185,1
46 127,182,123 Background color of Confirmation Message in the Status Bar. 47 148,198,0 48 189,214,107 49 181,214,156 50 167,196,170 51 192,220,192 52 197,233,201 53 209,249,199 54 255,255,221 55 250,248,195
56 255,247,156 Field in focus (List Box, Choose from List, table, text field. 57 241,221,175 58 232, 227, 172 59 253,237,159 60 255, 255,0 61 251,222,142 62 255,222,82
63 255,207,49 Selected cell in a date range selector. Selected item in a list box.
Selected row in a table.
Highlighted strip of a leaf node in a tree control.
64 255,204,0 Selected Module in the main menu.
65 220,197,127 66 255,192,0 67 232,183,63 68 247,181,82
69 255,156,0 Border line in the header and footer of a wizard. 70 255,138,0 71 252,107,0 72 255,102,0 73 255,99,99 74 255,78,0 75 255,74,74 76 255,0,0 77 192,0,0 78 206,2,2 79 196,0,38 80 184,40,2 81 165,0,0 82 137,2,2 83 115,25,1 84 64,0,0 85 69,58,46 86 99,69,49 87 156,99,0 88 162,106,54 89 165,123,74 90 189,156,16 91 186,157,21 92 194,152,126 93 255,156,156 94 231,178,171 95 249,194,187 96 244,227,207 97 244,214,214 98 214,188,188 99 222,194,181 100 178,189,209
101 204,217,241 102 217,213,240 103 214,189,222 104 237,205,255 105 254,146,254 106 255,0,255 107 128,0,128
108 16,41,115 Active Window title bar, Menu bar strip. 109 0,0,128 110 41,57,115 111 0,66,187 112 0,57,132 113 1,89,164 114 0,99,165 115 82,99,156
116 90,107,165 Buttons color in an active window title bar. 117 0,0,255 118 100, 18, 202 119 158,81,252 120 172,131,255 121 185,129,252 122 202,176,255 123 206,206,255
124 219,228,246 Background color of inner rows in editable table. 125 231,237,249 Background color of 2nd level in editable tables. 126 181,214,247 127 165,206,231 128 165,222,255 129 148,206,247 130 132,198,247 131 148,189,231 132 115,181,231 133 115,173,214 134 107,173,222 135 99,165,214 136 90,156,206 137 107,156,198 138 131,157,170
139 115,148,181 140 132,158,173 141 115,150,165 142 99,132,156 143 101,128,142 144 99,130,148 145 74,90,115
146 159,177,203 Background color of Information Message in the Status Bar.
147 156,181,198
148 132,173,198 Background color of a header in a wizard 149 141,168,183
150 156,186,206 151 132,173,206 152 148,181,214
153 148,173,198 Light blue triangle in an active window's title bar. 154 148,165,214 155 49,156,255 156 189,247,255 157 68,248,250 158 0,192,192 159 2,163,165 160 1,118,119
161 239,239,239 Background color of the first and second levels in a subtotal row of a table.
162 231,231,231 Title font color of a message window. 163 231,231,214
164 222,222,222 Background color of the third level subtotal row. 165 229,215,189
166 214,214,198 167 222,214,198
168 200,200,200 Upper line (in separator line in dropdown menu). 169 192,192,192 Text color in an active window title bar.
170 189,182,173 171 199,187,165
172 189,189,173 Rollover of a drop-down menu item. 173 173,173,172
174 189,189,189 Toolbar background
176 187,184,20 177 173,181,189
178 196,196,196 Font color in a menu bar (regular state). 179 181,181,165
180 173,174,165 181 160,160,146
182 153,153,137 Grid lines of a table.
183 156,156,140 184 165,165,165 185 165,162,148 186 165,156,148 187 156,156,156 188 150,150,139 189 140,140,140 190 140,140,132 191 132,140,148 192 132,132,132 193 132,125,115
194 123,123,115 Buttons and Text color in an inactive window title bar.
195 115,117,107 196 115,115,115 197 115,115,107 198 107,105,99
199 99,99,99 Frame of disabled icon in the toolbar.
200 74,77,74 Label text color
201 82,82,74 202 66,66,66 203 20,20,20 204 0,0,0
5.4 Window Layout
Definition
Forms, usually referred to as windows in SAP Business One, are used to view and manipulate data using GUI controls such as fields, tables, command buttons, so on.
Note: there are other window types, such as the Main Window and Message Windows, which are discussed elsewhere in this document.
Window Shell
Every window consists of the following basic elements: • Title Bar
• Display Area (with the optional default placement of the OK and Cancel buttons)
The figure below shows a window shell with the default values for its width and height. The gray display area is provided for the insertion of additional control elements.
The background color of the window’s display area is Beige (RGB = 222, 223, 206).
Title Bar
The title bar contains the title of the window and standard window buttons and icons for: • Minimizing the window
• Maximizing the window • Closing the window
Note: Regular SAP Business One windows do not contain a menu bar. Only the Main Window has a menu bar, from which all application functions can be accessed. In addition, only the Main Window contains a tool bar.
Scroll Bars
In case the window size is too small to fit the window’s content (as a result of user’s selection of large font or resizing the window), Window’s scroll bars will be added to the display area. The window’s scroll bars look like the table’s scroll bars, but they have a different color:
Window Size
Default horizontal value for a window: • 518 pixels
Default vertical value for a window: • 373 pixels
Window proportions:
• The recommended window proportion is 4 (Width) x 3(Height). The height’s measurement is three quarters of the width’s measurement.
Maximum window sizing parameters: • 800 X 460 pixels.
It is recommended that windows should be resizable. Allow resizing when the user will benefit from a larger size. When the window contains a data table, resizing is essential, in order to let the user see more information. If the window contains only simple controls, resizing is less important. If the user resizes a window and closes the application, upon subsequent opening, the former
sizing parameters and former placement on the main window display automatically as the default.
Window Margins
• Within the display area, buttons and other elements positioned near the border should be places at least 5 pixels from the edge.
Positioning of Fields in the Window
• Fields should be placed in a window in a consistent way.
• Fields (or labels) should be aligned to a single reference line, whenever possible. The number of reference lines should be minimized.
Example: In the following window, the fields and labels are scattered. A red reference line is drawn where the eye meets an edge of an element:
• Rearranging the elements by slightly moving or resizing them, can significantly reduce the number of reference line, resulting in a much "cleaner“ window:
The number of fields within a window must be limited. There is no “golden number” of fields, but
consideration should be given to maintaining the space rules defined above. If the window is full, it should be divided into tabs, or sub-windows.
Tab Order
• The user should be able to move between fields using the TAB key (or Shift+TAB to move in the opposite order).
• The field order in the window is from left to right and from top to bottom.
• If the fields are organized in two columns, the TAB order is first from top-down in the left column, then from top-down in the second column.
Grouping Multiple Fields
Related fields should be grouped together. The following picture shows an example of related fields describing the following properties: code, name, foreign name, group, currency and Federal Tax ID.
All fields in a group must have the same width, and the width has to show the total length of the field value.
Note: A field must be long enough to display the pertinent value in any language. Fields, checkboxes, buttons, fields and other elements can be placed in groups.
To emphasize the relationship between fields, the vertical distance between them should be small. For fields within a group use a vertical spacing of 1 pixel.
For fields without any logical association, the vertical spacing must be larger. For these fields, define a vertical spacing of at least 3 pixels.
Each input field should have a label (static text field) on its left side to describe the corresponding field. This label should be placed as close as possible to the input field.
Note: The label must not be too close to the field to leave room for labels in other languages. The label must be long enough to display the pertinent text in any language.
Separating Field Groups
Field groups should be clearly separated. There are two ways to create field groups:
1. Leave Space Between Groups
The horizontal space between field groups should be at least 12 pixels.
The vertical space between field groups should be at least 16 pixels.
2. Dividing Line
A divider is a horizontal or vertical line used to divide the window into logical groups of fields.
Note: A dividing line is not recommended. Choose other grouping methods.
Visual specifications • White line, 1-pixel wide.
• A horizontal divider goes throughout the width of the window, leaving a space of 6 pixels on each side of the window.
Labeling a Group
Adding a label above a group of fields ties them into one logical unit. The label adds an explanation to the purpose of these groups.
Visual Specifications
• The label is written above the fields aligned to the field labels. • The label is underlined.
Group Box
A group box is a rectangle drawn around a group of fields, providing a visual indication that these fields are strongly related.
In addition, a group box has a label that explains the general meaning of the fields in the group.
Visual Specifications
• The group box is a rectangle, made of 1-pixel white lines.
• The group label is located inside the box, above the fields, left aligned with the labels of the fields. • The group label is underlined.
• The horizontal spacing between the box and the edge of the fields is 5-pixels. • The vertical spacing between the box and the edge of the fields is 5-pixels.
Note: Do not place a single group box alone in a window/tab page. Do not place a single table by itself within a group box.
5.5 Terminology
The following are general recommendations in choosing terminology throughout SAP Business One: • Use the same term consistently, so that the same item is always referred to in the same manner • Buttons and the Goto menu can have verbs, window names are descriptive and contain nouns and
adjectives
• When abbreviations are required, ensure that the abbreviation is correct and that the same abbreviation is used consistently
• Titles should be correct and contain as few words as possible. Since it is often difficult to shorten a title, ensure that the key words are present.
• Terms used should be consistent with SAP Terminology wherever possible
Note: It is highly recommended that you refer to the SAPTerm site, in order to get familiar with SAP terminology (http://sapterm.wdf.sap.corp:1080/scripts/wgate/TERM_SAPTERM/).
5.6 Labeling Conventions
Labeling refers to text names, titles, headings, descriptions, questions and prompts employed in all SAP Business One windows and elements. This section outlines labeling guidelines that should be observed. Each control should have a label that concisely describes the purpose of the control.
Some controls (such as Button, Check Box or Radio Button) contain the label within the control itself. Other controls (such as Field and List Box) have a label placed on the left side of the control. In this case, a white line is drawn under the label and connects it to the control:
Note: If the window is to be translated, the label length should be extended by 30% (over the English text length).
All field labels are written in dark gray (RGB = 74, 77, 74).
Capitalization
The following capitalization guidelines apply for labeling in English.
SAP Business One windows and elements utilize either Title Case or Sentence Case styles of capitalization.
Title Case
Title Case means that the first letter of each word is capitalized, except for certain small words. The chart below provides specific grammatical guidelines for capitalization usage for title case.
Example:
Use Title Case for the following: • Toolbar Tool Tips
• Menu option labels • Field labels
• Radio button labels • Table column/row headings
• Window area (without frame) headings • Window labels
• Pull-down menu labels • Button labels • Checkbox labels • Tabstrip labels
• Group box (framed) headings • Titles of reports and lists
• List box/drop-down list box labels
The following English labeling guidelines apply to windows and elements utilizing the Title Case: • Do not use punctuation at the end of a label.
• Use short, precise, clear wording and terms that can be easily understood by the user. For pull-down menus, use a minimal number of words.
• As translated text may require more space than the original language, provide extra space (30%) per label.
• On certain elements, such as menu options and buttons, disabled or unauthorized text has a different font color.
• Never formulate a label as a question.
• Use verbs to state actions and nouns to state the object on which the action is performed.
• Labels should be as self-explanatory as possible, but short. If a heading or title is too long to fit the space, edit it to include only the most important information.
Sentence Case
When using sentence case, only the first letter of the sentence or phrase is capitalized. All other words are written in low case, except for proper nouns.
Example:
Use sentence case for the following types of labeling:
• Messages and prompts (on windows and on the status bar). • Short descriptions and instructions on a window.
The following English labeling guidelines apply to windows and elements utilizing sentence case: • Use punctuation at the end of a label only if the instruction/description is long, for example, more than
one sentence.
• Do not use punctuation at the end of an incomplete sentence.
• Use short, precise, clear wording and terms that can be easily understood by the user.
• As translated text may require more space than the original language, provide extra space (30%) per label.
• Never formulate a label as a question, unless it is a prompt on a Question Message Window (such as, “Do you want to Save?”).
• Labels should be as self-explanatory as possible, but short. If a heading or title is too long to fit, edit it to include only the most important information.
5.7 Command Buttons
Button Positioning
• The main action buttons of a window are placed near the lower-left corner of the screen. This button group usually includes: OK/Cancel/Update/Add so on.
• Additional action buttons are located next to the bottom-right corner of the screen. • The buttons should be placed 5 pixels away from the edges of the window. • The distance between two buttons: 5 pixels.
Button Size
• All buttons throughout the system should have the height of 20 pixels.
• The length of the button should be long enough to leave space around the text. At least 10 pixels should be left on each side of the text. When calculating the button width, calculate 30% above the English text size, to leave room for translations.
• Button sizes should be consistent within a window. If two buttons are similar in size, make them equal.
Inactive buttons
• When a button is not available, due to a specific situation, this button should be disabled. For example, the Edit button is not available until an object is selected
• However, if a button is never available because the user is not authorized to use it, the button should be removed from the window.