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

Screen with a header and a footer

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.

Screen with a footer used for options

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.

Edit fields

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").

List Box

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.

Example of a pick list

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.

Buttons with reference to a hard key

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.

Back and OK Buttons

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 top

Source:  SAP Style Guide for Blue-Collar Worker PDAs