Modular and Systematic Interface Design for Rich Internet Applications

Modular and Systematic Interface Design for Rich Internet Applications

Gustavo Rossi (UNLP and Conicet, Argentina), Matias Urbieta (UNLP and Conicet, Argentina) and Jeronimo Ginzburg (FCEyN - UBA, Argentina)
DOI: 10.4018/978-1-60566-384-5.ch004
OnDemand PDF Download:
List Price: $37.50


In this chapter, we present a design approach for the interface of rich Internet applications, that is, those Web applications in which the conventional hypermedia paradigm has been improved with rich interaction styles. Our approach combines well-known techniques for advanced separation of concerns such as aspect-oriented software design, with the object oriented hypermedia design method (OOHDM) design model allowing to express in a high level way the structure and behaviours of the user interface as oblivious compositions of simpler interface atoms. Using simple illustrative examples we present the rationale of our approach, its core stages and the way it is integrated into the OOHDM. Some implementation issues are finally analyzed.
Chapter Preview


One of the key issues of the Web 2.0 is the emergence of new possibilities to improve the usability of Web software; in this chapter we focus on the interface of those Web applications which exhibit advanced interaction features. Designing the interface of these rich internet applications (RIAs from now on) is difficult as they must cleverly combine hypermedia-like interfaces as in “conventional” Web software (therefore using navigation as the main interaction style), with the interface functionality we find in desktop applications with drag and drop, information pop-up and other diverse interface effects. To make matters worse, these applications must also deal with a myriad of functional or non functional concerns which might be persistent or volatile (i.e. be active for short periods of time).

RIAs evolve even faster than the “old” Web applications because designers are quickly learning how to improve the typical hypertext-like functionality with richer interface behaviours and new “patterns” of improvement arise everyday (“Ajax Patterns”, 2008). As a consequence this permanent “beta” state of RIA complicates things further: new interface widgets or interaction styles are constantly introduced, checked to assess users’ acceptance and further considered core components or eliminated. This fact can be faced with many different strategies which are just being evaluated in the community. The most relevant ones are the following:

  • Design the new RIA from scratch and eventually make the “old” and the new applications co-exist. This is the case of Yahoo mail in which users can either use the conventional Web mail or switch to the new desktop-like mail.

  • A variant of the previous alternative is to use the old design models and wrap it with RIA functionality by consuming the information of existing databases from the new interface. This is the approach proposed by the RUX model (Linaje, 2007).

  • Incrementally improve the interface functionality with small design changes in such a way that RIA functionality is seamlessly introduced without changing the overall application style. This strategy has been chosen for example by and recently formalized in (Rossi, 2006).

Figure 1 shows an example of a product index in Amazon both in hypertext and in RIA styles. While the index in Figure 1 a follows the classical hypertext behaviour (scroll to find an item, click on the item and navigate to its page), the one in Figure 1 b has incorporated two classical RIA behaviours: first scrolling is emulated in a page area, and second it is possible to see the product information as a pop-up therefore improving the use of screen space.

Figure 1.

a) a simple index, and b) a RIA-based index

However, independently of the chosen approach, there is a need to specify the interface behaviour of the RIA in such a way that the stakeholders can easily understand the intended behaviour of each interface object and the impact it has on other objects. A good design approach should additionally recognize the need to support seamless evolution as discussed above.

In this work we describe a novel approach for specifying the interface of RIA, which is based on an extension of the Abstract Data Views (ADV) design model (Cowan, 1995), used in the Object-Oriented Hypermedia Design Method (OOHDM). After presenting the basic concepts of our approach, we show how interaction functionalities corresponding to different application concerns can be specified separately, and then put to work together either by using object-oriented composition or aspect-like weaving. We demonstrate how a wise separation of design concerns can help us to improve the application’s evolution.

Key Terms in this Chapter

OOHDM: Object Oriented Hypermedia Design Method is a method for the development of Web applications which consists of five activities, requirements gathering, conceptual design, navigational design, abstract interface design and implementation

Separation of Concerns: The ability to identify, encapsulate and manipulate those software artifacts which are relevant to a specific concept, task or purpose

Crosscutting Concern: A concern that affects other concerns. These kinds of concerns often cannot be cleanly decomposed from the rest of the system in both the design and implementation.

User Interface Pattern: A general and reusable solution for recurrent user interface design problems.

Volatile Functionality: A kind of functionality that is presented in an application during a short period of time.

ADV (Abstract Data View): A model which allows specifying the structure of interface objects and their relationships with other software components. The behavioural aspects of the interface are specified using ADV-charts, which are a variant of StateCharts

Complete Chapter List

Search this Book: