|An Introduction to Designing User Interface Controls at SAP|
|Reinvigorating the SAP Brand|
|Visual Design for Business Software|
|Edition 6: Branding|
By Esther Blankenship, SAP User Experience, SAP AG – November 19, 2004 • Original article (Edition 8)
The SAP Product Design Center (PDC) is dedicated to ensuring a consistent user interface throughout the SAP product family. Our primary activities can be divided into two main categories, the first is visual and the second is technical. The visual design encompasses both somewhat subjective emotional aspects as well as more objective usability aspects. The technical work of our team brings the controls into a library of development building blocks, provides accessibility features, and allows our customers flexibility to rebrand our products with their own corporate identity.
Broadly speaking, the visual design encompasses the definition, promotion and evolution of the SAP brand. Product branding is what makes SAP software visually unique. In this process, the colors and forms of user interface controls (buttons, tabstrips, navigational areas, tables, etc.) that are the basic building blocks for our software are defined. The visual design has two main aspects, one is a usability aspect and the other is an emotional aspect. The emotional aspects involve creating a unique product brand, one that differentiates SAP software from that of other vendors and one that creates a pleasant and effective working environment for our customers. These emotional aspects must also visually support the SAP brand values of reliability, trustworthiness, business-mindedness, and innovation. The usability aspects of visual design are primarily concerned with factors that help the user quickly and effectively process information on the screen. Examples of this are legibility; the emphasis of important areas through means such as color, size and contrast; the visual representation of relationships among screen areas; and the usage of colors and forms which draw enough attention to themselves without being overly distracting. Additionally, SAP interfaces must also support users with special visual requirements. For example, symbols and semantic colors used for alerting must be unambiguously recognizable, even for "color blind" users. This reduces the possibility of misinterpretation and error, which in turn saves time and costs. Users with sight impairments require very strong light-dark contrast in order to read text and recognize screen elements. They can switch to special accessibility themes, called "High-contrast" themes, which render screens in a few very strong colors and contain little or no gradations of colors. Additionally, the PDC must ensure that these generic elements, or user interface controls, all work together visually in an almost infinite combination on thousands upon thousands of screens. Because the SAP product offering is growing all the time and new features are required to meet the needs of our users, defining the SAP product language is a continuous process. In this aim, the PDC often works together with world famous designers like Hartmut Esslinger and his frog design team.
The technical work of our team focuses on the abstract definition of each control using a technology called Unified Rendering. This technical description defines a description syntax and language for SAP framework technologies (e.g. Web Dynpro) so that they can use the controls and be up to date with all enhancements. The Unified Rendering description of controls also includes important definitions for accessibility as well as for rebranding our software with the Theme Editor. There are three different ways in which we support accessibility: keyboard navigation definitions, support for screen readers and the high contrast themes described earlier. Together they enable users with different kinds of disabilities to work with our business software. For keyboard navigation and screen reader support, we work together with other groups to ensure that the behavior is as similar as it can be despite technical differences. Allowing our customers to rebrand SAP software to meet their own corporate identity needs is another important aspect of our work. In a way, it is a bridge between the PDC's technical and design work. In order to achieve this flexibility, SAP offers the Theme Editor to our customers. The Theme Editor is a web-based, WYSIWYG tool which runs in the Portal. Our customers can use this tool to change the branding relevant UI controls of our software. For each element, a preview is displayed and the design parameters that influence this element are shown. The user can change the values of these parameters and can immediately see the changes in the preview and therefore can easily check the results. The PDC creates the previews for the Theme Editor and selects the design parameters that are exposed to our customers. Customers do not change the style sheets but instead the design parameters that are used to generate the style sheets. The advantage is that fewer values have to be adapted and the changes are safe even when customers update their SAP software.