Layout and User Interface Elements
Page | Header | Footer
| Input Fields | List Boxes |
Pick Lists | Buttons |
Other controls
Page
Required
- Maximum: 240x265 pix., including application header and footer
- Background color: White
Recommended
- Keep the layout as simple as possible to avoid problems associated
with supporting different types of devices.
Prohibited
- Displaying a company logo on pages other than the Start page is not
allowed. This is customizable within the UMC (UI Modification Concept).
- The use of multiple windows (awt.Frame) on the display is not allowed,
because when a screen is placed in the background, users will not be
able bring it back to the front.
Header
An application header can be used for the application title if the OS
title bar is already busy.
Required
- Header text: White, 13, bold
- Header background: Black
- Capitalize the first letter of each word

Figure 1: Header and Footer
Recommended
- Try to use the OS Title bar if possible for the application title.
Use the application header only if an additional label is required.
- Avoid using the header for information related to the user interface,
such as "Menu" or "Detail Information".
Footer
The footer is primarily used to indicate status messages. When not used
for the footer, the area can display additional options, as shown in
Figure 2.

Figure 2: Using the footer area for additional options.
Success Messages
- Background color: Green #AACDA1
- Prefix: "Success:"
Error Messages
- Background color: Red #F66767
- Text color: White
- Font: Bold
- Prefix: "Error:"
- Audible "beep" sound
Input Fields
A standard input field appears as a rectangle with a thin gray inset
border and a white background. Once an input field gets the focus (becomes
active) the background color will change to black and the text will appear
in white.

Figure 3: Example of Input fields
Required
- Place input fields and their associated labels on the same row.
- Align input field labels to the left.
- Provide a wildcard.
- For mandatory input fields, the field should be marked with an asterisk,
aligned one space prior to the input field, as shown in Figure 3.
Recommended
- Only use text entry fields if it is not possible to prompt or supply
answers with different means.
Prohibited
- Do not use a colon in edit fields labels.
List Boxes
In a list box, the position of a selected item is displayed in a list
counter ("n of N").

Figure 4: Example of a list box
Required
- Colors:
- Background: white
- Text: black or for color displays, reverse of the standard system
font
- Selected items: text color changes to white and background changes
to black
- Column title:
- Provide a title for each column.
- Font: Bold
- Set a default item
- Align the list counter to the right
Recommended
If there are not enough space display additional columns, the additional
information should be displayed on the calling screen (for axample, the
detail page of an item).
Pick Lists
A pick list utilizes two text fields instead of a list box: a two-character
text input field to the left of a longer text output (or disabled input)
field, aligned horizontally. The left text field displays the two-character
code for the selected item from the invisible list. The second box displays
the value of the item. The user selects an item from the list by entering
the two-character code in the left input field. This control supports
an alternative navigation method in which a user sets the focus to the
right text field and uses the right and left arrow keys to scroll through
items.

Figure 5: Example of a Pick List
Recommended
- Use the pick list in situations where there is a small list of options
whose entry values can be remembered by the user.
Buttons
Event handlers should be device independent, allowing users to activate
buttons by using the touch screen or a physical keyboard (or other supported
devices). The workflow (the result of pressing a button or invoking the
corresponding action by a physical key) is customizable within the modification
concept.. Buttons styles are set to the system
default.

Figure 6: Buttons with reference to a hard key
Required
- Background color: Gray
- Label: Black
- Size:
- Height: Use consistent height throughout the application.
- Width: equal to or greater than 70 pix
- Minimum space between buttons:15 pix
- Label:
- Provide a number or a letter, which references a physical key
on the device.
- Labels buttons clearly so that users easily understand what action
will be invoked.
- Label buttons with only one action or destination so that
the interface is very simple. For example, use only "Back"
instead of "Back - Main Menu" and use use "Back"
instead of "Back-Search Again".
- Avoid redondancies. For example, use "Search instead of "Search-Show
Results".
- Consistently assign functionality to hard keys. For example, assign
"OK" to the Enter key and "Cancel" to the Escape
key. If the default action can be more specific than OK, use a more
specific label, keep the same location and association with the Enter
key. For example, use Find instead of OK and associate this key to the
Enter hard key. computer users expect the default action to be associated
with the Enter key.
- The Back button should be aligned to the left of the screen, and the
Next button or its equivalent (OK, Search, etc.) should be right aligned
on the same row.

Figure 7: Back and OK buttons
Recommended
- Place the most frequently accessed controls
near the bottom of the page. Horizontally, you should arrange buttons
so that the most important is on the left.
- Use consistent placement (do not move buttons
from one screen to the next).
- Provide only the buttons that are useful to
complete the task at hand. Don't try to fit too many buttons,
either in a single row or too manu rows.
Other Controls
Checkboxes, selection lists (combo boxes) and radio buttons should not
be used do to accessibility issues.
top
Source: SAP
Style Guide for Blue-Collar Worker PDAs
|