Like many companies, your organization has probably seen several evolutions of its enterprise applications — from green screens in back offices, to PCs in front offices, to Web browsers in home offices. The newest generations can even show up on mobile devices or be embedded into other applications, such as email.
As the user interfaces (UIs) of applications have evolved, so have the practices SAP follows to make the user experience more intuitive and effective. This installment of “The User Experience” explores the new SAP Signature Design — what it looks like, how it harmonizes the user experience, and how it evolves users’ expectations for today’s enterprise software.
Software design revolutions have enormous impact. So as SAP introduces a new look and feel for its core business application UIs — SAP Signature Design — it is with great care and great purpose. Tens of thousands of SAP software screens used by tens of millions of end users will ultimately be affected — and for the better (see sidebar).
In developing the new UI, SAP user experience experts applied many design and business skills, considered many ideas, and made many decisions (see sidebar). The result is a design that’s intuitive for end users, that standardizes layouts and behaviors for activity screens across SAP products, and that fosters a more productive and efficient working environment. Let’s take a tour.
Main Elements of the Design
The driving intention behind SAP Signature Design was to give the UI a very real, physical, and clean look to engage users on a more emotional level, and to make them feel at ease as they work in a virtual environment. As users become more comfortable with the software and realize how practical and useful it is, their productivity is bound to increase. The intuitive, easy-to-use interface is inviting to users, and the design empowers them to have a strong sense of control over their work.
Here are a few highlights of the concepts, thoughts, and planning that went into the visual design that now shapes the overall look and feel for users (see Figure 1):
- The two main physical materials chosen as the basis for the design are white porcelain and brushed blue metal. These combine to deliver the contrasts between light and dark, sharp and rounded, as well as the perceived thickness and feel of the materials the user is looking at.
- A blue metal “clasp” (1) wraps around the white porcelain surface (2), holding it in place. This design element gives the user the perception that his or her control over content and navigation is always in the foreground. A white arrowhead (3) on the left side of the screen collapses the sidebar clasp to offer a full-screen working environment. The combination of the white porcelain surface and the blue metal clasp give the impression of a slate or tablet a user can “hold.”
- Navigation icons (4) at the top of the screen allow users to easily see and access work centers. The arrowheads (5) in the top right of the screen help users browse through these navigation icons.
- The SAP logo (6) is integrated into the screen in the same way that a logo would be placed on a consumer device such as a mobile phone.
||An example of the main SAP Signature Design screen, here SAP Business ByDesign running in SAP NetWeaver Business Client
Screen Structure and Content
A primary design principle for the new UI was simplicity — organizing the interface for increased productivity and ease of use. This is clear when you look at the overall screen structure, as well as individual screen elements such as UI controls. For example:
- The design of the outer shape of a window signals the distinct task type of that screen — similar to how the shape of traffic signs conditions drivers to subconsciously recognize their message (see Figure 2). Compare, for example, the design of a main window (where users are presented with information to consume) with the design of an application window (where users perform transactional work, such as filling in forms).
- Screens are delivered within a consistent “shell” environment that welcomes users, allows them to navigate, shows them where they are in their work process, provides global functions such as search, and delivers messages (see Figure 3).
- Within the canvas, standardized UI controls have been redesigned to promote a consistent and user-friendly presentation of data types such as entry fields, selection lists, and action buttons.
- The style of peripheral UI elements, such as desktop icons, welcome screens, login screens, and splash screens, have been included in the design.
- Sensory qualities, typography, and layout are included in the design specifications to ensure the right use of depth, textures, spacing, sizing, and balance.
||The shape and visual qualities of the window signal the task for that screen
||A screen consists of the shell and the canvas
SAP Signature Design provides a familiar environment that spans different applications. Of course, the content shown on a user’s screen varies by application, but by having a consistent look — standardizing how the screens work and how the data is organized — a user’s tasks become more intuitive. This consistency eases the user experience as a person moves from task to task or application to application. And the design features ensure that the user experiences the simplicity, seriousness, sophistication, and desirability that have been “designed into” the interface.
As users increasingly wear multiple hats and need to access applications from across the traditional silos of the enterprise in order to manage a business process, they need the most attractive, intuitive UI possible. The new SAP Signature Design is more than just a pretty face — it fosters a more productive, consistent working environment in which users can quickly feel at home in new applications.
For more information on SAP Signature Design, visit www.sapdesignguild.org/resources/visualdesign_bus.asp and https://www.sdn.sap.com/irj/sdn/sap-gui?rid=/webcontent/uuid/f0b33a02-8e97-2b10-18a7-8803a86e4dec.
Andrew Cabanski-Dunning (firstname.lastname@example.org) is the Director of Marketing for SAP NetWeaver user interface technologies. Andrew has 20 years of experience in enterprise applications, and for the last 10 years he has focused on portal, collaboration, information management, and mobile solutions. Prior to joining SAP, Andrew worked at leading companies including American Express and Intel.
Esther Blankenship is currently a User Experience Evangelist at SAP AG, advocating the importance of design in business software. Since joining SAP AG in 1998, Esther has dedicated most of her time to user interface design, including several years as the manager of the SAP User Experience — Visual Design team, during which time SAP Signature Design was created and first implemented into SAP products.