Pushbuttons Pushbuttons

Pushbuttons in the Application Toolbar

The application toolbar contains functions that are specific for an application. It provides a convenient access to these functions with the mouse. The application toolbar is located directly below the standard toolbar.

Figure 1: The application toolbar is located below the standard toolbar

Guidelines

  • Try to display all functions as pushbuttons that are important for a task. To fit them into the toolbar, use appropriate abbreviations or icons.
  • Put only functions into the application toolbar that apply to the whole screen. Present functions that apply to special fields or groups of fields on the screen as pushbuttons directly on the screen.
  • Self-defined function keys are important for the application, but usually refer to less known functions. Display them in the application toolbar, because they are harder to learn and to remember. They should be presented visually to the user as a reminder.
  • Furthermore, you can display navigation functions for changing the hierarchy level of a task in the application toolbar.

Icons on Pushbuttons in the Application Toolbar

If an icon is available for a function, include the icon in the pushbutton either with or without text label.

 

Figure 2: Example for functions with icons in the application toolbar

You assign an icon to a function that is positioned in one of the toolbars in the Menu Painter. The Menu Painter assists you and makes suggestions for icons. However, you should check these suggestions, before you assign an icon to a function.

Generally, most icons on pushbuttons should be used without a text label. In addition, use them only for the suggested meanings in order to not confuse the user. Avoid puzzles, that is, do not combine icons and text to form new concepts. This may only be acceptable for standard functions like Display, Delete, Print, Header, Overview etc. that the users know well or where the icons aid in classifying functions.

Icons without Textual Label

The following functions use icons without a textual label:

  • Execute, Find, Replace, Copy, Delete, Sort, Total
  • On detail screens: Previous entry (item, record), Next entry (item, record)
  • With screen sequences: Previous <object component/screen>, Next <object/component/screen>
  • With reports or hierarchies: Expand, Collapse, Previous/Next hierarchy level
  • With editing objects: Other <object>, Create, Change, Display, Display <-> Change
  • For selections: Select all, Deselect all, Select Block
  • Additional Functions (not yet standardized): Compare, Filter, Rename, Find (next), Transport, Export, Import

Icons with Textual Label

If there is enough room, you can include icons with a textual label for special functions such as Refresh, Convert, Skip, or Retrieve. Add text to the icon, when the icon only classifies the class and a description is required to understand the full meaning of the function.

Check if the pushbutton can be positioned next to the object in the work area. Include only icons for application-wide functions in the application toolbar.

Order of Pushbuttons in the Application Toolbar

Try to observe the following order of pushbuttons in the application toolbar:

  1. If applicable: icons for the functions Previous screen/Next screen and then Previous <object component>/Next <object component> (or item)
  2. Icon for the function Choose=F2
  3. Pushbuttons with icons alone
  4. Pushbuttons with icons and text labels
  5. Pushbuttons with text labels alone
  6. If applicable: less important functions with any of these presentation forms

Try to present application-wide used functions with icon alone, that is, to put them into group 3.

If in doubt, an aesthetically pleasing overall impression decides if the icons should have a text label or not.

Icons on Pushbuttons in the Application Toolbar of Dialogue Boxes

Pushbuttons in the application toolbar of dialogue boxes can have icons, too. The following guidelines apply to pushbuttons with icons in dialogue boxes. They apply also to dialogue boxes without an application toolbar.

 

Figure 3: Example of pushbuttons with icons in the application toolbar of a dialog box

There are icons reserved for functions in dialogue boxes like the icons for the functions OK, Cancel and Print. All other functions use their standard icons.

Guidelines for Pushbuttons with Icons in Dialogue Boxes

  • The default key (ENTER): In general, the ENTER key is only assigned the checkmark icon for the functions OK, Continue, Close or Execute.
    When the Choose and/or the Configure functions are assigned to the ENTER key you should use the icon with a text label, for example "ICON_OKAY" plus text "Choose". For specific functions on the ENTER key such as Delete, Check, Refresh or Find use the checkmark icon plus text.
  • Cancel: Cancel is only assigned an icon.
  • Other functions: If there is enough room, add text to the icon. Otherwise use an icon without a text label.
  • Exceptions: If the dialogue box displays text only (for example, confirmation prompts), you should use an icon with a textual label. Message dialogues do not have icons on the pushbuttons.
  • Sequence: ENTER - dialogue box specific pushbuttons - Cancel

Position pushbuttons which have an icon but no text directly behind the ENTER button. All other buttons or icons follow.

 

 top top

Source:  SAP R/3 Style Guide