Archive - Edition 0: Philosophy

back To Overview of Edition

EnjoySAP

Branding

Design

User Experience

 

SAP GUI Color Usage for Brand and Emotional Qualities

By Mark Rolston, Creative Director, frogdesign, inc. – April 2000

Disclaimer: Please note that this article was written in 2000. Therefore, statements in the articles, particularly those regarding SAP's products, product strategy, branding stratey, and organizational structure, are no longer valid.

Abstract

This document is designed to explain the reasons and benefits of introducing color into the SAP Enjoy design language. These reasons are associated with the concepts of usability, emotional quality and brand recognition in a design.

To date, software design efforts have been largely focused on engineering and raw usability aspects. Color has been very conservatively used to solve usability issues mainly due to technical limitations and the need to appeal to an audience with disparate color taste. This has resulted in an attitude where developers had simply opted out of sophisticated color use simply to avoid these issues. As well, very little effort has been spent on both the brand and emotional qualities of the software product. This has left software in a track of increasing usability without a parallel growth in visual quality that design elements, such as color, can greatly contribute to.

Color table

The opportunity to introduce sophisticated color qualities into the Enjoy design language was initiated by the arrival of a substantial customer audience who now have computers able to handle the higher processing demands of the new color techniques. Before this point, too many users in the SAP customer base, were running computers only able to run in 8-bit color mode (256 colors), or even worse, 4-bit color mode (16-colors). And, to a lesser degree, the older 486 and early Pentium PC systems are unable to handle the higher processing and memory demands the color techniques require.

Once we know we have surmounted the technical difficulties, there still remain other issues in bringing this idea to the screen. CRT and LCD monitors are inherently dissimilar in the accuracy in which they display chosen colors. This means that the color choices must be only selected as approximations and display successfully throughout the gamut of color imprecision. Also increasing our challenge, the design language is intended to proliferate across multiple computing platforms such as handheld formats and projected displays which introduce their own unique problems.

 

Color for Usability

Before the Enjoy initiative, screen elements were rendered within a grayscale color system and the design was constrained to only a few distinguishable grades of grey to use for visual semantics. As well, having limited usable palette, designs that use varying shades of grey can mistakenly imply semantic grades for the content they contain. This makes it especially difficult to define either-or situations on screen using color as the defining factor.

R/3 screens in typical windows GUI look

Color can be used to convey complex multi-dimensional systems (X & Y matrix). The hue is often used to define the semantic (the X) and the brightness of the hue can be used to define another secondary semantic (the Y). This technique is used throughout the new Enjoy design language.

In addition to these more explicit advantages inherent in the new color system, a more implicit set of improvements is created. The sum measurement of the new Enjoy design’s usability is greatly enhanced by the increased emotional pleasure that users get from operating the product. Simply put, if we can reasonably assume that well utilized color makes people happier just as any other positive environmental factor, effective color application onscreen will cause the user to more easily forgive difficulties they might have with complex operations.

 

Color for Emotional Quality

The Enjoy design recognizes the simple fact that the analog world is full of color. People are used to experiencing color in their lives. Why then, would we ever assume that users would be comfortable without color onscreen?

Simply knowing that the opportunity is there to introduce a rich color experience into software is only the first step. The next is to acknowledge the inherent challenges in bringing sophisticated color to the screen. Culture and personal taste create highly individual reactions to color on both a logical and emotional level. And, since the Enjoy language is a component level design, it rarely has the opportunity to explicitly address color relationships between objects. The number of unique screen iterations is infinite and therefore requires that each object’s colors be designed to work harmonically within a very wide range of situations.

Enlarged icons from R/3 system toolbat

With these constraints well understood, the Enjoy begins by dumping the tired grey base screen color found in Windows applications and replacing it with a two toned pastel hue. This hue is designed to have the same (or better) contrast ratio to the content displayed on it as the previous grey solution. The addition of the second hue allows for a clearer distinction between onscreen foreground and background regions. To allow for a variety of personal tastes, this two-toned base color system is user customizable with a constrained range of usability.

On top of this base color system, a narrow color palette is applied to the various controls to make functional and semantic distinctions. These colors choices are made by applying three basic measurements: Their compatibility with the persistent onscreen colors (base colors, brand elements, etc.), the semantic clarity of the color choice (red for alert, yellow for warning, etc.), and the designer's own esthetic judgement (which is not easy to document)

Lastly, a larger, esthetically derived color palette is created for the icons and other remaining elements. This palette is designed to work well alongside both the base colors and the various semantic color elements. This is achieved implicitly through esthetic judgements and explicitly in two ways: First, part of the icon palette is tied directly to the customizable hues of the base color system so they are always in sync. Secondly, many of the key colors in the icon palette are shared by the semantic color system. This creates an overall harmonic color impression.

 

Color for Brand

Just as the emotional qualities of color have very recently been introduced en-masse, so has the issue of implementing a clear brand identity in software. Traditionally, this idea has been restricted by a lack of screen real-estate and underwhelming color technologies. The only obvious and extensive onscreen software brands are expressed through web sites and the operating system appearance –ie. we can easily tell the difference between a Mac and Windows. Current web site examples do not demonstrate a successful formula because they rarely represent the sophisticated needs of complex applications. And, while the few popular operating systems demonstrate a clear brand identity for themselves, they represent a sort of anti-brand for applications since any application running on top of a particular OS takes on the appearance of that OS and therefore loses many of the key opportunities for establishing a unique identity. In addition, the SAP Enjoy language represents an immense suite of applications that together should dwarf the importance that any OS has on a user. In a sense, these operating systems become the insignificant wiring of the computer, and the branded Enjoy applications exist as the only conscious user experience.

In order to establish the SAP brand apart from competition as well as in a positive way in its own right the design utilizes extensive use of color. The onscreen evidence of color, mostly identified by the two base colors, becomes a very strong and easily identifiable brand quality. This is especially powerful in the current state of the software industry since few non-web applications use anything but grey. By this effect, just the very presence of color becomes a brand signature of the Enjoy design language. In support of the base colors, the color system of the SAP corporate identity is well represented onscreen through the large blue bar ending in an onscreen SAP logo.

R/3 screen with the new GUI design

The Enjoy language is designed not only to support its creator, SAP, but also to incorporate elements for the inclusion of the customer’s or the partner’s own branding needs. This is designed to imply a greater-sum value created by cooperation between SAP and the customer. The customer is able to add their own color system by adjusting the base color system of their users systems at install. By doing this, they can establish a default software brand appearance for their entire enterprise.

In conclusion, the SAP enjoy system is greatly enhanced by the inclusion of color usage to improve usability, emotional quality, and brand recognition. At its most obvious, just the use of color at all poses a dramatic change to the software landscape. And, even better, the sophisticated use of color sets this system apart from both the limited expressions of traditional applications as well as the lack of sophistication and flexibility present in current web applications.

 

top top