Andreas Müller, Peter Forbrig, Clemens Cap

{xray,pforbrig}@informatik.uni-rostock.de

Modern information and communication systems have to present their application logic on different devices with different capabilities. A banking software should for instance provide a HTML-based user interface for a web-based usage of the service as well as WAP-based mobile communication service. It should also be possible to use the system by special automata (bancomat) usually installed in the buildings of a bank.

Our model-based approach TADEUS [3] is based on user, task and business-object models. It allows the computer based development of interactive systems. The three models are the basis for the development of the application logic and the user interface design. Figure1 represents the main relations between different models.

Fig. 1. Model-Based User Interface Design

This approach allows a reuse of the designed models apart from final representations. To have a flexible development process from an abstract interaction model to a specific representation there was the idea to use the XML technology [9] for representation and transformation features.

There are already some approaches to specify user interfaces by markup languages. There is for instance UIML [1] a XML-based language for describing user interfaces. It comes with different rendering programs allowing the generation of user interfaces on different platforms. Up to now the generation for WML, Java AWT and swing are available.

A special renderer for each target-device is needed. This is an important disadvantage The flexibility for selecting target-device features is limited because of a lack of a mapping concept.

XUL has its focus on window-based graphical user interfaces by XML. Its disadvantage is the limitation to such graphical user interfaces. It is not applicable to interfaces of small mobile devices.

There is no abstraction of interaction functionality available. The device-independent specification of user interfaces was not planned.

A user interface is considered as a simplified version of the MVC model and is separated into a model component and a presentation component.

The model component describes the feature of the user interface on an abstract level. It is also called abstract interaction model.

The user-interface objects with their representation are specified in the presentation component. During the development a mapping transforming the abstract interaction model to the specific interaction model is necessary. TADEUS use a term representation of both models. The transformation process is described by attribute grammars. For different platforms different grammars are necessary. The development of such grammars for different mobile devices is time consuming. It would be good to have more support for the transformation process. Especially the integration of the specific features of different devices is difficult. A general support would be appreciated.

The XML technology [9] offers such an opportunity. It allows the description of the abstract interaction model, the description of specific characteristics of different devices and the specification of the transformation process, which will be shown later.

User, tasks and object models are a good starting point for developing a user interface but it is not necessary to specify them explicitly. Let us have a look at a model of the transformation process forming an abstract interaction model to a specific user interface:

Fig. 2. Creation of a User Interface

Following requirements should be fulfilled by a markup language specifying user interfaces:

• device independence,
• flexibility in representing user interfaces depending on the contexts,
• ability to specify virtual and physical [14] user interfaces,
• localisation,
• extensibility of abstractions (abstract UIO’s describing interaction behaviour),
• extensibility of concrete UIO’s (UIO’s of specific representations),

The following paragraphs will show a specific way of using XML in the proposed manner. The example of an e-shop will be used to show the principles of this approach. The transformation from an abstract specification to a concrete user interfaces will be shown. If the reader wants to get a visual impression of the shop he may have a look at the example in figure 3.

The abstract interaction model is transformed into a notation which is based on a language of the XML family. The basic document type definition (DTD) for an example has the following form:

Now lets have a look at an example of a simple user interface of a little e-shop system:

Because of a lack of space only a few attributes are mentioned here. But it seems to be clear how such a specification looks like.

A universal description language for describing properties of various target devices in abstract and comparable matter is necessary to support the transformation process from an abstract interaction model to a device dependent abstract interaction model. Based on [16] such a language was developed. Specifications written in this language are XML documents describing the specific features of devices. Let us have a look at the corresponded DTD.

The specifications are not only necessary for this transformation they influence the specification of formatting rules as well.

Following example shows a very short fragment of a device definition of java.AWT:

This file is specific according to a target device and includes all typical design properties of concrete UIO's like colour, position, size etc. It is a collection of option-value pairs where the content of the values specified later on in the design process and describes a "skeleton" of a representation of a specific user interface. The user interface is designed on the basis of this skeleton during the following design process by designers or ergonomics.

Our simple example of an e-shop system mapped as a HTML-representation looks like follow:

The same user interface mapped as a java.AWT looks like introduced in the next example:

We demonstrate the HTML and java.AWT dependent generation. The wml-example is omitted because of its similarity to the HTML document.

The creation of the XSL-based model description is based on the knowledge of available UIO’s for specific representations. It is necessary to know which values of properties of a UIO are available in the given context. The XML-based device dependent abstract interaction model (skeleton) and available values of properties are used to create a XSL-based model description specifying a complete user interface. The HTML-based e-shop example looks like follow:

The wildcard "content-input" shall symbolise a content handling from applications or databases in a later step of development.

By XSL transformation a file describing a specific user interface will be generated. Examples for java.AWT and HTML are given in [1]. Unpublished WML examples were developed as well.

