=Paper=
{{Paper
|id=Vol-297/paper-8
|storemode=property
|title=A Framework for Incorporating Usability into Model Transformations
|pdfUrl=https://ceur-ws.org/Vol-297/paper8.pdf
|volume=Vol-297
|dblpUrl=https://dblp.org/rec/conf/models/ZhaoZ07
}}
==A Framework for Incorporating Usability into Model Transformations==
https://ceur-ws.org/Vol-297/paper8.pdf
A Framework for Incorporating Usability into Model
Transformations
Xulin Zhao Ying Zou
Queen’s University Queen’s University
Department of Electrical and Computer Engineering Department of Electrical and Computer Engineering
Queen’s University Queen’s University
Kingston, Ontario, Canada, K7L 3N6 Kingston, Ontario, Canada, K7L 3N6
4xz5@queensu.ca ying.zou@queensu.ca
ABSTRACT business objectives specified in the business process definitions.
The usability of user interfaces is crucial for the success of an The dialog models define users’ interaction with the system. The
application. Model driven user interface (UI) development speeds presentation models describe the visual appearance of UIs. We
up the production of UIs and improves the maintainability of UIs. define rules to accomplish the transformation between models of
However, the usability evaluation of UIs is usually conducted by different abstraction levels and generate UIs incrementally.
end-users or experts after UIs are generated. Such a user centric Moreover, we apply usability models to guide the
evaluation is usually time consuming and expensive, especially transformations. We interpret users’ usability goals to model
when the usability problems are detected in the last phase of the constraints and use these constraints to guide the selection of
software development. In this paper, we propose a framework that transformation rules. Eventually, we generate UIs that conform to
incorporates the usability evaluation as an integral part of users’ usability expectations.
automatic processes for UI generation. To link the usability goal The rest of the paper is organized as follows. Section 2
into the UI generation process, we model the usability using a introduces the related work. Section 3 provides an overview of the
goal graph for each intermediate UI model and associate the proposed framework. Section 4 illustrates the proposed
usability goals to the attributes of the models. Our proposed framework using an example. Section 5 concludes the paper and
framework detects and addresses usability problems in the early presents our plans for the future.
phase of the software development.
2. RELATED WORK
1. INTRODUCTION A lot of researchers have addressed the problem of optimal UI
The user interface (UI) of an application provides an interactive generation. Gajos et al. presented an approach of rendering user
environment for a user to communicate with the system. The interfaces in [6]. In this approach, the UI render requires three
usability of UIs directly affects users’ satisfaction of an inputs, including a UI specification, a device model, and a user
application. The success of an application depends on the model. A UI specification is composed of a set of UI elements
usability of its UIs [1]. Surveys [2,3] show that the UI with poor and a set of UI constraints. The device model contains available
usability is the major reason of frustration. However, the UI widgets, constraints, and suitability evaluation functions of a
development is time consuming and expensive. On average, 50% specific display device. The user model is defined by a set of user
of the development time is devoted to developing the UIs of an events. A user event is comprised of a user element and their
application [4]. Approaches, such as UI management system value variations in response to users’ interactions. The rendering
(UIMS) [5] and model based UI system [5], are proposed to algorithm generates UIs with the minimal user effort. This
improve the development of UIs. A great deal of tools is approach treats UI generation as an optimization problem and can
developed to assist the efficient development of UIs [5]. easily generate UIs for different devices. The UI specifications
However, studies [4, 8, 9] indicate that the evaluation of usability used in this approach are equivalent to abstract presentation
is not well addressed due to the pressure of product deliverables models. In our research, we incorporate usability into model
and limited budget. Usability evaluation techniques such as based UI design and automatically generate UI models and
heuristic evaluation, cognitive walkthrough, user testing and prototypes from business processes. In our work, the proposed
metrics (e.g., success rate, and error rate [10]) can only be framework can generate different UI alternatives according to
conducted after the UIs are fully developed. Even though the different user models and can be used as a preparation for the
GOMS (goal, operator, method and select rules) [11] approach approach in [6].
does not require UI prototypes, it can only perform the evaluation Sottet et al. have addressed the problem of preserving
on the detailed task specification which is often manually created. usability during UI adaption [7]. This paper stands for the use of
In our work, we aim to improve the usability of UIs using adviser tools and classifies model transformations into two types:
model driven software development techniques. In our previous predictive models and descriptive models. Predictive models can
work [12], we apply model driven development techniques to reform UI models without ambiguous (e.g. f(x)=x+2 [7]).
automatically generate UIs from business process definitions. Descriptive models are qualifiers (e.g. f(x)>x [7]). The reservation
Specifically, we use three declarative models, including task of usability is achieved by well designed transformation models.
models, dialog models and presentation models to incrementally In our approach, we define our transformation models using
generate UIs. The task models are used to model the transformation rules. All transformation rules are predictive. In
functionalities performed by users, in order to accomplish the addition, we leverage usability goal graphs to model users’
usability expectations. Different users and devices generally have learnability is affected by sub-goals, such as the complexity [15],
different usability requirements. Model constraints are mostly consistency [17], and the structure of information grouping [17].
descriptive and can be changed during the UI development For the usability goals, the leaves are a set of metrics used to
process. In the early stage of UI development, we generally are directly or indirectly measure the usability or its sub-goals [8].
not clear about users’ expectations. In this case, we can set the For example as shown in Figure 2, the complexity of a UI can be
boundaries of model constraints using empirical values. For directly measured by a set of metrics, such as the number of
example, we can limit the number of widgets in a window to the widgets in a window. The result of the complexity metrics
range from 3 to 20. As the development process advance, we will indirectly indicates the usability of the UI.
make clear about users’ requirements. Then, we can set specific
values to model constraints. 3.2 Rule selection
Rules are designed to transform one or more properties of the
3. INCORPORATING USABILITY GOALS source models to a target model. From the usability point of view,
applying a transformation rule must have certain impact on the
INTO MODEL TRANSFORMATIONS usability of the target models. For example, verifying a shopping
The goal of the proposed framework is to decrease the cost of cart and checking out are two UI distinct operations in an on-line
usability assessment of UI generation. The framework is depicted shopping application. The two operations use the same data as
in Figure 1. Functional requirements and usability goals are inputs (i.e., shopping cart information). These operations can be
modeled as constraints for the generated models. A set of implemented into two separate windows which have their own
transformation rules is defined to generate models with different copy of the shopping cart information. In this case, the user has to
levels of details and incrementally transform these models review the shopping car information twice when performing these
towards the final code. We can select transformation rules that two operations. Alternatively, a transformation rule can be
conform to the constraints on models and generate the final UI defined to merge these two windows into one window if both
with high usability. The rule selection and model generation are windows display the same information (e.g., shopping cart)
iterative process and continue till the usability goals are achieved. required for triggering two distinct operations (e.g., verify the
In the following subsections, we illustrate the proposed shopping cart and checkout). This merging transformation rule
framework that uses usability goals to guide the selection of reduces the number of windows in a UI, and consequently
transformation rules. improves the usability by removing the redundant interactions
between the user and the application. To decide the most proper
transformation rules to apply, we evaluate the impact on the
usability before applying a rule to the source model. More
specifically, we consider the following two heuristics for selecting
a transformation rule:
1) If the usability attributes of a model cannot meet the
specified usability goals, we select the transformation rules
that can improve the usability of the model. For example, it
is more efficient for a user to complete a business process
through fewer window transitions. Therefore, we must apply
transformation rules that can produce the shortest path length
for fulfilling a task.
Figure 1: A Framework for Incorporating Usability Goals into
Model Transformations 2) The selected transformations have no conflicts with
previously applied transformations. The usability attributes
3.1 Associating usability goals to the are defined within a desirable range. For example, the
number of widgets in a window generally needs to be less
constraints of the models than 20 widgets [18]. If the application of a transformation
In our research, we use model constraints (e.g., the number of
makes a usability attribute fall below the desired range, we
widgets in a window is less than 20) to bridge the gap between the
say that the transformation rule has conflicts with the
usability goals and the transformation rules. We represent the
previously applied transformation rules. If a rule has no
associations between quality goals and model constraints using
negative impact on a usability attribute or if the negative
goal graphs and hierarchical quality models [14]. Generally, a
impact is within the acceptable range, we consider that the
goal is an objective or a desired state that a system can achieve. In
transformation rule has no conflicts with the previously
the domain of software engineering, the goals are used to
applied transformations. For example, adding widgets (e.g.,
elaborate functional and non-functional requirements [8,13]. A
buttons or text fields) to a window will increase the number
goal is analyzed and decomposed into a set of sub-goals, which
of widgets in a window. If the total number of widgets is still
have the AND- or OR-dependencies with the parent goal. We can
less than 20, this transformation is acceptable.
produce a dependency graph to represent the dependencies
between the goal and its sub-goals. As depicted in Figure 2, an
example usability goal graph is used to guide the generation of the 4. AN EXAMPLE
presentation models. As specified in ISO/IEC 9126 [14], a In this section, we use an example to demonstrate the steps that
usability can be achieved by a set of sub-goals, such as generate the UI code from the presentation model in the proposed
memorability, learnability, and low error rate [10]. Each sub-goal framework. We develop a prototype tool that guides the UI
can be further broken down to lower level goals. For example, generation using the usability goal graph and evaluates the
Figure 2: An Example Usability Goal Graph
major components needed for implementing a task (e.g.,
searching a product, and creating a shopping cart). For example,
Figure 3: Translated constraints
usability of generated models (e.g., code). Each model has
constraints with the acceptable thresholds for the metrics (i.e.,
the leaves in the usability goal graph). For example, we set the
upper bound of the number of widgets per window to 20. We
measure the usability goals using a set of metrics, as shown in
Figure 3.
To generate source code of the UI, we apply transformations
Figure 4: (a). The structure of a browse task pattern,
consecutively to move the initial business process definitions
(b). the tree implementation of the browse pattern,
towards the code. As a first step of generating code from the
(c). the table implementation of the browse pattern.
presentation model, we want to ensure that the structure of the
generated UI can ease a user to navigate thought the UI. For Figure 4 (a) is a browse task pattern [16] in the Concurrent Task
example, a window of high usability should have a navigational Tree [19] format. This pattern describes the major components
widget and a contextual guidance widget to support a user to to implement a browsing functionality. The structure of the
fulfill business tasks. A navigational widget guides a user to browser task pattern can be broken down into more detailed
transit between the windows for fulfilling the business tasks. A components, including a multiple value form that displays one
contextual guidance widget displays the relevant information to or more results, a scroll bar that allows a user to scroll down the
assist a user in performing the current task. For example, a user result list and view the results, and a selection widget that
may purchase a book online. It is convenient for the user to enables a user to select the result of interest.
search for the book if we can display all the relevant books for Furthermore, we need to determine appropriate widgets to
the user in a window (i.e., widget). In addition to the widgets implement the components defined in the browse pattern.
that are used for the user to complete the required tasks. The Multiple alternative widgets can be used to implement the multi-
additional widgets can be added to guide the navigation and the value output pattern in the browse pattern. Different widgets
task fulfillment in order to improve the user experience. In this have different impact on the complexity of the generated
case, the lower bound of the number of widgets for each windows. In the simplest form, each output value can be
window can be set to three widgets because a window should displayed using one label widget. The number of the output
have three widgets for the improved usability, including one values is dependent on a particular context of the application.
widget that allow a user performs the task, one navigational As the number of the output values increases, the more label
widget, and one contextual guidance widget. By considering the widgets are needed to display the output values. Consequently,
usability goals (e.g., providing more guidance to the user), an the complexity of the UI increases as the number of widgets
appropriate transformation rule is selected to define the grows. To keep the UI simple, a transformation rule can be
navigational structure of the UI and the major components in defined to transform the multi-value patterns into a structured
each window. widget with defined boundaries. Figure 4 (b) and Figure 4 (c)
To improve the usability of each window, we use the well- are two possible implementations of the browse task pattern.
designed task patterns to implement the business tasks Figure 4 (b) implements the pattern using a tree widget and
performed in each window. The task patterns document the Figure 4 (c) implements the browse pattern using a table widget.
To ensure that the generated windows follow the consistent [4]. BA. MYERS, and MB. ROSSON. Survey on user interface
look-and-feel for the same task the applications, the programming. In Human Factors in Computing Systems, In
transformations select the most appropriate widgets that Proc. of SIGCHI ACM, New York (1992), pp. 195–202.
implement a task pattern and apply this selection throughout the [5]. B. Myers SE. Hudson, and R. Pausch. Past, Present, and
UI generation process. By comparing Figure 4 (b) with Figure 4 Future of User Interface Software Tools, ACM TOCHI
(c), we can observe that a table widget is more suitable to (2000), no. 1, pp. 3-28.
implement the browse pattern than a tree widget, for the reason
that a user can read all output values at a glance in a table [6]. K. Gajos and DS. Weld. SUPPLE: Automatically
widget. Therefore, all browse patterns are transformed to table Generating User Interfaces. In Proc. of IUI (2004), pp. 93.
widgets patterns as a default transformation rule. A UI [7]. JS. Sottet, G. Calvary, and JM. Favre. Mapping Model: A
developer can customize the default widgets of task patterns. First Step to Ensure Usability for sustaining User Interface
The generated UI may not be able to achieve all of the Plasticity. 2nd Int. Workshop on MDDAUI, CEUR
usability sub-goals. We generate alternative UIs based on Proceedings (2006), vol. 214
different selection of transformation rules. The prototype tool [8]. Y. Zou and K. Kontogiannis. Migration to Object Oriented
automatically computes the usability metrics to estimate the Platforms: A State Transformation Approach, In Proc. of
achievement of the goal for each UI alternative. For example as the 19th IEEE Int. Conf. on Software Maintenance (2002)
shown in Figure 5, the UI for each business process can be
[9]. L. Bass, BE. John, N. Juristo, and MI. Sanchez. Usability-
analyzed to estimate the level of conformance to the usability
supporting Architectural Patterns, In Proc. of 26th Int.
goal.
Conf. on Software Engineering ICSE (2004), pp. 716-717.
[10]. J. Nielsen. Usability Engineering, Academic Press (1993).
[11]. BE. John and DE. Kieras. The GOMS family of analysis
techniques: Comparison and contrast, ACM TOCHI (1996),
pp. 320–351
[12]. X. Zhao, Y. Zou, J. Hawkins and B. Madapusi. A Business
Process Driven Approach for Generating E-Commerce
User Interfaces, ACM/IEEE 10th Int. Conf. on Model
Figure 5: Sample Results for Rule Selection Driven Engineering Languages and Systems (2007).
[13]. P. Giorgini, J. Mylopoulos, E. Nicchiarelli and R.
5. CONCLUSION AND FUTURE WORK Sebastiani1. Reasoning with Goal Models, In Proc. of the
In this paper, we present a framework for incorporating the 21st Int. Conf. on Conceptual Modeling (2002).
usability goals into the model transformations. We aim to [14]. ISO/IEC9126: Information Technology - Software Product
evaluate the usability in the early stage of model transformation Quality. Part 1: Quality Model (1998).
instead of deferring the usability evaluation when the UI is fully
developed. We develop a prototype to demonstrate the [15]. MF. Bertoa, JM. Troya and A. Vallecillo. Measuring the
feasibility of the proposed framework. An example is used to Usability of Software Components, Journal of Systems and
illustrate the result of our prototype tool. We use a set of metrics Software (2006), vol. 79, no. 3, pp. 427-439.
to evaluate the usability of the generated UI. [16]. D.Sinnig, H. Javahery, P. Forbrig,, and A. Seffah. The
In the future, we plan to conduct more case studies to refine Complicity of Model-Based Approaches and Patterns for
the proposed framework. We also want to recruit the users to UI Engineering, In Proc. of BIR’03 (2003), pp. 120-131
evaluate the usability of the generated UI. The feedback from [17]. S. Abrahão and E. Insfran. Early Usability Evaluation in
the users can help to refine the usability goal graphs and the Model Driven Architecture Environments, Sixth Int. Conf.
selection of transformation rules. We will improve the on Quality Software (2006), pp. 287-294
customizability of the framework, so that users can integrate [18]. M. Elkoutbi and RK. Keller. User Interface Prototyping
their own UI widgets, UI patterns, usability criteria and metrics Based on UML Scenarios and High-Level Petri Nets. In
into the UI generation process. Proc. of ICATPN (2000): LNCS 1825, Pages 166–186
[19]. F. Paternò. Model-Based Design and Evaluation of
6. REFERENCES Interactive Applications. Springer Verlag, ISBN 1-85233-
[1]. D. Stone, C. Jarrett, M. Woodroffe and S. Minocha. User 155-0 (2000)
Interface Design and Evaluation, Morgan Kaufmann, Los
Altos, CA, (2005) ISBN 0-12-088436-4.
[2]. P. Jackson, J. Favier and I. Stagia. Segmenting Europe’s
Mobile Consumers, Forrester Research Technographics®
Report (2002).
[3]. M. Ramsay and J. Nielsen. WAP Usability Report, Nielsen
Norman Group (2000).