Buttons

General Statements on Buttons and Links | Placement of Buttons | Standard Buttons vs. Emphasized Buttons | Go Button in Shuffler and Data Selections

General Statements on Buttons and Links

Use buttons only for few and very important functions in an iView. As buttons are visually dominant and rows of buttons hardly appear attractive, links should be favored to buttons. Links can also be used for calling functions - they are not restricted to navigational purposes. They must not be used for the final action in an iView; because of their optical weight and their visual dominance, buttons qualify for this purpose. See Links vs. Buttons on page Texts, Lists, Links for a more detailed discussion of using links vs. buttons).

The word(s) on a button or a link begin with a capital letter (exception: when a link is embedded within normal text). Pressing the Enter key activates the default function (mostly, but not necessarily, identical to the emphasized button's function).

Use three dots or the ellipsis character ("...") on buttons, but not on links, to indicate that the command needs further information to execute. Usually the user is presented a dialog to fill in the missing information.

Choose the button's function description carefully; try to be as explicit as possible (while keeping in mind the limited space inside an iView). For complex interactions, use verb-noun combinations, e.g. "Search Database". If the context is clear, i.e. if the action can only be applied to one object, it is sufficient to use a single verb as the button's label ("Search"). For shufflers and comparable elements, you can also use a simple "Go" (see below).

 

Placement of Buttons

Figure 1: Placement of buttons in an iView; iView-related buttons can be placed in the same row as the graphic-related buttons, if space is sparse. There is only one emphasized button in an iView

Buttons Related to Objects

Place buttons or links related to objects like fields, field groups dropdown lists etc. next to the object and to the right of them.

Example: The Go button of the shuffler is located right to the filter elements.

Buttons for Tables, Charts and Graphics (Complex Objects)

Place buttons or links related to tables, charts, or graphics, that is complex objects, left aligned below the table. Place the default button (emphasized) to the left, if there is one.

Buttons Related to the iView as a Whole

Place buttons related to the iView as a whole to the bottom left of the iView.

If there are object-related (table-related or chart/graphics-related) buttons, you may place these buttons into the same row. Use the following order in this case:

  • iView-related buttons,
  • separating space,
  • object-related buttons

See figure 1 for this a demonstration of this solution.

Reasoning: Placing object-related and iView-related buttons into one row is allowed because vertical space is at a premium in iViews.

Emphasized Button

If the emphasized button (see below) is a member of a button group, it is the leftmost button in this group (not shown).

 

Standard Buttons vs. Emphasized Buttons

By default iViews use "standard" pushbuttons. In addition, there is an "emphasized" button available, which is visually more dominant.

Figure 2: Standard button (bottom) vs. emphasized button (top)

An emphasized button indicates an action that

  • is performed with high probability,
  • is of high importance, or
  • has significant (yet nondestructive) consequences.

It is the emphasized button through which the central action in an iView is activated.

The concept of an emphasized button has been developed for Web applications (IACs). For iViews the following changes or restrictions have been put forward:

  • Emphasized buttons should be used only sparsely.
  • At maximum one button in an iView should be emphasized.
  • If there are only subordinate functions (table functions, preferences) in an iView, no button should be emphasized.
  • If there is only one button in an iView, it should be emphasized, if the corresponding action fulfills the above-mentioned criteria, that is, if the action is of high importance or has significant consequences.
  • Pressing the Enter key should activate the emphasized button's function.

Example: The Go button in a shuffler has to be emphasized if it is important, even if it is the only button in an iView.

Do not use emphasized buttons for the following functions:

  • Personalize (this function is offered in the tray title)
  • Refresh

 

Button in Shuffler and Data Selections

The button in shufflers for starting the data filtering process is labeled Go (Starten in German).

Figure 3: The button in the shuffler is labeled Go

 

top top

Source:  SAP iView Guidelines