Gummy for Multi-Platform User Interface Designs:
Shape me, Multiply me, Fix me, Use me
Jan Meskens Jo Vermeulen Kris Luyten Karin Coninx
Hasselt University – tUL – IBBT
Expertise Centre for Digital Media
Wetenschapspark 2, B-3590 Diepenbeek, Belgium
{jan.meskens,jo.vermeulen,kris.luyten,karin.coninx}@uhasselt.be
ABSTRACT
Designers still often create a specic user interface for ev-
ery target platform they wish to support, which is time-
consuming and error-prone. The need for a multi-platform
user interface design approach that designers feel comfort-
able with increases as people expect their applications and
data to go where they go. We present Gummy, a multi-
platform graphical user interface builder that can generate
an initial design for a new platform by adapting and combin-
ing features of existing user interfaces created for the same
application. Our approach makes it easy to target new plat-
forms and keep all user interfaces consistent without requir-
ing designers to considerably change their work practice.
Categories and Subject Descriptors
H.5.2 [Information interfaces and presentation]: User
Interfaces { Graphical user interfaces, Prototyping
Keywords
design tools, multi-platform design, GUI builder, UIML
1. INTRODUCTION
There is an increasing need for applications that are avail-
able on multiple devices. Today, people tend to read their
email or browse the web using their mobile phones or game
consoles. This tendency will increase with the move to-
wards ubiquitous computing where users are supposed to
have seamless access to applications regardless of their where-
abouts or the computing device at hand [20]. People need
more means to access their information and applications
than just a regular desktop computer. Applications that
need to be available on any device at the user's disposal
should be able to deploy a suitable user interface (UI) on
each of these computing platforms.
We dene a computing platform as the combination of a
hardware device, an operating system and user interface
toolkit. Designing a user interface for dierent computing
platforms is far from simple. Each computing platform has
its own characteristics such as the device's form factor, the
appropriate interaction metaphors and the supported user
interface toolkit. In current practice, designers often cre-
ate a specic user interface for every target platform. Even
though some technologies are shared between a number of
devices (e.g. Java ME1 or a modern web browser), usually
each device still requires specic adjustment. There is a
high cost incurred in adding a new target device and keep-
ing all user interfaces consistent using manual approaches.
Furthermore, there is no clear separation between the user
interface and the underlying application logic.
A common solution to these issues is to specify the user inter-
face in an abstract way by means of high-level models such as
task models and dialogue models [9]. The platform-specic
user interfaces are then generated automatically from this
abstract description. The user interface has to be speci-
ed only once, which makes it easier to make changes or
add a new target platform. In spite of the fact that these
tools solve most of the problems with the manual approach,
the resulting user interfaces usually still lack the aesthetic
quality of a manually designed interface. Furthermore, the
design process is not intuitive since designers have to master
a new language to specify the high-level models and cannot
accurately predict what the resulting user interface will look
like [18].
Gummy combines the benets of both the manual approach
and model-based techniques. Designers create and perform
prototyping of a multi-platform graphical user interface (GUI)
in the same way as they do when dealing with traditional
GUI builders such as Microsoft Visual Studio2 and Net-
beans3. Gummy builds a platform-independent represen-
tation of the user interface and updates it as the designer
makes changes. This allows for an abstract specication of
the user interface while keeping the design process intuitive
and familiar. An abstract user interface specication avoids
a tight interweaving of application and presentation logic.
Gummy can generate an initial design for a new platform
from existing user interfaces created for the same applica-
1http://java.sun.com/javame/
2http://msdn.microsoft.com/vstudio/
3http://www.netbeans.org/
233

Figure 1: The three main dialogues of the Gummy tool
tion but for other platforms. This makes it it easy to target
new platforms and keep all user interfaces consistent with-
out requiring designers to considerably change their work
practice. Since designers work with the concrete user inter-
face, Gummy allows for a true WYSIWYG4 multi-platform
user interface design process.
The main contributions we present in this paper are:
 a multi-platform design approach to creating user in-
terfaces incrementally for a wide range of computing
platforms while still working on a concrete level (Sect. 3).
 Gummy, a generic multi-platform GUI builder to sup-
port the aforementioned design approach. This tool
automatically adapts its workspace according to the
considered target platform (Sect. 4). A preliminary
user study with Gummy indicated that the incremental
design approach was faster than starting from scratch
for each computing platform (Sect. 5).
2. BACKGROUND AND MOTIVATION
We feel that most designers prefer to have a concrete rep-
resentation during their design activities, whether they are
working on a single or a multi-platform user interface. This
avoids their having to imagine what the nal user interface
would look like. We can thus conclude that working on a
concrete representation reduces the mental burden on the
designer [2, 18].
We structured Gummy in a similar way to traditional GUI
builders in order to allow designers to reuse their knowledge
4What You See Is What You Get
of single-platform user interface design tools. Fig. 1 shows
the main components of the Gummy interface: there is a
toolbox showing the available user interface elements, a can-
vas to build the actual user interface and a properties panel
to change the properties of the user interface elements on
the canvas.
The resemblance to traditional GUI builders also re
ects one
of the main strengths of our approach: the abstractions used
to support multi-platform user interface design are carefully
hidden from the designer. This is contrary to existing multi-
platform design tools that often expose these abstractions
to the designer. In the remainder of this section we give
some details about the underlying abstract language that
Gummy uses to represent multi-platform user interfaces and
how they are presented to the designer.
The underlying language used in Gummy is the User In-
terface Markup Language (UIML) [14], an XML language
that contains a platform-independent user interface descrip-
tion on the one hand and a mapping vocabulary on the
other hand. While the former is used to describe the struc-
ture, style, content and behaviour of a user interface using
platform-independent terms, the latter contains mappings
of these terms onto concrete widgets. Fig. 2 gives an ex-
ample of a mapping vocabulary. The traditional rendering
step is to translate the platform-independent user interface
description into a concrete user interface using these map-
pings. For the implementation of Gummy the opposite was
done: the concrete representations were used in the tool and
were internally mapped onto the associated abstractions.
The designer works with the concrete graphical representa-
tions, avoiding the XML language, while the tool maintains
a synchronised platform-independent UIML document for
234