|Introduction to User Interface Patterns at SAP|
|User Interface Patterns: Components For User Interfaces|
|UI Patterns and Techniques (Jennifer Tidwell)|
|The Interaction Design Patterns Page (Tom Ericson)|
By Annette Stotz and Udo Arend, SAP AG – April 26, 2010
In this case study we reflect on how a UI pattern-based design for building standard business software affects the user experience and the user-centered design process. We learned that pattern-based design does not optimize the user experience per se. Additional factors, such as user-centered design, prototyping tools, and management support determine the success or failure of the pattern-based approach. Interweaving the factors in the right way is a prerequisite for success.
The user experience of large business software packages such as SAP R/3, developed in the early 90s, was mainly driven forward by applying UI style guides and conducting extensive usability tests. The major drawback of such packages was that every UI screen had to be developed from scratch using traditional development tools such as menu or screen painters. This approach entailed many problems, such as ensuring consistency across business scenarios and in screen quality, and therefore resulted in high production costs.
When you develop business software, you need to cover a huge number of business scenarios and use cases. Thousands of different screens need to be designed and implemented.
Starting in 2001, we re-engineered hundreds of R/3 screens with the goal of identifying generic and re-occurring UI components. We based our approach on the ideas of Christopher Alexander  and developed a generic UI pattern model [2, 3]:
Figure 1: UI Pattern Model
What did we expect from the usage of UI patterns?
With regard to the development process for large enterprise applications, we expected patterns to significantly reduce production costs. Once a UI pattern has been developed, it can be used within any screen. It only needs to be configured according to the business scenario, thus simplifying and accelerating the development process.
With regard to user experience, we expected the use of UI patterns to result in highly consistent screen layouts throughout all business scenarios in the software package. We also expected navigation between screens to be consistent. Assuming that every pattern is optimized with respect to usability criteria, the overall user experience should be optimized.
We applied a UI pattern-based approach for SAP Business ByDesign (ByD). ByD is a complete, on-demand business solution for small and midsized companies. It covers the core business processes and best practices for professional services, consulting, manufacturing, wholesale distribution, and much more.
What is special about ByD and why do we refer to this software package?
Based on the knowledge and experience gained from earlier business software packages, we created a vision of a completely new interaction paradigm: Our major goal was to provide a working environment that enables business users to focus on monitoring business processes and react to process exceptions. Because users no longer need to focus on repetitive data-entry tasks, they can use the system more efficiently. Before a single line of code was written, we developed a sophisticated UI concept based entirely on UI patterns .
You may have doubts about whether UI patterns that are designed in advance in a rational and top-down approach will allow user interface (UI) designers to be creative and to build applications that ensure user efficiency, effectiveness, and satisfaction.
We applied a user-centered design process that started with outside-in research, such as market and competitor analysis and site visits to small and medium sized companies to find out how users work on a daily basis.
We created about 4,000 mockup screens (prototypes) and tested them with approximately 3,500 business users in China, Germany, the United States, and India - before actual development work began. User feedback was integrated into the mockups. We also enhanced the layout and behavior of the underlying patterns before they were implemented.
After the mockups and patterns were developed, we again conducted usability tests and fed the results back to development to improve business processes and patterns. Because we had decided to separate the implementation of business processes from the implementation of patterns, we could easily and quickly refine business processes and patterns independently of each other. The iterative activities (prototyping, validation, implementation, testing) were aimed at guaranteeing an optimized user experience.
Our pattern-based approach also caters for business scenarios in which the available patterns do not suit the users’ needs. To allow the necessary flexibility, additional freestyle UI elements were designed and implemented. These can be seamlessly plugged into the pattern-based screens. However, because they needed to be developed from scratch, the time and resource effort required to build them was much greater.
Stepping into some of the details, we would like to describe the screen structure . In ByD, we defined generic UI patterns such as object work lists, contextual navigation, identification region, forms, tables, and so on. Each pattern serves a specific function. For example, the object work list shows all the objects that the user is responsible for, such as sales orders. The user can search for objects, select an object, and view or work on the object. Another example is the identification region, which shows the most important object information and thus helps the user identify an object quickly. A third example is contextual navigation, which allows the user to switch between the different views of a work center.
From the available patterns, the user interface designer chooses the ones that the user needs to fulfill his or her task and composes a floor plan. Floor plans correspond to a screen in ByD. The example in Figure 2 shows a floor plan that contains the following patterns: an identification region, two forms, and a table.
Figure 2 : Patterns and Floor Plans
In ByD, we use about 30 patterns and six floor plans.
First of all, pattern-based UI design must be driven by top management, because it has an impact on people, processes, and technology. Without management support, it is impossible to change the mindsets of the people involved.
Second, it is vital to document the patterns and their usage, the navigation concept, best practices, and good examples in a UI style guide. This enables everyone involved – UI designers, solution managers, technical authors, and developers – to gain a common understanding of the design principles and to apply patterns and floor plans in the same way.Third, we also learned that implementing the UI style guide into the design and development tool is a prerequisite for ensuring a consistent UI and for increasing the productivity of UI designers and developers. Here lies a major risk of the pattern approach. The design and development tools need to provide all the UI elements (patterns, floor plans) with
a complete set of allowed attributes for each UI element. The degrees of freedom for the UI designer must not exceed the rules described in the style guide. Otherwise consistency will be lost.
Overall, you need to ensure that the pattern library is large enough to provide sufficient flexibility in designing the business scenarios. UI validations with end-users proved that most of the UIs can be realized using standardized UI patterns. But patterns are not applicable everywhere: You therefore need a fallback solution for dealing with cases in which the available patterns do not cover a business process. Thus, you need a plug-in that allows for freestyle programming. The plug-in needs to fit smoothly into the surrounding patterns.
You also need to bear in mind that the consolidation of requirements to optimize UI patterns is challenging and requires iterations. Patterns need to be tested extensively, because any flaw becomes noticeable on every screen that uses the pattern.
Finally, we would like to point out that it is worth investing in pattern-based and user-centered design. It makes software development more efficient and supports the role and visibility of UI designers in an organization. The feedback we are getting from our customers with respect to user experience is outstanding.