SAP’s Visual Design Vision and Mission
By Esther Blankenship, SAP User Experience, SAP AG – August 6, 2008
Vision
The vision of the SAP User Experience – Visual Design team is to extend the SAP brand to the user interface and bring retail quality experience to our software. We aim to make the product attractive and desirable by rooting the visual design in the tradition of product design excellence.
Mission
Our mission is to visually communicate the behavior and information required for meaningful and successful user interaction as well as leverage new technologies and innovative concepts to involve users on an emotional level in the experience of using our software.
Design Strategy and Product Design Principles
To achieve the goals of the mission, a new software design strategy based on a set of design principles has been established. All software design principles are derived from SAP’s global brand strategy, incorporating business requirements and the opportunities provided by new technologies.
The SAP product design principles are:
- Sophistication - Follow a clear design vision. Make sure that the details consistently support the vision.
- Desirability - Establish a premium quality of beautiful design. Maintain the highest possible standard.
- Simplicity - Organize for productivity. Make it easy to use.
- Subtlety - Don’t be loud or let the design eclipse content or function.
- Seriousness - Be visually clear and not too playful.
- Continuity - Maintain established design conventions and evolve carefully. Build upon the strengths of the past.
- Innovation - Leverage new technologies to support the vision. Use visual design to solve problems. Remain visionary.
Key to the visual design strategy is to apply the individual design principles appropriately, depending on the realm in which they are used. The following grid summarizes the application of design principles to the various product realms.
Shell Elements
“form follows emotion”
The shell is more flexible in its visual expression than are the layouts and UI controls and can be leveraged to visually differentiate individual products. The shell is the place where we strive to reach the user on an emotional level. Although this area supports context management of users’ tasks, it does not interfere with the canvas area, where users do their work. Evolution and innovation on the shell level can be leveraged to establish leadership in “designed” user experiences.
The shell elements are:
- main navigation
- welcome area
- masthead
- status/message areas
- application titles
- global functions (search, personalize, etc.)
- logo area
- auxiliary areas (help, etc.)
- menu bar
Layouts
“floor plans and patterns”
Floor plans and patterns are standardized, simple solutions to common business application problems.
Floor plans and patterns provide:
- behavioral and graphical descriptions of reusable patterns
- a solution for recurring interaction design problems
- a standard for hierarchical depiction of data relationships
- higher-level patterns that support lower-level pattern groupings
- a geometric language (both textual and visual) that is predictable
UI Controls
“form follows function”
UI controls are the backbone of our software and must offer a stable environment for users. The UI controls are reused throughout the SAP product family. They transport the core software design values and must be maintained and evolved carefully. The lifecycle of UI controls is different from that of the shell design. Changing them too often would cost considerable resources, is time consuming and could be confusing to users. Therefore, they should not undergo change unless it helps to solve a design problem. Their visual expression is more subtle and sensory qualities are of a lesser relevance. They make up the area where users work and therefore require stability and continuity. UI controls follow a visual interaction grammar in order to support the end user with a coherent interaction model.
Peripherals
Peripheral elements are standardized in order to unify the experience of working with all of SAP’s products. The style of the peripherals should be created once and then applied consistently. Within this established style, there is room to address the individual product needs.
Peripherals include:
- desktop Icons
- welcome screens
- splash screens
- about boxes
- logon screens
- wizards dialog boxes
- documentation pictograms and graphical illustrations
Elements of Design
The three elements that combine to create the design experience within the SAP UI visual design standard are:
Sensory Qualities: dimension – depth of field – shape – color – material & texture – gravity – light & shadow – effect of time – audio/visual feedback – environmental effects (reflection, refraction, etc.) – movement
Typography: size – emphasis – style – hierarchy – line spacing – alignment
Layout: alignment – scale – white space – relationship harmony – hierarchy – proportions – position – balance – information density – grouping and containment
Of these three elements, sensory qualities are the key differentiator driving the design vision. Sensory qualities are visual cues that transform the digital world, making it resemble the analog world in which people are inherently more comfortable.
Individual Product Identity & a Coherent SAP User Experience
By adapting the Signature design to the shell requirements of each product, we allow individual product lines to express their identity and specific context management requirements without compromising a coherent, overall aesthetic. Consistent layouts, UI controls and peripheral style strengthen the product brand and further unify the user experience throughout all product lines.
Note: credits for the SAP visual design strategy are extended to the small team of design visionaries and strategists who collaborated on these concepts: Peer Hilgers and Leif Jensen-Pistorius from the SAP User Experience department as well as Peter Eckert from projekt202 in Austin, Texas.