The XSL transformation process consists of two sub-processes:

1. Creation of a specific file representing the user interface (WML, VoiceXML, HTML, Java... ) and
2. Integration of content (data base, application) into the user interface.

The generated model is already a specification runable on the target platform. It is constructed by a transformation process which uses the device dependent abstract interaction model as input, which is coded in XML.

There are two different cases. The user interface is generated once like for java.AWT or it has to be generated dynamically several times like for WML. In the first case there is no need for a new generation of the user interface if the contents changes. The content handling is handled within the generated description file.

In the second case the content will be handled by instructions within the XSL-based model description. Each modification of the contents results in a new generation of the generated description file.

The current work includes the specification of XML-based languages describing different abstraction of a user interface for mobile devices. A concept for the mapping process from abstract UIO's to concrete UIO's was developed. A XML language was developed which allows the specification of the features of the user interface of mobile devices. The transformation process of the user interface is based on specifications written in this language. In an interactive design process based on an abstract device dependent abstract interaction model and some design rules a more refined xsl-description of the user interfaces is developed, which allows the generation of specific user interfaces.

This concept is already evaluated by several examples. A tool supporting the mapping and design process is under development. A first prototype is already available, which delivers already promising results. Up to now this tool is not integrated in previous phases of the design process. The abstract interaction model has to be edited manually. This will be omitted in the near future.

Our experiments show that XML is a promising technology for the platform independent generation of user interfaces.

Further studies will demonstrate whether dialogue sequences of already developed applications can be integrated into the design process. Such patterns of already developed user interfaces could extremely enhance the development process. The most important results of this research will be the way to find and to integrate such patterns.

1. Abrams, M. et al.: UIML Tutorial. http://www.harmonia.com
2. Benyon, D., Green, T., Bental, D.: Conceptual Modelling for User Interface Development. Springer, 1999
3. Elwert, T., Schlungbaum, E.: Modelling and Generation of Graphical User Interfaces in the TADEUS Approach , In: P. Palanque, R. Bastide (Eds.): Designing, Specification, and Verification of Interactive Systems. Wien, Springer, 1995, S. 193-208.
4. Foley, J.D.: History, Results and Bibliography of the User Interface Design Environment (UIDE), an Early Model-based Systems for User Interface Design and Implementation, in Proc. of DSV-IS’94, Carrara, 8-10 June 1994, pages 3-14.
5. Forbrig, P.: Task- and Object-Oriented Development of Interactive Systems: How many models are necessary ?, DSVIS'99, Braga, Portugal.
6. Forbrig, P., Stary, C.: "From Task to Dialog: How Many and What Kind of Models do Developers Need ?" CHI Workshop "From Task to Dialogue: Task-Based User Interface Design", 1998, Los Angeles.
7. Galitz, W.: Essential Guide to UI-Design. Wiley, 1997
8. Gamma, E., et al.: Design Patterns. Addison-Wesley, 1995
9. Goldfarb, C.F., Prescod, P.: XML-Handbook, Prentice Hall, 1999
10. Harrison , M.D.; J.C. Torres (Eds.): Proceedings of the 4th Eurographics Workshop on Design, Specification and Verification of Interactive Systems, University of Granada, p. 427-440, 1997.
11. Johnson, P.; Wilson, S.: Bridging the Generation Gap: From Work Tasks to User Interface Design, in [1].
12. Makopoulos, P., Johnson, P. (eds): Design, Specification and Verification of Interactive Systems ’98, Springer-Verlag, Wien New York, 1998.
13. Markus, A., Smilonich, N., Thompson, L.: The Cross-GUI-Handbook. Addison-Wesley, 1995
14. Müller, A.: Spezifikation von Benutzerschnittstellen durch eine XML-basierte Markup-Sprache. Rostocker Informatik-Berichte 25, 2001
15. Müller, A., Forbrig, P., Cap, C.: Using XML for Model-based User Interface Design. CHI2001-Workshop "Transforming the UI for anyone anywhere", Seattle, 2001
16. Mundt, T.: Geraetedefinitionssprache DEVDEF. http://wwwtec.informatik.uni-rostock.de /IuK/gk/thm/devdef/
17. Paternò, F.: Model-Based Design and Evaluation of Interactive Applications. Springer, 2000
18. Szekely, P., Luo, P., Neches, R. Beyond Interface Builders: Model-Based Interface Tools, in Proc. INTERCHI'93 Human Factors in Computing Systems, ACM/IFIP, 1993, pp. 383-390.
19. Wilson, S., Johnson, P.: Bridging the Generation Gap: From Work Tasks to User Interface Design, in Proc. of CADUI’96, Namur, Belgium, 5-7 June 96, pp. 77-94.