|SAP UI History|
|Short History of R/3 Icons|
|R/3 History in Screen Shots|
|SAP HTMLB Guidelines|
|SAP iView Guidelines|
|SAP Interaction Design Guide for Internet Application Components|
SAP's First Web Applications | Palo Alto Designs | SAP Retail Store | ESS and B2B Applications (frogdesign) | EWTs, IACs, Web GUI | HTML Business | Web GUI for R/3 | IACs – Second Round | MiniApps | HTMLB Library – iViews
By Gerd Waloszek, SAP User Experience, SAP AG – Updated: April 16, 2004
This page shows screen dumps that illustrate the history of SAP's Web applications.
Note: This overview does not cover the mySAP.com Workplace and portals.
SAP's first Web applications (version 3.1 G and H; work on the project started in 1996) were based on the ITS (Internet Transaction Server) in conjunction with an R/3 backend engine running the Web applications. That is, the ITS mediated between an R/3 system, which expected a standard GUI as frontend, and the browser frontend that used HTML pages for communicating with the users. Communication between frontend and backend was very similar to the PAI-PBO behavior of R/3.
Screens were initially developed with the R/3 Screen Painter and enhanced afterwards using so-called templates: The R/3 dynpro determined the initial screen elements and their positions on a page. Developers could then remove and rearrange elements, as well as add graphics and other gimmicks to the page template. Page templates were written in Business HTML, a SAP-proprietary macro language. This language offered loops and conditions and cared for the connection between dynpro and HTML page elements. The ITS converted Business HTML to plain HTML for the browsers.
The first graphic design, nicknamed "ides design" or "Pittsburgh Steel" (because of the colors), was created by Kai Vermehr, a Berlin-based graphic designer, who also designed SAP's first icons. A "construction set" was created that allowed graphic designers to produce custom headers and buttons. Web applications were typically composed of frames as shown in figure 1 below.
Figure 1: Look of a typical first-generation "ides" Web application screen (click image for larger version)
The second-generation Web applications were designed at SAP Labs, Palo Alto. There, also the major part of the ITS and the development environment, called Web Studio, was developed.
The first Palo Alto design (versions 3.1 I, 4.0 A and B) was nicknamed "Blue Stripe" because of the blue stripe to the left. It had the same, albeit improved technical basis and was demonstrated by mid 1997 at a SAPPHIRE to the public.
Figure 2: The "ides" Online Store screen from above converted to "blue stripe" design (SAPPHIRE, SAPCOE, 4.0 A - click image for larger version)
Below are more example screen examples, all as the previous based on frames:
Figure 3a-h: Web applications in the "blue stripe" design (click images for larger versions)
The design could be flexibly changed and adapted to the customers' needs. Here are two design studies:
Figure 4a-b: Two versions of the same Web application (initially in the "blue stripe" design - click images for larger versions)
The "blue stripe" design was followed by a more compact design – the last Web design before frogdesign came in at SAP. It corresponded to R/3 version 4.5A and appeared in 1998 (the first demo may have been earlier).
Figure 5a-d: Web applications in the 4.5 design - three Status of Procurement screens and one Purchase Order screen (bottom right) (preliminary screen dumps; click images for larger versions)
Like its predecessors, these Web applications could be flexibly adapted to the customers' needs and branding.
Figure 6a-b: Two Web applications with custom designs - the left screen is a custom design for the Online Store
Several SAP Web applications did not follow the mainstream designs and had designs of their own; the SAP Retail Store is one such example. Below you find some screens, the logon screen, the menu screen for the application suite, an initial screen for an application and an application work screen.
Figure 7a-d: SAP Retail Store screens – logon screen (top left), menu (top right), application entry screen (bottom left), application screen (bottom right) (click images for larger versions)
The first ESS applications started with a "Pittsburgh Steel" design. Later they adopted the 4.5A and 4.5B designs. With the Enjoy initiative, a major redesign was done; the graphic design was now created by frogdesign. Later, frogdesign also was involved in the design of Web applications based on HTML Business (see below).
Typical of this design – called 4.6A – are the bevels (3D separators) and a help area to the right.
Figure 8a-c: Evolution of an ESS screen from 4.5A to 4.5B and to 4.6A, which has the new ESS frogdesign look (click images for larger versions)
Figure 9a-d: ESS screens of different complexity in 4.6A look (click images for larger versions)
This design was also adopted by some application packages, such as the B2B application suite. The design changed slightly over time.
Figure 10a-b: SAP B2B Procurement application in two different versions (the original of the left image, probably an older version, is slightly distorted - click images for larger versions)
The Online Store, one of SAP's bread-and-butter Web applications, also appeared in a variation of this design:
Figure 11: The Online Store also appeared in the frogdesign look (click image for larger view)
In 1999 the Enjoy initiative shifted its focus from R/3 to Web applications. SAP decided to offer a bunch of new, easy-to-use Web applications - so-called Easy Web Transactions (EWTs). In order to achieve this goal, a new three-layered design strategy was adopted:
Figure 12: The three SAP types of Web applications in 1999 (click image for larger view)
In principle, all types of Web applications should initially look similar as if they belonged to the same application family. Applications based on flow logic, however, could be designed so that they no longer showed any resemblance to typical SAP Web applications. To demonstrate this capability, frogdesign created a prototypical furniture Web shop based on the SAP Online Store:
Figure 13a-b: Design studies by frogdesign for the SAP Online Store, a flow logic-based Web application (click images for larger versions)
Figure 14: Prototype by frogdesign for the SAP Online Store (click images for larger view)
HTML Business was developed in cooperation with frogdesign; it consisted of a library of screen elements that had a graphic design similar in spirit to the Enjoy GUI of R/3 – the motto was that all R/3 applications should look the same, regardless of their technology. The description of this library can be found in the SAP Business HTML Cookbook. There were two metrics, a larger one for usual Web applications, and a smaller one for the new miniApps, small applications, that reside together on a Web page (formerly called Workplace, now called a portal page).
Figure 15: Typical screen created with HTML Business (from Cookbook) in small metric (for miniApps – click image for larger view)
Figure 16a-b: HTML Business elements (from Cookbook) in normal metric (for IACs – click images for larger views)
Following the current market trends, SAP decided to offer the whole R/3 system in a Web browser frontend. This concept was the basis for the SAP Web GUI.
Figure 17a-b: R/3 application (left) rendered in the Web GUI as an ESS application (right) (click images for larger versions)
Figure 18: A simple application as it would appear in the Web GUI (click images for larger view)
In the course of the EWT project in 1999/2000 the EWTs were renamed to IACs, which had already been the name of SAP's first Web applications.
The user interface and interaction design of the IACs was described in the SAP Interaction Design Guide for Internet Application Components; the controls used were based on the HTML Business library.
Below are a few example screens from the IAC guidelines.
Figure 19a-b: An Address Data application (left) and a Quality Certificates application; see the "blue stripe" solution using three screens for comparison to the Address Data application (click images for larger versions)
The Web application initiative (EWTs/IACs) was followed by the mySAP.com Workplace project. Now the focus was no longer on isolated applications but on an electronic workplace tailored to the needs of a specific job role. A new application type was born, the so-called miniApps. These are small application snippets that reside together on a page and provide users with relevant information and services. More demanding task were still executed using IACs or R/3 applications.
See the now obsolete SAP MiniApp Guidelines for more examples.
Figure 20a-b: Typical MiniApps in small metric based on HTML Business (click images for larger versions)
In 2001/2002, the HTML Business library was replaced by a simpler design that uses hardly any graphic elements and makes extensive use of CSS-based rendering techniques. This new design has been "finalized" as HTMLB library. The library and its use are described in the SAP HTMLB Guidelines. Currently, HTMLB is mainly used for applications running in SAP's enterprise portal.
With the advent of the portal, miniApps were renamed to iViews and their metric enlarged. The first iViews used a preliminary version of HTMLB that is presented in the SAP iView Guidelines for Java. There are only minor visual differences between this first version and the "finalized" HTMLB-based examples shown below. See the current SAP iView Guidelines for details.
Figure 21a-b: The same iViews using HTMLB (click images for larger versions)