 |
|
|
SAP UI History
Overviews
- SAP UI History
- R/3 History in Screen Shots
- Short History of SAP's Web Applications
- Short History of R/3 Icons
Branding
- The History of Product Branding at SAP
- Extending a Software Brand Language Across the Vendor, the Customer, and the User
- Creating the SAP Product Language
UI Patterns
- Software Design with User Interface Patterns: Centered on the User
- Introduction to User Interface Patterns at SAP
- User Interface Patterns • Components for User Interfaces
See also...
Links & More
 |
Print version |
Related Links |
|
 |
SAP UI History |
|
Short History of SAP's Web Applications |
|
R/3 History in Screen Shots |
Background Links |
|
 |
SAP R/3 Icons |
|
SAP R/3 Icon Style Guide |
Short History of R/3 Icons
By Gerd Waloszek, SAP User Experience, SAP AG - Updated: January 8, 2009
Placement of Icons in R/3 | How the Icon Look Changed | Examples | Icons in Web Applications | Symbol Font SAP Dings
This page presents a short history of R/3 icons at SAP AG. It also offers some information on the usage of icons with old-new comparisons, and shows the symbol font SAPDings.
Placement of Icons in R/3
Icons have been introduced in SAP R/3 version 2.1 (1994) for the standard toolbar and version 3.0 for the application toolbar and pushbuttons (1995/6). Icons can be used in three locations in R/3:
- In the standard (or system) toolbar
- In the application toolbar and
- On buttons that can be freely positioned on the screen.
In addition, icons can appear in dialog boxes, either as notification icons, on pushbuttons in the box itself, or on pushbuttons in a toolbar.
How the Icon Look Changed
The following figure shows for a selection of icons how the look of the R/3 icons changed during the development of the icon concept and guidelines. The final icons in the bottom row were designed by Berlin designer Kai Vermehr and his coworkers.
Figure 1: Early stages in R/3 icon design – the bottom row shows the final design
With the Enjoy release (version 4.6), the R/3 icons were redesigned and given a "softer" look. The redesign was done by frogdesign, but Kai Vermehr still participated in the icon design. The icons in figure 2 are in the same order as in figure 1.
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
Figure 2: R/3 icons in the Enjoy look, which is the current design; the bottom row shows icons that appear on pushbuttons and in dialog boxes, while the first four icons in the top row appear solely in the standard toolbar
Initially, R/3 icons were designed in two sizes (the larger size is shown in figure 1); later only the smaller size (16*15) was used (see figure 2).
Examples
In the following, we present examples from R/3 guidelines, which allow to compare the look between versions 3.0 and 4.6, the Enjoy release. Where possible, we will later include examples from version 4.0, which introduced flat buttons. As a result, icons looked less "button-like" in toolbars.
Icons in the Standard Toolbar
The standard toolbar provides system-wide functions, such as Exit, Save and Print. It is held constant for the whole R/3 system and located directly below the window title bar.
Figure 3: Standard toolbar in R/3 version 3.0
Figure 4: Standard toolbar in R/3 version 4.6
Icons in the Application Toolbar
The application toolbar provides application-specific functions and is different for each R/3 application. It is located below the standard toolbar.
Figure 5: Application toolbar in R/3 version 3.0
Figure 6: Application toolbar in R/3 version 4.6
Icons on the Screen
Icons on the screen are related to certain interface objects, such as fields, groups, or tabstrip views.
Group-Related Buttons
Figure 7: Icons on buttons for group-related functions in R/3 version 3.0
Figure 8: Icons on buttons for group-related functions in R/3 version 4.6
Initial Screens
Figure 9: Icons on buttons on an initial screen in R/3 version 3.0
Figure 10: Icons on buttons on an initial screen in R/3 version 4.6
Tables
Figure 11: Icons on buttons for table-related functions in R/3 version 3.0
Figure 12: Icons on buttons for table-related functions in R/3 version 4.6
Icons in Dialog Boxes
System Prompts
Figure 13: Icons on buttons in system prompt for version 3.0
Figure 14: Icons on buttons in system prompt for version 4.6
Toolbar in Dialog Box
Figure 15: Icons on toolbar buttons in dialog box for version 3.0
Figure 16: Icons on toolbar buttons in dialog box for version 4.6
Complex Dialog Box
Figure 17: Icons on toolbar and freely-positioned buttons in complex dialog box for version 3.0
Figure 18: Icons on toolbar and freely-positioned buttons in complex dialog box for version 4.6
Icons in Web Applications
The guidelines for SAP's Web application (IACs) and iViews prohibit the use of icons, except for status icons. Nonetheless, certain icons are used in these applications, for example, icons that belong to the portal framework.
Figure 19: Alert iView with status icons and portal framework icons (top right)
Symbol Font SAPDings
For the use in ABAP lists, a symbol font named SAPDings had been developed for R/3 version 2.1. The final font design was created by Linotype. This font is no longer used.
Figure 20: SAP's symbol font SAPDings
