=Paper=
{{Paper
|id=Vol-445/paper-11
|storemode=property
|title=Web User Interface Generation for Multiple Platforms
|pdfUrl=https://ceur-ws.org/Vol-445/02icwe2008ws-iwwost11-martinez-ruiz.pdf
|volume=Vol-445
|dblpUrl=https://dblp.org/rec/conf/icwe/Martinez-RuizVA08
}}
==Web User Interface Generation for Multiple Platforms==
https://ceur-ws.org/Vol-445/02icwe2008ws-iwwost11-martinez-ruiz.pdf
ICWE 2008 Workshops, 7th Int. Workshop on Web-Oriented Software Technologies – IWWOST 2008
Web User Interface Generation for Multiple Platforms
Francisco J. Martínez-Ruiz1, Jean Vanderdonckt1, Jaime Muñoz Arteaga2
1
Université catholique de Louvain, Louvain School of Management
Place des Doyens, 1 – B-1348 Louvain-la-Neuve, Belgium
2
Universidad Autónoma de Aguascalientes, Centro de Ciencias Básicas.
Av. Universidad 940, CP. 20100, Aguascalientes, Mexico
martinez@isys.ucl.ac.be, jean.vanderdonckt@uclouvain.be, jmunozar@correo.uaa.mx
Abstract (SPA) [17]. In this kind of web applications, the behavior
and content of a single web page is changed though dy-
In order to produce Web User Interfaces tailored for namic modifications of the Document Object Model
multiple platforms. This paper introduces an algorithm for (DOM) that represents the web page. That is, SPAs need
semi-automated generation of user interface containers to deal with container structures which are dynamically
based on a task model. User interface containers are first transiting from visible/focused to invisible/unfocused
derived from the configuration of a task model and then status. For instance, there are many item-grouping librar-
refined according to parameters characterizing user and ies in the GUI world (e.g. Java layout managers). These
computing platform. In this way, it is possible to render libraries follow a general schema that we depicted in
container structures for user interfaces in a specific lan- fig. 1: First, we have a frontier-component that serves as
guage and platform. a foundation canvas for the application. Second, an unde-
fined number of containment elements following an initial
1. Introduction order of presentation. They are ordered but they can be
presented to the user in a rotation of states from visi-
The design of User Interfaces involves a process of ble/available to invisible/non available.
gathering tasks (i.e. they are used as building blocks in
order to describe the goal pursuit by the software applica-
tion). Task hierarchies are abstract representations. There-
fore, they are translated into more physical structures. The
arrangement of these structures is not a trivial process in
most of the cases. Applications are distributed over a cer-
tain number of containment structures due to temporal,
spatial and cognitive load limitations. Instead of reducing Figure 1. An example of the layers.
these constraints to mere boundaries is possible to extract
relevant information that could guide our designing proc- The rest of this paper is organized as follows: Section 2
ess. For instance, if the container generation is aware of discuss the state of the art in the creation of containers.
platform requirements in early stages of development, Section 3 introduces some theory in Task models and
then it could prevent the rupture of related task groups (or model driven engineering domains. Then Section 4 covers
the gathering or unrelated ones). In this paper we tackle the description of our method. And finally section 5 pre-
these problems taking into account the semantic informa- sents conclusions and future work.
tion coming from a neutral description of the UI, applying
a set of rules based on heuristic knowledge of the relation- 2. State of the art
ship between operators and the introduction of a metric for
weighting abstract containment structures. The difficulties that arise when you design containers
The design of a UI in the Web domain implies the divi- include: First, how to solve the problem of distribution the
sion of the application into Web pages. Each one covers UI over the available physical space since the size of the
some tasks of the application. However, the page meta- view is finite and as a consequence (in the non trivial UIs)
phor is moving to the Single Page Application approach we have to divide the UI in multiple views, this issue is
63
ICWE 2008 Workshops, 7th Int. Workshop on Web-Oriented Software Technologies – IWWOST 2008
treated in [1, 4, 8]. Also this perspective tries to solve the 3. Model Driven Engineering Approach
container problem in terms of available space (i.e., geo-
metrical constraints [15, 21] or more general restric- Our methodology is supported by a Model driven engi-
tions [12]); the nature of the problem is NP-complex [8]. neering approach (http://www.omg.org/). We are going to
Second, how to determinate the acceptable frontier points present its core elements: the CAMELEON frame-
that should be respected to create a coherent hierarchy of work [22], UsiXML [20] and the CTT task model [13].
views. This process requires more knowledge (over the
simple layout structure that is treated as proposed in [9, 3.1 CAMELEON Framework
10, 14] but with limitations in the recovery of information
over the physical restrictions) to avoid grouping unrelated The design of UIs using a model based approach that
elements or breaking groups. The place to get this infor- includes features as Multi-level abstraction and Modality
mation in the following papers is a meta-description of the independence [16] requires the use of a framework to deal
UI that is built in terms of a set of tasks: a task model. In with the complexity of the process. We are using the
[3, 5, 13, 20] is created a hierarchy of widgets to define in CAMELEON framework [22]. This framework divides
a device independent way the UI and use a bottom-up the development process in four successive levels of ab-
algorithm that is based in the condition of “splittable” or straction: Task and concepts (T&D), Abstract User Inter-
not of the nodes (The nodes of the tree can be labeled as face (AUI), Concrete User Interface (CUI) and Final User
splittable or un-splittable) and from there looking for the Interface (FUI). The UI is represented in the User Inter-
highest ancestor of the node and the resultant sub tree is face Description Language, UsiXML (UsiXML which
marked as a page. Nevertheless, the process does not in- stands for User Interface eXtensible Markup Language).
clude temporal information from the task model and the This language provides the representation of the UI in the
division point is defined in a fixed way. In [18] the idea of four levels of the framework, in a design independent way
using the task model is explored but in this case the tem- and over multiple contexts e.g., Character, vocal and
poral operators are key elements to provide information of Graphical User Interfaces among others.
how divide and create the containers. The task model is
traversed in a Breadth-first search and through a set or 3.2 CTT-based task models
principles proposes the way of reducing the UI from the
less constrained platform to display it in devices with The Concur Task Tree model (CTT) is a well known
fewer capabilities in a process called “graceful degrada- technique in Computer-Human Interaction to model an
tion”. In order to create the containers in [19] again the application in an independent platform way. The task
starting point is the task model and the relationship be- model of UsiXML is implemented through CTTs. The
tween tasks is extracted from the information enclosed in objective of this model is to explain the work that the user
the domain model besides the identification of tasks re- pursuits as a hierarchy of tasks where each task is decom-
lated to fulfill user goal and supplementary tasks. In [13] posed until arriving to basic tasks. The description below
temporal operators are used to propose a presentation is very brief and a more detail description could be found
where tasks that should be enabled at the same time are in [13]. The sibling tasks (denoted as T) are related to
grouped in two sets: first and body. Here, the relevance of each other through the following binary and unary opera-
the so called first action is over-valuated while in the pro- tors: Concurrent Operators: These operators imply that T1
posed algorithm the weighting metrics are based on more and T2 are performed in any order, in a concurrent order:
parameters (specifically, task types and operators besides |=|, ||| and |[]|. Sequential operators: [>, |>, >> and []>>
the inclusion of the knowledge of the allowed deepness of these operators imply a strict sequence in the order of exe-
hierarchies in a specific technology). The last container cution of the tasks. Selection operator: [] exclusive choice
generation method is part of [20] which does not worry between T1 and T2. The unary operators include: The
for space constraint because is oriented to discover and Optional operator [T] that implies the dispensable nature
use the relationship between tasks and subtasks to create of some tasks. The Iterative operator T* that gives the
device-independent UIs. Also, there is work developed in model the faculty of describing cycles.
this area focusing the problem as an optimization task [2,
6, 7] in our proposal we are using some heuristics based in 4. Method outline
the notion of strong repercussion of the temporal operators
that are used, this is also present in [13, 20]. This paper The following section describes the proposed method
proposes as solution in the next section: a model-based to generate Web UI containers. Before going any further,
approach in order to create a feasible mapping between we have to introduce some concepts: A level is a set of
the finite layers and the task decomposition [13, 18, 19]. tasks recovered by an exploration of all nodes adjacent to
the current task node in a breadth-first search. The root by
64
ICWE 2008 Workshops, 7th Int. Workshop on Web-Oriented Software Technologies – IWWOST 2008
definition is the first level. Also we have to define the After that the procedure is repeated. The anchor node is
concept of layer which is a set conformed by each con- relocated and the climbing restarts until it reaches the root
tainment element that belongs to the same parent container node. The final product is a sub-tree called from now on:
e.g. in the right side of Fig. 1 are shown a UI with four virtual container (VC). A formal description of the algo-
layers. rithm is presented in Fig. 5.
In order to clarify the explanation a case study is pre- The definition of layers is done in terms of heuristic
sented (see Fig. 2). A sub-tree will be updated after each notions. Most of platforms do not impose a fixed nor static
step of the method. number of layers then we have to define an approximated
value. For instance, in Fig. 4 the possible number of layers
of four devices is presented as a guide to the designer.
Next we present the result for the case of three layers in
Fig. 6 (in this case the procedure delivers four containers).
Figure 2. Task Tree Model of Bookmark manager.
4.1 Recovery of sub trees
The first step is the identification of levels (see Fig. 3). Figure 4. Features of four platforms.
The case study includes eight levels (according to the
given definition). Then sub-trees are created using as pa-
rameter the number of layers acceptable in the target plat-
form. The procedure is as follows. The algorithm starts
a bottom-up climbing of the tree searching the parent node
at the nth layer. The starting point, called anchor node (see
Fig. 3a) is the deepest and the most left positioned leaf
node (in order to respect any possible sequence operator).
Figure 5. Algorithm for generating Virtual
Containers.
4.2 The generation of the internal structure
The second step is the evaluation of the internal structure of each
container. This in turn provides us with the required information
to generate the hierarchy of inner containers. This process is
based on the generation of abstract containers [20] and we have
to remember that the root task since is an inner node is marked
as container not as a work to do (for instance, get or retrieve
a value). Now in order to reduce the complexity of the process
we are going to mark each level as a set of inner nodes if any
sibling is a branch parent (e.g. Fig. 7, sections 7a and 7b are
inner nodes), otherwise they are marked as leaves (see Fig. 7c).
Then (1) is applied to each set of nodes (for instance Figs. 7a
Figure 3. Levels and first anchor of task tree (a). to 7c).
65
ICWE 2008 Workshops, 7th Int. Workshop on Web-Oriented Software Technologies – IWWOST 2008
process of propagation of the control widgets e.g. the
“close task” that is member of the first container (Fig. 6a).
Figure 8. Example of application of G(n).
Figure 6. Virtual Containers generated.
Figure 9: The process of generating containers.
Figure 7. A simplified version of a VC (Fig. 6d).
Let I and L denote the sets of inner and leafs nodes, re-
spectively. Let op denote the operator set formed by {C, F,
and S} Where C is the set of all concurrent operators. F is
the Selection operator and S is the set of sequential opera-
tors. Let T denote the analyzed task set. Finally, let n de-
note the amount of generated containers.
⎧B(n) ∪0 ← T ∈ I ∧ op∈C
⎪ 0 ← T ∈ L ∧ op∈C
⎪
⎪ n ← T ∈ I ∧ op∈ F
G(n) = ⎨ (1)
1 ← T ∈ L ∧ op∈ F
⎪
⎪ n ← T ∈ I ∧ op∈ S
⎪
⎩ 0 ← T ∈ L ∧ op∈ S
Without the presence of any restriction the number of Figure 10. A configuration with 6 container
configurations to generate is equivalent to the problem of units (C1).
location of elements in a set of boxes (see Bell numbers This task should be available in all the UI then it should
algorithm). For instance, the hypothetical VC from Fig. 8a be propagated. The process is straightforward: the task is
with three concurrent tasks (A, B and C) has six possible integrated to each children container (see Fig. 10a). It is
containment configurations according to (1). This process important to remember that inner nodes as ChangeBMDe-
is presented as a formal algorithm in Fig. 9. tails in Fig. 10b are removed but her name should be
Now consider the VC (Fig. 6d) of the case study and in propagated in their children containers (e.g, container 10c
this situation is possible to deliver three configurations could be named ChangeBMDetails.showBMParameters in
(see Figs. 10, 11 and 12). Another point of interest is the order to preserve information of the task hierarchy).
66
ICWE 2008 Workshops, 7th Int. Workshop on Web-Oriented Software Technologies – IWWOST 2008
4.3 Choosing the configuration
After the generation of the container structures comes
a weighting process, based on the values of table 1. Once
again the process involves exploiting semantic informa-
tion (now from task types and operators).
Fig. 13. Cost of each container in updateBM VC.
Now, we have to present to the designer the most suit-
able configuration and for that we are going to use a clas-
sic metric, the weighted average. Then, the configurations
Figure 11. A configuration with 4 containers (C2). with lower cost are presented to the user. The weights are
related with the number of layers that previously we have
defined as constraint of the VC containers. Finally, ac-
cording to the result of table 2 we should suggest our
user/designer the configuration C2 (Fig. 11). The process
of transformation from task model to AUI is out of the
scope of this paper since it is discussed in [3, 20].
4.4 Navigational tasks
The method at this point could deliver three AUIs con-
nected with navigation elements. For instance, the way of
connected the UIs could be seen more clearly in the prob-
lem of the fragmentation of the sub tree depicted in Fig.
6e, there the task Update is a sub task of an upper tree
besides it is the root node of other container. Then, the
approach taken to resolve this situation is the introduction
in the upper container of a navigation component pointing
Figure 12. A configuration with 5 containers (C3). to the lower one. A fundamental consideration is the fact
that the proposed method (for the moment) is not looking
Then we count all the exposed items of the container optimization. Instead of that it wants to provide the de-
(leaf task and operators) using a breadth-first walk while signer with plausible scenarios.
the inner containers would be seen as black boxes and
dismissed in order to apply (2). 5. Conclusion and future work
value = ∑ tasks × w + ∑ operators × w (2) In this paper we have presented an alternative method
for the semi-automatic generation of the hierarchy of con-
It is worth noting that weight values are based on heu-
tainers that compose a UI. This method is based on the
ristics notions of the importance and complexity of the
recovery of semantic information extracted from the tree
task types and operators and it is a pending task an evalua-
structure and the operator types. The data is extracted
tion of current values (as well as the layer weights). Now,
from the topology of the tree and the operators interacting
it is presented in Fig. 13 the three configurations (Figs. 10,
with the tasks. The result is a feasible UI well balanced
11 and 12) as simplified weight trees. Nodes are labeled
over the layers also flexible enough to allow the developer
with their weight and the external value indicates the con-
select alternative configurations.
tainer label (Note: Fig. 13a show the weighting process).
67
ICWE 2008 Workshops, 7th Int. Workshop on Web-Oriented Software Technologies – IWWOST 2008
Table 1. Weight of task tree elements. [6] Fogarty, J. and Hudchildren, S.E. GADGET: A Toolkit for
Optimization-based Approaches to Interface and Display
Weight Items to process Generation. In Proc. of UIST’03, ACM Press (2003).
[7] Gajos, K. and Weld, D.S. SUPPLE: Automatically Gener-
Task Operator ating User Interfaces. In Proc. of IUI’2004, ACM Press
Type Type (2004), 93-100.
[8] Lim, A. and Zhang, X. The Container Loading Problem. In
8 - Concurrent Proc. of SAC’05, ACM Press (2005).
[9] Lok, S. and Feiner, S.K. The AIL Automated Interface
4 Interactive Choice Layout System. In Proc. of IUI’02, pp. 202-203.
2 Application Sequence [10] Lok, S., Feiner, S., and Ngai, G. Automated User Interface
Generation: Evaluation of Visual Balance for Automated
Layout. In Proc. of IUI’04, pp. 101-108.
Table 2. Weighted average of the containers. [11] Mori, G., Paternò, F., and Santoro, C. Design and Devel-
opment of Multi-device User Interfaces through Multiple
Layers Weight Calculated cost per level Logical Descriptions. IEEE Trans. Software Eng. 30, 8
C1 (2004), pp. 507-520.
C2 C3
[12] Nichols, J., Myers, B.A., Higgins, M., Hughes, J., Harris,
1 3 8 16 0 T.K., Rosenfeld, R., and Pignol, M. Generating Remote
Control Interfaces for Complex Appliances. In Proc. of
2 1 8 54 16 UIST’02, ACM Press (2002).
[13] Paternò, F., Model-Based Design and Evaluation of Inter-
3 2 54 0 54 active Applications. Springer-Verlag, London, 1999.
[14] Ponnekanti, S., Lee, B., Fox, A., Hanrahan, P., and Wino-
Weighted average 23.33 17 20.66
grad, T. ICrafter: A Service Framework for Ubiquitous
Computing Environments. In Proc. of Ubicomp’ 2001,
This method could help in fast prototyping as well as in Springer-Verlag (2001) pp. 56-75.
exploration of news containment dispositions. Addition- [15] Sears, A. AIDE: A Step Toward Metric-based Interface
ally, this method is platform independent since we only Development Tools. In Proc. of UIST’95, pp. 101-110.
deal with an abstract definition of the UI. Finally, we are [16] Vanderdonckt, J. A MDA-Compliant Environment for De-
going to explore the integration of the algorithm into an veloping User Interfaces of Information Systems. In Proc.
editor tool in order to make extensive tests. of CAiSE'05, Springer-Verlag, (2005), pp. 16-31.
[17] Mahemoff, M., Ajax Design Patterns. O'Reilly & Associ-
Acknowledgements: This work was supported by Alβan, ates, Inc., USA, 2006.
the European Union Program (www.programalban.org) [18] Florins, M., Simarro, F. M., Vanderdonckt, J., and Mi-
of High Level Scholarships for Latin America, under ref- chotte, B. 2006. Splitting rules for graceful degradation of
erence E06D101371MX and by the SIMILAR network of user interfaces. In Proc. of the Working Conference on Ad-
vanced Visual interfaces. AVI '06. ACM Press, New York.
excellence, the European research taskforce creating hu-
[19] C. Pribeanu, J. Vanderdonckt, Exploring Design Heuristics
man-machine interfaces SIMILAR to human-human com- for User Interface Derivation from Task and Domain Mod-
munication under reference FP6-IST1-2003-507609 els, Chapter 9, in Proceedings of 4th Int. Conf. on Com-
(www.similar.cc). puter-Aided Design of User Interfaces CADUI'2002,
Kluwe Academics Pub., Dordrecht, 2002.
References [20] Limbourg, Q., Vanderdonckt, J., Michotte, B., Bouillon, L.,
[1] Badros, G.J. Borning, A., and Stuckey, P.J. The Cassowary and Lopez, V. UsiXML: a Language Supporting Multi-Path
Linear Arithmetic Constraint Solving Algorithm, ACM Development of User Interfaces, Proc. of 9th IFIP Working
Trans. on CHI 8, 4 (2001) pp. 267-306. Conf. on Engineering for Human-Computer Interaction
[2] Borning, A. and Duisberg, R. Constraint-based Tools for jointly with 11th Int. Workshop on Design, Specification,
Building User Interfaces. ACM Transactions on Graphics and Verification of Interact.Sys. EHCI-DSVIS’2004 (Ham-
5, 4 (1986) 345-374. burg, July 11-13, 2004). LNCS, Vol. 3425, Springer, 2005.
[3] Bouillon, L. and Vanderdonckt, J. Retargeting Web Pages [21] Bodart, F., Hennebert, A., Leheureux, J., and Vander-
to other Computing Platforms with VAQUITA. In Proc. of donckt, J. 1994. Towards a dynamic strategy for computer-
WCRE’2002, IEEE Computer Society Press, Los Alamitos aided visual placement. In Proceedings of the Workshop on
(2002), pp. 339-348. Advanced Visual interfaces (Bari, Italy, June 01 - 04,
[4] Chen, Y., Xie, X., Ma, W.-Y., and Zhang, H.-J. Adapting 1994). M. F. Costabile, T. Catarci, S. Levialdi, and G. San-
Web Pages for Small-Screen Devices. IEEE Internet Com- tucci, Eds. AVI '94. ACM Press, New York, NY, 78-87.
puting 9, 1 (2005), 50-56. [22] G. Calvary, J. Coutaz, D. Thevenin, Q. Limbourg, L.
[5] Chu, H., Childreng, H., Wong, C., Kurakake, S., and Bouillon, and J. Vanderdonckt, A Unifying Reference
Katagiri, M. Roam, a Seamless Application Framework. Framework for Multi-Target User Interfaces, Interacting
Journal of System and Software 69, 3 (2004), 209-226. with comp., Vol. 15, No. 3, June 2003, pp. 289-308.
68