Visual Design for Business Software

By Esther Blankenship, SAP User Experience, SAP AG – August 6, 2008

The SAP User Experience – Visual Design team is proud to present a brand new visual design for SAP products. Designed and developed in Walldorf, Germany by our in-house design team, the new Signature design is a milestone in product design at SAP and in the business software industry.

But maybe you are asking yourself, what is visual design for business software? Is it usability? Is it layouting? Is it Web design? Is it graphic design? The answer is a little bit of all of the above as well as a whole lot more. At the most fundamental level, the SAP User Experience – Visual Design team specifies the fonts, colors, shapes, paddings and dynamic behavior of user interface (UI) elements such as buttons, icons, charts, navigational areas, splash screens and so forth that, when put together, make up our software.

Generally speaking, these generic UI controls are assembled to make up what we call the canvas area. Designing the library of UI controls constitutes the core of our work and is what makes visual designers at SAP more like industrial designers than graphic designers (although the final product of our work is purely electronic, not plastic or steel). I say “industrial design” because our main job is to design the visual form of a modular and dynamic system of user interface elements that are already in use in thousands of applications and that will be used in future products as well. Once the UI controls are designed and implemented, interaction designers, solution managers and developers choose, configure and arrange them into individual screens. The resulting software solutions enable our customers to better run their business.

 

An example of the Signature design, here for SAP Business ByDesign

Figure 1: An example of the Signature design, here for SAP Business ByDesign (click here for a lager image)

When we are creating a brand new software product, for example SAP Business ByDesign, the visual design team works closely with interaction designers and developers to craft a custom area around the canvas, what we call “the shell.” The shell contains such things as the product header, logo and main navigation areas. Unlike the controls in the canvas area, the shell is not generic. Its overall geometry and layout are relatively static, lending the product a certain visual continuity irrespective of the application running in it. In contrast to creating a theme for an existing product, as long as the product is new, there is a degree of design flexibility in the shell area which allows us to give the user an optimal visual experience.

Together, the shell and the canvas areas make up the application screen

Figure 2: Together, the shell and the canvas areas make up the application screen (click here for a lager image)

Through the creative and thoughtful usage of color, dimensionality, shape, imagery and interactivity, the visual design gives our software its most basic outward appearance. The visual aspects establish the emotional tone of our products. By using the means available to us as designers, we can make the same configuration of elements on the screen look serious or playful, classical or modern, sophisticated or casual, and, of course, attractive or ugly. We also have a responsibility to ensure the usability of the visuals we choose. Light gray text on a white background might look really cool, but if only people with 20/20 vision can read it, it’s definitely a bad design choice for our software. We hope we have made the right choices here and that users will find the Signature design both pleasing and usable. We believe it is the best visual design SAP has ever produced as well as the best visual design for business software on the market today.

 

Closely related articles:

 

To top top